diff options
Diffstat (limited to 'language-web/src')
-rw-r--r-- | language-web/src/main/js/App.tsx | 46 | ||||
-rw-r--r-- | language-web/src/main/js/RootStore.tsx | 7 | ||||
-rw-r--r-- | language-web/src/main/js/editor/Editor.tsx | 2 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 29 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorStore.ts | 40 | ||||
-rw-r--r-- | language-web/src/main/js/index.tsx | 12 | ||||
-rw-r--r-- | language-web/src/main/js/makeStyles.ts | 4 |
7 files changed, 72 insertions, 68 deletions
diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx index 5bd46c09..17d4f339 100644 --- a/language-web/src/main/js/App.tsx +++ b/language-web/src/main/js/App.tsx | |||
@@ -9,10 +9,10 @@ import MenuIcon from '@material-ui/icons/Menu'; | |||
9 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; | 9 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; |
10 | 10 | ||
11 | import { makeStyles } from './makeStyles'; | 11 | import { makeStyles } from './makeStyles'; |
12 | import Editor from './editor/Editor'; | 12 | import { Editor } from './editor/Editor'; |
13 | import EditorButtons from './editor/EditorButtons'; | 13 | import { EditorButtons } from './editor/EditorButtons'; |
14 | 14 | ||
15 | const useStyles = makeStyles()(theme => ({ | 15 | const useStyles = makeStyles()((theme) => ({ |
16 | container: { | 16 | container: { |
17 | maxHeight: '100vh', | 17 | maxHeight: '100vh', |
18 | }, | 18 | }, |
@@ -27,31 +27,31 @@ const useStyles = makeStyles()(theme => ({ | |||
27 | }, | 27 | }, |
28 | })); | 28 | })); |
29 | 29 | ||
30 | export default () => { | 30 | export const App = (): JSX.Element => { |
31 | const { classes, cx } = useStyles(); | 31 | const { classes, cx } = useStyles(); |
32 | 32 | ||
33 | return ( | 33 | return ( |
34 | <Box | 34 | <Box |
35 | display='flex' | 35 | display="flex" |
36 | flexDirection='column' | 36 | flexDirection="column" |
37 | className={cx(classes.container)} | 37 | className={cx(classes.container)} |
38 | > | 38 | > |
39 | <AppBar | 39 | <AppBar |
40 | position='static' | 40 | position="static" |
41 | color='inherit' | 41 | color="inherit" |
42 | > | 42 | > |
43 | <Toolbar> | 43 | <Toolbar> |
44 | <IconButton | 44 | <IconButton |
45 | edge='start' | 45 | edge="start" |
46 | className={cx(classes.menuButton)} | 46 | className={cx(classes.menuButton)} |
47 | color='inherit' | 47 | color="inherit" |
48 | aria-label='menu' | 48 | aria-label="menu" |
49 | > | 49 | > |
50 | <MenuIcon /> | 50 | <MenuIcon /> |
51 | </IconButton> | 51 | </IconButton> |
52 | <Typography | 52 | <Typography |
53 | variant='h6' | 53 | variant="h6" |
54 | component='h1' | 54 | component="h1" |
55 | className={cx(classes.title)} | 55 | className={cx(classes.title)} |
56 | > | 56 | > |
57 | GraphSolver | 57 | GraphSolver |
@@ -59,22 +59,22 @@ export default () => { | |||
59 | </Toolbar> | 59 | </Toolbar> |
60 | </AppBar> | 60 | </AppBar> |
61 | <Box | 61 | <Box |
62 | display='flex' | 62 | display="flex" |
63 | justifyContent='space-between' | 63 | justifyContent="space-between" |
64 | alignItems='center' | 64 | alignItems="center" |
65 | p={1} | 65 | p={1} |
66 | > | 66 | > |
67 | <Box | 67 | <Box |
68 | display='flex' | 68 | display="flex" |
69 | alignItems='center' | 69 | alignItems="center" |
70 | > | 70 | > |
71 | <EditorButtons/> | 71 | <EditorButtons /> |
72 | </Box> | 72 | </Box> |
73 | <Box> | 73 | <Box> |
74 | <Button | 74 | <Button |
75 | variant='outlined' | 75 | variant="outlined" |
76 | color='primary' | 76 | color="primary" |
77 | startIcon={<PlayArrowIcon/>} | 77 | startIcon={<PlayArrowIcon />} |
78 | > | 78 | > |
79 | Generate | 79 | Generate |
80 | </Button> | 80 | </Button> |
@@ -85,7 +85,7 @@ export default () => { | |||
85 | flexShrink={1} | 85 | flexShrink={1} |
86 | className={cx(classes.editorBox)} | 86 | className={cx(classes.editorBox)} |
87 | > | 87 | > |
88 | <Editor/> | 88 | <Editor /> |
89 | </Box> | 89 | </Box> |
90 | </Box> | 90 | </Box> |
91 | ); | 91 | ); |
diff --git a/language-web/src/main/js/RootStore.tsx b/language-web/src/main/js/RootStore.tsx index 2159f440..1c3aab2b 100644 --- a/language-web/src/main/js/RootStore.tsx +++ b/language-web/src/main/js/RootStore.tsx | |||
@@ -1,9 +1,8 @@ | |||
1 | |||
2 | import React, { createContext, useContext } from 'react'; | 1 | import React, { createContext, useContext } from 'react'; |
3 | 2 | ||
4 | import EditorStore from './editor/EditorStore'; | 3 | import { EditorStore } from './editor/EditorStore'; |
5 | 4 | ||
6 | export default class RootStore { | 5 | export class RootStore { |
7 | editorStore; | 6 | editorStore; |
8 | 7 | ||
9 | constructor() { | 8 | constructor() { |
@@ -19,7 +18,7 @@ export const RootStoreProvider: React.FC<{ rootStore: RootStore }> = ({ children | |||
19 | </StoreContext.Provider> | 18 | </StoreContext.Provider> |
20 | ); | 19 | ); |
21 | 20 | ||
22 | export const useRootStore = () => { | 21 | export const useRootStore = (): RootStore => { |
23 | const rootStore = useContext(StoreContext); | 22 | const rootStore = useContext(StoreContext); |
24 | if (!rootStore) { | 23 | if (!rootStore) { |
25 | throw new Error('useRootStore must be used within RootStoreProvider'); | 24 | throw new Error('useRootStore must be used within RootStoreProvider'); |
diff --git a/language-web/src/main/js/editor/Editor.tsx b/language-web/src/main/js/editor/Editor.tsx index f81c5c37..9badb6a3 100644 --- a/language-web/src/main/js/editor/Editor.tsx +++ b/language-web/src/main/js/editor/Editor.tsx | |||
@@ -4,7 +4,7 @@ import { Controlled as CodeMirror } from 'react-codemirror2'; | |||
4 | 4 | ||
5 | import { useRootStore } from '../RootStore'; | 5 | import { useRootStore } from '../RootStore'; |
6 | 6 | ||
7 | export default observer(() => { | 7 | export const Editor = observer(() => { |
8 | const { editorStore } = useRootStore(); | 8 | const { editorStore } = useRootStore(); |
9 | 9 | ||
10 | return ( | 10 | return ( |
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 1a187635..d3825c07 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -11,7 +11,7 @@ import UndoIcon from '@material-ui/icons/Undo'; | |||
11 | import { makeStyles } from '../makeStyles'; | 11 | import { makeStyles } from '../makeStyles'; |
12 | import { useRootStore } from '../RootStore'; | 12 | import { useRootStore } from '../RootStore'; |
13 | 13 | ||
14 | const useStyles = makeStyles()(theme => ({ | 14 | const useStyles = makeStyles()((theme) => ({ |
15 | iconButton: { | 15 | iconButton: { |
16 | padding: 7, | 16 | padding: 7, |
17 | border: 0, | 17 | border: 0, |
@@ -28,47 +28,48 @@ const useStyles = makeStyles()(theme => ({ | |||
28 | }, | 28 | }, |
29 | })); | 29 | })); |
30 | 30 | ||
31 | export default observer(() => { | 31 | export const EditorButtons = observer(() => { |
32 | const { editorStore } = useRootStore(); | 32 | const { editorStore } = useRootStore(); |
33 | const { classes, cx } = useStyles(); | 33 | const { classes, cx } = useStyles(); |
34 | |||
34 | return ( | 35 | return ( |
35 | <> | 36 | <> |
36 | <ButtonGroup | 37 | <ButtonGroup |
37 | variant='text' | 38 | variant="text" |
38 | > | 39 | > |
39 | <Button | 40 | <Button |
40 | disabled={!editorStore.canUndo} | 41 | disabled={!editorStore.canUndo} |
41 | onClick={() => editorStore.undo()} | 42 | onClick={() => editorStore.undo()} |
42 | className={cx(classes.iconButton)} | 43 | className={cx(classes.iconButton)} |
43 | color='inherit' | 44 | color="inherit" |
44 | aria-label='Undo' | 45 | aria-label="Undo" |
45 | > | 46 | > |
46 | <UndoIcon fontSize='small'/> | 47 | <UndoIcon fontSize="small" /> |
47 | </Button> | 48 | </Button> |
48 | <Button | 49 | <Button |
49 | disabled={!editorStore.canRedo} | 50 | disabled={!editorStore.canRedo} |
50 | onClick={() => editorStore.redo()} | 51 | onClick={() => editorStore.redo()} |
51 | className={cx(classes.iconButton)} | 52 | className={cx(classes.iconButton)} |
52 | color='inherit' | 53 | color="inherit" |
53 | aria-label='Redo' | 54 | aria-label="Redo" |
54 | > | 55 | > |
55 | <RedoIcon fontSize='small'/> | 56 | <RedoIcon fontSize="small" /> |
56 | </Button> | 57 | </Button> |
57 | </ButtonGroup> | 58 | </ButtonGroup> |
58 | <Divider | 59 | <Divider |
59 | flexItem | 60 | flexItem |
60 | orientation='vertical' | 61 | orientation="vertical" |
61 | className={classes.divider} | 62 | className={classes.divider} |
62 | /> | 63 | /> |
63 | <ToggleButton | 64 | <ToggleButton |
64 | selected={editorStore.showLineNumbers} | 65 | selected={editorStore.showLineNumbers} |
65 | onChange={() => editorStore.toggleLineNumbers()} | 66 | onChange={() => editorStore.toggleLineNumbers()} |
66 | size='small' | 67 | size="small" |
67 | className={cx(classes.iconButton)} | 68 | className={cx(classes.iconButton)} |
68 | aria-label='Show line numbers' | 69 | aria-label="Show line numbers" |
69 | value='show-line-numbers' | 70 | value="show-line-numbers" |
70 | > | 71 | > |
71 | <FormatListNumberedIcon fontSize='small'/> | 72 | <FormatListNumberedIcon fontSize="small" /> |
72 | </ToggleButton> | 73 | </ToggleButton> |
73 | </> | 74 | </> |
74 | ); | 75 | ); |
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts index 167e1ade..3a0c6f87 100644 --- a/language-web/src/main/js/editor/EditorStore.ts +++ b/language-web/src/main/js/editor/EditorStore.ts | |||
@@ -25,17 +25,21 @@ const codeMirrorGlobalOptions: EditorConfiguration = { | |||
25 | theme: 'material-darker', | 25 | theme: 'material-darker', |
26 | }; | 26 | }; |
27 | 27 | ||
28 | export default class EditorStore { | 28 | export class EditorStore { |
29 | _atom; | 29 | atom; |
30 | |||
30 | editor?: Editor; | 31 | editor?: Editor; |
32 | |||
31 | xtextServices?: IXtextServices; | 33 | xtextServices?: IXtextServices; |
34 | |||
32 | value = ''; | 35 | value = ''; |
36 | |||
33 | showLineNumbers = false; | 37 | showLineNumbers = false; |
34 | 38 | ||
35 | constructor() { | 39 | constructor() { |
36 | this._atom = createAtom('EditorStore'); | 40 | this.atom = createAtom('EditorStore'); |
37 | makeAutoObservable(this, { | 41 | makeAutoObservable(this, { |
38 | _atom: false, | 42 | atom: false, |
39 | editor: observable.ref, | 43 | editor: observable.ref, |
40 | xtextServices: observable.ref, | 44 | xtextServices: observable.ref, |
41 | }); | 45 | }); |
@@ -49,7 +53,7 @@ export default class EditorStore { | |||
49 | * | 53 | * |
50 | * @param newEditor The new CodeMirror instance | 54 | * @param newEditor The new CodeMirror instance |
51 | */ | 55 | */ |
52 | editorDidMount(newEditor: Editor) { | 56 | editorDidMount(newEditor: Editor): void { |
53 | if (this.editor) { | 57 | if (this.editor) { |
54 | throw new Error('CoreMirror editor mounted before unmounting'); | 58 | throw new Error('CoreMirror editor mounted before unmounting'); |
55 | } | 59 | } |
@@ -57,7 +61,7 @@ export default class EditorStore { | |||
57 | this.xtextServices = createServices(newEditor, xtextOptions); | 61 | this.xtextServices = createServices(newEditor, xtextOptions); |
58 | } | 62 | } |
59 | 63 | ||
60 | editorWillUnmount() { | 64 | editorWillUnmount(): void { |
61 | if (this.editor) { | 65 | if (this.editor) { |
62 | removeServices(this.editor); | 66 | removeServices(this.editor); |
63 | } | 67 | } |
@@ -70,16 +74,16 @@ export default class EditorStore { | |||
70 | * | 74 | * |
71 | * @param newValue The new contents of the editor | 75 | * @param newValue The new contents of the editor |
72 | */ | 76 | */ |
73 | updateValue(newValue: string) { | 77 | updateValue(newValue: string): void { |
74 | this.value = newValue; | 78 | this.value = newValue; |
75 | } | 79 | } |
76 | 80 | ||
77 | reportChanged() { | 81 | reportChanged(): void { |
78 | this._atom.reportChanged(); | 82 | this.atom.reportChanged(); |
79 | } | 83 | } |
80 | 84 | ||
81 | _observeEditorChanges() { | 85 | protected observeEditorChanges(): void { |
82 | this._atom.reportObserved(); | 86 | this.atom.reportObserved(); |
83 | } | 87 | } |
84 | 88 | ||
85 | get codeMirrorOptions(): EditorConfiguration { | 89 | get codeMirrorOptions(): EditorConfiguration { |
@@ -92,8 +96,8 @@ export default class EditorStore { | |||
92 | /** | 96 | /** |
93 | * @returns `true` if there is history to undo | 97 | * @returns `true` if there is history to undo |
94 | */ | 98 | */ |
95 | get canUndo() { | 99 | get canUndo(): boolean { |
96 | this._observeEditorChanges(); | 100 | this.observeEditorChanges(); |
97 | if (!this.editor) { | 101 | if (!this.editor) { |
98 | return false; | 102 | return false; |
99 | } | 103 | } |
@@ -101,15 +105,15 @@ export default class EditorStore { | |||
101 | return undoSize > 0; | 105 | return undoSize > 0; |
102 | } | 106 | } |
103 | 107 | ||
104 | undo() { | 108 | undo(): void { |
105 | this.editor?.undo(); | 109 | this.editor?.undo(); |
106 | } | 110 | } |
107 | 111 | ||
108 | /** | 112 | /** |
109 | * @returns `true` if there is history to redo | 113 | * @returns `true` if there is history to redo |
110 | */ | 114 | */ |
111 | get canRedo() { | 115 | get canRedo(): boolean { |
112 | this._observeEditorChanges(); | 116 | this.observeEditorChanges(); |
113 | if (!this.editor) { | 117 | if (!this.editor) { |
114 | return false; | 118 | return false; |
115 | } | 119 | } |
@@ -117,11 +121,11 @@ export default class EditorStore { | |||
117 | return redoSize > 0; | 121 | return redoSize > 0; |
118 | } | 122 | } |
119 | 123 | ||
120 | redo() { | 124 | redo(): void { |
121 | this.editor?.redo(); | 125 | this.editor?.redo(); |
122 | } | 126 | } |
123 | 127 | ||
124 | toggleLineNumbers() { | 128 | toggleLineNumbers(): void { |
125 | this.showLineNumbers = !this.showLineNumbers; | 129 | this.showLineNumbers = !this.showLineNumbers; |
126 | } | 130 | } |
127 | } | 131 | } |
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx index f59b40a9..24f0b69d 100644 --- a/language-web/src/main/js/index.tsx +++ b/language-web/src/main/js/index.tsx | |||
@@ -1,12 +1,12 @@ | |||
1 | import { CacheProvider } from "@emotion/react"; | 1 | import { CacheProvider } from '@emotion/react'; |
2 | import React from 'react'; | 2 | import React from 'react'; |
3 | import { render } from 'react-dom'; | 3 | import { render } from 'react-dom'; |
4 | import CssBaseline from '@material-ui/core/CssBaseline'; | 4 | import CssBaseline from '@material-ui/core/CssBaseline'; |
5 | import { ThemeProvider, createTheme } from '@material-ui/core/styles'; | 5 | import { ThemeProvider, createTheme } from '@material-ui/core/styles'; |
6 | import { getCache } from "tss-react/cache"; | 6 | import { getCache } from 'tss-react/cache'; |
7 | 7 | ||
8 | import App from './App'; | 8 | import { App } from './App'; |
9 | import RootStore, { RootStoreProvider } from './RootStore'; | 9 | import { RootStore, RootStoreProvider } from './RootStore'; |
10 | 10 | ||
11 | import '../css/index.scss'; | 11 | import '../css/index.scss'; |
12 | 12 | ||
@@ -68,9 +68,9 @@ const theme = createTheme({ | |||
68 | const app = ( | 68 | const app = ( |
69 | <CacheProvider value={getCache()}> | 69 | <CacheProvider value={getCache()}> |
70 | <ThemeProvider theme={theme}> | 70 | <ThemeProvider theme={theme}> |
71 | <CssBaseline/> | 71 | <CssBaseline /> |
72 | <RootStoreProvider rootStore={rootStore}> | 72 | <RootStoreProvider rootStore={rootStore}> |
73 | <App/> | 73 | <App /> |
74 | </RootStoreProvider> | 74 | </RootStoreProvider> |
75 | </ThemeProvider> | 75 | </ThemeProvider> |
76 | </CacheProvider> | 76 | </CacheProvider> |
diff --git a/language-web/src/main/js/makeStyles.ts b/language-web/src/main/js/makeStyles.ts index 1dee6c1f..a80e8858 100644 --- a/language-web/src/main/js/makeStyles.ts +++ b/language-web/src/main/js/makeStyles.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { createMakeStyles } from "tss-react"; | 1 | import { createMakeStyles } from 'tss-react'; |
2 | import { useTheme } from "@material-ui/core/styles"; | 2 | import { useTheme } from '@material-ui/core/styles'; |
3 | 3 | ||
4 | export const { makeStyles } = createMakeStyles({ useTheme }); | 4 | export const { makeStyles } = createMakeStyles({ useTheme }); |