[#164] Code refactoring

Author: salgum1114

package.json

@@ -71,6 +71,7 @@
 		"resize-observer-polyfill": "^1.5.1",
 		"store": "^2.0.12",
 		"uuid": "^7.0.3",
+		"uuidv4": "^6.2.8",
 		"warning": "^4.0.3"
 	},
 	"devDependencies": {
@@ -94,6 +95,7 @@
 		"@types/react-helmet": "^5.0.15",
 		"@types/uuid": "^7.0.2",
 		"@types/warning": "^3.0.0",
+		"@types/webpack-env": "^1.16.0",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
 		"babel-plugin-dynamic-import-webpack": "^1.1.0",

src/containers/App.tsx renamed to src/App.tsx

@@ -1,14 +1,11 @@
 import React, { Component } from 'react';
 import { Helmet } from 'react-helmet';
 
-import ImageMapEditor from '../components/imagemap/ImageMapEditor';
-import WorkflowEditor from '../components/workflow/WorkflowEditor';
-import Title from './Title';
-import FlowEditor from '../components/flow/FlowEditor';
-import FlowContainer from './FlowContainer';
-import HexGrid from '../components/hexgrid/HexGrid';
+import Title from './components/layout/Title';
+import FlowContainer from './containers/FlowContainer';
+import { FiberEditor, FlowEditor, HexGridEditor, ImageMapEditor, WorkflowEditor } from './editors';
 
-type EditorType = 'imagemap' | 'workflow' | 'flow' | 'hexgrid';
+type EditorType = 'imagemap' | 'workflow' | 'flow' | 'hexgrid' | 'fiber';
 
 interface IState {
 	activeEditor?: EditorType;
@@ -19,7 +16,7 @@ class App extends Component<any, IState> {
 		activeEditor: 'imagemap',
 	};
 
-	onChangeMenu = ({ key }) => {
+	handleChangeEditor = ({ key }) => {
 		this.setState({
 			activeEditor: key,
 		});
@@ -34,7 +31,9 @@ class App extends Component<any, IState> {
 			case 'flow':
 				return <FlowEditor />;
 			case 'hexgrid':
-				return <HexGrid />;
+				return <HexGridEditor />;
+			case 'fiber':
+				return <FiberEditor />;
 		}
 	};
 
@@ -65,7 +64,7 @@ class App extends Component<any, IState> {
 					<script async={true} src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" />
 				</Helmet>
 				<div className="rde-title">
-					<Title onChangeMenu={this.onChangeMenu} current={activeEditor} />
+					<Title onChangeEditor={this.handleChangeEditor} currentEditor={activeEditor} />
 				</div>
 				<FlowContainer>
 					<div className="rde-content">{this.renderEditor(activeEditor)}</div>

src/components/canvas/Canvas.tsx renamed to src/canvas/Canvas.tsx

@@ -1,16 +1,15 @@
 import React, { Component } from 'react';
 import { fabric } from 'fabric';
-import { v4 } from 'uuid';
 import ResizeObserver from 'resize-observer-polyfill';
-
 import Handler, { HandlerOptions } from './handlers/Handler';
 import { FabricCanvas } from './utils';
 import { defaults } from './constants';
+import { uuid } from 'uuidv4';
 
-import '../../styles/core/canvas.less';
-import '../../styles/core/tooltip.less';
-import '../../styles/core/contextmenu.less';
-import '../../styles/fabricjs/fabricjs.less';
+import '../styles/core/canvas.less';
+import '../styles/core/tooltip.less';
+import '../styles/core/contextmenu.less';
+import '../styles/fabricjs/fabricjs.less';
 
 export type CanvasProps = HandlerOptions & {
 	responsive?: boolean;
@@ -29,7 +28,7 @@ class Canvas extends Component<CanvasProps, IState> {
 	public container = React.createRef<HTMLDivElement>();
 	private resizeObserver: ResizeObserver;
 	static defaultProps: CanvasProps = {
-		id: v4(),
+		id: uuid(),
 		editable: true,
 		zoomEnabled: true,
 		minZoom: 30,
@@ -40,7 +39,7 @@ class Canvas extends Component<CanvasProps, IState> {
 	};
 
 	state: IState = {
-		id: v4(),
+		id: uuid(),
 		loaded: false,
 	};
 

src/components/canvas/CanvasObject.ts renamed to src/canvas/CanvasObject.ts

@@ -25,5 +25,6 @@ declare module 'fabric/fabric-impl' {
 declare global {
 	interface Window {
 		gifler: any;
+		adsbygoogle: any;
 	}
 }