Refactor code smells

.npmrc

@@ -1 +1,2 @@
-package-lock=false
+package-lock=false
+legacy-peer-deps=true

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.50",
+	"version": "0.0.53",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Helmet } from 'react-helmet';
-import Title from './components/layout/Title';
+import TitleBar from './components/layout/TitleBar';
 import FlowContainer from './containers/FlowContainer';
 import { FiberEditor, FlowEditor, HexGridEditor, ImageMapEditor, WorkflowEditor } from './editors';
 
@@ -10,7 +10,7 @@ interface IState {
 	activeEditor?: EditorType;
 }
 
-class App extends Component<any, IState> {
+class App extends Component<IState> {
 	state: IState = {
 		activeEditor: 'imagemap',
 	};
@@ -63,7 +63,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 onChangeEditor={this.handleChangeEditor} currentEditor={activeEditor} />
+					<TitleBar onChangeEditor={this.handleChangeEditor} currentEditor={activeEditor} />
 				</div>
 				<FlowContainer>
 					<div className="rde-content">{this.renderEditor(activeEditor)}</div>

src/canvas/Canvas.tsx

@@ -55,7 +55,7 @@ class InternalCanvas extends Component<CanvasProps, IState> implements CanvasIns
 		const mergedCanvasOption = Object.assign({}, defaults.canvasOption, canvasOption, {
 			width,
 			height,
-			selection: editable,
+			selection: (typeof canvasOption?.selection !== 'undefined' && canvasOption?.selection) || editable,
 		});
 		this.canvas = new fabric.Canvas(`canvas_${id}`, mergedCanvasOption);
 		this.canvas.setBackgroundColor(mergedCanvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));

src/canvas/handlers/EventHandler.ts

@@ -337,9 +337,9 @@ class EventHandler {
 		const delta = event.e.deltaY;
 		let zoomRatio = this.handler.canvas.getZoom();
 		if (delta > 0) {
-			zoomRatio -= 0.05;
+			zoomRatio -= this.handler.zoomStep;
 		} else {
-			zoomRatio += 0.05;
+			zoomRatio += this.handler.zoomStep;
 		}
 		this.handler.zoomHandler.zoomToPoint(
 			new fabric.Point(this.handler.canvas.getWidth() / 2, this.handler.canvas.getHeight() / 2),

src/canvas/handlers/Handler.ts

@@ -3,48 +3,48 @@ import { union } from 'lodash';
 import { uuid } from 'uuidv4';
 import warning from 'warning';
 import {
-	AlignmentHandler,
-	AnimationHandler,
-	ChartHandler,
-	ContextmenuHandler,
-	CropHandler,
-	CustomHandler,
-	DrawingHandler,
-	ElementHandler,
-	EventHandler,
-	GridHandler,
-	GuidelineHandler,
-	ImageHandler,
-	InteractionHandler,
-	LinkHandler,
-	NodeHandler,
-	PortHandler,
-	ShortcutHandler,
-	TooltipHandler,
-	TransactionHandler,
-	WorkareaHandler,
-	ZoomHandler,
+    AlignmentHandler,
+    AnimationHandler,
+    ChartHandler,
+    ContextmenuHandler,
+    CropHandler,
+    CustomHandler,
+    DrawingHandler,
+    ElementHandler,
+    EventHandler,
+    GridHandler,
+    GuidelineHandler,
+    ImageHandler,
+    InteractionHandler,
+    LinkHandler,
+    NodeHandler,
+    PortHandler,
+    ShortcutHandler,
+    TooltipHandler,
+    TransactionHandler,
+    WorkareaHandler,
+    ZoomHandler,
 } from '.';
 import CanvasObject from '../CanvasObject';
 import { defaults } from '../constants';
 import { LinkObject } from '../objects/Link';
 import { NodeObject } from '../objects/Node';
 import { PortObject } from '../objects/Port';
 import {
-	CanvasOption,
-	FabricCanvas,
-	FabricElement,
-	FabricGroup,
-	FabricImage,
-	FabricObject,
-	FabricObjectOption,
-	FabricObjects,
-	GridOption,
-	GuidelineOption,
-	InteractionMode,
-	KeyEvent,
-	WorkareaObject,
-	WorkareaOption,
+    CanvasOption,
+    FabricCanvas,
+    FabricElement,
+    FabricGroup,
+    FabricImage,
+    FabricObject,
+    FabricObjectOption,
+    FabricObjects,
+    GridOption,
+    GuidelineOption,
+    InteractionMode,
+    KeyEvent,
+    WorkareaObject,
+    WorkareaOption,
 } from '../utils';
 import { LinkOption } from './LinkHandler';
 import { TransactionEvent } from './TransactionHandler';
@@ -151,6 +151,11 @@ export interface HandlerOption {
 	 * @type {number}
 	 */
 	maxZoom?: number;
+	/**
+	 * Zoom ratio step
+	 * @type {number}
+	 */
+	zoomStep?: number;
 	/**
 	 * Workarea option
 	 * @type {WorkareaOption}
@@ -226,6 +231,7 @@ class Handler implements HandlerOptions {
 	public interactionMode: InteractionMode;
 	public minZoom: number;
 	public maxZoom: number;
+	public zoomStep: number = 0.05;
 	public propertiesToInclude?: string[] = defaults.propertiesToInclude;
 	public workareaOption?: WorkareaOption = defaults.workareaOption;
 	public canvasOption?: CanvasOption = defaults.canvasOption;
@@ -323,6 +329,7 @@ class Handler implements HandlerOptions {
 		this.interactionMode = options.interactionMode;
 		this.minZoom = options.minZoom;
 		this.maxZoom = options.maxZoom;
+		this.zoomStep = options.zoomStep || 0.05;
 		this.zoomEnabled = options.zoomEnabled;
 		this.width = options.width;
 		this.height = options.height;
@@ -370,7 +377,7 @@ class Handler implements HandlerOptions {
 		this.animationHandler = new AnimationHandler(this);
 		this.contextmenuHandler = new ContextmenuHandler(this);
 		this.tooltipHandler = new TooltipHandler(this);
-		this.zoomHandler = new ZoomHandler(this);
+		this.zoomHandler = new ZoomHandler(this, this.zoomStep);
 		this.interactionHandler = new InteractionHandler(this);
 		this.transactionHandler = new TransactionHandler(this);
 		this.gridHandler = new GridHandler(this);

src/canvas/handlers/InteractionHandler.ts

@@ -51,6 +51,7 @@ class InteractionHandler {
 			}
 		});
 		this.handler.canvas.renderAll();
+		this.handler.onInteraction?.('selection');
 	};
 
 	/**
@@ -74,6 +75,7 @@ class InteractionHandler {
 			}
 		});
 		this.handler.canvas.renderAll();
+		this.handler.onInteraction?.('grab');
 	};
 
 	/**
@@ -98,6 +100,7 @@ class InteractionHandler {
 			}
 		});
 		this.handler.canvas.renderAll();
+		this.handler.onInteraction?.(type);
 	};
 
 	public linking = (callback?: (obj: FabricObject) => IReturnType) => {
@@ -123,6 +126,7 @@ class InteractionHandler {
 			}
 		});
 		this.handler.canvas.renderAll();
+		this.handler.onInteraction?.('link');
 	};
 
 	/**

src/canvas/handlers/ZoomHandler.ts

@@ -1,14 +1,16 @@
 import { fabric } from 'fabric';
 
-import Handler from './Handler';
 import { VideoObject } from '../objects/Video';
 import { FabricObject } from '../utils';
+import Handler from './Handler';
 
 class ZoomHandler {
 	handler?: Handler;
+	private _zoomStep?: number;
 
-	constructor(handler: Handler) {
+	constructor(handler: Handler, zoomStep: number = 0.05) {
 		this.handler = handler;
+		this._zoomStep = zoomStep;
 	}
 
 	/**
@@ -83,7 +85,7 @@ class ZoomHandler {
 	 */
 	public zoomIn = () => {
 		let zoomRatio = this.handler.canvas.getZoom();
-		zoomRatio += 0.05;
+		zoomRatio += this._zoomStep;
 		const center = this.handler.canvas.getCenter();
 		this.zoomToPoint(new fabric.Point(center.left, center.top), zoomRatio);
 	};
@@ -94,7 +96,7 @@ class ZoomHandler {
 	 */
 	public zoomOut = () => {
 		let zoomRatio = this.handler.canvas.getZoom();
-		zoomRatio -= 0.05;
+		zoomRatio -= this._zoomStep;
 		const center = this.handler.canvas.getCenter();
 		this.zoomToPoint(new fabric.Point(center.left, center.top), zoomRatio);
 	};

src/components/common/FileUpload.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import { Icon, Upload, message } from 'antd';
 import PropTypes from 'prop-types';
-import { Upload, Icon } from 'antd';
+import React, { Component } from 'react';
 
 const { Dragger } = Upload;
 

src/components/common/UrlModal.js

@@ -4,6 +4,7 @@ import { Form, Modal, Button, Input } from 'antd';
 import i18n from 'i18next';
 
 import Icon from '../icon/Icon';
+import { UrlModalLabel } from './UrlModalLabel';
 
 class UrlModal extends Component {
 	handlers = {
@@ -56,17 +57,11 @@ class UrlModal extends Component {
 	}
 
 	render() {
-		const { onOk, onCancel, onClick } = this.handlers;
 		const { form } = this.props;
 		const { getFieldDecorator } = form;
 		const { url, visible } = this.state;
 		const label = (
-			<React.Fragment>
-				<span style={{ marginRight: 8 }}>{i18n.t('common.url')}</span>
-				<Button onClick={onClick} shape="circle" className="rde-action-btn">
-					<Icon name="edit" />
-				</Button>
-			</React.Fragment>
+			<UrlModalLabel onclick={this.handlers.onClick}/>
 		);
 		return (
 			<React.Fragment>
@@ -81,7 +76,7 @@ class UrlModal extends Component {
 						initialValue: url || '',
 					})(<span style={{ wordBreak: 'break-all' }}>{url}</span>)}
 				</Form.Item>
-				<Modal onCancel={onCancel} onOk={onOk} visible={visible}>
+				<Modal onCancel={this.handlers.onCancel} onOk={this.handlers.onOk} visible={visible}>
 					<Form.Item label={i18n.t('common.url')} colon={false}>
 						<Input
 							defaultValue={url}

src/components/common/UrlModalLabel.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Icon from '../icon/Icon';
+import { Button } from "antd";
+
+export function UrlModalLabel(props) {
+    return (
+        <React.Fragment>
+            <span style={{ marginRight: 8 }}>{i18n.t('common.url')}</span>
+            <Button onClick={props.onClick} shape="circle" className="rde-action-btn">
+                <Icon name="edit" />
+            </Button>
+        </React.Fragment>
+    )
+}

src/components/flex/Flex.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Item from './Item';
 
-export interface BoxProps extends React.HTMLAttributes<any> {
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
 	display?: 'flex' | 'inline-flex';
 	flexDirection?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
 	flexWrap?: 'nowrap' | 'wrap-reverse' | 'wrap';
@@ -56,7 +56,7 @@ class Flex extends Component<BoxProps> {
 				flex,
 			},
 			style,
-		) as any;
+		) as BoxProps;
 		return (
 			<div
 				style={Object.keys(newStyle).reduce((prev, key) => {

src/components/flex/Item.tsx

@@ -22,7 +22,7 @@ const Item: React.SFC<ItemProps> = props => {
 			flex,
 		},
 		style,
-	) as any;
+	) as ItemProps;
 	return (
 		<div
 			style={Object.keys(newStyle).reduce((prev, key) => {

src/components/layout/Ads.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Flex } from "../flex";
+
+export function Ads() {
+    return (
+        <Flex flex="1" justifyContent="flex-end">
+            <ins
+                className="adsbygoogle"
+                style={{ display: 'inline-block', width: 600, height: 60 }}
+                data-ad-client="ca-pub-8569372752842198"
+                data-ad-slot="5790685139"
+            />
+        </Flex>
+    )
+}

src/components/layout/DocsButton.tsx

@@ -0,0 +1,22 @@
+import { Button, Tooltip } from "antd";
+import i18next from "i18next";
+import React from "react";
+import Icon from "../icon/Icon";
+
+export function DocsButton(props) {
+    return (
+        <Tooltip title={i18next.t('action.go-docs')} overlayStyle={{ fontSize: 16 }}>
+            <Button
+                className="rde-action-btn"
+                style={{
+                    color: 'white',
+                }}
+                shape="circle"
+                size="large"
+                onClick={props.onClick}
+            >
+                <Icon name="book" prefix="fas" size={1.5} />
+            </Button>
+        </Tooltip>
+    )
+}