@leafer-in/editor 1.7.0 → 1.9.0

package/dist/editor.js

@@ -1,79 +1,65 @@
 this.LeaferIN = this.LeaferIN || {};
-this.LeaferIN.editor = (function (exports, draw, core) {
-    'use strict';
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+this.LeaferIN.editor = function(exports, draw, core) {
+    "use strict";
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
-
     function toList(value) {
-        return value ? (value instanceof Array ? value : [value]) : [];
+        return value ? draw.isArray(value) ? value : [ value ] : [];
     }
     class EditorEvent extends draw.Event {
-        get list() { return toList(this.value); }
-        get oldList() { return toList(this.oldValue); }
+        get list() {
+            return toList(this.value);
+        }
+        get oldList() {
+            return toList(this.oldValue);
+        }
         constructor(type, data) {
             super(type);
-            if (data)
-                Object.assign(this, data);
+            if (data) Object.assign(this, data);
         }
     }
-    EditorEvent.BEFORE_SELECT = 'editor.before_select';
-    EditorEvent.SELECT = 'editor.select';
-    EditorEvent.AFTER_SELECT = 'editor.after_select';
-    EditorEvent.BEFORE_HOVER = 'editor.before_hover';
-    EditorEvent.HOVER = 'editor.hover';
-
+    EditorEvent.BEFORE_SELECT = "editor.before_select";
+    EditorEvent.SELECT = "editor.select";
+    EditorEvent.AFTER_SELECT = "editor.after_select";
+    EditorEvent.BEFORE_HOVER = "editor.before_hover";
+    EditorEvent.HOVER = "editor.hover";
     function targetAttr(fn) {
         return (target, key) => {
-            const privateKey = '_' + key;
+            const privateKey = "_" + key;
             draw.defineKey(target, key, {
-                get() { return this[privateKey]; },
+                get() {
+                    return this[privateKey];
+                },
                 set(value) {
                     const old = this[privateKey];
                     if (old !== value) {
                         if (this.config) {
-                            const isSelect = key === 'target';
+                            const isSelect = key === "target";
                             if (isSelect) {
-                                if (value instanceof Array && value.length > 1 && value[0].locked)
-                                    value.splice(0, 1);
-                                const { beforeSelect } = this.config;
+                                if (draw.isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
+                                if (this.single) this.element.syncEventer = null;
+                                const {beforeSelect: beforeSelect} = this.config;
                                 if (beforeSelect) {
-                                    const check = beforeSelect({ target: value });
-                                    if (typeof check === 'object')
-                                        value = check;
-                                    else if (check === false)
-                                        return;
+                                    const check = beforeSelect({
+                                        target: value
+                                    });
+                                    if (draw.isObject(check)) value = check; else if (check === false) return;
                                 }
                             }
                             const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
-                            if (this.hasEvent(type))
-                                this.emitEvent(new EditorEvent(type, { editor: this, value: value, oldValue: old }));
+                            if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
+                                editor: this,
+                                value: value,
+                                oldValue: old
+                            }));
                         }
                         this[privateKey] = value, fn(this, old);
                     }
@@ -85,16 +71,14 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         return (target, key) => {
             draw.defineKey(target, key, {
                 get() {
-                    const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
-                    if (element && element.editConfig)
-                        Object.assign(mergeConfig, element.editConfig);
+                    const {config: config, element: element, dragPoint: dragPoint, editBox: editBox} = this, mergeConfig = Object.assign({}, config);
+                    if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig);
+                    if (editBox.config) Object.assign(mergeConfig, editBox.config);
                     if (dragPoint) {
-                        if (dragPoint.editConfig)
-                            Object.assign(mergeConfig, dragPoint.editConfig);
-                        if (mergeConfig.editSize === 'font-size')
-                            mergeConfig.lockRatio = true;
-                        if (dragPoint.pointType === 'resize-rotate') {
-                            mergeConfig.around || (mergeConfig.around = 'center');
+                        if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig);
+                        if (mergeConfig.editSize === "font-size") mergeConfig.lockRatio = true;
+                        if (dragPoint.pointType === "resize-rotate") {
+                            mergeConfig.around || (mergeConfig.around = "center");
                             draw.isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
                         }
                     }
@@ -103,11 +87,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             });
         };
     }
-
-    const { abs } = Math;
-    const { copy: copy$1, scale } = draw.MatrixHelper;
-    const { setListWithFn } = draw.BoundsHelper;
-    const { worldBounds } = draw.LeafBoundsHelper;
+    const {abs: abs} = Math;
+    const {copy: copy$1, scale: scale} = draw.MatrixHelper;
+    const {setListWithFn: setListWithFn} = draw.BoundsHelper;
+    const {worldBounds: worldBounds} = draw.LeafBoundsHelper;
     const matrix = draw.getMatrixData();
     const bounds$1 = draw.getBoundsData();
     class Stroker extends draw.UI {
@@ -116,31 +99,30 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             this.list = [];
             this.visible = 0;
             this.hittable = false;
-            this.strokeAlign = 'center';
+            this.strokeAlign = "center";
         }
         setTarget(target, style) {
-            this.set(style);
+            if (style) this.set(style);
             this.target = target;
             this.update();
         }
-        update() {
-            const { list } = this;
+        update(style) {
+            const {list: list} = this;
             if (list.length) {
                 setListWithFn(bounds$1, list, worldBounds);
+                if (style) this.set(style);
                 this.set(bounds$1);
                 this.visible = true;
-            }
-            else
-                this.visible = 0;
+            } else this.visible = 0;
         }
         __draw(canvas, options) {
-            const { list } = this;
+            const {list: list} = this;
             if (list.length) {
                 let leaf;
-                const data = this.__, { stroke, strokeWidth, fill } = data, { bounds } = options;
+                const data = this.__, {stroke: stroke, strokeWidth: strokeWidth, fill: fill} = data, {bounds: bounds} = options;
                 for (let i = 0; i < list.length; i++) {
                     leaf = list[i];
-                    const { worldTransform, worldRenderBounds } = leaf;
+                    const {worldTransform: worldTransform, worldRenderBounds: worldRenderBounds} = leaf;
                     if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
                         const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
                         copy$1(matrix, worldTransform);
@@ -150,22 +132,16 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                             canvas.setWorld(matrix, options.matrix);
                             canvas.beginPath();
                             data.strokeWidth = strokeWidth;
-                            const { x, y, width, height } = leaf.__layout.boxBounds;
+                            const {x: x, y: y, width: width, height: height} = leaf.__layout.boxBounds;
                             canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
-                        }
-                        else {
+                        } else {
                             canvas.setWorld(matrix, options.matrix);
                             canvas.beginPath();
-                            if (leaf.__.__useArrow)
-                                leaf.__drawPath(canvas);
-                            else
-                                leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
+                            if (leaf.__.__useArrow) leaf.__drawPath(canvas); else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
                             data.strokeWidth = strokeWidth / abs(worldTransform.scaleX);
                         }
-                        if (stroke)
-                            typeof stroke === 'string' ? draw.Paint.stroke(stroke, this, canvas) : draw.Paint.strokes(stroke, this, canvas);
-                        if (fill)
-                            typeof fill === 'string' ? draw.Paint.fill(fill, this, canvas) : draw.Paint.fills(fill, this, canvas);
+                        if (stroke) draw.isString(stroke) ? draw.Paint.stroke(stroke, this, canvas) : draw.Paint.strokes(stroke, this, canvas);
+                        if (fill) draw.isString(fill) ? draw.Paint.fill(fill, this, canvas) : draw.Paint.fills(fill, this, canvas);
                     }
                 }
                 data.strokeWidth = strokeWidth;
@@ -176,42 +152,47 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super.destroy();
         }
     }
-    __decorate([
-        targetAttr(onTarget$1)
-    ], Stroker.prototype, "target", void 0);
+    __decorate([ targetAttr(onTarget$1) ], Stroker.prototype, "target", void 0);
     function onTarget$1(stroker) {
         const value = stroker.target;
-        stroker.list = value ? (value instanceof Array ? value : [value]) : [];
+        stroker.list = value ? draw.isArray(value) ? value : [ value ] : [];
     }
-
     class SelectArea extends draw.Group {
         constructor(data) {
             super(data);
-            this.strokeArea = new draw.Rect({ strokeAlign: 'center' });
-            this.fillArea = new draw.Rect();
+            this.strokeArea = new draw.Rect({
+                strokeAlign: "center"
+            });
+            this.fillArea = new draw.Rect;
             this.visible = 0;
             this.hittable = false;
             this.addMany(this.fillArea, this.strokeArea);
         }
         setStyle(style, userStyle) {
-            const { visible, stroke, strokeWidth } = style;
+            const {visible: visible, stroke: stroke, strokeWidth: strokeWidth} = style;
             this.visible = visible;
-            this.strokeArea.reset(Object.assign({ stroke, strokeWidth }, (userStyle || {})));
-            this.fillArea.reset({ visible: userStyle ? false : true, fill: stroke, opacity: 0.2 });
+            this.strokeArea.reset(Object.assign({
+                stroke: stroke,
+                strokeWidth: strokeWidth
+            }, userStyle || {}));
+            this.fillArea.reset({
+                visible: userStyle ? false : true,
+                fill: stroke,
+                opacity: .2
+            });
         }
         setBounds(bounds) {
             this.strokeArea.set(bounds);
             this.fillArea.set(bounds);
         }
     }
-
     const EditSelectHelper = {
         findOne(path) {
-            return path.list.find((leaf) => leaf.editable);
+            return path.list.find(leaf => leaf.editable);
         },
         findByBounds(branch, bounds) {
             const list = [];
-            eachFind([branch], list, bounds);
+            eachFind([ branch ], list, bounds);
             return list;
         }
     };
@@ -222,65 +203,70 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             if (data.hittable && data.visible && !data.locked && bounds.hit(child.__world)) {
                 if (data.editable) {
                     if (child.isBranch && !data.hitChildren) {
-                        if (data.hitSelf)
-                            list.push(child);
+                        if (data.hitSelf) list.push(child);
                         continue;
-                    }
-                    else if (child.isFrame) {
+                    } else if (child.isFrame) {
                         if (bounds.includes(child.__layout.boxBounds, child.__world)) {
                             list.push(child);
                             continue;
                         }
-                    }
-                    else if (bounds.hit(child.__layout.boxBounds, child.__world) && data.hitSelf)
-                        list.push(child);
+                    } else if (bounds.hit(child.__layout.boxBounds, child.__world) && data.hitSelf) list.push(child);
                 }
-                if (child.isBranch)
-                    eachFind(child.children, list, bounds);
+                if (child.isBranch) eachFind(child.children, list, bounds);
             }
         }
     }
-
-    const { findOne, findByBounds } = EditSelectHelper;
+    const {findOne: findOne, findByBounds: findByBounds} = EditSelectHelper;
     class EditSelect extends draw.Group {
-        get dragging() { return !!this.originList; }
-        get running() { const { editor } = this; return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector; }
-        get isMoveMode() { return this.app && this.app.interaction.moveMode; }
+        get dragging() {
+            return !!this.originList;
+        }
+        get running() {
+            const {editor: editor} = this;
+            return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector;
+        }
+        get isMoveMode() {
+            return this.app && this.app.interaction.moveMode;
+        }
         constructor(editor) {
             super();
-            this.hoverStroker = new Stroker();
-            this.targetStroker = new Stroker();
-            this.bounds = new draw.Bounds();
-            this.selectArea = new SelectArea();
+            this.hoverStroker = new Stroker;
+            this.targetStroker = new Stroker;
+            this.bounds = new draw.Bounds;
+            this.selectArea = new SelectArea;
             this.__eventIds = [];
             this.editor = editor;
             this.addMany(this.targetStroker, this.hoverStroker, this.selectArea);
             this.__listenEvents();
         }
         onHover() {
-            const { editor } = this;
+            const {editor: editor} = this;
             if (this.running && !this.dragging && !editor.dragging) {
-                const { stroke, strokeWidth, hover, hoverStyle } = editor.mergeConfig;
-                this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, Object.assign({ stroke, strokeWidth }, (hoverStyle || {})));
-            }
-            else {
+                const {stroke: stroke, strokeWidth: strokeWidth, hover: hover, hoverStyle: hoverStyle} = editor.mergeConfig;
+                this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, Object.assign({
+                    stroke: stroke,
+                    strokeWidth: strokeWidth
+                }, hoverStyle || {}));
+            } else {
                 this.hoverStroker.target = null;
             }
         }
         onSelect() {
             if (this.running) {
-                const { mergeConfig, list } = this.editor;
-                const { stroke, strokeWidth, selectedStyle } = mergeConfig;
-                this.targetStroker.setTarget(list, Object.assign({ stroke, strokeWidth: Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
+                this.targetStroker.setTarget(this.editor.list);
                 this.hoverStroker.target = null;
             }
         }
         update() {
             this.hoverStroker.update();
-            this.targetStroker.update();
+            const {stroke: stroke, strokeWidth: strokeWidth, selectedStyle: selectedStyle} = this.editor.mergedConfig;
+            this.targetStroker.update(Object.assign({
+                stroke: stroke,
+                strokeWidth: strokeWidth && Math.max(1, strokeWidth / 2)
+            }, selectedStyle || {}));
         }
         onPointerMove(e) {
-            const { app, editor } = this;
+            const {app: app, editor: editor} = this;
             if (this.running && !this.isMoveMode && app.interaction.canHover && !app.interaction.dragging) {
                 const find = this.findUI(e);
                 editor.hoverTarget = editor.hasItem(find) ? null : find;
@@ -290,78 +276,66 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         onBeforeDown(e) {
-            if (e.multiTouch)
-                return;
-            const { select } = this.editor.mergeConfig;
-            if (select === 'press') {
+            if (e.multiTouch) return;
+            const {select: select} = this.editor.mergeConfig;
+            if (select === "press") {
                 if (this.app.config.mobile) {
                     this.waitSelect = () => this.checkAndSelect(e);
-                }
-                else {
+                } else {
                     this.checkAndSelect(e);
                 }
             }
         }
         onTap(e) {
-            if (e.multiTouch)
-                return;
-            const { editor } = this;
-            const { select } = editor.mergeConfig;
-            if (select === 'tap')
-                this.checkAndSelect(e);
-            else if (this.waitSelect)
-                this.waitSelect();
+            if (e.multiTouch) return;
+            const {editor: editor} = this;
+            const {select: select} = editor.mergeConfig;
+            if (select === "tap") this.checkAndSelect(e); else if (this.waitSelect) this.waitSelect();
             if (this.needRemoveItem) {
                 editor.removeItem(this.needRemoveItem);
-            }
-            else if (this.isMoveMode) {
+            } else if (this.isMoveMode) {
                 editor.target = null;
             }
         }
         checkAndSelect(e) {
             this.needRemoveItem = null;
             if (this.allowSelect(e)) {
-                const { editor } = this;
+                const {editor: editor} = this;
                 const find = this.findUI(e);
                 if (find) {
                     if (this.isMultipleSelect(e)) {
-                        if (editor.hasItem(find))
-                            this.needRemoveItem = find;
-                        else
-                            editor.addItem(find);
-                    }
-                    else {
+                        if (editor.hasItem(find)) this.needRemoveItem = find; else editor.addItem(find);
+                    } else {
                         editor.target = find;
                     }
-                }
-                else if (this.allow(e.target)) {
-                    if (!e.shiftKey)
-                        editor.target = null;
+                } else if (this.allow(e.target)) {
+                    if (!this.isHoldMultipleSelectKey(e)) editor.target = null;
                 }
             }
         }
         onDragStart(e) {
-            if (e.multiTouch)
-                return;
-            if (this.waitSelect)
-                this.waitSelect();
+            if (e.multiTouch) return;
+            if (this.waitSelect) this.waitSelect();
             if (this.allowDrag(e)) {
-                const { editor } = this;
-                const { stroke, area } = editor.mergeConfig;
-                const { x, y } = e.getInnerPoint(this);
+                const {editor: editor} = this;
+                const {stroke: stroke, area: area} = editor.mergeConfig;
+                const {x: x, y: y} = e.getInnerPoint(this);
                 this.bounds.set(x, y);
-                this.selectArea.setStyle({ visible: true, stroke, x, y }, area);
+                this.selectArea.setStyle({
+                    visible: true,
+                    stroke: stroke,
+                    x: x,
+                    y: y
+                }, area);
                 this.selectArea.setBounds(this.bounds.get());
                 this.originList = editor.leafList.clone();
             }
         }
         onDrag(e) {
-            if (e.multiTouch)
-                return;
-            if (this.editor.dragging)
-                return this.onDragEnd(e);
+            if (e.multiTouch) return;
+            if (this.editor.dragging) return this.onDragEnd(e);
             if (this.dragging) {
-                const { editor } = this;
+                const {editor: editor} = this;
                 const total = e.getInnerTotal(this);
                 const dragBounds = this.bounds.clone().unsign();
                 const list = new draw.LeafList(findByBounds(editor.app, dragBounds));
@@ -370,28 +344,27 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 this.selectArea.setBounds(dragBounds.get());
                 if (list.length) {
                     const selectList = [];
-                    this.originList.forEach(item => { if (!list.has(item))
-                        selectList.push(item); });
-                    list.forEach(item => { if (!this.originList.has(item))
-                        selectList.push(item); });
+                    this.originList.forEach(item => {
+                        if (!list.has(item)) selectList.push(item);
+                    });
+                    list.forEach(item => {
+                        if (!this.originList.has(item)) selectList.push(item);
+                    });
                     if (selectList.length !== editor.list.length || editor.list.some((child, index) => child !== selectList[index])) {
                         editor.target = selectList;
                     }
-                }
-                else {
+                } else {
                     editor.target = this.originList.list;
                 }
             }
         }
         onDragEnd(e) {
-            if (e.multiTouch)
-                return;
-            if (this.dragging)
-                this.originList = null, this.selectArea.visible = 0;
+            if (e.multiTouch) return;
+            if (this.dragging) this.originList = null, this.selectArea.visible = 0;
         }
         onAutoMove(e) {
             if (this.dragging) {
-                const { x, y } = e.getLocalMove(this);
+                const {x: x, y: y} = e.getLocalMove(this);
                 this.bounds.x += x;
                 this.bounds.y += y;
             }
@@ -400,11 +373,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             return target.leafer !== this.editor.leafer;
         }
         allowDrag(e) {
-            const { boxSelect, multipleSelect } = this.editor.mergeConfig;
+            const {boxSelect: boxSelect, multipleSelect: multipleSelect} = this.editor.mergeConfig;
             if (this.running && (multipleSelect && boxSelect) && !e.target.draggable) {
-                return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
-            }
-            else {
+                return !this.editor.editing && this.allow(e.target) || this.isHoldMultipleSelectKey(e) && !findOne(e.path);
+            } else {
                 return false;
             }
         }
@@ -412,37 +384,31 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             return this.running && !this.isMoveMode && !e.middle;
         }
         findDeepOne(e) {
-            const options = { exclude: new draw.LeafList(this.editor.editBox.rect) };
+            const options = {
+                exclude: new draw.LeafList(this.editor.editBox.rect)
+            };
             return findOne(e.target.leafer.interaction.findPath(e, options));
         }
         findUI(e) {
             return this.isMultipleSelect(e) ? this.findDeepOne(e) : findOne(e.path);
         }
         isMultipleSelect(e) {
-            const { multipleSelect, continuousSelect } = this.editor.mergeConfig;
-            return multipleSelect && (e.shiftKey || continuousSelect);
+            const {multipleSelect: multipleSelect, continuousSelect: continuousSelect} = this.editor.mergeConfig;
+            return multipleSelect && (this.isHoldMultipleSelectKey(e) || continuousSelect);
+        }
+        isHoldMultipleSelectKey(e) {
+            const {multipleSelectKey: multipleSelectKey} = this.editor.mergedConfig;
+            if (multipleSelectKey) return e.isHoldKeys(multipleSelectKey);
+            return e.shiftKey;
         }
         __listenEvents() {
-            const { editor } = this;
+            const {editor: editor} = this;
             editor.waitLeafer(() => {
-                const { app } = editor;
+                const {app: app} = editor;
                 app.selector.proxy = editor;
-                this.__eventIds = [
-                    editor.on_([
-                        [EditorEvent.HOVER, this.onHover, this],
-                        [EditorEvent.SELECT, this.onSelect, this]
-                    ]),
-                    app.on_([
-                        [core.PointerEvent.MOVE, this.onPointerMove, this],
-                        [core.PointerEvent.BEFORE_DOWN, this.onBeforeDown, this],
-                        [core.PointerEvent.TAP, this.onTap, this],
-                        [core.DragEvent.START, this.onDragStart, this, true],
-                        [core.DragEvent.DRAG, this.onDrag, this],
-                        [core.DragEvent.END, this.onDragEnd, this],
-                        [core.MoveEvent.MOVE, this.onAutoMove, this],
-                        [[core.ZoomEvent.ZOOM, core.MoveEvent.MOVE], () => { this.editor.hoverTarget = null; }],
-                    ])
-                ];
+                this.__eventIds = [ editor.on_([ [ EditorEvent.HOVER, this.onHover, this ], [ EditorEvent.SELECT, this.onSelect, this ] ]), app.on_([ [ core.PointerEvent.MOVE, this.onPointerMove, this ], [ core.PointerEvent.BEFORE_DOWN, this.onBeforeDown, this ], [ core.PointerEvent.TAP, this.onTap, this ], [ core.DragEvent.START, this.onDragStart, this, true ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.MoveEvent.MOVE, this.onAutoMove, this ], [ [ core.ZoomEvent.ZOOM, core.MoveEvent.MOVE ], () => {
+                    this.editor.hoverTarget = null;
+                } ] ]) ];
             });
         }
         __removeListenEvents() {
@@ -454,15 +420,14 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super.destroy();
         }
     }
-
-    const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = draw.Direction9;
-    const { toPoint } = draw.AroundHelper;
-    const { within } = draw.MathHelper;
+    const {topLeft: topLeft, top: top, topRight: topRight, right: right$1, bottomRight: bottomRight, bottom: bottom, bottomLeft: bottomLeft, left: left$1} = draw.Direction9;
+    const {toPoint: toPoint} = draw.AroundHelper;
+    const {within: within} = draw.MathHelper;
     const EditDataHelper = {
         getScaleData(target, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
             let align, origin = {}, scaleX = 1, scaleY = 1;
-            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = target;
-            const { width, height } = startBounds;
+            const {boxBounds: boxBounds, widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldBoxBounds: worldBoxBounds} = target;
+            const {width: width, height: height} = startBounds;
             if (around) {
                 totalMove.x *= 2;
                 totalMove.y *= 2;
@@ -480,88 +445,92 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             const bottomScale = (totalMove.y + height) / height;
             const leftScale = (-totalMove.x + width) / width;
             switch (direction) {
-                case top:
-                    scaleY = topScale;
-                    align = 'bottom';
-                    break;
-                case right$1:
-                    scaleX = rightScale;
-                    align = 'left';
-                    break;
-                case bottom:
-                    scaleY = bottomScale;
-                    align = 'top';
-                    break;
-                case left$1:
-                    scaleX = leftScale;
-                    align = 'right';
-                    break;
-                case topLeft:
-                    scaleY = topScale;
-                    scaleX = leftScale;
-                    align = 'bottom-right';
-                    break;
-                case topRight:
-                    scaleY = topScale;
-                    scaleX = rightScale;
-                    align = 'bottom-left';
-                    break;
-                case bottomRight:
-                    scaleY = bottomScale;
-                    scaleX = rightScale;
-                    align = 'top-left';
-                    break;
-                case bottomLeft:
-                    scaleY = bottomScale;
-                    scaleX = leftScale;
-                    align = 'top-right';
+              case top:
+                scaleY = topScale;
+                align = "bottom";
+                break;
+
+              case right$1:
+                scaleX = rightScale;
+                align = "left";
+                break;
+
+              case bottom:
+                scaleY = bottomScale;
+                align = "top";
+                break;
+
+              case left$1:
+                scaleX = leftScale;
+                align = "right";
+                break;
+
+              case topLeft:
+                scaleY = topScale;
+                scaleX = leftScale;
+                align = "bottom-right";
+                break;
+
+              case topRight:
+                scaleY = topScale;
+                scaleX = rightScale;
+                align = "bottom-left";
+                break;
+
+              case bottomRight:
+                scaleY = bottomScale;
+                scaleX = rightScale;
+                align = "top-left";
+                break;
+
+              case bottomLeft:
+                scaleY = bottomScale;
+                scaleX = leftScale;
+                align = "top-right";
             }
             if (lockRatio) {
-                if (lockRatio === 'corner' && direction % 2) {
+                if (lockRatio === "corner" && direction % 2) {
                     lockRatio = false;
-                }
-                else {
+                } else {
                     let scale;
                     switch (direction) {
-                        case top:
-                        case bottom:
-                            scale = scaleY;
-                            break;
-                        case left$1:
-                        case right$1:
-                            scale = scaleX;
-                            break;
-                        default:
-                            scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                      case top:
+                      case bottom:
+                        scale = scaleY;
+                        break;
+
+                      case left$1:
+                      case right$1:
+                        scale = scaleX;
+                        break;
+
+                      default:
+                        scale = Math.sqrt(Math.abs(scaleX * scaleY));
                     }
                     scaleX = scaleX < 0 ? -scale : scale;
                     scaleY = scaleY < 0 ? -scale : scale;
                 }
             }
             const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1;
-            if (useScaleX)
-                scaleX /= changedScaleX;
-            if (useScaleY)
-                scaleY /= changedScaleY;
+            if (useScaleX) scaleX /= changedScaleX;
+            if (useScaleY) scaleY /= changedScaleY;
             if (!flipable) {
-                const { worldTransform } = target;
-                if (scaleX < 0)
-                    scaleX = 1 / boxBounds.width / worldTransform.scaleX;
-                if (scaleY < 0)
-                    scaleY = 1 / boxBounds.height / worldTransform.scaleY;
+                const {worldTransform: worldTransform} = target;
+                if (scaleX < 0) scaleX = 1 / boxBounds.width / worldTransform.scaleX;
+                if (scaleY < 0) scaleY = 1 / boxBounds.height / worldTransform.scaleY;
             }
             toPoint(around || align, boxBounds, origin, true);
             if (dragBounds) {
-                const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds;
-                const localBounds = new draw.Bounds(target.__localBoxBounds);
-                localBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
-                if (!draw.BoundsHelper.includes(allowBounds, localBounds)) {
-                    const realBounds = localBounds.getIntersect(allowBounds);
-                    const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
-                    if (useScaleX)
-                        scaleX *= fitScaleX;
-                    if (useScaleY)
-                        scaleY *= fitScaleY;
+                const allowBounds = dragBounds === "parent" ? target.parent.boxBounds : dragBounds;
+                const childBounds = new draw.Bounds(target.__localBoxBounds);
+                if (draw.BoundsHelper.includes(new draw.Bounds(allowBounds).spread(.1), childBounds)) {
+                    childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
+                    if (!draw.BoundsHelper.includes(allowBounds, childBounds)) {
+                        const realBounds = childBounds.getIntersect(allowBounds);
+                        const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height;
+                        if (useScaleX) scaleX *= fitScaleX;
+                        if (useScaleY) scaleY *= fitScaleY;
+                    }
                 }
             }
             if (useScaleX && widthRange) {
@@ -572,195 +541,275 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 const nowHeight = boxBounds.height * target.scaleY;
                 scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
             }
-            if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
-                scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
-            if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1)
-                scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
-            if (lockRatio && scaleX !== scaleY)
-                scaleY = scaleX = Math.min(scaleX, scaleY);
-            return { origin, scaleX, scaleY, direction, lockRatio, around };
+            if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1) scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
+            if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1) scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
+            if (lockRatio && scaleX !== scaleY) scaleY = scaleX = Math.min(scaleX, scaleY);
+            return {
+                origin: origin,
+                scaleX: scaleX,
+                scaleY: scaleY,
+                direction: direction,
+                lockRatio: lockRatio,
+                around: around
+            };
         },
         getRotateData(target, direction, current, last, around) {
             let align, origin = {};
             switch (direction) {
-                case topLeft:
-                    align = 'bottom-right';
-                    break;
-                case topRight:
-                    align = 'bottom-left';
-                    break;
-                case bottomRight:
-                    align = 'top-left';
-                    break;
-                case bottomLeft:
-                    align = 'top-right';
-                    break;
-                default:
-                    align = 'center';
+              case topLeft:
+                align = "bottom-right";
+                break;
+
+              case topRight:
+                align = "bottom-left";
+                break;
+
+              case bottomRight:
+                align = "top-left";
+                break;
+
+              case bottomLeft:
+                align = "top-right";
+                break;
+
+              default:
+                align = "center";
             }
             toPoint(around || align, target.boxBounds, origin, true);
-            return { origin, rotation: draw.PointHelper.getRotation(last, target.getWorldPointByBox(origin), current) };
+            return {
+                origin: origin,
+                rotation: draw.PointHelper.getRotation(last, target.getWorldPointByBox(origin), current)
+            };
         },
         getSkewData(bounds, direction, move, around) {
             let align, origin = {}, skewX = 0, skewY = 0;
             let last;
             switch (direction) {
-                case top:
-                case topLeft:
-                    last = { x: 0.5, y: 0 };
-                    align = 'bottom';
-                    skewX = 1;
-                    break;
-                case bottom:
-                case bottomRight:
-                    last = { x: 0.5, y: 1 };
-                    align = 'top';
-                    skewX = 1;
-                    break;
-                case left$1:
-                case bottomLeft:
-                    last = { x: 0, y: 0.5 };
-                    align = 'right';
-                    skewY = 1;
-                    break;
-                case right$1:
-                case topRight:
-                    last = { x: 1, y: 0.5 };
-                    align = 'left';
-                    skewY = 1;
-            }
-            const { width, height } = bounds;
+              case top:
+              case topLeft:
+                last = {
+                    x: .5,
+                    y: 0
+                };
+                align = "bottom";
+                skewX = 1;
+                break;
+
+              case bottom:
+              case bottomRight:
+                last = {
+                    x: .5,
+                    y: 1
+                };
+                align = "top";
+                skewX = 1;
+                break;
+
+              case left$1:
+              case bottomLeft:
+                last = {
+                    x: 0,
+                    y: .5
+                };
+                align = "right";
+                skewY = 1;
+                break;
+
+              case right$1:
+              case topRight:
+                last = {
+                    x: 1,
+                    y: .5
+                };
+                align = "left";
+                skewY = 1;
+            }
+            const {width: width, height: height} = bounds;
             last.x = last.x * width;
             last.y = last.y * height;
             toPoint(around || align, bounds, origin, true);
-            const rotation = draw.PointHelper.getRotation(last, origin, { x: last.x + (skewX ? move.x : 0), y: last.y + (skewY ? move.y : 0) });
+            const rotation = draw.PointHelper.getRotation(last, origin, {
+                x: last.x + (skewX ? move.x : 0),
+                y: last.y + (skewY ? move.y : 0)
+            });
             skewX ? skewX = -rotation : skewY = rotation;
-            return { origin, skewX, skewY };
+            return {
+                origin: origin,
+                skewX: skewX,
+                skewY: skewY
+            };
         },
         getAround(around, altKey) {
-            return (altKey && !around) ? 'center' : around;
+            return altKey && !around ? "center" : around;
         },
         getRotateDirection(direction, rotation, totalDirection = 8) {
             direction = (direction + Math.round(rotation / (360 / totalDirection))) % totalDirection;
-            if (direction < 0)
-                direction += totalDirection;
+            if (direction < 0) direction += totalDirection;
             return direction;
         },
         getFlipDirection(direction, flipedX, flipedY) {
             if (flipedX) {
                 switch (direction) {
-                    case left$1:
-                        direction = right$1;
-                        break;
-                    case topLeft:
-                        direction = topRight;
-                        break;
-                    case bottomLeft:
-                        direction = bottomRight;
-                        break;
-                    case right$1:
-                        direction = left$1;
-                        break;
-                    case topRight:
-                        direction = topLeft;
-                        break;
-                    case bottomRight:
-                        direction = bottomLeft;
-                        break;
+                  case left$1:
+                    direction = right$1;
+                    break;
+
+                  case topLeft:
+                    direction = topRight;
+                    break;
+
+                  case bottomLeft:
+                    direction = bottomRight;
+                    break;
+
+                  case right$1:
+                    direction = left$1;
+                    break;
+
+                  case topRight:
+                    direction = topLeft;
+                    break;
+
+                  case bottomRight:
+                    direction = bottomLeft;
+                    break;
                 }
             }
             if (flipedY) {
                 switch (direction) {
-                    case top:
-                        direction = bottom;
-                        break;
-                    case topLeft:
-                        direction = bottomLeft;
-                        break;
-                    case topRight:
-                        direction = bottomRight;
-                        break;
-                    case bottom:
-                        direction = top;
-                        break;
-                    case bottomLeft:
-                        direction = topLeft;
-                        break;
-                    case bottomRight:
-                        direction = topRight;
-                        break;
+                  case top:
+                    direction = bottom;
+                    break;
+
+                  case topLeft:
+                    direction = bottomLeft;
+                    break;
+
+                  case topRight:
+                    direction = bottomRight;
+                    break;
+
+                  case bottom:
+                    direction = top;
+                    break;
+
+                  case bottomLeft:
+                    direction = topLeft;
+                    break;
+
+                  case bottomRight:
+                    direction = topRight;
+                    break;
                 }
             }
             return direction;
         }
     };
-
     const cacheCursors = {};
-    function updateCursor(editBox, e) {
-        const { enterPoint: point } = editBox;
-        if (!point || !editBox.editor.editing || !editBox.visible)
-            return;
-        if (point.name === 'circle')
-            return;
-        if (point.pointType === 'button') {
-            if (!point.cursor)
-                point.cursor = 'pointer';
+    function updatePointCursor(editBox, e) {
+        const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
+        if (!point || !editBox.editor.editing || !editBox.canUse) return;
+        if (point.name === "circle") return;
+        if (point.pointType === "button") {
+            if (!point.cursor) point.cursor = "pointer";
             return;
         }
-        let { rotation, flippedX, flippedY } = editBox;
-        const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig;
-        let showResize = pointType.includes('resize');
-        if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
-            showResize = false;
-        const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew');
-        const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor);
+        let {rotation: rotation} = editBox;
+        const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
+        let showResize = pointType.includes("resize");
+        if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
+        const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
+        const cursor = dragging ? skewing ? skewCursor : resizing ? resizeCursor : rotateCursor : showSkew ? skewCursor : showResize ? resizeCursor : rotateCursor;
         rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45;
         rotation = Math.round(draw.MathHelper.formatRotation(rotation, true) / 2) * 2;
-        const { url, x, y } = cursor;
+        const {url: url, x: x, y: y} = cursor;
         const key = url + rotation;
         if (cacheCursors[key]) {
             point.cursor = cacheCursors[key];
-        }
-        else {
-            cacheCursors[key] = point.cursor = { url: toDataURL(url, rotation), x, y };
+        } else {
+            cacheCursors[key] = point.cursor = {
+                url: toDataURL(url, rotation),
+                x: x,
+                y: y
+            };
         }
     }
     function updateMoveCursor(editBox) {
-        const { moveCursor, moveable } = editBox.mergeConfig;
-        editBox.rect.cursor = moveable ? moveCursor : undefined;
+        const {moveCursor: moveCursor, moveable: moveable} = editBox.mergeConfig;
+        if (editBox.canUse) editBox.rect.cursor = moveable ? moveCursor : undefined;
     }
     function toDataURL(svg, rotation) {
-        return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
+        return '"data:image/svg+xml,' + encodeURIComponent(svg.replace("{{rotation}}", rotation.toString())) + '"';
     }
-
     class EditPoint extends draw.Box {
         constructor(data) {
             super(data);
             this.useFastShadow = true;
         }
     }
-
-    const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
+    const fourDirection = [ "top", "right", "bottom", "left" ], editConfig = undefined;
     class EditBox extends draw.Group {
         get mergeConfig() {
-            const { config } = this, { mergeConfig } = this.editor;
-            return this.mergedConfig = config ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
-        }
-        get target() { return this._target || this.editor.element; }
-        set target(target) { this._target = target; }
-        get single() { return !!this._target || this.editor.single; }
-        get transformTool() { return this._transformTool || this.editor; }
-        set transformTool(tool) { this._transformTool = tool; }
-        get flipped() { return this.flippedX || this.flippedY; }
-        get flippedX() { return this.scaleX < 0; }
-        get flippedY() { return this.scaleY < 0; }
-        get flippedOne() { return this.scaleX * this.scaleY < 0; }
+            const {config: config} = this, {mergeConfig: mergeConfig, editBox: editBox} = this.editor;
+            return this.mergedConfig = config && editBox !== this ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
+        }
+        get target() {
+            return this._target || this.editor.element;
+        }
+        set target(target) {
+            this._target = target;
+        }
+        get single() {
+            return !!this._target || this.editor.single;
+        }
+        get transformTool() {
+            return this._transformTool || this.editor;
+        }
+        set transformTool(tool) {
+            this._transformTool = tool;
+        }
+        get flipped() {
+            return this.flippedX || this.flippedY;
+        }
+        get flippedX() {
+            return this.scaleX < 0;
+        }
+        get flippedY() {
+            return this.scaleY < 0;
+        }
+        get flippedOne() {
+            return this.scaleX * this.scaleY < 0;
+        }
+        get canUse() {
+            return this.visible && this.view.visible;
+        }
+        get canGesture() {
+            if (!this.canUse) return false;
+            const {moveable: moveable, resizeable: resizeable, rotateable: rotateable} = this.mergeConfig;
+            return draw.isString(moveable) || draw.isString(resizeable) || draw.isString(rotateable);
+        }
         constructor(editor) {
             super();
-            this.view = new draw.Group();
-            this.rect = new draw.Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 });
-            this.circle = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 });
-            this.buttons = new draw.Group({ around: 'center', hitSelf: false, visible: 0 });
+            this.view = new draw.Group;
+            this.rect = new draw.Box({
+                name: "rect",
+                hitFill: "all",
+                hitStroke: "none",
+                strokeAlign: "center",
+                hitRadius: 5
+            });
+            this.circle = new EditPoint({
+                name: "circle",
+                strokeAlign: "center",
+                around: "center",
+                cursor: "crosshair",
+                hitRadius: 5
+            });
+            this.buttons = new draw.Group({
+                around: "center",
+                hitSelf: false,
+                visible: 0
+            });
             this.resizePoints = [];
             this.rotatePoints = [];
             this.resizeLines = [];
@@ -773,259 +822,325 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         create() {
             let rotatePoint, resizeLine, resizePoint;
-            const { view, resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this;
-            const arounds = ['bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', 'top', 'top-right', 'right'];
+            const {view: view, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines, rect: rect, circle: circle, buttons: buttons} = this;
+            const arounds = [ "bottom-right", "bottom", "bottom-left", "left", "top-left", "top", "top-right", "right" ];
             for (let i = 0; i < 8; i++) {
-                rotatePoint = new EditPoint({ name: 'rotate-point', around: arounds[i], width: 15, height: 15, hitFill: "all" });
+                rotatePoint = new EditPoint({
+                    name: "rotate-point",
+                    around: arounds[i],
+                    width: 15,
+                    height: 15,
+                    hitFill: "all"
+                });
                 rotatePoints.push(rotatePoint);
-                this.listenPointEvents(rotatePoint, 'rotate', i);
+                this.listenPointEvents(rotatePoint, "rotate", i);
                 if (i % 2) {
-                    resizeLine = new EditPoint({ name: 'resize-line', around: 'center', width: 10, height: 10, hitFill: "all" });
+                    resizeLine = new EditPoint({
+                        name: "resize-line",
+                        around: "center",
+                        width: 10,
+                        height: 10,
+                        hitFill: "all"
+                    });
                     resizeLines.push(resizeLine);
-                    this.listenPointEvents(resizeLine, 'resize', i);
+                    this.listenPointEvents(resizeLine, "resize", i);
                 }
-                resizePoint = new EditPoint({ name: 'resize-point', hitRadius: 5 });
+                resizePoint = new EditPoint({
+                    name: "resize-point",
+                    hitRadius: 5
+                });
                 resizePoints.push(resizePoint);
-                this.listenPointEvents(resizePoint, 'resize', i);
+                this.listenPointEvents(resizePoint, "resize", i);
             }
-            this.listenPointEvents(circle, 'rotate', 2);
+            this.listenPointEvents(circle, "rotate", 2);
             view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
             this.add(view);
         }
         load() {
-            const { target, mergeConfig, single, rect, circle, resizePoints } = this;
-            const { stroke, strokeWidth } = mergeConfig;
+            const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
+            const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
+            this.visible = !target.locked;
             let resizeP;
             for (let i = 0; i < 8; i++) {
                 resizeP = resizePoints[i];
-                resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]));
-                if (!(i % 2))
-                    resizeP.rotation = (i / 2) * 90;
+                resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
+                resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
             }
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
-            rect.set(Object.assign({ stroke, strokeWidth, editConfig }, (mergeConfig.rect || {})));
+            rect.set(Object.assign({
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                editConfig: editConfig
+            }, mergeConfig.rect || {}));
             const syncEventer = single && this.transformTool.editTool;
             rect.hittable = !syncEventer;
             rect.syncEventer = syncEventer && this.editor;
             if (syncEventer) {
                 target.syncEventer = rect;
-                this.app.interaction.bottomList = [{ target: rect, proxy: target }];
+                this.app.interaction.bottomList = [ {
+                    target: rect,
+                    proxy: target
+                } ];
             }
             updateMoveCursor(this);
         }
         update() {
-            const { editor } = this;
-            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = this.target.getLayoutBounds('box', editor, true);
-            this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
-            this.updateBounds({ x: 0, y: 0, width, height });
+            const {editor: editor} = this;
+            const {x: x, y: y, scaleX: scaleX, scaleY: scaleY, rotation: rotation, skewX: skewX, skewY: skewY, width: width, height: height} = this.target.getLayoutBounds("box", editor, true);
+            this.visible = !this.target.locked;
+            this.set({
+                x: x,
+                y: y,
+                scaleX: scaleX,
+                scaleY: scaleY,
+                rotation: rotation,
+                skewX: skewX,
+                skewY: skewY
+            });
+            this.updateBounds({
+                x: 0,
+                y: 0,
+                width: width,
+                height: height
+            });
+        }
+        unload() {
+            this.visible = false;
+            if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
         }
         updateBounds(bounds) {
-            const { editMask } = this.editor;
-            const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
-            const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
-            this.visible = !this.target.locked;
+            const {editMask: editMask} = this.editor;
+            const {mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
+            const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
             editMask.visible = mask ? true : 0;
+            if (spread) draw.BoundsHelper.spread(bounds, spread);
             if (this.view.worldOpacity) {
-                const { width, height } = bounds;
-                const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
+                const {width: width, height: height} = bounds;
+                const smallSize = draw.isNumber(hideOnSmall) ? hideOnSmall : 10;
                 const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
                 let point = {}, rotateP, resizeP, resizeL;
                 for (let i = 0; i < 8; i++) {
                     draw.AroundHelper.toPoint(draw.AroundHelper.directionData[i], bounds, point);
                     resizeP = resizePoints[i];
                     rotateP = rotatePoints[i];
-                    resizeL = resizeLines[Math.floor(i / 2)];
                     resizeP.set(point);
                     rotateP.set(point);
-                    resizeL.set(point);
-                    resizeP.visible = resizeL.visible = showPoints && !!(resizeable || rotateable);
-                    rotateP.visible = showPoints && rotateable && resizeable && !mergeConfig.rotatePoint;
+                    resizeP.visible = showPoints && !!(resizeable || rotateable);
+                    rotateP.visible = showPoints && rotateable && resizeable && !hideRotatePoints;
                     if (i % 2) {
+                        resizeL = resizeLines[(i - 1) / 2];
+                        resizeL.set(point);
+                        resizeL.visible = resizeP.visible && !hideResizeLines;
                         resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
-                        if (((i + 1) / 2) % 2) {
+                        if ((i + 1) / 2 % 2) {
                             resizeL.width = width;
-                            if (hideOnSmall && resizeP.width * 2 > width)
-                                resizeP.visible = false;
-                        }
-                        else {
+                            if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
+                        } else {
                             resizeL.height = height;
-                            resizeP.rotation = 90;
-                            if (hideOnSmall && resizeP.width * 2 > height)
-                                resizeP.visible = false;
+                            if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
                         }
                     }
                 }
                 circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
-                if (circle.visible)
-                    this.layoutCircle();
-                if (rect.path)
-                    rect.path = null;
-                rect.set(Object.assign(Object.assign({}, bounds), { visible: single ? editBox : true }));
+                if (circle.visible) this.layoutCircle();
+                if (rect.path) rect.path = null;
+                rect.set(Object.assign(Object.assign({}, bounds), {
+                    visible: single ? editBox : true
+                }));
                 buttons.visible = showPoints && buttons.children.length > 0 || 0;
-                if (buttons.visible)
-                    this.layoutButtons();
-            }
-            else
-                rect.set(bounds);
+                if (buttons.visible) this.layoutButtons();
+            } else rect.set(bounds);
         }
         layoutCircle() {
-            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = this.mergedConfig;
-            const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'));
+            const {circleDirection: circleDirection, circleMargin: circleMargin, buttonsMargin: buttonsMargin, buttonsDirection: buttonsDirection, middlePoint: middlePoint} = this.mergedConfig;
+            const direction = fourDirection.indexOf(circleDirection || (this.buttons.children.length && buttonsDirection === "bottom" ? "top" : "bottom"));
             this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint);
         }
         layoutButtons() {
-            const { buttons } = this;
-            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.mergedConfig;
-            const { flippedX, flippedY } = this;
+            const {buttons: buttons} = this;
+            const {buttonsDirection: buttonsDirection, buttonsFixed: buttonsFixed, buttonsMargin: buttonsMargin, middlePoint: middlePoint} = this.mergedConfig;
+            const {flippedX: flippedX, flippedY: flippedY} = this;
             let index = fourDirection.indexOf(buttonsDirection);
-            if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
-                if (buttonsFixed)
-                    index = (index + 2) % 4;
+            if (index % 2 && flippedX || (index + 1) % 2 && flippedY) {
+                if (buttonsFixed) index = (index + 2) % 4;
             }
             const direction = buttonsFixed ? EditDataHelper.getRotateDirection(index, this.flippedOne ? this.rotation : -this.rotation, 4) : index;
             this.setButtonPosition(buttons, direction, buttonsMargin, !!middlePoint);
-            if (buttonsFixed)
-                buttons.rotation = (direction - index) * 90;
+            if (buttonsFixed) buttons.rotation = (direction - index) * 90;
             buttons.scaleX = flippedX ? -1 : 1;
             buttons.scaleY = flippedY ? -1 : 1;
         }
         setButtonPosition(buttons, direction, buttonsMargin, useMiddlePoint) {
             const point = this.resizePoints[direction * 2 + 1];
             const useX = direction % 2;
-            const sign = (!direction || direction === 3) ? -1 : 1;
+            const sign = !direction || direction === 3 ? -1 : 1;
             const useWidth = direction % 2;
-            const margin = (buttonsMargin + (useWidth ? ((useMiddlePoint ? point.width : 0) + buttons.boxBounds.width) : ((useMiddlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign;
+            const margin = (buttonsMargin + (useWidth ? (useMiddlePoint ? point.width : 0) + buttons.boxBounds.width : (useMiddlePoint ? point.height : 0) + buttons.boxBounds.height) / 2) * sign;
             if (useX) {
                 buttons.x = point.x + margin;
                 buttons.y = point.y;
-            }
-            else {
+            } else {
                 buttons.x = point.x;
                 buttons.y = point.y + margin;
             }
         }
-        unload() {
-            this.visible = false;
-        }
         getPointStyle(userStyle) {
-            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig;
-            const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig };
+            const {stroke: stroke, strokeWidth: strokeWidth, pointFill: pointFill, pointSize: pointSize, pointRadius: pointRadius} = this.mergedConfig;
+            const defaultStyle = {
+                fill: pointFill,
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                around: "center",
+                strokeAlign: "center",
+                width: pointSize,
+                height: pointSize,
+                cornerRadius: pointRadius,
+                offsetX: 0,
+                offsetY: 0,
+                editConfig: editConfig
+            };
             return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
         }
         getPointsStyle() {
-            const { point } = this.mergedConfig;
-            return point instanceof Array ? point : [point];
+            const {point: point} = this.mergedConfig;
+            return draw.isArray(point) ? point : [ point ];
         }
         getMiddlePointsStyle() {
-            const { middlePoint } = this.mergedConfig;
-            return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
-        }
-        onSelect(e) {
-            if (e.oldList.length === 1) {
-                e.oldList[0].syncEventer = null;
-                if (this.app)
-                    this.app.interaction.bottomList = null;
-            }
+            const {middlePoint: middlePoint} = this.mergedConfig;
+            return draw.isArray(middlePoint) ? middlePoint : middlePoint ? [ middlePoint ] : this.getPointsStyle();
         }
         onDragStart(e) {
             this.dragging = true;
-            const point = this.dragPoint = e.current, { pointType } = point;
-            const { editor, dragStartData } = this, { target } = this;
-            if (point.name === 'rect') {
-                this.moving = true;
-                editor.opacity = this.mergeConfig.hideOnMove ? 0 : 1;
+            const point = this.dragPoint = e.current, {pointType: pointType} = point;
+            const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
+            if (point.name === "rect") {
+                moveable && (this.moving = true);
+                editor.opacity = hideOnMove ? 0 : 1;
+            } else {
+                if (pointType.includes("rotate") || this.isHoldRotateKey(e) || !resizeable) {
+                    rotateable && (this.rotating = true);
+                    if (pointType === "resize-rotate") resizeable && (this.resizing = true); else if (point.name === "resize-line") skewable && (this.skewing = true), 
+                    this.rotating = false;
+                } else if (pointType === "resize") resizeable && (this.resizing = true);
+                if (pointType === "skew") skewable && (this.skewing = true);
             }
             dragStartData.x = e.x;
             dragStartData.y = e.y;
-            dragStartData.point = { x: target.x, y: target.y };
-            dragStartData.bounds = Object.assign({}, target.getLayoutBounds('box', 'local'));
+            dragStartData.point = {
+                x: target.x,
+                y: target.y
+            };
+            dragStartData.bounds = Object.assign({}, target.getLayoutBounds("box", "local"));
             dragStartData.rotation = target.rotation;
-            if (pointType && pointType.includes('resize'))
-                draw.ResizeEvent.resizingKeys = editor.leafList.keys;
+            if (pointType && pointType.includes("resize")) draw.ResizeEvent.resizingKeys = editor.leafList.keys;
         }
         onDragEnd(e) {
-            this.dragging = false;
+            if (this.mergeConfig.dragLimitAnimate && this.moving) this.transformTool.onMove(e);
             this.dragPoint = null;
-            this.moving = false;
-            const { name, pointType } = e.current;
-            if (name === 'rect')
-                this.editor.opacity = 1;
-            if (pointType && pointType.includes('resize'))
-                draw.ResizeEvent.resizingKeys = null;
+            this.resetDoing();
+            const {name: name, pointType: pointType} = e.current;
+            if (name === "rect") this.editor.opacity = 1;
+            if (pointType && pointType.includes("resize")) draw.ResizeEvent.resizingKeys = null;
         }
         onDrag(e) {
-            const { transformTool } = this, point = e.current;
-            if (point.name === 'rect') {
+            const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: skewing} = this;
+            if (moving) {
                 transformTool.onMove(e);
                 updateMoveCursor(this);
+            } else if (resizing || rotating || skewing) {
+                const point = e.current;
+                if (point.pointType) this.enterPoint = point;
+                if (rotating) transformTool.onRotate(e);
+                if (resizing) transformTool.onScale(e);
+                if (skewing) transformTool.onSkew(e);
+                updatePointCursor(this, e);
+            }
+        }
+        resetDoing() {
+            if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+        }
+        onMove(e) {
+            if (this.canGesture && e.moveType !== "drag") {
+                e.stop();
+                if (draw.isString(this.mergeConfig.moveable)) {
+                    this.gesturing = this.moving = true;
+                    this.transformTool.onMove(e);
+                }
             }
-            else {
-                const { pointType } = this.enterPoint = point;
-                if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !this.mergeConfig.resizeable) {
-                    transformTool.onRotate(e);
-                    if (pointType === 'resize-rotate')
-                        transformTool.onScale(e);
+        }
+        onScale(e) {
+            if (this.canGesture) {
+                e.stop();
+                if (draw.isString(this.mergeConfig.resizeable)) {
+                    this.gesturing = this.resizing = true;
+                    this.transformTool.onScale(e);
+                }
+            }
+        }
+        onRotate(e) {
+            if (this.canGesture) {
+                e.stop();
+                if (draw.isString(this.mergeConfig.rotateable)) {
+                    this.gesturing = this.rotating = true;
+                    this.transformTool.onRotate(e);
                 }
-                else if (pointType === 'resize')
-                    transformTool.onScale(e);
-                if (pointType === 'skew')
-                    transformTool.onSkew(e);
-                updateCursor(this, e);
             }
         }
+        isHoldRotateKey(e) {
+            const {rotateKey: rotateKey} = this.mergedConfig;
+            if (rotateKey) return e.isHoldKeys(rotateKey);
+            return e.metaKey || e.ctrlKey;
+        }
         onKey(e) {
-            updateCursor(this, e);
+            updatePointCursor(this, e);
         }
         onArrow(e) {
-            const { editor } = this;
-            if (editor.editing && this.mergeConfig.keyEvent) {
+            const {editor: editor, transformTool: transformTool} = this;
+            if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
                 let x = 0, y = 0;
                 const distance = e.shiftKey ? 10 : 1;
                 switch (e.code) {
-                    case 'ArrowDown':
-                        y = distance;
-                        break;
-                    case 'ArrowUp':
-                        y = -distance;
-                        break;
-                    case 'ArrowLeft':
-                        x = -distance;
-                        break;
-                    case 'ArrowRight':
-                        x = distance;
+                  case "ArrowDown":
+                    y = distance;
+                    break;
+
+                  case "ArrowUp":
+                    y = -distance;
+                    break;
+
+                  case "ArrowLeft":
+                    x = -distance;
+                    break;
+
+                  case "ArrowRight":
+                    x = distance;
                 }
-                if (x || y)
-                    editor.move(x, y);
+                if (x || y) transformTool.move(x, y);
             }
         }
         onDoubleTap(e) {
-            const { openInner, preventEditInner } = this.mergeConfig;
-            if (openInner === 'double' && !preventEditInner)
-                this.openInner(e);
+            const {openInner: openInner, preventEditInner: preventEditInner} = this.mergeConfig;
+            if (openInner === "double" && !preventEditInner) this.openInner(e);
         }
         onLongPress(e) {
-            const { openInner, preventEditInner } = this.mergeConfig;
-            if (openInner === 'long' && preventEditInner)
-                this.openInner(e);
+            const {openInner: openInner, preventEditInner: preventEditInner} = this.mergeConfig;
+            if (openInner === "long" && preventEditInner) this.openInner(e);
         }
         openInner(e) {
-            const { editor, target } = this;
+            const {editor: editor, target: target} = this;
             if (this.single) {
-                if (target.locked)
-                    return;
+                if (target.locked) return;
                 if (target.isBranch && !target.editInner) {
                     if (target.textBox) {
-                        const { children } = target;
+                        const {children: children} = target;
                         const find = children.find(item => item.editable && item instanceof draw.Text) || children.find(item => item instanceof draw.Text);
-                        if (find)
-                            return editor.openInnerEditor(find);
+                        if (find) return editor.openInnerEditor(find);
                     }
                     editor.openGroup(target);
                     editor.target = editor.selector.findDeepOne(e);
-                }
-                else {
+                } else {
                     editor.openInnerEditor();
                 }
             }
@@ -1033,31 +1148,19 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         listenPointEvents(point, type, direction) {
             point.direction = direction;
             point.pointType = type;
-            const events = [
-                [core.DragEvent.START, this.onDragStart, this],
-                [core.DragEvent.DRAG, this.onDrag, this],
-                [core.DragEvent.END, this.onDragEnd, this],
-                [core.PointerEvent.LEAVE, () => { this.enterPoint = null; }],
-            ];
-            if (point.name !== 'circle')
-                events.push([core.PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(this, e); }]);
+            const events = [ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.LEAVE, () => {
+                this.enterPoint = null;
+            } ] ];
+            if (point.name !== "circle") events.push([ core.PointerEvent.ENTER, e => {
+                this.enterPoint = point, updatePointCursor(this, e);
+            } ]);
             this.__eventIds.push(point.on_(events));
         }
         __listenEvents() {
-            const { rect, editor, __eventIds: events } = this;
-            events.push(editor.on_(EditorEvent.SELECT, this.onSelect, this), rect.on_([
-                [core.DragEvent.START, this.onDragStart, this],
-                [core.DragEvent.DRAG, this.onDrag, this],
-                [core.DragEvent.END, this.onDragEnd, this],
-                [core.PointerEvent.ENTER, () => updateMoveCursor(this)],
-                [core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this],
-                [core.PointerEvent.LONG_PRESS, this.onLongPress, this]
-            ]));
+            const {rect: rect, editor: editor, __eventIds: events} = this;
+            events.push(rect.on_([ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.ENTER, () => updateMoveCursor(this) ], [ core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ core.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
             this.waitLeafer(() => {
-                events.push(editor.app.on_([
-                    [[core.KeyEvent.HOLD, core.KeyEvent.UP], this.onKey, this],
-                    [core.KeyEvent.DOWN, this.onArrow, this]
-                ]));
+                events.push(editor.app.on_([ [ [ core.KeyEvent.HOLD, core.KeyEvent.UP ], this.onKey, this ], [ core.KeyEvent.DOWN, this.onArrow, this ], [ core.MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ core.MoveEvent.END, this.resetDoing, this ], [ core.ZoomEvent.END, this.resetDoing, this ], [ core.RotateEvent.END, this.resetDoing, this ] ]));
             });
         }
         __removeListenEvents() {
@@ -1069,8 +1172,12 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super.destroy();
         }
     }
-
-    const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
+    const bigBounds = {
+        x: 0,
+        y: 0,
+        width: 1e5,
+        height: 1e5
+    };
     class EditMask extends draw.UI {
         constructor(editor) {
             super();
@@ -1083,18 +1190,18 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             Object.assign(this.__world, bigBounds);
         }
         __draw(canvas, options) {
-            const { editor } = this, { mask } = editor.mergedConfig;
+            const {editor: editor} = this, {mask: mask} = editor.mergedConfig;
             if (mask && editor.editing) {
-                canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
-                if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
-                    return;
-                canvas.saveBlendMode('destination-out');
-                options = Object.assign(Object.assign({}, options), { shape: true });
+                canvas.fillWorld(canvas.bounds, mask === true ? "rgba(0,0,0,0.8)" : mask);
+                if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix)) return;
+                canvas.saveBlendMode("destination-out");
+                options = Object.assign(Object.assign({}, options), {
+                    shape: true
+                });
                 editor.list.forEach(item => {
                     item.__render(canvas, options);
-                    const { parent } = item;
-                    if (parent && parent.textBox)
-                        parent.__renderShape(canvas, options);
+                    const {parent: parent} = item;
+                    if (parent && parent.textBox) parent.__renderShape(canvas, options);
                 });
                 canvas.restoreBlendMode();
             }
@@ -1104,79 +1211,43 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super.destroy();
         }
     }
-
-    const filterStyle = `
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1.5"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in="SourceGraphic" result="shape"/>`;
-    const resizeSVG = `
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#f)">
-<g transform="rotate({{rotation}},12,12)">
-<path d="M7.5 8.0H8.5V5.9L6.8 7.2L7.5 8.0ZM3 11.4L2.3 10.6L1.3 11.4L2.3 12.2L3 11.4ZM7.5 10.4H6.5V11.4H7.5V10.4ZM16.5 10.4V11.4H17.5V10.4H16.5ZM16.5 8.0L17.1 7.2L15.5 5.9V8.0H16.5ZM21 11.4L21.6 12.2L22.6 11.4L21.6 10.6L21 11.4ZM16.5 14.9H15.5V16.9L17.1 15.7L16.5 14.9ZM16.5 12.4H17.5V11.4H16.5V12.4ZM7.5 12.4V11.4H6.5V12.4H7.5ZM7.5 14.9L6.8 15.7L8.5 16.9V14.9H7.5ZM6.8 7.2L2.3 10.6L3.6 12.2L8.1 8.7L6.8 7.2ZM8.5 10.4V8.0H6.5V10.4H8.5ZM16.5 9.4H7.5V11.4H16.5V9.4ZM17.5 10.4V8.0H15.5V10.4H17.5ZM15.8 8.7L20.3 12.2L21.6 10.6L17.1 7.2L15.8 8.7ZM20.3 10.6L15.8 14.1L17.1 15.7L21.6 12.2L20.3 10.6ZM17.5 14.9V12.4H15.5V14.9H17.5ZM7.5 13.4H16.5V11.4H7.5V13.4ZM8.5 14.9V12.4H6.5V14.9H8.5ZM2.3 12.2L6.8 15.7L8.1 14.1L3.6 10.6L2.3 12.2Z" fill="white"/>
-<path fill-rule="evenodd" d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z" fill="black"/>
-</g>
-</g>
-<defs>
-<filter id="f" x="-1.6" y="3.9" width="27.2" height="16.9" filterUnits="userSpaceOnUse">
-${filterStyle}
-</filter>
-</defs>
-</svg>
-`;
-    const rotateSVG = `
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#f)">
-<g transform="rotate(135,12,12),rotate({{rotation}},12,12)">
-<path d="M20.4 8H21.4L20.8 7.1L17.3 2.6L17 2.1L16.6 2.6L13.1 7.1L12.5 8H13.5H15.4C14.9 11.8 11.8 14.9 8 15.4V13.5V12.5L7.1 13.1L2.6 16.6L2.1 17L2.6 17.3L7.1 20.8L8 21.4V20.4V18.4C13.5 17.9 17.9 13.5 18.4 8H20.4Z" stroke="white"/>
-<path fill-rule="evenodd" d="M17 3L20.4 7.5H17.9C17.7 13.1 13.1 17.7 7.5 17.9V20.4L3 17L7.5 13.5V15.9C12.0 15.7 15.7 12.0 15.9 7.5H13.5L17 3Z" fill="black"/>
-</g>
-</g>
-<defs>
-<filter id="f" x="-1.6" y="-0.6" width="27.1" height="27.1" filterUnits="userSpaceOnUse">
-${filterStyle}
-</filter>
-</defs>
-</svg>
-`;
-    const skewSVG = `
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#f)">
-<g transform="rotate(90,12,12),rotate({{rotation}},12,12)">
-<path d="M21 10.4L21 11.4L23.8 11.4L21.6 9.6L21 10.4ZM17 10.4V11.4L17 11.4L17 10.4ZM15.5 6L16.1 5.2L14.5 3.9V6H15.5ZM15.5 8.4V9.4H16.5V8.4H15.5ZM6 8.4V7.4H5V8.4H6ZM6 10.4H5V11.4H6V10.4ZM7 14.4V13.4L7 13.4L7 14.4ZM3 14.4L3 13.4L0.1 13.4L2.3 15.2L3 14.4ZM8.5 18.9L7.8 19.7L9.5 21.0V18.9H8.5ZM8.5 16.4V15.4H7.5V16.4H8.5ZM19 16.4V17.4H20V16.4H19ZM19 14.4H20V13.4H19V14.4ZM21 9.4L17 9.4L17 11.4L21 11.4L21 9.4ZM14.8 6.7L20.3 11.2L21.6 9.6L16.1 5.2L14.8 6.7ZM16.5 8.4V6H14.5V8.4H16.5ZM6 9.4H15.5V7.4H6V9.4ZM7 10.4V8.4H5V10.4H7ZM15.5 9.4H6V11.4H15.5V9.4ZM17 9.4H15.5V11.4H17V9.4ZM7 15.4H8.5V13.4H7V15.4ZM3 15.4L7 15.4L7 13.4L3 13.4L3 15.4ZM9.1 18.1L3.6 13.6L2.3 15.2L7.8 19.7L9.1 18.1ZM7.5 16.4V18.9H9.5V16.4H7.5ZM19 15.4H8.5V17.4H19V15.4ZM18 14.4V16.4H20V14.4H18ZM8.5 15.4H19V13.4H8.5V15.4Z" fill="white"/>
-<path fill-rule="evenodd" d="M17 10.4L21 10.4L15.5 6V8.4H6V10.4H15.5H17ZM8.5 14.4H7L3 14.4L8.5 18.9V16.4H19V14.4H8.5Z" fill="black"/>
-</g>
-</g>
-<defs>
-<filter x="-2.8" y="1.9" width="29.6" height="23.1" filterUnits="userSpaceOnUse" >
-${filterStyle}
-</filter>
-</defs>
-</svg>
-`;
-
+    const filterStyle = `\n<feOffset dy="1"/>\n<feGaussianBlur stdDeviation="1.5"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>\n<feBlend mode="normal" in="SourceGraphic" result="shape"/>`;
+    const resizeSVG = `\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate({{rotation}},12,12)">\n<path d="M7.5 8.0H8.5V5.9L6.8 7.2L7.5 8.0ZM3 11.4L2.3 10.6L1.3 11.4L2.3 12.2L3 11.4ZM7.5 10.4H6.5V11.4H7.5V10.4ZM16.5 10.4V11.4H17.5V10.4H16.5ZM16.5 8.0L17.1 7.2L15.5 5.9V8.0H16.5ZM21 11.4L21.6 12.2L22.6 11.4L21.6 10.6L21 11.4ZM16.5 14.9H15.5V16.9L17.1 15.7L16.5 14.9ZM16.5 12.4H17.5V11.4H16.5V12.4ZM7.5 12.4V11.4H6.5V12.4H7.5ZM7.5 14.9L6.8 15.7L8.5 16.9V14.9H7.5ZM6.8 7.2L2.3 10.6L3.6 12.2L8.1 8.7L6.8 7.2ZM8.5 10.4V8.0H6.5V10.4H8.5ZM16.5 9.4H7.5V11.4H16.5V9.4ZM17.5 10.4V8.0H15.5V10.4H17.5ZM15.8 8.7L20.3 12.2L21.6 10.6L17.1 7.2L15.8 8.7ZM20.3 10.6L15.8 14.1L17.1 15.7L21.6 12.2L20.3 10.6ZM17.5 14.9V12.4H15.5V14.9H17.5ZM7.5 13.4H16.5V11.4H7.5V13.4ZM8.5 14.9V12.4H6.5V14.9H8.5ZM2.3 12.2L6.8 15.7L8.1 14.1L3.6 10.6L2.3 12.2Z" fill="white"/>\n<path fill-rule="evenodd" d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter id="f" x="-1.6" y="3.9" width="27.2" height="16.9" filterUnits="userSpaceOnUse">\n${filterStyle}\n</filter>\n</defs>\n</svg>\n`;
+    const rotateSVG = `\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate(135,12,12),rotate({{rotation}},12,12)">\n<path d="M20.4 8H21.4L20.8 7.1L17.3 2.6L17 2.1L16.6 2.6L13.1 7.1L12.5 8H13.5H15.4C14.9 11.8 11.8 14.9 8 15.4V13.5V12.5L7.1 13.1L2.6 16.6L2.1 17L2.6 17.3L7.1 20.8L8 21.4V20.4V18.4C13.5 17.9 17.9 13.5 18.4 8H20.4Z" stroke="white"/>\n<path fill-rule="evenodd" d="M17 3L20.4 7.5H17.9C17.7 13.1 13.1 17.7 7.5 17.9V20.4L3 17L7.5 13.5V15.9C12.0 15.7 15.7 12.0 15.9 7.5H13.5L17 3Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter id="f" x="-1.6" y="-0.6" width="27.1" height="27.1" filterUnits="userSpaceOnUse">\n${filterStyle}\n</filter>\n</defs>\n</svg>\n`;
+    const skewSVG = `\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate(90,12,12),rotate({{rotation}},12,12)">\n<path d="M21 10.4L21 11.4L23.8 11.4L21.6 9.6L21 10.4ZM17 10.4V11.4L17 11.4L17 10.4ZM15.5 6L16.1 5.2L14.5 3.9V6H15.5ZM15.5 8.4V9.4H16.5V8.4H15.5ZM6 8.4V7.4H5V8.4H6ZM6 10.4H5V11.4H6V10.4ZM7 14.4V13.4L7 13.4L7 14.4ZM3 14.4L3 13.4L0.1 13.4L2.3 15.2L3 14.4ZM8.5 18.9L7.8 19.7L9.5 21.0V18.9H8.5ZM8.5 16.4V15.4H7.5V16.4H8.5ZM19 16.4V17.4H20V16.4H19ZM19 14.4H20V13.4H19V14.4ZM21 9.4L17 9.4L17 11.4L21 11.4L21 9.4ZM14.8 6.7L20.3 11.2L21.6 9.6L16.1 5.2L14.8 6.7ZM16.5 8.4V6H14.5V8.4H16.5ZM6 9.4H15.5V7.4H6V9.4ZM7 10.4V8.4H5V10.4H7ZM15.5 9.4H6V11.4H15.5V9.4ZM17 9.4H15.5V11.4H17V9.4ZM7 15.4H8.5V13.4H7V15.4ZM3 15.4L7 15.4L7 13.4L3 13.4L3 15.4ZM9.1 18.1L3.6 13.6L2.3 15.2L7.8 19.7L9.1 18.1ZM7.5 16.4V18.9H9.5V16.4H7.5ZM19 15.4H8.5V17.4H19V15.4ZM18 14.4V16.4H20V14.4H18ZM8.5 15.4H19V13.4H8.5V15.4Z" fill="white"/>\n<path fill-rule="evenodd" d="M17 10.4L21 10.4L15.5 6V8.4H6V10.4H15.5H17ZM8.5 14.4H7L3 14.4L8.5 18.9V16.4H19V14.4H8.5Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter x="-2.8" y="1.9" width="29.6" height="23.1" filterUnits="userSpaceOnUse" >\n${filterStyle}\n</filter>\n</defs>\n</svg>\n`;
     const config = {
-        editSize: 'size',
+        editSize: "size",
         keyEvent: true,
-        stroke: '#836DFF',
+        stroke: "#836DFF",
         strokeWidth: 2,
-        pointFill: '#FFFFFF',
+        pointFill: "#FFFFFF",
         pointSize: 10,
         pointRadius: 16,
         rotateGap: 45,
-        buttonsDirection: 'bottom',
+        buttonsDirection: "bottom",
         buttonsMargin: 12,
         hideOnSmall: true,
-        moveCursor: 'move',
-        resizeCursor: { url: resizeSVG, x: 12, y: 12 },
-        rotateCursor: { url: rotateSVG, x: 12, y: 12 },
-        skewCursor: { url: skewSVG, x: 12, y: 12 },
+        moveCursor: "move",
+        resizeCursor: {
+            url: resizeSVG,
+            x: 12,
+            y: 12
+        },
+        rotateCursor: {
+            url: rotateSVG,
+            x: 12,
+            y: 12
+        },
+        skewCursor: {
+            url: skewSVG,
+            x: 12,
+            y: 12
+        },
         selector: true,
         editBox: true,
         hover: true,
-        select: 'press',
-        openInner: 'double',
+        select: "press",
+        openInner: "double",
         multipleSelect: true,
         boxSelect: true,
         moveable: true,
@@ -1185,35 +1256,34 @@ ${filterStyle}
         rotateable: true,
         skewable: true
     };
-
-    const bounds = new draw.Bounds();
+    const bounds = new draw.Bounds;
     function simulate(editor) {
-        const { simulateTarget, list } = editor;
-        const { zoomLayer } = list[0].leafer;
+        const {simulateTarget: simulateTarget, list: list} = editor;
+        const {zoomLayer: zoomLayer} = list[0].leafer;
         simulateTarget.safeChange(() => {
-            bounds.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page'));
-            if (bounds.width === 0)
-                bounds.width = 0.1;
-            if (bounds.height === 0)
-                bounds.height = 0.1;
+            bounds.setListWithFn(list, leaf => leaf.getBounds("box", "page"));
+            if (bounds.width === 0) bounds.width = .1;
+            if (bounds.height === 0) bounds.height = .1;
             simulateTarget.reset(bounds.get());
         });
         zoomLayer.add(simulateTarget);
     }
-
     function onTarget(editor, oldValue) {
-        const { target } = editor;
+        const {target: target} = editor;
         if (target) {
             editor.leafList = target instanceof draw.LeafList ? target : new draw.LeafList(target);
-            if (editor.multiple)
-                simulate(editor);
-        }
-        else {
+            if (editor.multiple) simulate(editor);
+        } else {
             editor.simulateTarget.remove();
             editor.leafList.reset();
         }
-        editor.closeInnerEditor();
-        const data = { editor, value: target, oldValue };
+        editor.closeInnerEditor(true);
+        editor.unloadEditTool();
+        const data = {
+            editor: editor,
+            value: target,
+            oldValue: oldValue
+        };
         editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data));
         editor.checkOpenedGroups();
         if (editor.editing) {
@@ -1221,28 +1291,29 @@ ${filterStyle}
                 editor.updateEditTool();
                 editor.listenTargetEvents();
             });
-        }
-        else {
+        } else {
             editor.updateEditTool();
             editor.removeTargetEvents();
         }
         editor.emitEvent(new EditorEvent(EditorEvent.AFTER_SELECT, data));
     }
     function onHover(editor, oldValue) {
-        editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
+        editor.emitEvent(new EditorEvent(EditorEvent.HOVER, {
+            editor: editor,
+            value: editor.hoverTarget,
+            oldValue: oldValue
+        }));
     }
-
     const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
     const reverseOrder = (a, b) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a);
     const EditorHelper = {
         group(list, element, userGroup) {
             list.sort(reverseOrder);
-            const { app, parent } = list[0];
+            const {app: app, parent: parent} = list[0];
             let group;
             if (userGroup && userGroup.add) {
                 group = userGroup;
-            }
-            else {
+            } else {
                 group = new draw.Group(userGroup);
             }
             parent.addAt(group, parent.children.indexOf(list[0]));
@@ -1258,22 +1329,18 @@ ${filterStyle}
             return group;
         },
         ungroup(list) {
-            const { app } = list[0];
+            const {app: app} = list[0];
             const ungroupList = [];
             app.lockLayout();
             list.forEach(leaf => {
                 if (leaf.isBranch) {
-                    const { parent, children } = leaf;
+                    const {parent: parent, children: children} = leaf;
                     while (children.length) {
                         ungroupList.push(children[0]);
                         children[0].dropTo(parent, parent.children.indexOf(leaf));
                     }
-                    if (leaf.isBranchLeaf)
-                        ungroupList.push(leaf);
-                    else
-                        leaf.remove();
-                }
-                else {
+                    if (leaf.isBranchLeaf) ungroupList.push(leaf); else leaf.remove();
+                } else {
                     ungroupList.push(leaf);
                 }
             });
@@ -1283,22 +1350,19 @@ ${filterStyle}
         toTop(list) {
             list.sort(order);
             list.forEach(leaf => {
-                if (leaf.parent)
-                    leaf.parent.add(leaf);
+                if (leaf.parent) leaf.parent.add(leaf);
             });
         },
         toBottom(list) {
             list.sort(reverseOrder);
             list.forEach(leaf => {
-                if (leaf.parent)
-                    leaf.parent.addAt(leaf, 0);
+                if (leaf.parent) leaf.parent.addAt(leaf, 0);
             });
         }
     };
-
-    const debug = draw.Debug.get('EditToolCreator');
+    const debug = draw.Debug.get("EditToolCreator");
     function registerEditTool() {
-        return (target) => {
+        return target => {
             EditToolCreator.register(target);
         };
     }
@@ -1306,7 +1370,7 @@ ${filterStyle}
     const EditToolCreator = {
         list: {},
         register(EditTool) {
-            const { tag } = EditTool.prototype;
+            const {tag: tag} = EditTool.prototype;
             list[tag] && debug.repeat(tag);
             list[tag] = EditTool;
         },
@@ -1314,45 +1378,52 @@ ${filterStyle}
             return new list[tag](editor);
         }
     };
-    const { list } = EditToolCreator;
-
+    const {list: list} = EditToolCreator;
     class InnerEditorEvent extends EditorEvent {
         constructor(type, data) {
             super(type, data);
         }
     }
-    InnerEditorEvent.BEFORE_OPEN = 'innerEditor.before_open';
-    InnerEditorEvent.OPEN = 'innerEditor.open';
-    InnerEditorEvent.BEFORE_CLOSE = 'innerEditor.before_close';
-    InnerEditorEvent.CLOSE = 'innerEditor.close';
-
+    InnerEditorEvent.BEFORE_OPEN = "innerEditor.before_open";
+    InnerEditorEvent.OPEN = "innerEditor.open";
+    InnerEditorEvent.BEFORE_CLOSE = "innerEditor.before_close";
+    InnerEditorEvent.CLOSE = "innerEditor.close";
     class EditorGroupEvent extends EditorEvent {
         constructor(type, data) {
             super(type, data);
         }
     }
-    EditorGroupEvent.BEFORE_GROUP = 'editor.before_group';
-    EditorGroupEvent.GROUP = 'editor.group';
-    EditorGroupEvent.BEFORE_UNGROUP = 'editor.before_ungroup';
-    EditorGroupEvent.UNGROUP = 'editor.ungroup';
-    EditorGroupEvent.BEFORE_OPEN = 'editor.before_open_group';
-    EditorGroupEvent.OPEN = 'editor.open_group';
-    EditorGroupEvent.BEFORE_CLOSE = 'editor.before_close_group';
-    EditorGroupEvent.CLOSE = 'editor.close_group';
-
-    const { updateMatrix } = draw.LeafHelper;
-    const checkMap = { x: 1, y: 1, scaleX: 1, scaleY: 1, rotation: 1, skewX: 1, skewY: 1 }, origin = 'top-left';
+    EditorGroupEvent.BEFORE_GROUP = "editor.before_group";
+    EditorGroupEvent.GROUP = "editor.group";
+    EditorGroupEvent.BEFORE_UNGROUP = "editor.before_ungroup";
+    EditorGroupEvent.UNGROUP = "editor.ungroup";
+    EditorGroupEvent.BEFORE_OPEN = "editor.before_open_group";
+    EditorGroupEvent.OPEN = "editor.open_group";
+    EditorGroupEvent.BEFORE_CLOSE = "editor.before_close_group";
+    EditorGroupEvent.CLOSE = "editor.close_group";
+    const {updateMatrix: updateMatrix} = draw.LeafHelper;
+    const checkMap = {
+        x: 1,
+        y: 1,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 1,
+        skewX: 1,
+        skewY: 1
+    }, origin = "top-left";
     class SimulateElement extends draw.Rect {
-        get __tag() { return 'SimulateElement'; }
+        get __tag() {
+            return "SimulateElement";
+        }
         constructor(editor) {
             super();
             this.checkChange = true;
             this.canChange = true;
             this.visible = this.hittable = false;
-            this.on(draw.PropertyEvent.CHANGE, (event) => {
+            this.on(draw.PropertyEvent.CHANGE, event => {
                 if (this.checkChange && checkMap[event.attrName]) {
-                    const { attrName, newValue, oldValue } = event;
-                    const addValue = attrName[0] === 's' ? (newValue || 1) / (oldValue || 1) : (newValue || 0) - (oldValue || 0);
+                    const {attrName: attrName, newValue: newValue, oldValue: oldValue} = event;
+                    const addValue = attrName[0] === "s" ? (newValue || 1) / (oldValue || 1) : (newValue || 0) - (oldValue || 0);
                     this.canChange = false;
                     const data = this.__;
                     data[attrName] = oldValue;
@@ -1364,26 +1435,32 @@ ${filterStyle}
                     updateMatrix(this);
                     this.changedTransform = new draw.Matrix(this.__world).divide(oldMatrix);
                     switch (attrName) {
-                        case 'x':
-                            editor.move(addValue, 0);
-                            break;
-                        case 'y':
-                            editor.move(0, addValue);
-                            break;
-                        case 'rotation':
-                            editor.rotateOf(origin, addValue);
-                            break;
-                        case 'scaleX':
-                            editor.scaleOf(origin, addValue, 1);
-                            break;
-                        case 'scaleY':
-                            editor.scaleOf(origin, 1, addValue);
-                            break;
-                        case 'skewX':
-                            editor.skewOf(origin, addValue, 0);
-                            break;
-                        case 'skewY':
-                            editor.skewOf(origin, 0, addValue);
+                      case "x":
+                        editor.move(addValue, 0);
+                        break;
+
+                      case "y":
+                        editor.move(0, addValue);
+                        break;
+
+                      case "rotation":
+                        editor.rotateOf(origin, addValue);
+                        break;
+
+                      case "scaleX":
+                        editor.scaleOf(origin, addValue, 1);
+                        break;
+
+                      case "scaleY":
+                        editor.scaleOf(origin, 1, addValue);
+                        break;
+
+                      case "skewX":
+                        editor.skewOf(origin, addValue, 0);
+                        break;
+
+                      case "skewY":
+                        editor.skewOf(origin, 0, addValue);
                     }
                     this.canChange = true;
                 }
@@ -1397,228 +1474,246 @@ ${filterStyle}
             }
         }
     }
-
     class EditorMoveEvent extends EditorEvent {
         constructor(type, data) {
             super(type, data);
         }
     }
-    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
-    EditorMoveEvent.MOVE = 'editor.move';
-
+    EditorMoveEvent.BEFORE_MOVE = "editor.before_move";
+    EditorMoveEvent.MOVE = "editor.move";
     class EditorScaleEvent extends EditorEvent {
         constructor(type, data) {
             super(type, data);
         }
     }
-    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
-    EditorScaleEvent.SCALE = 'editor.scale';
-
+    EditorScaleEvent.BEFORE_SCALE = "editor.before_scale";
+    EditorScaleEvent.SCALE = "editor.scale";
     class EditorRotateEvent extends EditorEvent {
         constructor(type, data) {
             super(type, data);
         }
     }
-    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
-    EditorRotateEvent.ROTATE = 'editor.rotate';
-
+    EditorRotateEvent.BEFORE_ROTATE = "editor.before_rotate";
+    EditorRotateEvent.ROTATE = "editor.rotate";
     class EditorSkewEvent extends EditorEvent {
         constructor(type, data) {
             super(type, data);
         }
     }
-    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
-    EditorSkewEvent.SKEW = 'editor.skew';
-
+    EditorSkewEvent.BEFORE_SKEW = "editor.before_skew";
+    EditorSkewEvent.SKEW = "editor.skew";
     class TransformTool {
         onMove(e) {
-            const { target, mergeConfig, dragStartData } = this.editBox;
+            const {target: target, mergeConfig: mergeConfig, dragStartData: dragStartData, app: app} = this.editBox;
+            let move, {dragLimitAnimate: dragLimitAnimate} = mergeConfig;
+            if (draw.isUndefined(dragLimitAnimate)) dragLimitAnimate = app && app.config.pointer.dragLimitAnimate;
+            const isMoveEnd = e.type === core.DragEvent.END || e.type === core.DragEvent.END;
+            const checkLimitMove = !dragLimitAnimate || isMoveEnd;
             if (e instanceof core.MoveEvent) {
-                if (e.moveType !== 'drag') {
-                    const { moveable, resizeable } = mergeConfig;
-                    const move = e.getLocalMove(target);
-                    if (moveable === 'move')
-                        e.stop(), this.move(move.x, move.y);
-                    else if (resizeable === 'zoom')
-                        e.stop();
-                }
-            }
-            else {
-                const total = { x: e.totalX, y: e.totalY };
+                move = e.getLocalMove(target);
+                if (checkLimitMove) core.DragEvent.limitMove(target, move);
+            } else {
+                const total = {
+                    x: e.totalX,
+                    y: e.totalY
+                };
                 if (e.shiftKey) {
-                    if (Math.abs(total.x) > Math.abs(total.y))
-                        total.y = 0;
-                    else
-                        total.x = 0;
+                    if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0; else total.x = 0;
                 }
-                this.move(core.DragEvent.getValidMove(target, dragStartData.point, total));
+                move = core.DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
             }
+            if (dragLimitAnimate && isMoveEnd) draw.LeafHelper.animateMove(this, move, draw.isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else this.move(move);
         }
         onScale(e) {
-            const { target, mergeConfig, single, dragStartData } = this.editBox;
-            let { around, lockRatio, resizeable, flipable, editSize } = mergeConfig;
+            const {target: target, mergeConfig: mergeConfig, single: single, dragStartData: dragStartData} = this.editBox;
+            let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize} = mergeConfig;
             if (e instanceof core.ZoomEvent) {
-                if (resizeable === 'zoom')
-                    e.stop(), this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
-            }
-            else {
-                const { direction } = e.current;
-                if (e.shiftKey || target.lockRatio)
-                    lockRatio = true;
-                const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, e.getInnerTotal(target), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === 'scale');
+                this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
+            } else {
+                const {direction: direction} = e.current;
+                if (e.shiftKey || target.lockRatio) lockRatio = true;
+                const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, e.getInnerTotal(target), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === "scale");
                 if (this.editTool && this.editTool.onScaleWithDrag) {
                     data.drag = e;
                     this.scaleWithDrag(data);
-                }
-                else {
+                } else {
                     this.scaleOf(data.origin, data.scaleX, data.scaleY);
                 }
             }
         }
         onRotate(e) {
-            const { target, mergeConfig, dragStartData } = this.editBox;
-            const { skewable, rotateable, around, rotateGap } = mergeConfig;
-            const { direction, name } = e.current;
-            if (skewable && name === 'resize-line')
-                return this.onSkew(e);
+            const {target: target, mergeConfig: mergeConfig, dragStartData: dragStartData} = this.editBox;
+            const {around: around, rotateAround: rotateAround, rotateGap: rotateGap} = mergeConfig;
+            const {direction: direction} = e.current;
             let origin, rotation;
             if (e instanceof core.RotateEvent) {
-                if (rotateable === 'rotate')
-                    e.stop(), rotation = e.rotation, origin = target.getBoxPoint(e);
-                else
-                    return;
-                if (target.scaleX * target.scaleY < 0)
-                    rotation = -rotation;
-            }
-            else {
-                const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (target.around || target.origin || around || 'center'));
-                rotation = data.rotation;
+                rotation = e.rotation;
+                origin = rotateAround ? draw.AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
+            } else {
+                const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : rotateAround || target.around || target.origin || around || "center");
+                rotation = dragStartData.rotation + data.rotation - target.rotation;
                 origin = data.origin;
             }
-            if (target.scaleX * target.scaleY < 0)
-                rotation = -rotation;
-            if (e instanceof core.DragEvent)
-                rotation = dragStartData.rotation + rotation - target.rotation;
             rotation = draw.MathHelper.float(draw.MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
-            if (!rotation)
-                return;
+            if (!rotation) return;
             this.rotateOf(origin, rotation);
         }
         onSkew(e) {
-            const { target, mergeConfig } = this.editBox;
-            const { around } = mergeConfig;
-            const { origin, skewX, skewY } = EditDataHelper.getSkewData(target.boxBounds, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey));
-            if (!skewX && !skewY)
-                return;
+            const {target: target, mergeConfig: mergeConfig} = this.editBox;
+            const {around: around} = mergeConfig;
+            const {origin: origin, skewX: skewX, skewY: skewY} = EditDataHelper.getSkewData(target.boxBounds, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey));
+            if (!skewX && !skewY) return;
             this.skewOf(origin, skewX, skewY);
         }
         move(x, y = 0) {
-            if (!this.checkTransform('moveable'))
-                return;
-            if (typeof x === 'object')
-                y = x.y, x = x.x;
-            const { target, mergeConfig, single, editor } = this.editBox;
-            const { beforeMove } = mergeConfig;
+            if (!this.checkTransform("moveable")) return;
+            if (draw.isObject(x)) y = x.y, x = x.x;
+            const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
+            const {beforeMove: beforeMove} = mergeConfig;
             if (beforeMove) {
-                const check = beforeMove({ target, x, y });
-                if (typeof check === 'object')
-                    x = check.x, y = check.y;
-                else if (check === false)
-                    return;
-            }
-            const world = target.getWorldPointByLocal({ x, y }, null, true);
-            if (!single)
-                target.safeChange(() => target.move(x, y));
-            const data = { target, editor, moveX: world.x, moveY: world.y };
+                const check = beforeMove({
+                    target: target,
+                    x: x,
+                    y: y
+                });
+                if (draw.isObject(check)) x = check.x, y = check.y; else if (check === false) return;
+            }
+            const world = target.getWorldPointByLocal({
+                x: x,
+                y: y
+            }, null, true);
+            if (!single) target.safeChange(() => target.move(x, y));
+            const data = {
+                target: target,
+                editor: editor,
+                moveX: world.x,
+                moveY: world.y
+            };
             this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data));
             const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data);
             this.doMove(event);
             this.emitEvent(event);
         }
         scaleWithDrag(data) {
-            if (!this.checkTransform('resizeable'))
-                return;
-            const { target, mergeConfig, editor } = this.editBox;
-            const { beforeScale } = mergeConfig;
+            if (!this.checkTransform("resizeable")) return;
+            const {target: target, mergeConfig: mergeConfig, editor: editor} = this.editBox;
+            const {beforeScale: beforeScale} = mergeConfig;
             if (beforeScale) {
-                const { origin, scaleX, scaleY, drag } = data;
-                const check = beforeScale({ target, drag, origin, scaleX, scaleY });
-                if (check === false)
-                    return;
+                const {origin: origin, scaleX: scaleX, scaleY: scaleY, drag: drag} = data;
+                const check = beforeScale({
+                    target: target,
+                    drag: drag,
+                    origin: origin,
+                    scaleX: scaleX,
+                    scaleY: scaleY
+                });
+                if (check === false) return;
             }
-            data = Object.assign(Object.assign({}, data), { target, editor, worldOrigin: target.getWorldPoint(data.origin) });
+            data = Object.assign(Object.assign({}, data), {
+                target: target,
+                editor: editor,
+                worldOrigin: target.getWorldPoint(data.origin)
+            });
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScaleWithDrag(event);
             this.emitEvent(event);
         }
         scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
-            if (!this.checkTransform('resizeable'))
-                return;
-            const { target, mergeConfig, single, editor } = this.editBox;
-            const { beforeScale } = mergeConfig;
+            if (!this.checkTransform("resizeable")) return;
+            const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
+            const {beforeScale: beforeScale} = mergeConfig;
             if (beforeScale) {
-                const check = beforeScale({ target, origin, scaleX, scaleY });
-                if (typeof check === 'object')
-                    scaleX = check.scaleX, scaleY = check.scaleY;
-                else if (check === false)
-                    return;
+                const check = beforeScale({
+                    target: target,
+                    origin: origin,
+                    scaleX: scaleX,
+                    scaleY: scaleY
+                });
+                if (draw.isObject(check)) scaleX = check.scaleX, scaleY = check.scaleY; else if (check === false) return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
             const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
-            const data = { target, editor, worldOrigin, scaleX, scaleY, transform };
+            const data = {
+                target: target,
+                editor: editor,
+                worldOrigin: worldOrigin,
+                scaleX: scaleX,
+                scaleY: scaleY,
+                transform: transform
+            };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.doScale(event);
             this.emitEvent(event);
         }
         flip(axis) {
-            if (!this.checkTransform('resizeable'))
-                return;
-            const { target, single, editor } = this.editBox;
-            const worldOrigin = this.getWorldOrigin('center');
+            if (!this.checkTransform("resizeable")) return;
+            const {target: target, single: single, editor: editor} = this.editBox;
+            const worldOrigin = this.getWorldOrigin("center");
             const transform = !single ? this.getChangedTransform(() => target.safeChange(() => target.flip(axis))) : new draw.Matrix(draw.LeafHelper.getFlipTransform(target, axis));
-            const data = { target, editor, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
+            const data = {
+                target: target,
+                editor: editor,
+                worldOrigin: worldOrigin,
+                scaleX: axis === "x" ? -1 : 1,
+                scaleY: axis === "y" ? -1 : 1,
+                transform: transform
+            };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.doScale(event);
             this.emitEvent(event);
         }
         rotateOf(origin, rotation) {
-            if (!this.checkTransform('rotateable'))
-                return;
-            const { target, mergeConfig, single, editor } = this.editBox;
-            const { beforeRotate } = mergeConfig;
+            if (!this.checkTransform("rotateable")) return;
+            const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
+            const {beforeRotate: beforeRotate} = mergeConfig;
             if (beforeRotate) {
-                const check = beforeRotate({ target, origin, rotation });
-                if (typeof check === 'number')
-                    rotation = check;
-                else if (check === false)
-                    return;
+                const check = beforeRotate({
+                    target: target,
+                    origin: origin,
+                    rotation: rotation
+                });
+                if (draw.isNumber(check)) rotation = check; else if (check === false) return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
             const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
-            const data = { target, editor, worldOrigin, rotation, transform };
+            const data = {
+                target: target,
+                editor: editor,
+                worldOrigin: worldOrigin,
+                rotation: rotation,
+                transform: transform
+            };
             this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
             const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
             this.doRotate(event);
             this.emitEvent(event);
         }
         skewOf(origin, skewX, skewY = 0, _resize) {
-            if (!this.checkTransform('skewable'))
-                return;
-            const { target, mergeConfig, single, editor } = this.editBox;
-            const { beforeSkew } = mergeConfig;
+            if (!this.checkTransform("skewable")) return;
+            const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
+            const {beforeSkew: beforeSkew} = mergeConfig;
             if (beforeSkew) {
-                const check = beforeSkew({ target, origin, skewX, skewY });
-                if (typeof check === 'object')
-                    skewX = check.skewX, skewY = check.skewY;
-                else if (check === false)
-                    return;
+                const check = beforeSkew({
+                    target: target,
+                    origin: origin,
+                    skewX: skewX,
+                    skewY: skewY
+                });
+                if (draw.isObject(check)) skewX = check.skewX, skewY = check.skewY; else if (check === false) return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
             const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
-            const data = { target, editor, worldOrigin, skewX, skewY, transform };
+            const data = {
+                target: target,
+                editor: editor,
+                worldOrigin: worldOrigin,
+                skewX: skewX,
+                skewY: skewY,
+                transform: transform
+            };
             this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
             const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
             this.doSkew(event);
@@ -1637,17 +1732,16 @@ ${filterStyle}
             this.editTool.onSkew(event);
         }
         checkTransform(type) {
-            const { target, mergeConfig } = this.editBox;
+            const {target: target, mergeConfig: mergeConfig} = this.editBox;
             return target && !target.locked && mergeConfig[type];
         }
         getWorldOrigin(origin) {
-            const { target } = this.editBox;
+            const {target: target} = this.editBox;
             return target.getWorldPoint(draw.LeafHelper.getInnerOrigin(target, origin));
         }
         getChangedTransform(func) {
-            const { target, single } = this.editBox;
-            if (!single && !target.canChange)
-                return target.changedTransform;
+            const {target: target, single: single} = this.editBox;
+            if (!single && !target.canChange) return target.changedTransform;
             const oldMatrix = new draw.Matrix(target.worldTransform);
             func();
             return new draw.Matrix(target.worldTransform).divide(oldMatrix);
@@ -1656,23 +1750,56 @@ ${filterStyle}
             this.editBox.editor.emitEvent(event, capture);
         }
     }
-
     exports.Editor = class Editor extends draw.Group {
-        get list() { return this.leafList.list; }
-        get dragHoverExclude() { return [this.editBox.rect]; }
-        get editing() { return !!this.list.length; }
-        get groupOpening() { return !!this.openedGroupList.length; }
-        get multiple() { return this.list.length > 1; }
-        get single() { return this.list.length === 1; }
-        get dragging() { return this.editBox.dragging; }
-        get moving() { return this.editBox.moving; }
-        get dragPoint() { return this.editBox.dragPoint; }
-        get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
-        get buttons() { return this.editBox.buttons; }
+        get list() {
+            return this.leafList.list;
+        }
+        get dragHoverExclude() {
+            return [ this.editBox.rect ];
+        }
+        get editing() {
+            return !!this.list.length;
+        }
+        get groupOpening() {
+            return !!this.openedGroupList.length;
+        }
+        get multiple() {
+            return this.list.length > 1;
+        }
+        get single() {
+            return this.list.length === 1;
+        }
+        get dragPoint() {
+            return this.editBox.dragPoint;
+        }
+        get dragging() {
+            return this.editBox.dragging;
+        }
+        get gesturing() {
+            return this.editBox.gesturing;
+        }
+        get moving() {
+            return this.editBox.moving;
+        }
+        get resizing() {
+            return this.editBox.resizing;
+        }
+        get rotating() {
+            return this.editBox.rotating;
+        }
+        get skewing() {
+            return this.editBox.skewing;
+        }
+        get element() {
+            return this.multiple ? this.simulateTarget : this.list[0];
+        }
+        get buttons() {
+            return this.editBox.buttons;
+        }
         constructor(userConfig, data) {
             super(data);
-            this.leafList = new draw.LeafList();
-            this.openedGroupList = new draw.LeafList();
+            this.leafList = new draw.LeafList;
+            this.openedGroupList = new draw.LeafList;
             this.simulateTarget = new SimulateElement(this);
             this.editBox = new EditBox(this);
             this.editToolList = {};
@@ -1680,12 +1807,10 @@ ${filterStyle}
             this.editMask = new EditMask(this);
             this.targetEventIds = [];
             let mergedConfig = draw.DataHelper.clone(config);
-            if (userConfig)
-                mergedConfig = draw.DataHelper.default(userConfig, mergedConfig);
+            if (userConfig) mergedConfig = draw.DataHelper.default(userConfig, mergedConfig);
             this.mergedConfig = this.config = mergedConfig;
             this.addMany(this.editMask, this.selector, this.editBox);
-            if (!draw.Plugin.has('resize'))
-                this.config.editSize = 'scale';
+            if (!draw.Plugin.has("resize")) this.config.editSize = "scale";
         }
         select(target) {
             this.target = target;
@@ -1697,62 +1822,66 @@ ${filterStyle}
             return this.leafList.has(item);
         }
         addItem(item) {
-            if (!this.hasItem(item) && !item.locked)
-                this.leafList.add(item), this.target = this.leafList.list;
+            if (!this.hasItem(item) && !item.locked) this.leafList.add(item), this.target = this.leafList.list;
         }
         removeItem(item) {
-            if (this.hasItem(item))
-                this.leafList.remove(item), this.target = this.leafList.list;
+            if (this.hasItem(item)) this.leafList.remove(item), this.target = this.leafList.list;
         }
         shiftItem(item) {
             this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
         }
         update() {
             if (this.editing) {
-                if (!this.element.parent)
-                    return this.cancel();
-                if (this.innerEditing)
-                    this.innerEditor.update();
+                if (!this.element.parent) return this.cancel();
+                if (this.innerEditing) this.innerEditor.update();
                 this.editTool.update();
                 this.selector.update();
             }
         }
         updateEditBox() {
-            if (this.multiple)
-                simulate(this);
+            if (this.multiple) simulate(this);
             this.update();
         }
         updateEditTool() {
+            this.unloadEditTool();
+            if (this.editing) {
+                const name = this.element.editOuter || "EditTool";
+                const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+                this.editBox.load();
+                tool.load();
+                this.update();
+            }
+        }
+        unloadEditTool() {
             let tool = this.editTool;
             if (tool) {
                 this.editBox.unload();
                 tool.unload();
                 this.editTool = null;
             }
-            if (this.editing) {
-                const tag = this.element.editOuter || 'EditTool';
-                tool = this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
-                this.editBox.load();
-                tool.load();
-                this.update();
-            }
         }
         getEditSize(_ui) {
             return this.mergeConfig.editSize;
         }
-        onMove(_e) { }
-        onScale(_e) { }
-        onRotate(_e) { }
-        onSkew(_e) { }
-        move(_x, _y = 0) { }
-        scaleWithDrag(_data) { }
-        scaleOf(_origin, scaleX, _scaleY = scaleX, _resize) { }
-        flip(_axis) { }
-        rotateOf(_origin, _rotation) { }
-        skewOf(_origin, _skewX, _skewY = 0, _resize) { }
-        checkTransform(_type) { return undefined; }
-        getWorldOrigin(_origin) { return undefined; }
-        getChangedTransform(_func) { return undefined; }
+        onMove(_e) {}
+        onScale(_e) {}
+        onRotate(_e) {}
+        onSkew(_e) {}
+        move(_x, _y = 0) {}
+        scaleWithDrag(_data) {}
+        scaleOf(_origin, scaleX, _scaleY = scaleX, _resize) {}
+        flip(_axis) {}
+        rotateOf(_origin, _rotation) {}
+        skewOf(_origin, _skewX, _skewY = 0, _resize) {}
+        checkTransform(_type) {
+            return undefined;
+        }
+        getWorldOrigin(_origin) {
+            return undefined;
+        }
+        getChangedTransform(_func) {
+            return undefined;
+        }
         group(userGroup) {
             if (this.multiple) {
                 this.emitGroupEvent(EditorGroupEvent.BEFORE_GROUP);
@@ -1762,7 +1891,7 @@ ${filterStyle}
             return this.target;
         }
         ungroup() {
-            const { list } = this;
+            const {list: list} = this;
             if (list.length) {
                 list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.BEFORE_UNGROUP, item));
                 this.target = EditorHelper.ungroup(list);
@@ -1785,16 +1914,14 @@ ${filterStyle}
         checkOpenedGroups() {
             const opened = this.openedGroupList;
             if (opened.length) {
-                let { list } = opened;
-                if (this.editing)
-                    list = [], opened.forEach(item => this.list.every(leaf => !draw.LeafHelper.hasParent(leaf, item)) && list.push(item));
+                let {list: list} = opened;
+                if (this.editing) list = [], opened.forEach(item => this.list.every(leaf => !draw.LeafHelper.hasParent(leaf, item)) && list.push(item));
                 list.forEach(item => this.closeGroup(item));
             }
-            if (this.editing && !this.selector.dragging)
-                this.checkDeepSelect();
+            if (this.editing && !this.selector.dragging) this.checkDeepSelect();
         }
         checkDeepSelect() {
-            let parent, { list } = this;
+            let parent, {list: list} = this;
             for (let i = 0; i < list.length; i++) {
                 parent = list[i].parent;
                 while (parent && !parent.hitChildren) {
@@ -1804,42 +1931,48 @@ ${filterStyle}
             }
         }
         emitGroupEvent(type, group) {
-            const event = new EditorGroupEvent(type, { editTarget: group });
-            this.emitEvent(event);
-            if (group)
-                group.emitEvent(event);
+            const event = new EditorGroupEvent(type, {
+                editTarget: group
+            });
+            if (!group || !group.syncEventer) this.emitEvent(event);
+            if (group) group.emitEvent(event);
         }
-        openInnerEditor(target, select) {
-            if (target && select)
-                this.target = target;
+        openInnerEditor(target, nameOrSelect, select) {
+            let name;
+            if (draw.isString(nameOrSelect)) name = nameOrSelect; else if (!select) select = nameOrSelect;
+            if (target && select) this.target = target;
             if (this.single) {
                 const editTarget = target || this.element;
-                const tag = editTarget.editInner;
-                if (tag && EditToolCreator.list[tag]) {
+                name || (name = editTarget.editInner);
+                if (name && EditToolCreator.list[name]) {
                     this.editTool.unload();
                     this.innerEditing = true;
-                    this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                    this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
                     this.innerEditor.editTarget = editTarget;
                     this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
                     this.innerEditor.load();
                     this.emitInnerEvent(InnerEditorEvent.OPEN);
+                    console.log("hello");
                 }
             }
         }
-        closeInnerEditor() {
+        closeInnerEditor(onlyInnerEditor) {
             if (this.innerEditing) {
                 this.innerEditing = false;
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE);
                 this.innerEditor.unload();
                 this.emitInnerEvent(InnerEditorEvent.CLOSE);
-                this.editTool.load();
+                if (!onlyInnerEditor) this.updateEditTool();
                 this.innerEditor = null;
             }
         }
         emitInnerEvent(type) {
-            const { innerEditor } = this, { editTarget } = innerEditor;
-            const event = new InnerEditorEvent(type, { editTarget, innerEditor });
-            this.emitEvent(event);
+            const {innerEditor: innerEditor} = this, {editTarget: editTarget} = innerEditor;
+            const event = new InnerEditorEvent(type, {
+                editTarget: editTarget,
+                innerEditor: innerEditor
+            });
+            if (!editTarget.syncEventer) this.emitEvent(event);
             editTarget.emitEvent(event);
         }
         lock() {
@@ -1863,35 +1996,23 @@ ${filterStyle}
             }
         }
         onAppRenderStart(app) {
-            if (this.targetChanged = app.children.some(leafer => leafer !== this.leafer && leafer.renderer.changed))
-                this.editBox.forceRender();
+            if (this.targetChanged = app.children.some(leafer => leafer !== this.leafer && leafer.renderer.changed)) this.editBox.forceRender();
         }
         onRenderStart() {
-            if (this.targetChanged)
-                this.update();
+            if (this.targetChanged) this.update();
         }
         listenTargetEvents() {
             if (!this.targetEventIds.length) {
-                const { app, leafer, editMask } = this;
-                this.targetEventIds = [
-                    leafer.on_(draw.RenderEvent.START, this.onRenderStart, this),
-                    app.on_([
-                        [draw.RenderEvent.CHILD_START, this.onAppRenderStart, this],
-                        [core.MoveEvent.BEFORE_MOVE, this.onMove, this, true],
-                        [core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
-                        [core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                    ])
-                ];
-                if (editMask.visible)
-                    editMask.forceRender();
+                const {app: app, leafer: leafer, editMask: editMask} = this;
+                this.targetEventIds = [ leafer.on_(draw.RenderEvent.START, this.onRenderStart, this), app.on_(draw.RenderEvent.CHILD_START, this.onAppRenderStart, this) ];
+                if (editMask.visible) editMask.forceRender();
             }
         }
         removeTargetEvents() {
-            const { targetEventIds, editMask } = this;
+            const {targetEventIds: targetEventIds, editMask: editMask} = this;
             if (targetEventIds.length) {
                 this.off_(targetEventIds);
-                if (editMask.visible)
-                    editMask.forceRender();
+                if (editMask.visible) editMask.forceRender();
             }
         }
         destroy() {
@@ -1905,117 +2026,106 @@ ${filterStyle}
             }
         }
     };
-    __decorate([
-        mergeConfigAttr()
-    ], exports.Editor.prototype, "mergeConfig", void 0);
-    __decorate([
-        targetAttr(onHover)
-    ], exports.Editor.prototype, "hoverTarget", void 0);
-    __decorate([
-        targetAttr(onTarget)
-    ], exports.Editor.prototype, "target", void 0);
-    exports.Editor = __decorate([
-        core.useModule(TransformTool, ['editBox', 'editTool', 'emitEvent'])
-    ], exports.Editor);
-
+    __decorate([ mergeConfigAttr() ], exports.Editor.prototype, "mergeConfig", void 0);
+    __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
+    __decorate([ targetAttr(onTarget) ], exports.Editor.prototype, "target", void 0);
+    exports.Editor = __decorate([ core.useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], exports.Editor);
     class InnerEditor {
         static registerInnerEditor() {
             EditToolCreator.register(this);
         }
-        get tag() { return 'InnerEditor'; }
-        get mode() { return 'focus'; }
-        get editBox() { return this.editor.editBox; }
+        get tag() {
+            return "InnerEditor";
+        }
+        get mode() {
+            return "focus";
+        }
+        get editBox() {
+            return this.editor.editBox;
+        }
         constructor(editor) {
             this.eventIds = [];
             this.editor = editor;
             this.create();
         }
-        onCreate() { }
+        onCreate() {}
         create() {
-            this.view = new draw.Group();
+            this.view = new draw.Group;
             this.onCreate();
         }
-        onLoad() { }
+        onLoad() {}
         load() {
-            const { editor } = this;
+            const {editor: editor} = this;
             if (editor) {
-                if (editor.app && this.mode === 'focus')
-                    editor.selector.hittable = editor.app.tree.hitChildren = false;
+                if (editor.app && this.mode === "focus") editor.selector.hittable = editor.app.tree.hitChildren = false;
                 this.onLoad();
             }
         }
-        onUpdate() { }
-        update() { this.onUpdate(); }
-        onUnload() { }
+        onUpdate() {}
+        update() {
+            this.onUpdate();
+        }
+        onUnload() {}
         unload() {
-            const { editor } = this;
+            const {editor: editor} = this;
             if (editor) {
-                if (editor.app && this.mode === 'focus')
-                    editor.selector.hittable = editor.app.tree.hitChildren = true;
+                if (editor.app && this.mode === "focus") editor.selector.hittable = editor.app.tree.hitChildren = true;
                 this.onUnload();
             }
         }
-        onDestroy() { }
+        onDestroy() {}
         destroy() {
             this.onDestroy();
             if (this.editor) {
-                if (this.view)
-                    this.view.destroy();
-                if (this.eventIds)
-                    this.editor.off_(this.eventIds);
+                if (this.view) this.view.destroy();
+                if (this.eventIds) this.editor.off_(this.eventIds);
                 this.editor = this.view = this.eventIds = null;
             }
         }
     }
-
     exports.EditTool = class EditTool extends InnerEditor {
         static registerEditTool() {
             EditToolCreator.register(this);
         }
-        get tag() { return 'EditTool'; }
+        get tag() {
+            return "EditTool";
+        }
         onMove(e) {
-            const { moveX, moveY, editor } = e;
-            const { app, list } = editor;
+            const {moveX: moveX, moveY: moveY, editor: editor} = e;
+            const {app: app, list: list} = editor;
             app.lockLayout();
-            list.forEach(target => { target.moveWorld(moveX, moveY); });
+            list.forEach(target => {
+                target.moveWorld(moveX, moveY);
+            });
             app.unlockLayout();
         }
         onScale(e) {
-            const { scaleX, scaleY, transform, worldOrigin, editor } = e;
-            const { app, list } = editor;
+            const {scaleX: scaleX, scaleY: scaleY, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
+            const {app: app, list: list} = editor;
             app.lockLayout();
             list.forEach(target => {
-                const resize = editor.getEditSize(target) !== 'scale';
-                if (transform)
-                    target.transformWorld(transform, resize);
-                else
-                    target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize);
+                const resize = editor.getEditSize(target) !== "scale";
+                if (transform) target.transformWorld(transform, resize); else target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize);
             });
             app.unlockLayout();
         }
         onRotate(e) {
-            const { rotation, transform, worldOrigin, editor } = e;
-            const { app, list } = editor;
+            const {rotation: rotation, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
+            const {app: app, list: list} = editor;
             app.lockLayout();
             list.forEach(target => {
-                const resize = editor.getEditSize(target) !== 'scale';
-                if (transform)
-                    target.transformWorld(transform, resize);
-                else
-                    target.rotateOfWorld(worldOrigin, rotation);
+                const resize = editor.getEditSize(target) !== "scale";
+                if (transform) target.transformWorld(transform, resize); else target.rotateOfWorld(worldOrigin, rotation);
             });
             app.unlockLayout();
         }
         onSkew(e) {
-            const { skewX, skewY, transform, worldOrigin, editor } = e;
-            const { app, list } = editor;
+            const {skewX: skewX, skewY: skewY, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
+            const {app: app, list: list} = editor;
             app.lockLayout();
             list.forEach(target => {
-                const resize = editor.getEditSize(target) !== 'scale';
-                if (transform)
-                    target.transformWorld(transform, resize);
-                else
-                    target.skewOfWorld(worldOrigin, skewX, skewY, resize);
+                const resize = editor.getEditSize(target) !== "scale";
+                if (transform) target.transformWorld(transform, resize); else target.skewOfWorld(worldOrigin, skewX, skewY, resize);
             });
             app.unlockLayout();
         }
@@ -2032,41 +2142,38 @@ ${filterStyle}
             this.onUnload();
         }
     };
-    exports.EditTool = __decorate([
-        registerEditTool()
-    ], exports.EditTool);
-
-    const { left, right } = draw.Direction9;
-    const { move, copy, toNumberPoints } = draw.PointHelper;
+    exports.EditTool = __decorate([ registerEditTool() ], exports.EditTool);
+    const {left: left, right: right} = draw.Direction9;
+    const {move: move, copy: copy, toNumberPoints: toNumberPoints} = draw.PointHelper;
     exports.LineEditTool = class LineEditTool extends exports.EditTool {
         constructor() {
             super(...arguments);
             this.scaleOfEvent = true;
         }
-        get tag() { return 'LineEditTool'; }
+        get tag() {
+            return "LineEditTool";
+        }
         onScaleWithDrag(e) {
-            const { drag, direction, lockRatio, around } = e;
+            const {drag: drag, direction: direction, lockRatio: lockRatio, around: around} = e;
             const line = e.target;
             const isDragFrom = direction === left;
             if (line.pathInputed) {
-                const { path } = line.__;
-                const { from, to } = this.getFromToByPath(path);
+                const {path: path} = line.__;
+                const {from: from, to: to} = this.getFromToByPath(path);
                 this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio));
                 path[1] = from.x, path[2] = from.y;
                 path[4] = to.x, path[5] = to.y;
                 line.path = path;
-            }
-            else if (line.points) {
-                const { points } = line;
-                const { from, to } = this.getFromToByPoints(points);
+            } else if (line.points) {
+                const {points: points} = line;
+                const {from: from, to: to} = this.getFromToByPoints(points);
                 this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio));
                 points[0] = from.x, points[1] = from.y;
                 points[2] = to.x, points[3] = to.y;
                 line.points = points;
-            }
-            else {
+            } else {
                 const from = draw.getPointData();
-                const { toPoint } = line;
+                const {toPoint: toPoint} = line;
                 line.rotation = 0;
                 this.dragPoint(from, toPoint, isDragFrom, around, this.getInnerMove(line, drag, lockRatio));
                 line.getLocalPointByInner(from, null, null, true);
@@ -2079,48 +2186,52 @@ ${filterStyle}
         }
         getInnerMove(ui, event, lockRatio) {
             const movePoint = event.getInnerMove(ui);
-            if (lockRatio)
-                Math.abs(movePoint.x) > Math.abs(movePoint.y) ? movePoint.y = 0 : movePoint.x = 0;
+            if (lockRatio) Math.abs(movePoint.x) > Math.abs(movePoint.y) ? movePoint.y = 0 : movePoint.x = 0;
             return movePoint;
         }
         getFromToByPath(path) {
             return {
-                from: { x: path[1], y: path[2] },
-                to: { x: path[4], y: path[5] }
+                from: {
+                    x: path[1],
+                    y: path[2]
+                },
+                to: {
+                    x: path[4],
+                    y: path[5]
+                }
             };
         }
         getFromToByPoints(originPoints) {
             const points = toNumberPoints(originPoints);
             return {
-                from: { x: points[0], y: points[1] },
-                to: { x: points[2], y: points[3] }
+                from: {
+                    x: points[0],
+                    y: points[1]
+                },
+                to: {
+                    x: points[2],
+                    y: points[3]
+                }
             };
         }
         dragPoint(fromPoint, toPoint, isDragFrom, around, movePoint) {
-            const { x, y } = movePoint;
+            const {x: x, y: y} = movePoint;
             if (isDragFrom) {
                 move(fromPoint, x, y);
-                if (around)
-                    move(toPoint, -x, -y);
-            }
-            else {
-                if (around)
-                    move(fromPoint, -x, -y);
+                if (around) move(toPoint, -x, -y);
+            } else {
+                if (around) move(fromPoint, -x, -y);
                 move(toPoint, x, y);
             }
         }
-        onSkew(_e) {
-        }
+        onSkew(_e) {}
         onUpdate() {
-            const { editBox } = this, { rotatePoints, resizeLines, resizePoints, rect } = editBox;
+            const {editBox: editBox} = this, {rotatePoints: rotatePoints, resizeLines: resizeLines, resizePoints: resizePoints, rect: rect} = editBox;
             const line = this.editor.element;
             let fromTo, leftOrRight;
-            if (line.pathInputed)
-                fromTo = this.getFromToByPath(line.__.path);
-            else if (line.points)
-                fromTo = this.getFromToByPoints(line.__.points);
+            if (line.pathInputed) fromTo = this.getFromToByPath(line.__.path); else if (line.points) fromTo = this.getFromToByPoints(line.__.points);
             if (fromTo) {
-                const { from, to } = fromTo;
+                const {from: from, to: to} = fromTo;
                 line.innerToWorld(from, from, false, editBox);
                 line.innerToWorld(to, to, false, editBox);
                 rect.pen.clearPath().moveTo(from.x, from.y).lineTo(to.x, to.y);
@@ -2130,35 +2241,38 @@ ${filterStyle}
                 copy(rotatePoints[3], to);
             }
             for (let i = 0; i < 8; i++) {
-                if (i < 4)
-                    resizeLines[i].visible = false;
+                if (i < 4) resizeLines[i].visible = false;
                 leftOrRight = i === left || i === right;
                 resizePoints[i].visible = leftOrRight;
                 rotatePoints[i].visible = fromTo ? false : leftOrRight;
             }
         }
     };
-    exports.LineEditTool = __decorate([
-        registerEditTool()
-    ], exports.LineEditTool);
-
-    draw.Plugin.add('editor', 'resize');
-    draw.Creator.editor = function (options, app) {
+    exports.LineEditTool = __decorate([ registerEditTool() ], exports.LineEditTool);
+    draw.Plugin.add("editor", "resize");
+    draw.Creator.editor = function(options, app) {
         const editor = new exports.Editor(options);
-        if (app)
-            app.sky.add(app.editor = editor);
+        if (app) app.sky.add(app.editor = editor);
         return editor;
     };
-    draw.Box.addAttr('textBox', false, draw.dataType);
-    draw.UI.addAttr('editConfig', undefined, draw.dataType);
-    draw.UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', draw.dataType);
-    draw.UI.addAttr('editInner', 'PathEditor', draw.dataType);
-    draw.Group.addAttr('editInner', '', draw.dataType);
-    draw.Text.addAttr('editInner', 'TextEditor', draw.dataType);
-    draw.UI.setEditConfig = function (config) { this.changeAttr('editConfig', config); };
-    draw.UI.setEditOuter = function (toolName) { this.changeAttr('editOuter', toolName); };
-    draw.UI.setEditInner = function (editorName) { this.changeAttr('editInner', editorName); };
-
+    draw.Box.addAttr("textBox", false, draw.dataType);
+    draw.UI.addAttr("editConfig", undefined, draw.dataType);
+    draw.UI.addAttr("editOuter", ui => {
+        ui.updateLayout();
+        return ui.__.__isLinePath ? "LineEditTool" : "EditTool";
+    }, draw.dataType);
+    draw.UI.addAttr("editInner", "PathEditor", draw.dataType);
+    draw.Group.addAttr("editInner", "", draw.dataType);
+    draw.Text.addAttr("editInner", "TextEditor", draw.dataType);
+    draw.UI.setEditConfig = function(config) {
+        this.changeAttr("editConfig", config);
+    };
+    draw.UI.setEditOuter = function(toolName) {
+        this.changeAttr("editOuter", toolName);
+    };
+    draw.UI.setEditInner = function(editorName) {
+        this.changeAttr("editInner", editorName);
+    };
     exports.EditBox = EditBox;
     exports.EditDataHelper = EditDataHelper;
     exports.EditPoint = EditPoint;
@@ -2179,7 +2293,5 @@ ${filterStyle}
     exports.TransformTool = TransformTool;
     exports.registerEditTool = registerEditTool;
     exports.registerInnerEditor = registerInnerEditor;
-
     return exports;
-
-})({}, LeaferUI, LeaferUI);
+}({}, LeaferUI, LeaferUI);