diff --git a/.npmrc b/.npmrc
index 9cf94950..4fd15ed1 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
-package-lock=false
\ No newline at end of file
+package-lock=false
+legacy-peer-deps=true
diff --git a/package.json b/package.json
index b39a7b4d..ac9af969 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index 3a4d31c4..66f66cb0 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/canvas/Canvas.tsx b/src/canvas/Canvas.tsx
index 6f5f1a6e..66913d74 100644
--- a/src/canvas/Canvas.tsx
+++ b/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));
diff --git a/src/canvas/handlers/EventHandler.ts b/src/canvas/handlers/EventHandler.ts
index b92a6e16..100fc169 100644
--- a/src/canvas/handlers/EventHandler.ts
+++ b/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),
diff --git a/src/canvas/handlers/Handler.ts b/src/canvas/handlers/Handler.ts
index 5361d52a..e5c230db 100644
--- a/src/canvas/handlers/Handler.ts
+++ b/src/canvas/handlers/Handler.ts
@@ -3,27 +3,27 @@ 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';
@@ -31,20 +31,20 @@ 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);
diff --git a/src/canvas/handlers/InteractionHandler.ts b/src/canvas/handlers/InteractionHandler.ts
index 29b3ac79..aaa93d5a 100644
--- a/src/canvas/handlers/InteractionHandler.ts
+++ b/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');
 	};
 
 	/**
diff --git a/src/canvas/handlers/ZoomHandler.ts b/src/canvas/handlers/ZoomHandler.ts
index ac104e70..a6dfe71e 100644
--- a/src/canvas/handlers/ZoomHandler.ts
+++ b/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);
 	};
diff --git a/src/components/common/FileUpload.js b/src/components/common/FileUpload.js
index 07fa16a1..8dd57a7a 100644
--- a/src/components/common/FileUpload.js
+++ b/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;
 
diff --git a/src/components/common/UrlModal.js b/src/components/common/UrlModal.js
index ba78052a..b2ba49e4 100644
--- a/src/components/common/UrlModal.js
+++ b/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}
diff --git a/src/components/common/UrlModalLabel.js b/src/components/common/UrlModalLabel.js
new file mode 100644
index 00000000..1f71da7f
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 951d0527..19d485a1 100644
--- a/src/components/flex/Flex.tsx
+++ b/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) => {
diff --git a/src/components/flex/Item.tsx b/src/components/flex/Item.tsx
index 248d17df..0a771f0a 100644
--- a/src/components/flex/Item.tsx
+++ b/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) => {
diff --git a/src/components/layout/Ads.tsx b/src/components/layout/Ads.tsx
new file mode 100644
index 00000000..1a9495be
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/DocsButton.tsx b/src/components/layout/DocsButton.tsx
new file mode 100644
index 00000000..af716fff
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/EditorChange.tsx b/src/components/layout/EditorChange.tsx
new file mode 100644
index 00000000..a9c3f119
--- /dev/null
+++ b/src/components/layout/EditorChange.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Flex } from "../flex";
+import { Menu } from "antd";
+import i18next from "i18next";
+
+export function EditorChange(props) {
+    return (
+        <Flex style={{ marginLeft: 88 }}>
+            <Menu
+                mode="horizontal"
+                theme="dark"
+                style={{ background: 'transparent', fontSize: '16px' }}
+                onClick={props.onClick}
+                selectedKeys={[props.selectedKeys]}
+            >
+                <Menu.Item key="imagemap" style={{ color: '#fff' }}>
+                    {i18next.t('imagemap.imagemap')}
+                </Menu.Item>
+                <Menu.Item key="workflow" style={{ color: '#fff' }}>
+                    {i18next.t('workflow.workflow')}
+                </Menu.Item>
+            </Menu>
+        </Flex>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/GithuButton.tsx b/src/components/layout/GithuButton.tsx
new file mode 100644
index 00000000..1b7a5288
--- /dev/null
+++ b/src/components/layout/GithuButton.tsx
@@ -0,0 +1,22 @@
+import { Button, Tooltip } from "antd";
+import i18next from "i18next";
+import Icon from '../icon/Icon';
+import React from "react";
+
+export function GitHubButton(props) {
+    return ( 
+        <Tooltip title={i18next.t('action.go-github')} overlayStyle={{ fontSize: 16 }}>
+            <Button
+                className="rde-action-btn"
+                style={{
+                    color: 'white',
+                }}
+                shape="circle"
+                size="large"
+                onClick={props.onClick}
+            >
+                <Icon name="github" prefix="fab" size={1.5} />
+            </Button>
+        </Tooltip>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/Menu.tsx b/src/components/layout/Menu.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/layout/QuestionButton.tsx b/src/components/layout/QuestionButton.tsx
new file mode 100644
index 00000000..4e5682bb
--- /dev/null
+++ b/src/components/layout/QuestionButton.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 QuestionButton(props) {
+    return (
+        <Tooltip title={i18next.t('action.shortcut-help')} overlayStyle={{ fontSize: 16 }}>
+            <Button
+                className="rde-action-btn"
+                style={{
+                    color: 'white',
+                }}
+                shape="circle"
+                size="large"
+                onClick={props.onClick}
+            >
+                <Icon name="question" prefix="fas" size={1.5} />
+            </Button>
+        </Tooltip>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/Title.tsx b/src/components/layout/Title.tsx
index 621501e6..8b5b19f8 100644
--- a/src/components/layout/Title.tsx
+++ b/src/components/layout/Title.tsx
@@ -1,135 +1,7 @@
-import { Button, Menu, Modal, Tooltip } from 'antd';
-import { ClickParam } from 'antd/lib/menu';
-import i18next from 'i18next';
-import React, { Component } from 'react';
-import { Flex } from '../flex';
-import { ShortcutHelp } from '../help';
-import Icon from '../icon/Icon';
+import React from "react";
 
-interface IProps {
-	onChangeEditor: (param: ClickParam) => void;
-	currentEditor: string;
-}
-
-class Title extends Component<IProps> {
-	state = {
-		visible: false,
-	};
-
-	componentDidMount() {
-		if (globalThis) {
-			(globalThis.adsbygoogle = globalThis.adsbygoogle || []).push({});
-		}
-	}
-
-	handlers = {
-		goGithub: () => {
-			window.open('https://github.com/salgum1114/react-design-editor');
-		},
-		goDocs: () => {
-			window.open('https://salgum1114.github.io/react-design-editor/docs');
-		},
-		showHelp: () => {
-			this.setState({
-				visible: true,
-			});
-		},
-	};
-
-	render() {
-		const { visible } = this.state;
-		return (
-			<Flex
-				style={{ background: 'linear-gradient(141deg,#23303e,#404040 51%,#23303e 75%)' }}
-				flexWrap="wrap"
-				flex="1"
-				alignItems="center"
-			>
-				<Flex style={{ marginLeft: 8 }} flex="0 1 auto">
-					<span style={{ color: '#fff', fontSize: 24, fontWeight: 500 }}>React Design Editor</span>
-					<Tooltip title={i18next.t('action.go-github')} overlayStyle={{ fontSize: 16 }}>
-						<Button
-							className="rde-action-btn"
-							style={{
-								color: 'white',
-							}}
-							shape="circle"
-							size="large"
-							onClick={this.handlers.goGithub}
-						>
-							<Icon name="github" prefix="fab" size={1.5} />
-						</Button>
-					</Tooltip>
-					<Tooltip title={i18next.t('action.go-docs')} overlayStyle={{ fontSize: 16 }}>
-						<Button
-							className="rde-action-btn"
-							style={{
-								color: 'white',
-							}}
-							shape="circle"
-							size="large"
-							onClick={this.handlers.goDocs}
-						>
-							<Icon name="book" prefix="fas" size={1.5} />
-						</Button>
-					</Tooltip>
-					<Tooltip title={i18next.t('action.shortcut-help')} overlayStyle={{ fontSize: 16 }}>
-						<Button
-							className="rde-action-btn"
-							style={{
-								color: 'white',
-							}}
-							shape="circle"
-							size="large"
-							onClick={this.handlers.showHelp}
-						>
-							<Icon name="question" prefix="fas" size={1.5} />
-						</Button>
-					</Tooltip>
-				</Flex>
-				<Flex style={{ marginLeft: 88 }}>
-					<Menu
-						mode="horizontal"
-						theme="dark"
-						style={{ background: 'transparent', fontSize: '16px' }}
-						onClick={this.props.onChangeEditor}
-						selectedKeys={[this.props.currentEditor]}
-					>
-						<Menu.Item key="imagemap" style={{ color: '#fff' }}>
-							{i18next.t('imagemap.imagemap')}
-						</Menu.Item>
-						<Menu.Item key="workflow" style={{ color: '#fff' }}>
-							{i18next.t('workflow.workflow')}
-						</Menu.Item>
-						{/* <Menu.Item key="flow" style={{ color: '#fff' }}>{i18n.t('flow.flow')}</Menu.Item> */}
-						{/* <Menu.Item key="hexgrid" style={{ color: '#fff' }}>
-							{i18next.t('hexgrid.hexgrid')}
-						</Menu.Item>
-						<Menu.Item key="fiber" style={{ color: '#fff' }}>
-							{i18next.t('fiber.fiber')}
-						</Menu.Item> */}
-					</Menu>
-				</Flex>
-				<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>
-				<Modal
-					visible={visible}
-					onCancel={() => this.setState({ visible: false })}
-					closable={true}
-					footer={null}
-					width="50%"
-				>
-					<ShortcutHelp />
-				</Modal>
-			</Flex>
-		);
-	}
-}
-
-export default Title;
+export function Title() {
+    return(
+        <span style={{ color: '#fff', fontSize: 24, fontWeight: 500 }}>React Design Editor</span>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/TitleBar.tsx b/src/components/layout/TitleBar.tsx
new file mode 100644
index 00000000..c7ac2416
--- /dev/null
+++ b/src/components/layout/TitleBar.tsx
@@ -0,0 +1,73 @@
+import { Modal } from 'antd';
+import { ClickParam } from 'antd/lib/menu';
+import React, { Component } from 'react';
+import { Flex } from '../flex';
+import { ShortcutHelp } from '../help';
+import { GitHubButton } from './GithuButton';
+import { DocsButton } from './DocsButton';
+import { QuestionButton } from './QuestionButton';
+import { EditorChange } from './EditorChange';
+import { Title } from './Title';
+import { Ads } from './Ads';
+
+interface IProps {
+	onChangeEditor: (param: ClickParam) => void;
+	currentEditor: string;
+}
+
+class TitleBar extends Component<IProps> {
+	state = {
+		visible: false,
+	};
+
+	componentDidMount() {
+		if (globalThis) {
+			(globalThis.adsbygoogle = globalThis.adsbygoogle || []).push({});
+		}
+	}
+
+	handlers = {
+		goGithub: () => {
+			window.open('https://github.com/salgum1114/react-design-editor');
+		},
+		goDocs: () => {
+			window.open('https://salgum1114.github.io/react-design-editor/docs');
+		},
+		showHelp: () => {
+			this.setState({
+				visible: true,
+			});
+		},
+	};
+
+	render() {
+		return (
+			<Flex
+				style={{ background: 'linear-gradient(141deg,#23303e,#404040 51%,#23303e 75%)' }}
+				flexWrap="wrap"
+				flex="1"
+				alignItems="center"
+			>
+				<Flex style={{ marginLeft: 8 }} flex="0 1 auto">
+					<Title/>
+					<GitHubButton onClick={this.handlers.goGithub}/>
+					<DocsButton onClick={this.handlers.goDocs}/>
+					<QuestionButton onClick={this.handlers.showHelp}/>
+				</Flex>
+				<EditorChange onClick={this.props.onChangeEditor} selectedKeys={this.props.currentEditor}/>
+				<Ads/>
+				<Modal
+					visible={this.state.visible}
+					onCancel={() => this.setState({ visible: false })}
+					closable={true}
+					footer={null}
+					width="50%"
+				>
+					<ShortcutHelp />
+				</Modal>
+			</Flex>
+		);
+	}
+}
+
+export default TitleBar;
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 6589b74f..245fe06e 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -1,3 +1,3 @@
-export { default as Title } from './Title';
+export { default as Title } from './TitleBar';
 
 export { default as Content } from './Content';
diff --git a/src/editors/flow/FlowItems.tsx b/src/editors/flow/FlowItems.tsx
index 85f01e18..0f44e459 100644
--- a/src/editors/flow/FlowItems.tsx
+++ b/src/editors/flow/FlowItems.tsx
@@ -6,11 +6,36 @@ import { getNode } from '../workflow/configuration/NodeConfiguration';
 import { NODE_COLORS } from '../../canvas/objects/Node';
 import Icon from '../../components/icon/Icon';
 import { uuid } from 'uuidv4';
+import { WorkflowDescriptor } from '../workflow/workflowDescriptors';
 
 interface IProps {
 	canvas: Canvas;
 }
 
+interface RenderItemProps {
+	descriptor: WorkflowDescriptor;
+	handleAddNode: (descriptor: WorkflowDescriptor, centered: boolean) => void
+}
+
+const RenderItem = ({descriptor, handleAddNode}: RenderItemProps) => {
+	return(
+		<div
+			key={descriptor.nodeClazz}
+			className="flow-editor-items-node"
+			draggable={true}
+			onClick={() => handleAddNode(descriptor, true)}
+		>
+			<div className="flow-editor-items-node-icon">
+				<Icon
+					name={descriptor.icon && descriptor.icon.length ? descriptor.icon : 'image'}
+					color={NODE_COLORS[descriptor.type].fill}
+				/>
+			</div>
+			<div className="flow-editor-items-node-name">{descriptor.name}</div>
+		</div>
+	);
+}
+
 class FlowItems extends Component<IProps> {
 	attachEventListener = canvasRef => {
 		this.props.canvas.canvas.wrapperEl.addEventListener('dragenter', this.handleDragEnter, false);
@@ -69,7 +94,7 @@ class FlowItems extends Component<IProps> {
 		e.target.classList.remove('dragging');
 	};
 
-	handleAddNode = (descriptor: any, centered = true) => {
+	handleAddNode = (descriptor: WorkflowDescriptor, centered = true) => {
 		this.props.canvas.handler.add(
 			Object.assign({}, descriptor, {
 				id: uuid(),
@@ -83,40 +108,15 @@ class FlowItems extends Component<IProps> {
 		);
 	};
 
-	renderItems = (descriptors: any[]) => {
-		return (
-			<div className="flow-editor-items-wrapper">
-				{descriptors.map(descriptor => this.renderItem(descriptor))}
-			</div>
-		);
-	};
-
-	renderItem = (descriptor: any) => {
-		return (
-			<div
-				key={descriptor.nodeClazz}
-				className="flow-editor-items-node"
-				draggable={true}
-				onClick={() => this.handleAddNode(descriptor)}
-			>
-				<div className="flow-editor-items-node-icon">
-					<Icon
-						name={descriptor.icon && descriptor.icon.length ? descriptor.icon : 'image'}
-						color={NODE_COLORS[descriptor.type].fill}
-					/>
-				</div>
-				<div className="flow-editor-items-node-name">{descriptor.name}</div>
-			</div>
-		);
-	};
-
 	render() {
 		return (
 			<div className="flow-editor-items">
 				<Collapse defaultActiveKey={Object.keys(Descriptors)}>
 					{Object.keys(Descriptors).map(key => (
 						<Collapse.Panel key={key} header={key} showArrow={false}>
-							{this.renderItems(Descriptors[key])}
+							<div className="flow-editor-items-wrapper">
+								{Descriptors[key].map(descriptor => <RenderItem descriptor={descriptor} handleAddNode={this.handleAddNode} />)}
+							</div>
 						</Collapse.Panel>
 					))}
 				</Collapse>
diff --git a/src/editors/imagemap/ImageMapEditor.js b/src/editors/imagemap/ImageMapEditor.js
index c31589e6..b79615cc 100644
--- a/src/editors/imagemap/ImageMapEditor.js
+++ b/src/editors/imagemap/ImageMapEditor.js
@@ -356,11 +356,6 @@ class ImageMapEditor extends Component {
 		},
 		onTooltip: (ref, target) => {
 			const value = Math.random() * 10 + 1;
-			const { animations, styles } = this.state;
-			// const { code } = target.trigger;
-			// const compile = SandBox.compile(code);
-			// const result = compile(value, animations, styles, target.userProperty);
-			// console.log(result);
 			return (
 				<div>
 					<div>
@@ -735,7 +730,7 @@ class ImageMapEditor extends Component {
 								this.canvasRef = c;
 							}}
 							className="rde-canvas"
-							minZoom={30}
+							minZoom={1}
 							maxZoom={500}
 							objectOption={defaultOption}
 							propertiesToInclude={propertiesToInclude}
diff --git a/src/editors/imagemap/ImageMapHeaderToolbar.js b/src/editors/imagemap/ImageMapHeaderToolbar.js
index 659da983..18b5bf19 100644
--- a/src/editors/imagemap/ImageMapHeaderToolbar.js
+++ b/src/editors/imagemap/ImageMapHeaderToolbar.js
@@ -140,7 +140,7 @@ class ImageMapHeaderToolbar extends Component {
 						disabled={isCropping}
 						onClick={() => canvasRef.handler?.saveImage()}
 						icon="image"
-						tooltipTitle={i18n.t('action.image-save')}
+						tooltipTitle={i18n.t('action.canvas-save')}
 					/>
 					<CommonButton
 						className="rde-action-btn"
diff --git a/src/editors/imagemap/properties/ImageProperty.js b/src/editors/imagemap/properties/ImageProperty.js
index 1dba3cbc..7c24fe29 100644
--- a/src/editors/imagemap/properties/ImageProperty.js
+++ b/src/editors/imagemap/properties/ImageProperty.js
@@ -1,9 +1,9 @@
-import React from 'react';
 import { Form, Radio } from 'antd';
 import i18n from 'i18next';
+import React from 'react';
 
-import UrlModal from '../../../components/common/UrlModal';
 import FileUpload from '../../../components/common/FileUpload';
+import UrlModal from '../../../components/common/UrlModal';
 
 export default {
 	render(canvasRef, form, data) {
@@ -34,7 +34,7 @@ export default {
 								},
 							],
 							initialValue: data.file,
-						})(<FileUpload accept="image/*" />)}
+						})(<FileUpload accept="image/*" limit={100} />)}
 					</Form.Item>
 				) : (
 					<Form.Item>
diff --git a/src/editors/imagemap/styles/Styles.js b/src/editors/imagemap/styles/Styles.js
index a6ca0565..a94f9466 100644
--- a/src/editors/imagemap/styles/Styles.js
+++ b/src/editors/imagemap/styles/Styles.js
@@ -133,33 +133,30 @@ class Styles extends Component {
 	};
 
 	render() {
-		const { styles } = this.props;
-		const { visible, style, validateTitle } = this.state;
-		const { onOk, onCancel, onAdd, onEdit, onDelete, onClear, onChange, onValid } = this.handlers;
 		return (
 			<Form>
 				<Flex flexDirection="column">
 					<Flex justifyContent="flex-end" style={{ padding: 8 }}>
-						<Button className="rde-action-btn" shape="circle" onClick={onAdd}>
+						<Button className="rde-action-btn" shape="circle" onClick={this.handlers.onAdd}>
 							<Icon name="plus" />
 						</Button>
-						<Button className="rde-action-btn" shape="circle" onClick={onClear}>
+						<Button className="rde-action-btn" shape="circle" onClick={this.handlers.onClear}>
 							<Icon name="times" />
 						</Button>
 						<StyleModal
 							ref={c => {
 								this.modalRef = c;
 							}}
-							validateTitle={validateTitle}
-							visible={visible}
-							onOk={onOk}
-							style={style}
-							onCancel={onCancel}
-							onChange={onChange}
-							onValid={onValid}
+							validateTitle={this.state.validateTitle}
+							visible={this.state.visible}
+							onOk={this.handlers.onOk}
+							style={this.state.style}
+							onCancel={this.handlers.onCancel}
+							onChange={this.handlers.onChange}
+							onValid={this.handlers.onValid}
 						/>
 					</Flex>
-					<StyleList styles={styles} onEdit={onEdit} onDelete={onDelete} />
+					<StyleList styles={this.props.styles} onEdit={this.handlers.onEdit} onDelete={this.handlers.onDelete} />
 				</Flex>
 			</Form>
 		);
diff --git a/src/editors/workflow/WorkflowConfigurations.tsx b/src/editors/workflow/WorkflowConfigurations.tsx
index b00cff16..41cc05db 100644
--- a/src/editors/workflow/WorkflowConfigurations.tsx
+++ b/src/editors/workflow/WorkflowConfigurations.tsx
@@ -16,12 +16,7 @@ interface IProps {
 }
 
 class WorkflowConfigurations extends Component<IProps> {
-	static propTypes = {
-		canvasRef: PropTypes.any,
-		selectedItem: PropTypes.object,
-		workflow: PropTypes.object,
-		onChange: PropTypes.func,
-	};
+	static propTypes;
 
 	state = {
 		collapse: false,
@@ -42,32 +37,30 @@ class WorkflowConfigurations extends Component<IProps> {
 	};
 
 	render() {
-		const { canvasRef, selectedItem, workflow, onChange } = this.props;
-		const { collapse, activeKey } = this.state;
 		const className = classnames('rde-editor-configurations', {
-			minimize: collapse,
+			minimize: this.state.collapse,
 		});
 		return (
 			<div className={className}>
 				<CommonButton
 					className="rde-action-btn"
 					shape="circle"
-					icon={collapse ? 'angle-double-left' : 'angle-double-right'}
+					icon={this.state.collapse ? 'angle-double-left' : 'angle-double-right'}
 					onClick={this.handlers.onCollapse}
 					style={{ position: 'absolute', top: 16, right: 16, zIndex: 1000 }}
 				/>
 				<Tabs
 					tabPosition="right"
-					activeKey={activeKey}
+					activeKey={this.state.activeKey}
 					onChange={this.handlers.onChange}
 					style={{ height: '100%' }}
 					tabBarStyle={{ marginTop: 60 }}
 				>
 					<Tabs.TabPane tab={<Icon name="cog" />} key="info">
-						<WorkflowInfo workflow={workflow} onChange={onChange} />
+						<WorkflowInfo workflow={this.props.workflow} onChange={this.props.onChange} />
 					</Tabs.TabPane>
 					<Tabs.TabPane tab={<Icon name="globe" />} key="variables">
-						<WorkflowGlobalParameters workflow={workflow} onChange={onChange} />
+						<WorkflowGlobalParameters workflow={this.props.workflow} onChange={this.props.onChange} />
 					</Tabs.TabPane>
 				</Tabs>
 			</div>
diff --git a/src/editors/workflow/WorkflowEditor.tsx b/src/editors/workflow/WorkflowEditor.tsx
index 13a4e8e6..add0264c 100644
--- a/src/editors/workflow/WorkflowEditor.tsx
+++ b/src/editors/workflow/WorkflowEditor.tsx
@@ -37,7 +37,7 @@ class WorkflowEditor extends Component {
 
 	canvasRef: CanvasInstance;
 	nodeConfigurationRef: any;
-	container: any;
+	container?: HTMLDivElement;
 
 	componentDidMount() {
 		import('./Descriptors.json').then(descriptors => {
diff --git a/src/editors/workflow/WorkflowGlobalParameters.tsx b/src/editors/workflow/WorkflowGlobalParameters.tsx
index d74aca35..c576ef00 100644
--- a/src/editors/workflow/WorkflowGlobalParameters.tsx
+++ b/src/editors/workflow/WorkflowGlobalParameters.tsx
@@ -19,6 +19,21 @@ const initSelectedVar = {
 	value: null,
 };
 
+const GetComponentByType = props => {
+	switch (props.type) {
+		case 'text':
+			return <Input />;
+		case 'number':
+			return <InputNumber />;
+		case 'boolean':
+			return <Switch />;
+		case 'json':
+			return <InputJson onValidate={props.handlers.onValidate} />;
+		default:
+			return <Input />;
+	}
+};
+
 class WorkflowGlobalParameters extends Component<IProps> {
 	state = {
 		types: ['text', 'number', 'boolean', 'json'],
@@ -29,21 +44,6 @@ class WorkflowGlobalParameters extends Component<IProps> {
 		errors: null,
 	};
 
-	getComponentByType = type => {
-		switch (type) {
-			case 'text':
-				return <Input />;
-			case 'number':
-				return <InputNumber />;
-			case 'boolean':
-				return <Switch />;
-			case 'json':
-				return <InputJson onValidate={this.handlers.onValidate} />;
-			default:
-				return <Input />;
-		}
-	};
-
 	getType = variable => {
 		if (typeof variable.value === 'number') {
 			return 'number';
@@ -282,7 +282,7 @@ class WorkflowGlobalParameters extends Component<IProps> {
 							initialValue: selectedVar.value,
 							rules,
 							valuePropName: selectedVar.type === 'boolean' ? 'checked' : 'value',
-						})(this.getComponentByType(selectedVar.type))}
+						})(<GetComponentByType item={selectedVar.type} handlers={this.handlers}/>)}
 					</Form.Item>
 				</Modal>
 			</WorkflowSiderContainer>
diff --git a/src/editors/workflow/WorkflowItems.tsx b/src/editors/workflow/WorkflowItems.tsx
index 33850dab..132c88dd 100644
--- a/src/editors/workflow/WorkflowItems.tsx
+++ b/src/editors/workflow/WorkflowItems.tsx
@@ -16,6 +16,30 @@ interface IProps {
 	descriptors: any;
 }
 
+const RenderItems = props => (
+	<Flex flexWrap="wrap" flexDirection="column" style={{ width: '100%' }}>
+		{props.items.map(item => (
+			<div
+				key={item.name}
+				draggable={true}
+				onClick={e => props.handlers.onAddItem(item)}
+				onDragStart={e => props.events.onDragStart(e, item)}
+				onDragEnd={e => props.events.onDragEnd(e, item)}
+				className="rde-editor-items-item"
+				style={{ justifyContent: props.collapse ? 'center' : null }}
+			>
+				<span className="rde-editor-items-item-icon">
+					<Icon
+						name={item.icon && item.icon.length ? item.icon : 'image'}
+						color={NODE_COLORS[item.type].fill}
+					/>
+				</span>
+				{props.collapse ? null : <span className="rde-editor-items-item-text">{item.name}</span>}
+			</div>
+		))}
+	</Flex>
+);
+
 class WorkflowItems extends Component<IProps> {
 	static propTypes = {
 		canvasRef: PropTypes.any,
@@ -168,30 +192,6 @@ class WorkflowItems extends Component<IProps> {
 		canvasRef.canvas.wrapperEl.removeEventListener('drop', this.events.onDrop);
 	};
 
-	renderItems = items => (
-		<Flex flexWrap="wrap" flexDirection="column" style={{ width: '100%' }}>
-			{items.map(item => (
-				<div
-					key={item.name}
-					draggable={true}
-					onClick={e => this.handlers.onAddItem(item)}
-					onDragStart={e => this.events.onDragStart(e, item)}
-					onDragEnd={e => this.events.onDragEnd(e, item)}
-					className="rde-editor-items-item"
-					style={{ justifyContent: this.state.collapse ? 'center' : null }}
-				>
-					<span className="rde-editor-items-item-icon">
-						<Icon
-							name={item.icon && item.icon.length ? item.icon : 'image'}
-							color={NODE_COLORS[item.type].fill}
-						/>
-					</span>
-					{this.state.collapse ? null : <span className="rde-editor-items-item-text">{item.name}</span>}
-				</div>
-			))}
-		</Flex>
-	);
-
 	render() {
 		const { descriptors } = this.props;
 		const { activeKey, filteredDescriptors, collapse, textSearch } = this.state;
@@ -222,7 +222,7 @@ class WorkflowItems extends Component<IProps> {
 					<Scrollbar>
 						<Flex flex="1" style={{ overflowY: 'hidden' }}>
 							{textSearch.length ? (
-								this.renderItems(filteredDescriptors)
+								<RenderItems items={filteredDescriptors} handlers={this.handlers} events={this.events} collpase={this.state.collapse} />
 							) : (
 								<Collapse
 									style={{ width: '100%' }}
@@ -236,7 +236,7 @@ class WorkflowItems extends Component<IProps> {
 											header={collapse ? '' : key}
 											showArrow={!collapse}
 										>
-											{this.renderItems(descriptors[key])}
+											<RenderItems items={descriptors[key]} handlers={this.handlers} events={this.events} collpase={this.state.collapse}/>
 										</Collapse.Panel>
 									))}
 								</Collapse>
diff --git a/src/editors/workflow/WorkflowSiderContainer.tsx b/src/editors/workflow/WorkflowSiderContainer.tsx
index 8f797a90..51242f26 100644
--- a/src/editors/workflow/WorkflowSiderContainer.tsx
+++ b/src/editors/workflow/WorkflowSiderContainer.tsx
@@ -12,42 +12,44 @@ interface IProps {
 	contentStyle?: React.CSSProperties;
 }
 
+class SomeProps {
+	children?
+	title?
+	content?
+	icon?
+	extra?
+	titleStyle? 
+	contentStyle?
+}
+
 class WorkflowSiderContainer extends Component<IProps> {
-	static propTypes = {
-		children: PropTypes.any,
-		title: PropTypes.string,
-		icon: PropTypes.string,
-		content: PropTypes.any,
-		extra: PropTypes.any,
-		titleStyle: PropTypes.object,
-		contentStyle: PropTypes.object,
-	};
+	static propType;
 
 	render() {
-		const { children, title, content, icon, extra, titleStyle, contentStyle } = this.props;
+		const attributes: SomeProps = this.props;
 		return (
 			<Flex flexDirection="column" style={{ height: '100%' }}>
-				<Flex style={Object.assign({}, { background: '#f5f4f3', height: '40px' }, titleStyle)}>
+				<Flex style={Object.assign({}, { background: '#f5f4f3', height: '40px' }, attributes.titleStyle)}>
 					<Flex
 						flex="1"
 						justifyContent="flex-start"
 						alignItems="center"
 						style={{ marginLeft: '8px', color: '#4d5360' }}
 					>
-						<Icon name={icon} style={{ marginRight: 8 }} />
-						<h4 style={{ marginBottom: 0 }}>{title}</h4>
+						<Icon name={attributes.icon} style={{ marginRight: 8 }} />
+						<h4 style={{ marginBottom: 0 }}>{attributes.title}</h4>
 					</Flex>
-					{extra ? (
+					{attributes.extra ? (
 						<Flex justifyContent="flex-end" alignItems="center">
-							{extra}
+							{attributes.extra}
 						</Flex>
 					) : null}
 				</Flex>
 				<Flex
 					flexDirection="column"
-					style={Object.assign({}, { height: '100%', margin: '8px 16px' }, contentStyle)}
+					style={Object.assign({}, { height: '100%', margin: '8px 16px' }, attributes.contentStyle)}
 				>
-					{children || content}
+					{attributes.children || attributes.content}
 				</Flex>
 			</Flex>
 		);
diff --git a/src/editors/workflow/workflowDescriptors.ts b/src/editors/workflow/workflowDescriptors.ts
new file mode 100644
index 00000000..b20343e0
--- /dev/null
+++ b/src/editors/workflow/workflowDescriptors.ts
@@ -0,0 +1,31 @@
+export type DescriptorsType = "TRIGGER" | "LOGIC" | "DATA" | "ACTION"
+
+export class WorkflowDescriptor {
+    name: string;
+    description: string;
+    type: DescriptorsType;
+    nodeClazz: string;
+    defaultConfiguration: {
+        scheduleType?: string;
+        interval?: number;
+        timeUnit?: string;
+        payload?: string;
+        outputCount?: number;
+        delaySec?: number;
+        jsScript?: string;
+        routes?: string[];
+        keyTemplate?: null;
+        resultPath: string;
+        operation: string;
+        valueTemplate?: null;
+        loggingLevel?: string;
+        messageTemplate?: null;
+        subjectTemplate?: string;
+        receiversTemplate?: string;
+        textTemplate?: string;
+    };
+    isEnabled: boolean;
+    outPortType: string;
+    outPorts: string[];
+    icon: string; 
+}
\ No newline at end of file
diff --git a/src/locales/locale.constant.json b/src/locales/locale.constant.json
index 966d0421..6049769b 100644
--- a/src/locales/locale.constant.json
+++ b/src/locales/locale.constant.json
@@ -122,6 +122,7 @@
 		"crop-save": "Save crop image",
 		"crop-cancel": "Cancel crop image",
 		"image-save": "Save Image",
+		"canvas-save": "Save Canvas",
 		"clone": "Clone",
 		"delete": "Delete",
 		"save": "Save",