Add material-ui and mobx integration

8 files changed, 311 insertions, 34 deletions

diff --git a/language-web/src/main/js/App.jsx b/language-web/src/main/js/App.jsx
new file mode 100644
index 00000000..61ded943
--- /dev/null
+++ b/language-web/src/main/js/App.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
+import Fab from '@material-ui/core/Fab';
+import IconButton from '@material-ui/core/IconButton';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import MenuIcon from '@material-ui/icons/Menu';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+
+import Editor from './editor/Editor';
+import EditorButtons from './editor/EditorButtons';
+
+const useStyles = makeStyles(theme => ({
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+  fab: {
+    position: 'fixed',
+    right: theme.spacing(3),
+    bottom: theme.spacing(3),
+    zIndex: 1000,
+  },
+  extendedIcon: {
+    marginRight: theme.spacing(1),
+  }
+}));
+
+export default () => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <AppBar
+        position='static'
+      >
+        <Toolbar>
+          <IconButton
+            edge='start'
+            className={classes.menuButton}
+            color='inherit'
+            aria-label='menu'
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            variant='h6'
+            component='h1'
+            className={classes.title}
+          >
+            GraphSolver
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box>
+        <EditorButtons/>
+      </Box>
+      <Editor/>
+      <Fab
+        variant='extended'
+        color='secondary'
+        className={classes.fab}
+      >
+        <PlayArrowIcon className={classes.extendedIcon}/>
+        Generate
+      </Fab>
+    </>
+  );
+};
diff --git a/language-web/src/main/js/Navbar.jsx b/language-web/src/main/js/Navbar.jsx
new file mode 100644
index 00000000..cf1bc54f
--- /dev/null
+++ b/language-web/src/main/js/Navbar.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Navbar, Nav } from 'react-bootstrap';
+import { FaGithub, FaPlayCircle } from 'react-icons/fa';
+
+export default () => (
+  <Navbar
+    variant='secondary'
+    className='px-2'
+  >
+    <Navbar.Brand>GraphSolver</Navbar.Brand>
+    <Navbar.Toggle aria-controls='basic-navbar-nav'/>
+    <Navbar.Collapse id='basic-navbar-nav'>
+      <Nav className="me-auto">
+        <Nav.Link
+          href="https://github.com/viatra/VIATRA-Generator#readme"
+        >
+          About
+        </Nav.Link>
+        <Nav.Link
+          href="https://github.com/viatra/VIATRA-Generator/wiki"
+        >
+          Getting started
+        </Nav.Link>
+        <Nav.Link
+          href="https://github.com/viatra/VIATRA-Generator"
+        >
+          <FaGithub/> Github
+        </Nav.Link>
+      </Nav>
+      <Button
+        variant='success'
+      >
+        <FaPlayCircle/> Generate
+      </Button>
+    </Navbar.Collapse>
+  </Navbar>
+);
diff --git a/language-web/src/main/js/RootStore.jsx b/language-web/src/main/js/RootStore.jsx
new file mode 100644
index 00000000..1ee2823d
--- /dev/null
+++ b/language-web/src/main/js/RootStore.jsx
@@ -0,0 +1,30 @@
+import { makeAutoObservable } from 'mobx';
+import React, { createContext, useContext } from 'react';
+
+import EditorStore from './editor/EditorStore';
+
+export default class RootStore {
+  editorStore;
+
+  constructor() {
+    this.editorStore = new EditorStore();
+    makeAutoObservable(this);
+  }
+}
+
+const StoreContext = createContext(undefined);
+
+export const RootStoreProvider = ({ children, rootStore }) => (
+  <StoreContext.Provider value={rootStore}>
+    {children}
+  </StoreContext.Provider>
+);
+
+/** @returns {RootStore} */
+export const useRootStore = () => {
+  const rootStore = useContext(StoreContext);
+  if (!rootStore) {
+    throw new Error('useRootStore must be used within RootStoreProvider');
+  }
+  return rootStore;
+};
diff --git a/language-web/src/main/js/components/XtextCodeMirror.jsx b/language-web/src/main/js/components/XtextCodeMirror.jsx
deleted file mode 100644
index 75a20daa..00000000
--- a/language-web/src/main/js/components/XtextCodeMirror.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Controlled as CodeMirror } from 'react-codemirror2';
-import 'mode-problem';
-import { createServices, removeServices } from 'xtext/xtext-codemirror';
-
-export default function XtextCodeMirror({ initialValue }) {
-  const [value, setValue] = useState(initialValue);
-
-  const codeMirrorOptions = {
-    mode: 'xtext/problem',
-    indentUnit: 2,
-  };
-
-  const xtextOptions = {
-    xtextLang: 'problem',
-    enableFormattingAction: true,
-  };
-
-  const onBeforeChange = useCallback((_editor, _data, newValue) => {
-    setValue(newValue);
-  }, [setValue]);
-
-  return (
-    <CodeMirror
-      value={value}
-      options={codeMirrorOptions}
-      editorDidMount={editor => createServices(editor, xtextOptions)}
-      editorWillUnmount={removeServices}
-      onBeforeChange={onBeforeChange}
-    />
-  );
-};
diff --git a/language-web/src/main/js/editor/Editor.jsx b/language-web/src/main/js/editor/Editor.jsx
new file mode 100644
index 00000000..c4b2e183
--- /dev/null
+++ b/language-web/src/main/js/editor/Editor.jsx
@@ -0,0 +1,50 @@
+import { observer } from 'mobx-react-lite';
+import 'mode-problem';
+import React, { useCallback } from 'react';
+import { Controlled as CodeMirror } from 'react-codemirror2';
+import { createServices, removeServices } from 'xtext/xtext-codemirror';
+
+import { useRootStore } from '../RootStore';
+
+export default observer(() => {
+  const editorStore = useRootStore().editorStore;
+
+  const codeMirrorOptions = {
+    mode: 'xtext/problem',
+    indentUnit: 2,
+  };
+
+  const xtextOptions = {
+    xtextLang: 'problem',
+    enableFormattingAction: true,
+  }
+
+  const editorDidMount = useCallback((editor) => {
+    createServices(editor, xtextOptions);
+    editorStore.updateEditor(editor);
+  }, [editorStore]);
+
+  const editorWillUnmount = useCallback((editor) => {
+    editorStore.editor = null;
+    removeServices(editor);
+  }, [editorStore]);
+
+  const onBeforeChange = useCallback((_editor, _data, value) => {
+    editorStore.updateValue(value);
+  }, [editorStore]);
+
+  const onChange = useCallback((_editor, _data, _value) => {
+    editorStore.reportChanged();
+  }, [editorStore]);
+
+  return (
+    <CodeMirror
+      value={editorStore.value}
+      options={codeMirrorOptions}
+      editorDidMount={editorDidMount}
+      editorWillUnmount={editorWillUnmount}
+      onBeforeChange={onBeforeChange}
+      onChange={onChange}
+    />
+  );
+});
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx
new file mode 100644
index 00000000..b9f0d076
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorButtons.jsx
@@ -0,0 +1,27 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import RedoIcon from '@material-ui/icons/Redo';
+import UndoIcon from '@material-ui/icons/Undo';
+
+import { useRootStore } from '../RootStore';
+
+export default observer(() => {
+  const editorStore = useRootStore().editorStore;
+  return (
+    <>
+      <IconButton
+        disabled={!editorStore.canUndo}
+        onClick={() => editorStore.undo()}
+      >
+        <UndoIcon fontSize='small'/>
+      </IconButton>
+      <IconButton
+        disabled={!editorStore.canRedo}
+        onClick={() => editorStore.redo()}
+      >
+        <RedoIcon fontSize='small'/>
+      </IconButton>
+    </>
+  );
+});
diff --git a/language-web/src/main/js/editor/EditorStore.jsx b/language-web/src/main/js/editor/EditorStore.jsx
new file mode 100644
index 00000000..9c286c28
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorStore.jsx
@@ -0,0 +1,75 @@
+import CodeMirror from 'codemirror';
+import { createAtom, makeAutoObservable, observable } from 'mobx';
+
+export default class EditorStore {
+  atom;
+  /** @type {CodeMirror} */
+  editor = null;
+  /** @type {string} */
+  value = '';
+
+  constructor() {
+    this.atom = createAtom('EditorStore');
+    makeAutoObservable(this, {
+      atom: false,
+      editor: observable.ref,
+    });
+  }
+
+  /**
+   * Attaches a new CodeMirror instance.
+   *
+   * The store will node subscribe to any CodeMirror events. Instead,
+   * the editor component should subscribe to them and relay them to the store.
+   *
+   * @param {CodeMirror} newEditor The new CodeMirror instance
+   */
+  updateEditor(newEditor) {
+    this.editor = newEditor;
+  }
+
+  /**
+   * Updates the contents of the editor.
+   *
+   * @param {string} newValue The new contents of the editor
+   */
+  updateValue(newValue) {
+    this.value = newValue;
+  }
+
+  reportChanged() {
+    this.atom.reportChanged();
+  }
+
+  /**
+   * @returns {boolean} `true` if there is history to undo
+   */
+  get canUndo() {
+    this.atom.reportObserved();
+    if (!this.editor) {
+      return false;
+    }
+    const { undo: undoSize } = this.editor.historySize();
+    return undoSize > 0;
+  }
+
+  undo() {
+    this.editor.undo();
+  }
+
+  /**
+   * @returns {boolean} `true` if there is history to redo
+   */
+  get canRedo() {
+    this.atom.reportObserved();
+    if (!this.editor) {
+      return false;
+    }
+    const { redo: redoSize } = this.editor.historySize();
+    return redoSize > 0;
+  }
+
+  redo() {
+    this.editor.redo();
+  }
+}
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx
index 48c0baeb..17e6aef2 100644
--- a/language-web/src/main/js/index.jsx
+++ b/language-web/src/main/js/index.jsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 
-import XtextCodeMirror from "./components/XtextCodeMirror";
+import App from './App';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import RootStore, { RootStoreProvider } from './RootStore';
 
 import '../css/index.scss';
 
@@ -38,6 +42,19 @@ age(bob, bobAge).
 
 scope Family = 1, Person += 5..10.
 `;
-const app = <XtextCodeMirror initialValue={initialValue}/>;
+
+const rootStore = new RootStore();
+rootStore.editorStore.updateValue(initialValue);
+
+const theme = createMuiTheme();
+
+const app = (
+  <ThemeProvider theme={theme}>
+    <CssBaseline/>
+    <RootStoreProvider rootStore={rootStore}>
+      <App/>
+    </RootStoreProvider>
+  </ThemeProvider>
+)
 
 render(app, document.getElementById('app'));