Skip to content

Commit ddd37df

Browse files
anserwaseemanserwaseem
committed
started 'Download' feature
1 parent 9a4d1e6 commit ddd37df

File tree

12 files changed

+340
-278
lines changed

12 files changed

+340
-278
lines changed

‎src/App.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import "./App.css";
22
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3-
import "./App.css";
4-
import A3S, { NavBar } from "./components/A3S";
5-
import Editor from "./components/Editor";
3+
import { A3S } from "./components/A3S";
4+
import { NavBar } from "./components/Navbar";
5+
import { Editor } from "./components/Editor";
66

77
function App() {
88
return (
99
<Router>
1010
<NavBar />
1111

1212
<Routes>
13-
{/* <Route path={process.env.PUBLIC_URL} element={<A3S />} /> */}
13+
<Route path={process.env.PUBLIC_URL} element={<A3S />} />
1414
<Route path={`${process.env.PUBLIC_URL}/Editor`} element={<Editor />} />
1515
</Routes>
1616
</Router>

‎src/assets/AnchorsTypes.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/assets/CanvasStyle.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/assets/StateStyle.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/assets/index.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/components/A3S.tsx‎

Lines changed: 6 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1,8 @@
1-
import * as React from "react";
2-
import AppBar from "@mui/material/AppBar";
3-
import Box from "@mui/material/Box";
4-
import Toolbar from "@mui/material/Toolbar";
5-
import IconButton from "@mui/material/IconButton";
6-
import Typography from "@mui/material/Typography";
7-
import Menu from "@mui/material/Menu";
8-
import MenuIcon from "@mui/icons-material/Menu";
9-
import Container from "@mui/material/Container";
10-
import MoreIcon from "@mui/icons-material/MoreVert";
11-
import Button from "@mui/material/Button";
12-
import Tooltip from "@mui/material/Tooltip";
13-
import MenuItem from "@mui/material/MenuItem";
14-
import AdbIcon from "@mui/icons-material/Adb";
15-
import { Pages } from "../enums/pages";
16-
import { Link as RouterLink } from "react-router-dom";
17-
import Link from "@mui/material/Link";
18-
19-
const pages = Object.values(Pages);
20-
21-
export function NavBar() {
22-
console.log("re rendering A3S -> Navbar");
23-
24-
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
25-
null
26-
);
27-
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
28-
null
29-
);
30-
31-
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
32-
setAnchorElNav(event.currentTarget);
33-
};
34-
35-
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
36-
setAnchorElUser(event.currentTarget);
37-
};
38-
39-
const handleCloseNavMenu = () => {
40-
setAnchorElNav(null);
41-
};
42-
43-
const handleCloseUserMenu = () => {
44-
setAnchorElUser(null);
45-
};
46-
1+
export const A3S = () => {
2+
console.log("re rendering A3S");
473
return (
48-
<AppBar position="static">
49-
<Container maxWidth="xl">
50-
<Toolbar disableGutters>
51-
<AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
52-
<Typography
53-
variant="h6"
54-
noWrap
55-
component={RouterLink}
56-
to={process.env.PUBLIC_URL}
57-
sx={{
58-
mr: 2,
59-
display: { xs: "none", md: "flex" },
60-
fontFamily: "monospace",
61-
fontWeight: 700,
62-
letterSpacing: ".3rem",
63-
color: "inherit",
64-
textDecoration: "none",
65-
}}
66-
>
67-
A3S
68-
</Typography>
69-
70-
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
71-
<IconButton
72-
size="large"
73-
aria-label="account of current user"
74-
aria-controls="menu-appbar"
75-
aria-haspopup="true"
76-
onClick={handleOpenNavMenu}
77-
color="inherit"
78-
>
79-
<MenuIcon />
80-
</IconButton>
81-
<Menu
82-
id="menu-appbar"
83-
anchorEl={anchorElNav}
84-
anchorOrigin={{
85-
vertical: "bottom",
86-
horizontal: "left",
87-
}}
88-
keepMounted
89-
transformOrigin={{
90-
vertical: "top",
91-
horizontal: "left",
92-
}}
93-
open={Boolean(anchorElNav)}
94-
onClose={handleCloseNavMenu}
95-
sx={{
96-
display: { xs: "block", md: "none" },
97-
}}
98-
>
99-
{pages.map((page) => (
100-
<Link
101-
component={RouterLink}
102-
to={`${process.env.PUBLIC_URL}/${
103-
Object.keys(Pages)[Object.values(Pages).indexOf(page)]
104-
}`}
105-
underline="none"
106-
key={page}
107-
>
108-
<MenuItem key={page} onClick={handleCloseNavMenu}>
109-
<Typography textAlign="center" variant="h6">
110-
{page}
111-
</Typography>
112-
</MenuItem>
113-
</Link>
114-
))}
115-
</Menu>
116-
</Box>
117-
118-
<AdbIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
119-
<Typography
120-
variant="h5"
121-
noWrap
122-
component={RouterLink}
123-
to={process.env.PUBLIC_URL}
124-
sx={{
125-
mr: 2,
126-
display: { xs: "flex", md: "none" },
127-
flexGrow: 1,
128-
fontFamily: "monospace",
129-
fontWeight: 700,
130-
letterSpacing: ".3rem",
131-
color: "inherit",
132-
textDecoration: "none",
133-
}}
134-
>
135-
A3S
136-
</Typography>
137-
138-
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
139-
{pages.map((page) => (
140-
<Link
141-
component={RouterLink}
142-
to={`${process.env.PUBLIC_URL}/${
143-
Object.keys(Pages)[Object.values(Pages).indexOf(page)]
144-
}`}
145-
key={page}
146-
>
147-
<Button
148-
key={page}
149-
onClick={handleCloseNavMenu}
150-
sx={{ my: 2, color: "white", display: "block" }}
151-
>
152-
{page}
153-
</Button>
154-
</Link>
155-
))}
156-
</Box>
157-
158-
<Box sx={{ display: "flex" }}>
159-
<Tooltip title="Tools">
160-
<IconButton
161-
size="large"
162-
aria-label="tools"
163-
aria-controls="menu-appbar-tools"
164-
aria-haspopup="true"
165-
onClick={handleOpenUserMenu}
166-
color="inherit"
167-
>
168-
<MoreIcon />
169-
</IconButton>
170-
</Tooltip>
171-
<Menu
172-
id="menu-appbar-tools"
173-
anchorEl={anchorElUser}
174-
anchorOrigin={{
175-
vertical: "bottom",
176-
horizontal: "left",
177-
}}
178-
keepMounted
179-
transformOrigin={{
180-
vertical: "top",
181-
horizontal: "left",
182-
}}
183-
open={Boolean(anchorElUser)}
184-
onClose={handleCloseUserMenu}
185-
>
186-
<MenuItem onClick={handleCloseUserMenu}>Download</MenuItem>
187-
<MenuItem onClick={handleCloseUserMenu}>Upload</MenuItem>
188-
</Menu>
189-
</Box>
190-
</Toolbar>
191-
</Container>
192-
</AppBar>
4+
<div>
5+
<h1>Buy me a Coffee</h1>
6+
</div>
1937
);
194-
}
195-
export default NavBar;
8+
};

‎src/components/Editor.tsx‎

Lines changed: 49 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from "react";
1+
import { createContext, useState } from "react";
22
import { Box, Grid } from "@mui/material";
33
import { GridColumns, GridActionsCellItem } from "@mui/x-data-grid";
44
import DeleteIcon from "@mui/icons-material/Delete";
@@ -17,9 +17,24 @@ import { PlaygroundSize } from "./interfaces/playgroundSize";
1717
import { StyledTransitionLabel } from "../features/components/playground/StyledTransitionLabel";
1818
import { MaxNumberOfStates } from "../consts/MaxNumberOfStates";
1919

20-
const Editor = () => {
20+
export const DataContext = createContext<{
21+
rows: RowModel[];
22+
columns: GridColumns;
23+
states: DraggableStateModel[];
24+
transitions: TransitionModel[];
25+
}>(
26+
{} as {
27+
rows: RowModel[];
28+
columns: GridColumns;
29+
states: DraggableStateModel[];
30+
transitions: TransitionModel[];
31+
}
32+
);
33+
34+
export const Editor = () => {
2135
console.log("re rendering Editor");
2236

37+
// const [tempState, setTempState] = useState(23);
2338
const [rowId, setRowId] = useState(0);
2439
const [rows, setRows] = useState<RowModel[]>([]);
2540
const columns: GridColumns = [
@@ -644,31 +659,39 @@ const Editor = () => {
644659
};
645660

646661
return (
647-
<>
648-
<Box sx={{ flexGrow: 1, m: 1 }}>
649-
{/* Grid to incorporate Transition table and Automata */}
650-
<Grid
651-
container
652-
columnSpacing={{
653-
xs: 1,
654-
sm: 2,
655-
md: 3,
656-
}}
657-
>
658-
{/* Transition table grid */}
659-
<Grid item xs={12} md={4}>
660-
<TransitionTable {...transitionTableProps} />
661-
</Grid>
662-
{/* Automata grid */}
663-
<Grid container item xs={12} md={8}>
664-
{/* Automata canvas grid */}
665-
<Grid item xs={12}>
666-
<Playground {...playgroundProps} />
662+
<DataContext.Provider
663+
value={{
664+
rows,
665+
columns,
666+
states,
667+
transitions,
668+
}}
669+
>
670+
<>
671+
<Box sx={{ flexGrow: 1, m: 1 }}>
672+
{/* Grid to incorporate Transition table and Automata */}
673+
<Grid
674+
container
675+
columnSpacing={{
676+
xs: 1,
677+
sm: 2,
678+
md: 3,
679+
}}
680+
>
681+
{/* Transition table grid */}
682+
<Grid item xs={12} md={4}>
683+
<TransitionTable {...transitionTableProps} />
684+
</Grid>
685+
{/* Automata grid */}
686+
<Grid container item xs={12} md={8}>
687+
{/* Automata canvas grid */}
688+
<Grid item xs={12}>
689+
<Playground {...playgroundProps} />
690+
</Grid>
667691
</Grid>
668692
</Grid>
669-
</Grid>
670-
</Box>
671-
</>
693+
</Box>
694+
</>
695+
</DataContext.Provider>
672696
);
673697
};
674-
export default Editor;

0 commit comments

Comments
 (0)