[#164] Code refactoring

Author: salgum1114

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.31",
+	"version": "0.0.32",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",
@@ -43,9 +43,7 @@
 		"fabric": "^3.4.0",
 		"react": "^16.4.1",
 		"react-dom": "^16.4.1",
-		"react-dom-factories": "^1.0.2",
-		"@types/fabric": "^3.0.1",
-		"@types/animejs": "^3.1.0"
+		"react-dom-factories": "^1.0.2"
 	},
 	"dependencies": {
 		"animejs": "^3.0.0",
@@ -55,6 +53,7 @@
 		"echarts": "^4.7.0",
 		"fabric": "^3.6.3",
 		"gifler": "^0.1.0",
+		"honeycomb-grid": "^3.1.7",
 		"i18next": "^19.0.0",
 		"i18next-browser-languagedetector": "^2.2.4",
 		"lodash": "^4.17.10",

src/components/canvas/Canvas.tsx

@@ -5,7 +5,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 import union from 'lodash/union';
 
 import Handler, { HandlerOptions } from './handlers/Handler';
-import { FabricCanvas } from './utils';
+import { FabricCanvas, WorkareaObject } from './utils';
 
 import '../../styles/core/canvas.less';
 import '../../styles/core/tooltip.less';
@@ -42,6 +42,33 @@ const defaultGripOption = {
 	borderColor: '#cccccc',
 };
 
+const defaultWorkareaOption: Partial<WorkareaObject> = {
+	width: 600,
+	height: 400,
+	workareaWidth: 600,
+	workareaHeight: 400,
+	lockScalingX: true,
+	lockScalingY: true,
+	scaleX: 1,
+	scaleY: 1,
+	backgroundColor: '#fff',
+	hasBorders: false,
+	hasControls: false,
+	selectable: false,
+	lockMovementX: true,
+	lockMovementY: true,
+	hoverCursor: 'default',
+	name: '',
+	id: 'workarea',
+	type: 'image',
+	layout: 'fixed', // fixed, responsive, fullscreen
+	link: {},
+	tooltip: {
+		enabled: false,
+	},
+	isElement: false,
+};
+
 const defaultPropertiesToInclude = ['id', 'name', 'locke', 'editable'];
 
 export type CanvasProps = HandlerOptions & {
@@ -52,7 +79,12 @@ export type CanvasProps = HandlerOptions & {
 	ref?: React.RefAttributes<Handler>;
 };
 
-class Canvas extends Component<CanvasProps> {
+interface IState {
+	id: string;
+	loaded: boolean;
+}
+
+class Canvas extends Component<CanvasProps, IState> {
 	public handler: Handler;
 	public canvas: FabricCanvas;
 	public container = React.createRef<HTMLDivElement>();
@@ -72,17 +104,20 @@ class Canvas extends Component<CanvasProps> {
 		minZoom: 30,
 		maxZoom: 300,
 		propertiesToInclude: defaultPropertiesToInclude,
-		workareaOption: {},
+		workareaOption: defaultWorkareaOption,
 		gridOption: defaultGripOption,
 		guidelineOption: {
 			enabled: true,
 		},
 		keyEvent: {},
 		responsive: true,
+		width: 0,
+		height: 0,
 	};
 
-	state = {
+	state: IState = {
 		id: v4(),
+		loaded: false,
 	};
 
 	componentDidMount() {
@@ -97,12 +132,10 @@ class Canvas extends Component<CanvasProps> {
 			responsive,
 			propertiesToInclude,
 			gridOption,
+			workareaOption,
 			...other
 		} = this.props;
 		const { id } = this.state;
-		if (responsive) {
-			this.createObserver();
-		}
 		const mergedPropertiesToInclude = union(propertiesToInclude, defaultPropertiesToInclude);
 		const mergedCanvasOption = Object.assign({}, defaultCanvasOption, canvasOption, {
 			width,
@@ -123,17 +156,16 @@ class Canvas extends Component<CanvasProps> {
 			defaultOption,
 			propertiesToInclude: mergedPropertiesToInclude,
 			gridOption: Object.assign({}, defaultGripOption, gridOption),
+			width,
+			height,
+			workareaOption: Object.assign({}, defaultWorkareaOption, workareaOption),
 			...other,
 		});
-		this.handler.gridHandler.init();
-		if (editable) {
-			this.handler.transactionHandler.init();
-			this.handler.interactionHandler.selection();
-			if (guidelineOption.enabled) {
-				this.handler.guidelineHandler.init();
-			}
+		if (this.props.responsive) {
+			this.createObserver();
+		} else {
+			this.handleLoad();
 		}
-		this.handler.eventHandler.attachEventListener();
 	}
 
 	componentDidUpdate(prevProps: CanvasProps) {
@@ -206,6 +238,9 @@ class Canvas extends Component<CanvasProps> {
 		this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
 			const { width = 0, height = 0 } = (entries[0] && entries[0].contentRect) || {};
 			this.handler.eventHandler.resize(width, height);
+			if (!this.state.loaded) {
+				this.handleLoad();
+			}
 		});
 		this.resizeObserver.observe(this.container.current);
 	};
@@ -216,6 +251,15 @@ class Canvas extends Component<CanvasProps> {
 		}
 	};
 
+	handleLoad = () => {
+		if (this.props.onLoad) {
+			this.props.onLoad(this.handler, this.canvas);
+		}
+		this.setState({
+			loaded: true,
+		});
+	};
+
 	render() {
 		const { style } = this.props;
 		const { id } = this.state;

src/components/canvas/handlers/EventHandler.ts

@@ -15,8 +15,10 @@ class EventHandler {
 	handler: Handler;
 	keyCode: number;
 	panning: boolean;
+
 	constructor(handler: Handler) {
 		this.handler = handler;
+		this.attachEventListener();
 	}
 
 	/**
@@ -600,8 +602,8 @@ class EventHandler {
 			if (this.handler.gridOption.enabled) {
 				return;
 			}
-			this.handler.canvas.getObjects().forEach((obj: any, index) => {
-				if (index !== 0) {
+			this.handler.canvas.getObjects().forEach((obj: FabricObject) => {
+				if (obj.id !== 'workarea') {
 					const left = obj.left + diffWidth;
 					const top = obj.top + diffHeight;
 					obj.set({
@@ -617,29 +619,19 @@ class EventHandler {
 					}
 				}
 			});
-			this.handler.canvas.renderAll();
+			this.handler.canvas.requestRenderAll();
 			return;
 		}
-		let scaleX = nextWidth / this.handler.workarea.width;
-		const scaleY = nextHeight / this.handler.workarea.height;
 		if (this.handler.workarea.layout === 'responsive') {
-			if (this.handler.workarea.height > this.handler.workarea.width) {
-				scaleX = scaleY;
-				if (nextWidth < this.handler.workarea.width * scaleX) {
-					scaleX = scaleX * (nextWidth / (this.handler.workarea.width * scaleX));
-				}
-			} else {
-				if (nextHeight < this.handler.workarea.height * scaleX) {
-					scaleX = scaleX * (nextHeight / (this.handler.workarea.height * scaleX));
-				}
-			}
+			const { scaleX } = this.handler.workareaHandler.calculateScale();
+			const center = this.handler.canvas.getCenter();
 			const deltaPoint = new fabric.Point(diffWidth, diffHeight);
 			this.handler.canvas.relativePan(deltaPoint);
-			const center = this.handler.canvas.getCenter();
 			this.handler.zoomHandler.zoomToPoint(new fabric.Point(center.left, center.top), scaleX);
-			this.handler.canvas.renderAll();
 			return;
 		}
+		const scaleX = nextWidth / this.handler.workarea.width;
+		const scaleY = nextHeight / this.handler.workarea.height;
 		const diffScaleX = nextWidth / (this.handler.workarea.width * this.handler.workarea.scaleX);
 		const diffScaleY = nextHeight / (this.handler.workarea.height * this.handler.workarea.scaleY);
 		this.handler.workarea.set({

src/components/canvas/handlers/GridHandler.ts

@@ -9,6 +9,7 @@ class GridHandler {
 
 	constructor(handler: Handler) {
 		this.handler = handler;
+		this.init();
 	}
 
 	/**

src/components/canvas/handlers/GuidelineHandler.ts

@@ -18,6 +18,9 @@ class GuidelineHandler {
 
 	constructor(handler: Handler) {
 		this.handler = handler;
+		if (this.handler.editable && this.handler.guidelineOption.enabled) {
+			this.init();
+		}
 	}
 
 	init = () => {

src/components/canvas/handlers/Handler.ts

@@ -292,9 +292,6 @@ class Handler implements HandlerOptions {
 		this.init(options);
 		this.initCallback(options);
 		this.initHandler(options);
-		if (this.onLoad) {
-			this.onLoad(this, this.canvas);
-		}
 	}
 
 	/**
@@ -348,6 +345,7 @@ class Handler implements HandlerOptions {
 	 * @param {HandlerOptions} options
 	 */
 	public initHandler = (_options: HandlerOptions) => {
+		this.workareaHandler = new WorkareaHandler(this);
 		this.imageHandler = new ImageHandler(this);
 		this.chartHandler = new ChartHandler(this);
 		this.elementHandler = new ElementHandler(this);
@@ -356,7 +354,6 @@ class Handler implements HandlerOptions {
 		this.contextmenuHandler = new ContextmenuHandler(this);
 		this.tooltipHandler = new TooltipHandler(this);
 		this.zoomHandler = new ZoomHandler(this);
-		this.workareaHandler = new WorkareaHandler(this);
 		this.interactionHandler = new InteractionHandler(this);
 		this.transactionHandler = new TransactionHandler(this);
 		this.gridHandler = new GridHandler(this);
@@ -580,7 +577,7 @@ class Handler implements HandlerOptions {
 	 * @param {(File | string)} [source]
 	 * @returns
 	 */
-    public setImage = (obj: FabricImage, source?: File | string) => {
+	public setImage = (obj: FabricImage, source?: File | string) => {
 		if (!source) {
 			this.loadImage(obj, null);
 			obj.set('file', null);
@@ -707,7 +704,9 @@ class Handler implements HandlerOptions {
 		if (obj.type === 'image') {
 			createdObj = this.addImage(newOption);
 		} else if (obj.type === 'group') {
-			const objects = this.addGroup(newOption, centered, loaded);
+			// TODO...
+			// Group add function needs to be fixed
+			const objects = this.addGroup(newOption, centered, loaded, transaction);
 			const groupOption = Object.assign({}, newOption, { objects, name: 'New Group' });
 			createdObj = this.fabricObjects[obj.type].create(groupOption);
 		} else {
@@ -762,9 +761,9 @@ class Handler implements HandlerOptions {
 	 * @param {boolean} [loaded=false]
 	 * @returns
 	 */
-	public addGroup = (obj: FabricGroup, centered = true, loaded = false) => {
+	public addGroup = (obj: FabricGroup, centered = true, loaded = false, transaction = true) => {
 		return obj.objects.map(child => {
-			return this.add(child, centered, loaded);
+			return this.add(child, centered, loaded, transaction);
 		});
 	};
 
@@ -1535,7 +1534,7 @@ class Handler implements HandlerOptions {
 	 * @param {*} json
 	 * @param {(canvas: FabricCanvas) => void} [callback]
 	 */
-	public importJSON = (json: any, callback?: (canvas: FabricCanvas) => void) => {
+	public importJSON = async (json: any, callback?: (canvas: FabricCanvas) => void) => {
 		if (typeof json === 'string') {
 			json = JSON.parse(json);
 		}
@@ -1556,42 +1555,39 @@ class Handler implements HandlerOptions {
 			prevLeft = workarea.left;
 			prevTop = workarea.top;
 			this.workarea.set(workarea);
-			this.canvas.centerObject(this.workarea);
-			this.workareaHandler.setImage(workarea.src, true);
+			await this.workareaHandler.setImage(workarea.src, true);
 			this.workarea.setCoords();
 		}
-		setTimeout(() => {
-			json.forEach((obj: FabricObjectOption) => {
-				if (obj.id === 'workarea') {
-					return;
-				}
-				const canvasWidth = this.canvas.getWidth();
-				const canvasHeight = this.canvas.getHeight();
-				const { width, height, scaleX, scaleY, layout, left, top } = this.workarea;
-				if (layout === 'fullscreen') {
-					const leftRatio = canvasWidth / (width * scaleX);
-					const topRatio = canvasHeight / (height * scaleY);
-					obj.left *= leftRatio;
-					obj.top *= topRatio;
-					obj.scaleX *= leftRatio;
-					obj.scaleY *= topRatio;
-				} else {
-					const diffLeft = left - prevLeft;
-					const diffTop = top - prevTop;
-					obj.left += diffLeft;
-					obj.top += diffTop;
-				}
-				if (obj.superType === 'element') {
-					obj.id = v4();
-				}
-				this.add(obj, false, true, false);
-				this.canvas.renderAll();
-			});
-			if (callback) {
-				callback(this.canvas);
+		json.forEach((obj: FabricObjectOption) => {
+			if (obj.id === 'workarea') {
+				return;
+			}
+			const canvasWidth = this.canvas.getWidth();
+			const canvasHeight = this.canvas.getHeight();
+			const { width, height, scaleX, scaleY, layout, left, top } = this.workarea;
+			if (layout === 'fullscreen') {
+				const leftRatio = canvasWidth / (width * scaleX);
+				const topRatio = canvasHeight / (height * scaleY);
+				obj.left *= leftRatio;
+				obj.top *= topRatio;
+				obj.scaleX *= leftRatio;
+				obj.scaleY *= topRatio;
+			} else {
+				const diffLeft = left - prevLeft;
+				const diffTop = top - prevTop;
+				obj.left += diffLeft;
+				obj.top += diffTop;
+			}
+			if (obj.superType === 'element') {
+				obj.id = v4();
 			}
-		}, 300);
-		this.canvas.setZoom(1);
+			this.add(obj, false, true, false);
+			this.canvas.renderAll();
+		});
+		if (callback) {
+			callback(this.canvas);
+		}
+		return Promise.resolve(this.canvas);
 	};
 
 	/**

src/components/canvas/handlers/InteractionHandler.ts

@@ -9,6 +9,9 @@ class InteractionHandler {
 	handler: Handler;
 	constructor(handler: Handler) {
 		this.handler = handler;
+		if (this.handler.editable) {
+			this.selection();
+		}
 	}
 
 	/**