1) Refactoring

2) +React 3) +MaterialUI
rfatkullin · May 1, 2020 · cfae0dd · cfae0dd
1 parent 968bcc2
commit cfae0dd
Show file tree

Hide file tree

Showing 14 changed files with 466 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,11 +4,17 @@
   "description": "Molecule drawer",
   "main": "index.js",
   "dependencies": {
+    "@material-ui/core": "^4.9.12",
+    "@material-ui/icons": "^4.9.1",
     "@types/snapsvg": "^0.5.0",
     "imports-loader": "^0.8.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "snapsvg": "^0.5.1"
   },
   "devDependencies": {
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
     "browser-sync": "^2.26.7",
     "browser-sync-webpack-plugin": "^2.2.2",
     "html-webpack-plugin": "^2.30.1",

diff --git a/src/config.ts → src/configs/config.ts b/src/config.ts → src/configs/config.ts
diff --git a/src/drawer.ts b/src/drawer.ts
@@ -1,6 +1,6 @@
-import Configs from "./config";
-import Geom from "./geom";
-import Vector from "./vector";
+import Configs from "./configs/config";
+import Geom from "./utils/geom";
+import Vector from "./utils/vector";
 
 export default class Drawer {
     private readonly MolMinRad: number = 10;

diff --git a/src/editor.ts b/src/editor.ts
@@ -1,21 +1,21 @@
-import Mol2Parser from "./mol2_parser";
+import Mol2Parser from "./utils/mol2_parser";
 import * as Snap from 'snapsvg';
 import Drawer from "./drawer";
-import Configs from "./config";
-import Vector from "./vector";
+import Configs from "./configs/config";
+import Vector from "./utils/vector";
 
 export default class Editor {
-    private readonly _svgCtx: Snap.Paper = null;
-    private readonly _svgCtxSize: any = null;
-    private readonly _mol2DataArea: HTMLTextAreaElement = null;
-    private readonly _svgBoundary: HTMLElement = null;
+    private _svgCtx: Snap.Paper = null;
+    private _svgCtxSize: any = null;
+    private _mol2DataArea: HTMLTextAreaElement = null;
+    private _svgBoundary: HTMLElement = null;
 
     private _isMouseDown: boolean = false;
     private _currMousPos: Vector = null;
     private _mousePrevPos: Vector = null;
     private _drawer: Drawer = null;
 
-    public constructor() {
+    public init(): void {
         this._svgCtx = Snap(600, 600);
 
         this._svgBoundary = document.getElementById("svg-boundary");
@@ -29,9 +29,7 @@ export default class Editor {
         this._mol2DataArea = document.getElementById("mol2-data") as HTMLTextAreaElement;
 
         this._drawer = new Drawer(this._svgCtx, this._svgCtxSize);
-    }
 
-    public init(): void {
         setInterval(() => this.mainLoop(), Configs.FrameRenderTime);
     }
 

diff --git a/src/index.ts b/src/index.ts
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,61 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+
+import Editor from "./editor";
+import TopMenu from "./ui/top_menu";
+
+type MyProps = {};
+type MyState = {
+  mode: string
+};
+
+class App extends React.Component<MyProps, MyState> {
+  private readonly _editor: Editor;
+
+  constructor(props: MyProps) {
+    super(props)
+
+    this.state = {
+      mode: 'Coronene'
+    };
+
+    this._editor = new Editor();
+
+    this.onMenuItemClick = this.onMenuItemClick.bind(this);
+  }
+
+  public componentDidMount(): void {
+    this._editor.init();
+  }
+
+  public render(): React.ReactNode {
+    return <div>
+      <div>
+        <TopMenu mode={this.state.mode} onItemClick={e => this.onMenuItemClick(e)} />
+      </div>
+      <div id="draw-canvas" onMouseOver={e => this._editor.onMouseMove(e)}>
+
+        <div id="svg-boundary" onMouseDown={e => this._editor.onMouseDown(e)} onMouseUp={e => this._editor.onMouseUp(e)} ></div>
+
+        <p>
+          <textarea id="mol2-data" name="text"></textarea>
+        </p>
+        <button id="draw-button" onClick={e => this._editor.onDrawClick()} >Draw</button>
+        <button id="download-button" onClick={e => this._editor.onDownloadClick()}>Download as SVG</button>
+
+      </div>
+    </div>
+  }
+
+  private onMenuItemClick(itemName: string): void {
+    this.setState({
+      mode: itemName
+    });
+  }
+
+}
+
+ReactDOM.render(
+  React.createElement(App),
+  document.getElementById("react-app")
+);
diff --git a/src/index_template.html b/src/index_template.html
@@ -3,16 +3,9 @@
 <head>
 </head>
 
-<body id="draw-canvas">
-
-    <div id="svg-boundary"></div>
-
-    <p>
-        <textarea id="mol2-data" rows="10" cols="45" name="text"></textarea>
-    </p>
-    <button id="draw-button">Draw</button>
-    <button id="download-button">Download as SVG</button>
-
-</body>
+<body>
+    <div id="react-app">
+    </div>
+  </body>
 
 </html>
diff --git a/src/ui/top_menu.tsx b/src/ui/top_menu.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+
+type Props = {
+    mode: string,
+    onItemClick: ((itemName: string) => void)
+};
+type State = {};
+
+export default class TopMenu extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {}        
+    }
+
+    public render(): ReactNode {
+        return <div className="top-menu">
+            <div>
+                <ButtonGroup variant="outlined" color="primary" aria-label="outlined primary button group">
+                    <Button onClick={() => this.props.onItemClick('Coronene')} disabled={this.props.mode == "Coronene"}>
+                        Coronene
+            </Button>
+                    <Button onClick={() => this.props.onItemClick('Benzene')} disabled={this.props.mode == "Benzene"}>
+                        Benzene
+            </Button>
+                    <Button onClick={() => this.props.onItemClick('Butadiene')} disabled={this.props.mode == "Butadiene"}>
+                        Butadiene
+            </Button>
+                </ButtonGroup>
+            </div>
+        </div>
+    }
+}
diff --git a/src/geom.ts → src/utils/geom.ts b/src/geom.ts → src/utils/geom.ts
@@ -1,5 +1,5 @@
 import Vector from "./vector";
-import Configs from "./config";
+import Configs from "../configs/config";
 
 export default class Geom {
 

diff --git a/src/mol2_parser.ts → src/utils/mol2_parser.ts b/src/mol2_parser.ts → src/utils/mol2_parser.ts
diff --git a/src/vector.ts → src/utils/vector.ts b/src/vector.ts → src/utils/vector.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,8 +3,11 @@
         "outDir": "./dist/",
         "noImplicitAny": true,
         "sourceMap": true,
-        "module": "es6",
+        "module": "commonjs",
         "target": "es5",
+        "jsx": "react",
         "allowJs": true
-    }
+    },
+    "include": ["./src/**/*.tsx", "./typings/custom"],
+  	"exclude": ["dist", "build", "node_modules"]
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,11 +3,11 @@ var BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const path = require('path');
 
 module.exports = {
-  entry: './src/index.ts',
+  entry: './src/index.tsx',
   module: {
     rules: [
       {
-        test: /\.ts?$/,
+        test: /\.tsx?$/,
         use: 'ts-loader',
         exclude: /node_modules/,
       },
@@ -32,7 +32,7 @@ module.exports = {
     })
   ],
   resolve: {
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts', '.js', '.tsx',],
   },
   output: {
     filename: 'bundle.js',