@leafer-in/editor 1.0.0-rc.9 → 1.0.1

package/dist/editor.js

@@ -1,7 +1,199 @@
 this.LeaferIN = this.LeaferIN || {};
-this.LeaferIN.editor = (function (exports, core) {
+this.LeaferIN.editor = (function (exports, draw, core) {
     'use strict';
 
+    const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = draw.PathCommandMap;
+    const PathScaler = {
+        scale(data, scaleX, scaleY) {
+            if (!data)
+                return;
+            let command;
+            let i = 0, len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M:
+                        scalePoints(data, scaleX, scaleY, i, 1);
+                        i += 3;
+                        break;
+                    case L:
+                        scalePoints(data, scaleX, scaleY, i, 1);
+                        i += 3;
+                        break;
+                    case C:
+                        scalePoints(data, scaleX, scaleY, i, 3);
+                        i += 7;
+                        break;
+                    case Q:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 5;
+                        break;
+                    case Z:
+                        i += 1;
+                        break;
+                    case N:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 5;
+                        break;
+                    case D:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 9;
+                        break;
+                    case X:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 6;
+                        break;
+                    case G:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 9;
+                        break;
+                    case F:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 5;
+                        break;
+                    case O:
+                        data[i] = G;
+                        data.splice(i + 4, 0, data[i + 3], 0);
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 7 + 2;
+                        len += 2;
+                        break;
+                    case P:
+                        data[i] = F;
+                        data.splice(i + 4, 0, data[i + 3]);
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 4 + 1;
+                        len += 1;
+                        break;
+                    case U:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 6;
+                        break;
+                }
+            }
+        },
+        scalePoints(data, scaleX, scaleY, start, pointCount) {
+            for (let i = pointCount ? start + 1 : 0, end = pointCount ? i + pointCount * 2 : data.length; i < end; i += 2) {
+                data[i] *= scaleX;
+                data[i + 1] *= scaleY;
+            }
+        }
+    };
+    const { scalePoints } = PathScaler;
+
+    const matrix$1 = draw.MatrixHelper.get();
+    function scaleResize(leaf, scaleX, scaleY) {
+        if (leaf.pathInputed) {
+            scaleResizePath(leaf, scaleX, scaleY);
+        }
+        else {
+            if (scaleX !== 1)
+                leaf.width *= scaleX;
+            if (scaleY !== 1)
+                leaf.height *= scaleY;
+        }
+    }
+    function scaleResizeFontSize(leaf, scaleX, scaleY) {
+        const { width, height } = leaf.__localBoxBounds;
+        if (scaleX !== 1) {
+            leaf.fontSize *= scaleX;
+            leaf.y -= height * (scaleX - scaleY) / 2;
+        }
+        else if (scaleY !== 1) {
+            leaf.fontSize *= scaleY;
+            leaf.x -= width * (scaleY - scaleX) / 2;
+        }
+    }
+    function scaleResizePath(leaf, scaleX, scaleY) {
+        PathScaler.scale(leaf.__.path, scaleX, scaleY);
+        leaf.path = leaf.__.path;
+    }
+    function scaleResizePoints(leaf, scaleX, scaleY) {
+        PathScaler.scalePoints(leaf.__.points, scaleX, scaleY);
+        leaf.points = leaf.__.points;
+    }
+    function scaleResizeGroup(group, scaleX, scaleY) {
+        const { children } = group;
+        for (let i = 0; i < children.length; i++) {
+            matrix$1.a = scaleX;
+            matrix$1.d = scaleY;
+            children[i].transform(matrix$1, true);
+        }
+    }
+
+    const leaf = draw.Leaf.prototype;
+    leaf.scaleResize = function (scaleX, scaleY = scaleX, noResize) {
+        const data = this;
+        if (noResize || (data.editConfig && data.editConfig.editSize === 'scale')) {
+            data.scaleX *= scaleX;
+            data.scaleY *= scaleY;
+        }
+        else {
+            if (scaleX < 0)
+                data.scaleX *= -1, scaleX = -scaleX;
+            if (scaleY < 0)
+                data.scaleY *= -1, scaleY = -scaleY;
+            this.__scaleResize(scaleX, scaleY);
+        }
+    };
+    leaf.__scaleResize = function (scaleX, scaleY) {
+        scaleResize(this, scaleX, scaleY);
+    };
+    leaf.resizeWidth = function (width) {
+        const scale = width / this.getBounds('box', 'local').width;
+        this.scaleOf(this.__layout.boxBounds, scale, this.__.lockRatio ? scale : 1, true);
+    };
+    leaf.resizeHeight = function (height) {
+        const scale = height / this.getBounds('box', 'local').height;
+        this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
+    };
+    draw.Text.prototype.__scaleResize = function (scaleX, scaleY) {
+        if (this.__.__autoSize && (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size'))) {
+            scaleResizeFontSize(this, scaleX, scaleY);
+        }
+        else {
+            scaleResize(this, scaleX, scaleY);
+        }
+    };
+    draw.Path.prototype.__scaleResize = function (scaleX, scaleY) {
+        scaleResizePath(this, scaleX, scaleY);
+    };
+    draw.Line.prototype.__scaleResize = function (scaleX, scaleY) {
+        if (this.pathInputed) {
+            scaleResizePath(this, scaleX, scaleY);
+        }
+        else if (this.points) {
+            scaleResizePoints(this, scaleX, scaleY);
+        }
+        else {
+            this.width *= scaleX;
+        }
+    };
+    draw.Polygon.prototype.__scaleResize = function (scaleX, scaleY) {
+        if (this.pathInputed) {
+            scaleResizePath(this, scaleX, scaleY);
+        }
+        else if (this.points) {
+            scaleResizePoints(this, scaleX, scaleY);
+        }
+        else {
+            scaleResize(this, scaleX, scaleY);
+        }
+    };
+    draw.Group.prototype.__scaleResize = function (scaleX, scaleY) {
+        scaleResizeGroup(this, scaleX, scaleY);
+    };
+    draw.Box.prototype.__scaleResize = function (scaleX, scaleY) {
+        if (this.__.__autoSize && this.children.length) {
+            scaleResizeGroup(this, scaleX, scaleY);
+        }
+        else {
+            scaleResize(this, scaleX, scaleY);
+            if (this.__.resizeChildren)
+                scaleResizeGroup(this, scaleX, scaleY);
+        }
+    };
+
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -31,7 +223,12 @@ this.LeaferIN.editor = (function (exports, core) {
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    class EditorEvent extends core.Event {
+    function toList(value) {
+        return value ? (value instanceof Array ? value : [value]) : [];
+    }
+    class EditorEvent extends draw.Event {
+        get list() { return toList(this.value); }
+        get oldList() { return toList(this.oldValue); }
         constructor(type, data) {
             super(type);
             if (data)
@@ -72,7 +269,7 @@ this.LeaferIN.editor = (function (exports, core) {
     function targetAttr(fn) {
         return (target, key) => {
             const privateKey = '_' + key;
-            core.defineKey(target, key, {
+            draw.defineKey(target, key, {
                 get() { return this[privateKey]; },
                 set(value) {
                     const old = this[privateKey];
@@ -83,10 +280,10 @@ this.LeaferIN.editor = (function (exports, core) {
         };
     }
 
-    const matrix = core.MatrixHelper.get();
+    const matrix = draw.MatrixHelper.get();
     const { abs } = Math;
-    const { copy, scale } = core.MatrixHelper;
-    class Stroker extends core.UI {
+    const { copy: copy$1, scale } = draw.MatrixHelper;
+    class Stroker extends draw.UI {
         constructor() {
             super();
             this.list = [];
@@ -94,40 +291,43 @@ this.LeaferIN.editor = (function (exports, core) {
             this.strokeAlign = 'center';
         }
         setTarget(target, style) {
-            const { stroke, strokeWidth } = style;
-            this.set({ stroke, strokeWidth });
+            this.set(style);
             this.target = target;
         }
         __draw(canvas, options) {
             const { list } = this;
             if (list.length) {
                 let leaf;
-                const { stroke, strokeWidth } = this.__;
+                const { stroke, strokeWidth, fill } = this.__;
                 const { bounds } = options;
                 for (let i = 0; i < list.length; i++) {
                     leaf = list[i];
                     if (bounds && bounds.hit(leaf.__world, options.matrix)) {
-                        let drewPath;
-                        if (leaf.__.editSize === 'scale') {
-                            const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY);
-                            if (aScaleX !== aScaleY) {
-                                copy(matrix, leaf.__world);
-                                scale(matrix, 1 / aScaleX, 1 / aScaleY);
-                                canvas.setWorld(matrix, options.matrix);
-                                canvas.beginPath();
-                                this.__.strokeWidth = strokeWidth;
-                                const { x, y, width, height } = leaf.__layout.boxBounds;
-                                canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
-                                drewPath = true;
-                            }
+                        const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY);
+                        if (aScaleX !== aScaleY) {
+                            copy$1(matrix, leaf.__world);
+                            scale(matrix, 1 / aScaleX, 1 / aScaleY);
+                            canvas.setWorld(matrix, options.matrix);
+                            canvas.beginPath();
+                            this.__.strokeWidth = strokeWidth;
+                            const { x, y, width, height } = leaf.__layout.boxBounds;
+                            canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
                         }
-                        if (!drewPath) {
+                        else {
                             canvas.setWorld(leaf.__world, options.matrix);
                             canvas.beginPath();
-                            leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
+                            if (leaf.__.__useArrow) {
+                                leaf.__drawPath(canvas);
+                            }
+                            else {
+                                leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
+                            }
                             this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX);
                         }
-                        typeof stroke === 'string' ? core.Paint.stroke(stroke, this, canvas, options) : core.Paint.strokes(stroke, this, canvas, options);
+                        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);
                     }
                 }
                 this.__.strokeWidth = strokeWidth;
@@ -147,11 +347,11 @@ this.LeaferIN.editor = (function (exports, core) {
         stroker.forceUpdate();
     }
 
-    class SelectArea extends core.Group {
+    class SelectArea extends draw.Group {
         constructor(data) {
             super(data);
-            this.strokeArea = new core.Rect({ strokeAlign: 'center' });
-            this.fillArea = new core.Rect();
+            this.strokeArea = new draw.Rect({ strokeAlign: 'center' });
+            this.fillArea = new draw.Rect();
             this.visible = this.hittable = false;
             this.addMany(this.fillArea, this.strokeArea);
         }
@@ -167,21 +367,13 @@ this.LeaferIN.editor = (function (exports, core) {
         }
     }
 
-    var AnswerType;
-    (function (AnswerType) {
-        AnswerType[AnswerType["No"] = 0] = "No";
-        AnswerType[AnswerType["Yes"] = 1] = "Yes";
-        AnswerType[AnswerType["NoAndSkip"] = 2] = "NoAndSkip";
-        AnswerType[AnswerType["YesAndSkip"] = 3] = "YesAndSkip";
-    })(AnswerType || (AnswerType = {}));
-
-    const { No, Yes, NoAndSkip, YesAndSkip } = AnswerType;
+    const { No, Yes, NoAndSkip, YesAndSkip } = draw.Answer;
     const EditSelectHelper = {
         findOne(path) {
             return path.list.find((leaf) => leaf.editable);
         },
         findBounds(leaf, bounds) {
-            if (leaf.__.hittable && !leaf.__.locked && bounds.hit(leaf.__world)) {
+            if (leaf.__.hittable && leaf.__.visible && !leaf.__.locked && bounds.hit(leaf.__world)) {
                 if (leaf.__.editable) {
                     if (leaf.isBranch && !leaf.__.hitChildren) {
                         return leaf.__.hitSelf ? YesAndSkip : NoAndSkip;
@@ -203,15 +395,15 @@ this.LeaferIN.editor = (function (exports, core) {
     };
 
     const { findOne } = EditSelectHelper;
-    class EditSelect extends core.Group {
+    class EditSelect extends draw.Group {
         get dragging() { return !!this.originList; }
-        get running() { return this.editor.hittable && this.editor.config.selector; }
+        get running() { const { 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 core.Bounds();
+            this.bounds = new draw.Bounds();
             this.selectArea = new SelectArea();
             this.__eventIds = [];
             this.editor = editor;
@@ -221,8 +413,8 @@ this.LeaferIN.editor = (function (exports, core) {
         onHover() {
             const { editor } = this;
             if (this.running && !this.dragging && !editor.dragging) {
-                const { stroke, strokeWidth, hover } = editor.config;
-                this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth });
+                const { stroke, strokeWidth, hover, hoverStyle } = editor.mergeConfig;
+                this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, Object.assign({ stroke, strokeWidth }, (hoverStyle || {})));
             }
             else {
                 this.hoverStroker.target = null;
@@ -230,76 +422,102 @@ this.LeaferIN.editor = (function (exports, core) {
         }
         onSelect() {
             if (this.running) {
-                const { config, list } = this.editor;
+                const { mergeConfig: config, list } = this.editor;
                 const { stroke, strokeWidth } = config;
                 this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) });
                 this.hoverStroker.target = null;
             }
         }
         update() {
-            if (this.running)
+            if (this.targetStroker.target)
                 this.targetStroker.forceUpdate();
         }
         onPointerMove(e) {
-            if (this.running && !this.isMoveMode) {
-                const find = e.shiftKey ? this.findDeepOne(e) : findOne(e.path);
-                this.editor.hoverTarget = this.editor.hasItem(find) ? null : find;
+            const { app, 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;
             }
             if (this.isMoveMode) {
-                this.editor.hoverTarget = null;
+                editor.hoverTarget = null;
             }
         }
         onBeforeDown(e) {
-            if (this.running && !this.isMoveMode && !e.middle) {
-                const find = this.lastDownLeaf = findOne(e.path);
+            if (e.multiTouch)
+                return;
+            const { select } = this.editor.mergeConfig;
+            if (select === 'press') {
+                if (this.app.config.mobile) {
+                    this.waitSelect = () => this.checkAndSelect(e);
+                }
+                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 (this.needRemoveItem) {
+                editor.removeItem(this.needRemoveItem);
+            }
+            else if (this.isMoveMode) {
+                editor.target = null;
+            }
+        }
+        checkAndSelect(e) {
+            this.needRemoveItem = null;
+            if (this.allowSelect(e)) {
+                const { editor } = this;
+                const find = this.findUI(e);
                 if (find) {
-                    if (e.shiftKey) {
-                        this.editor.shiftItem(find);
+                    if (this.isMultipleSelect(e)) {
+                        if (editor.hasItem(find))
+                            this.needRemoveItem = find;
+                        else
+                            editor.addItem(find);
                     }
                     else {
-                        this.editor.target = find;
+                        editor.target = find;
                     }
-                    this.editor.updateLayout();
-                    find.leafer.interaction.updateDownData();
                 }
                 else if (this.allow(e.target)) {
                     if (!e.shiftKey)
-                        this.editor.target = null;
+                        editor.target = null;
                 }
             }
         }
-        onTap(e) {
-            if (this.running && e.shiftKey && !e.middle && !this.lastDownLeaf) {
-                const find = this.findDeepOne(e);
-                if (find)
-                    this.editor.shiftItem(find);
-            }
-            else if (this.isMoveMode) {
-                this.editor.target = null;
-            }
-            this.lastDownLeaf = null;
-        }
         onDragStart(e) {
-            if (this.running && this.allowDrag(e)) {
+            if (e.multiTouch)
+                return;
+            if (this.waitSelect)
+                this.waitSelect();
+            if (this.allowDrag(e)) {
                 const { editor } = this;
-                const { stroke, strokeWidth, area } = editor.config;
+                const { stroke, area } = editor.mergeConfig;
                 const { x, y } = e.getInner(this);
                 this.bounds.set(x, y);
-                this.selectArea.setStyle({ visible: true, stroke, strokeWidth, x, y }, area);
+                this.selectArea.setStyle({ visible: true, stroke, x, y }, area);
                 this.selectArea.setBounds(this.bounds.get());
                 this.originList = editor.leafList.clone();
             }
         }
         onDrag(e) {
-            if (this.editor.dragging) {
-                this.onDragEnd();
+            if (e.multiTouch)
                 return;
-            }
+            if (this.editor.dragging)
+                return this.onDragEnd(e);
             if (this.dragging) {
                 const { editor } = this;
                 const total = e.getInnerTotal(this);
                 const dragBounds = this.bounds.clone().unsign();
-                const list = new core.LeafList(editor.app.find(EditSelectHelper.findBounds, dragBounds));
+                const list = new draw.LeafList(editor.app.find(EditSelectHelper.findBounds, dragBounds));
                 this.bounds.width = total.x;
                 this.bounds.height = total.y;
                 this.selectArea.setBounds(dragBounds.get());
@@ -315,12 +533,12 @@ this.LeaferIN.editor = (function (exports, core) {
                 }
                 else {
                     editor.target = this.originList.list;
-                    if (editor.leafList.length)
-                        editor.update();
                 }
             }
         }
-        onDragEnd() {
+        onDragEnd(e) {
+            if (e.multiTouch)
+                return;
             if (this.dragging)
                 this.originList = null, this.selectArea.visible = false;
         }
@@ -335,17 +553,26 @@ this.LeaferIN.editor = (function (exports, core) {
             return target.leafer !== this.editor.leafer;
         }
         allowDrag(e) {
-            if (this.editor.config.boxSelect && !e.target.draggable) {
-                return (!this.editor.hasTarget && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
+            if (this.running && this.editor.mergeConfig.boxSelect && !e.target.draggable) {
+                return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
             }
             else {
                 return false;
             }
         }
+        allowSelect(e) {
+            return this.running && !this.isMoveMode && !e.middle;
+        }
         findDeepOne(e) {
-            const options = { exclude: new core.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) {
+            return e.shiftKey || this.editor.mergeConfig.continuousSelect;
+        }
         __listenEvents() {
             const { editor } = this;
             editor.waitLeafer(() => {
@@ -357,7 +584,7 @@ this.LeaferIN.editor = (function (exports, core) {
                     app.on_(core.PointerEvent.MOVE, this.onPointerMove, this),
                     app.on_(core.PointerEvent.BEFORE_DOWN, this.onBeforeDown, this),
                     app.on_(core.PointerEvent.TAP, this.onTap, this),
-                    app.on_(core.DragEvent.START, this.onDragStart, this),
+                    app.on_(core.DragEvent.START, this.onDragStart, this, true),
                     app.on_(core.DragEvent.DRAG, this.onDrag, this),
                     app.on_(core.DragEvent.END, this.onDragEnd, this),
                     app.on_(core.MoveEvent.MOVE, this.onAutoMove, this),
@@ -372,138 +599,155 @@ this.LeaferIN.editor = (function (exports, core) {
             }
         }
         destroy() {
-            this.editor = this.originList = this.lastDownLeaf = null;
+            this.editor = this.originList = this.needRemoveItem = null;
             this.__removeListenEvents();
             super.destroy();
         }
     }
 
-    var IDirection8;
-    (function (IDirection8) {
-        IDirection8[IDirection8["topLeft"] = 0] = "topLeft";
-        IDirection8[IDirection8["top"] = 1] = "top";
-        IDirection8[IDirection8["topRight"] = 2] = "topRight";
-        IDirection8[IDirection8["right"] = 3] = "right";
-        IDirection8[IDirection8["bottomRight"] = 4] = "bottomRight";
-        IDirection8[IDirection8["bottom"] = 5] = "bottom";
-        IDirection8[IDirection8["bottomLeft"] = 6] = "bottomLeft";
-        IDirection8[IDirection8["left"] = 7] = "left";
-    })(IDirection8 || (IDirection8 = {}));
-
-    const { topLeft: topLeft$1, top: top$1, topRight: topRight$1, right: right$2, bottomRight: bottomRight$1, bottom: bottom$1, bottomLeft: bottomLeft$1, left: left$2 } = IDirection8;
-    const { toPoint } = core.AroundHelper;
+    const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = draw.Direction9;
+    const { toPoint } = draw.AroundHelper;
+    const { within } = draw.MathHelper;
     const EditDataHelper = {
-        getScaleData(bounds, direction, pointMove, lockRatio, around) {
-            let origin, scaleX = 1, scaleY = 1;
-            const { width, height } = bounds;
+        getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
+            let align, origin = {}, scaleX = 1, scaleY = 1;
+            const { boxBounds, widthRange, heightRange } = element;
+            const { width, height } = startBounds;
             if (around) {
-                pointMove.x *= 2;
-                pointMove.y *= 2;
-            }
-            if (Math.abs(pointMove.x) === width)
-                pointMove.x += 0.1;
-            if (Math.abs(pointMove.y) === height)
-                pointMove.y += 0.1;
-            const topScale = (-pointMove.y + height) / height;
-            const rightScale = (pointMove.x + width) / width;
-            const bottomScale = (pointMove.y + height) / height;
-            const leftScale = (-pointMove.x + width) / width;
+                totalMove.x *= 2;
+                totalMove.y *= 2;
+            }
+            const originChangedScaleX = element.scaleX / startBounds.scaleX;
+            const originChangedScaleY = element.scaleY / startBounds.scaleY;
+            const signX = originChangedScaleX < 0 ? -1 : 1;
+            const signY = originChangedScaleY < 0 ? -1 : 1;
+            const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
+            const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height;
+            totalMove.x *= scaleMode ? originChangedScaleX : signX;
+            totalMove.y *= scaleMode ? originChangedScaleY : signY;
+            if (Math.abs(totalMove.x) === width)
+                totalMove.x += 0.1;
+            if (Math.abs(totalMove.y) === height)
+                totalMove.y += 0.1;
+            const topScale = (-totalMove.y + height) / height;
+            const rightScale = (totalMove.x + width) / width;
+            const bottomScale = (totalMove.y + height) / height;
+            const leftScale = (-totalMove.x + width) / width;
             switch (direction) {
-                case top$1:
+                case top:
                     scaleY = topScale;
-                    origin = { x: 0.5, y: 1 };
+                    align = 'bottom';
                     break;
-                case right$2:
+                case right$1:
                     scaleX = rightScale;
-                    origin = { x: 0, y: 0.5 };
+                    align = 'left';
                     break;
-                case bottom$1:
+                case bottom:
                     scaleY = bottomScale;
-                    origin = { x: 0.5, y: 0 };
+                    align = 'top';
                     break;
-                case left$2:
+                case left$1:
                     scaleX = leftScale;
-                    origin = { x: 1, y: 0.5 };
+                    align = 'right';
                     break;
-                case topLeft$1:
+                case topLeft:
                     scaleY = topScale;
                     scaleX = leftScale;
-                    origin = { x: 1, y: 1 };
+                    align = 'bottom-right';
                     break;
-                case topRight$1:
+                case topRight:
                     scaleY = topScale;
                     scaleX = rightScale;
-                    origin = { x: 0, y: 1 };
+                    align = 'bottom-left';
                     break;
-                case bottomRight$1:
+                case bottomRight:
                     scaleY = bottomScale;
                     scaleX = rightScale;
-                    origin = { x: 0, y: 0 };
+                    align = 'top-left';
                     break;
-                case bottomLeft$1:
+                case bottomLeft:
                     scaleY = bottomScale;
                     scaleX = leftScale;
-                    origin = { x: 1, y: 0 };
+                    align = 'top-right';
             }
             if (lockRatio) {
-                if (scaleX !== 1)
-                    scaleY = scaleX;
-                else
-                    scaleX = scaleY;
+                const unlockSide = lockRatio === 'corner' && direction % 2;
+                if (!unlockSide) {
+                    const scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                    scaleX = scaleX < 0 ? -scale : scale;
+                    scaleY = scaleY < 0 ? -scale : scale;
+                }
+            }
+            scaleX /= changedScaleX;
+            scaleY /= changedScaleY;
+            if (!flipable) {
+                const { worldTransform } = element;
+                if (scaleX < 0)
+                    scaleX = 1 / boxBounds.width / worldTransform.scaleX;
+                if (scaleY < 0)
+                    scaleY = 1 / boxBounds.height / worldTransform.scaleY;
+            }
+            if (widthRange) {
+                const nowWidth = boxBounds.width * element.scaleX;
+                scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
             }
-            toPoint(around || origin, bounds, origin);
+            if (heightRange) {
+                const nowHeight = boxBounds.height * element.scaleY;
+                scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
+            }
+            toPoint(around || align, boxBounds, origin);
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
         getRotateData(bounds, direction, current, last, around) {
-            let origin;
+            let align, origin = {};
             switch (direction) {
-                case topLeft$1:
-                    origin = { x: 1, y: 1 };
+                case topLeft:
+                    align = 'bottom-right';
                     break;
-                case topRight$1:
-                    origin = { x: 0, y: 1 };
+                case topRight:
+                    align = 'bottom-left';
                     break;
-                case bottomRight$1:
-                    origin = { x: 0, y: 0 };
+                case bottomRight:
+                    align = 'top-left';
                     break;
-                case bottomLeft$1:
-                    origin = { x: 1, y: 0 };
+                case bottomLeft:
+                    align = 'top-right';
                     break;
                 default:
-                    origin = { x: 0.5, y: 0.5 };
+                    align = 'center';
             }
-            toPoint(around || origin, bounds, origin);
-            return { origin, rotation: core.PointHelper.getRotation(last, origin, current) };
+            toPoint(around || align, bounds, origin);
+            return { origin, rotation: draw.PointHelper.getRotation(last, origin, current) };
         },
         getSkewData(bounds, direction, move, around) {
-            let origin, skewX = 0, skewY = 0;
+            let align, origin = {}, skewX = 0, skewY = 0;
             let last;
             switch (direction) {
-                case top$1:
+                case top:
                     last = { x: 0.5, y: 0 };
-                    origin = { x: 0.5, y: 1 };
+                    align = 'bottom';
                     skewX = 1;
                     break;
-                case bottom$1:
+                case bottom:
                     last = { x: 0.5, y: 1 };
-                    origin = { x: 0.5, y: 0 };
+                    align = 'top';
                     skewX = 1;
                     break;
-                case left$2:
+                case left$1:
                     last = { x: 0, y: 0.5 };
-                    origin = { x: 1, y: 0.5 };
+                    align = 'right';
                     skewY = 1;
                     break;
-                case right$2:
+                case right$1:
                     last = { x: 1, y: 0.5 };
-                    origin = { x: 0, y: 0.5 };
+                    align = 'left';
                     skewY = 1;
             }
             const { x, y, width, height } = bounds;
             last.x = x + last.x * width;
             last.y = y + last.y * height;
-            toPoint(around || origin, bounds, origin);
-            const rotation = core.PointHelper.getRotation(last, origin, { x: last.x + (skewX ? move.x : 0), y: last.y + (skewY ? move.y : 0) });
+            toPoint(around || align, bounds, origin);
+            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 };
         },
@@ -515,69 +759,109 @@ this.LeaferIN.editor = (function (exports, core) {
             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;
+                }
+            }
+            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;
+                }
+            }
+            return direction;
         }
     };
 
-    const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = IDirection8;
+    const cacheCursors = {};
     function updateCursor(editor, e) {
         const { editBox } = editor, point = editBox.enterPoint;
-        if (!point || !editor.hasTarget || !editBox.visible)
+        if (!point || !editor.editing || !editBox.visible)
+            return;
+        if (point.name === 'circle')
             return;
+        if (point.pointType === 'button') {
+            if (!point.cursor)
+                point.cursor = 'pointer';
+            return;
+        }
         let { rotation } = editBox;
-        let { resizeCursor, rotateCursor, resizeable, rotateable } = editor.config;
-        const { direction, pointType } = point;
-        editBox.enterPoint = point;
-        const isResizePoint = pointType === 'resize';
-        if (isResizePoint && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
-            resizeCursor = rotateCursor;
-        if (editBox.flipped) {
-            const { flippedX, flippedY } = editBox;
-            mirrorCursors(resizeCursor = [...resizeCursor], flippedX, flippedY);
-            mirrorCursors(rotateCursor = [...rotateCursor], flippedY, flippedX);
-            if (editBox.flippedOne)
-                rotation = -rotation;
+        const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
+        const { pointType } = point, { flippedX, flippedY } = editBox;
+        let showResize = pointType === 'resize';
+        if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
+            showResize = false;
+        const showSkew = skewable && !showResize && point.name === 'resize-line';
+        const cursor = 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 key = url + rotation;
+        if (cacheCursors[key]) {
+            point.cursor = cacheCursors[key];
+        }
+        else {
+            cacheCursors[key] = point.cursor = { url: toDataURL(url, rotation), x, y };
         }
-        const index = EditDataHelper.getRotateDirection(direction, rotation);
-        point.cursor = isResizePoint ? resizeCursor[index] : rotateCursor[index];
     }
     function updateMoveCursor(editor) {
-        editor.editBox.rect.cursor = editor.config.moveCursor;
+        editor.editBox.rect.cursor = editor.mergeConfig.moveCursor;
     }
-    function mirrorCursors(mirror, mirrorX, mirrorY) {
-        if (mirrorX) {
-            const topCursor = mirror[top], topLeftCursor = mirror[topLeft], topRightCursor = mirror[topRight];
-            mirror[top] = mirror[bottom];
-            mirror[topLeft] = mirror[bottomLeft];
-            mirror[topRight] = mirror[bottomRight];
-            mirror[bottom] = topCursor;
-            mirror[bottomLeft] = topLeftCursor;
-            mirror[bottomRight] = topRightCursor;
-        }
-        if (mirrorY) {
-            const leftCursor = mirror[left$1], topLeftCursor = mirror[topLeft], bottomLeftCursor = mirror[bottomLeft];
-            mirror[left$1] = mirror[right$1];
-            mirror[topLeft] = mirror[topRight];
-            mirror[bottomLeft] = mirror[bottomRight];
-            mirror[right$1] = leftCursor;
-            mirror[topRight] = topLeftCursor;
-            mirror[bottomRight] = bottomLeftCursor;
-        }
+    function toDataURL(svg, rotation) {
+        return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
     }
 
-    class EditPoint extends core.Box {
+    class EditPoint extends draw.Box {
     }
 
     const fourDirection = ['top', 'right', 'bottom', 'left'];
-    class EditBox extends core.Group {
+    class EditBox extends draw.Group {
         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; }
         constructor(editor) {
             super();
-            this.rect = new core.Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 });
-            this.circle = new EditPoint({ name: 'circle', strokeAlign: 'outside', around: 'center', cursor: 'crosshair', hitRadius: 5 });
-            this.buttons = new core.Group({ around: 'center', hitSelf: false });
+            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 });
             this.resizePoints = [];
             this.rotatePoints = [];
             this.resizeLines = [];
@@ -585,14 +869,15 @@ this.LeaferIN.editor = (function (exports, core) {
             this.editor = editor;
             this.visible = false;
             this.create();
+            this.rect.syncEventer = editor;
             this.__listenEvents();
         }
         create() {
             let rotatePoint, resizeLine, resizePoint;
-            const { resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this;
-            const arounds = [{ x: 1, y: 1 }, { x: 0.5, y: 1 }, { x: 0, y: 1 }, { x: 0, y: 0.5 }, { x: 0, y: 0 }, { x: 0.5, y: 0 }, { x: 1, y: 0 }, { x: 1, y: 0.5 }];
+            const { view, resizePoints, rotatePoints, resizeLines, rect, circle, 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({ 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);
                 if (i % 2) {
@@ -600,58 +885,87 @@ this.LeaferIN.editor = (function (exports, core) {
                     resizeLines.push(resizeLine);
                     this.listenPointEvents(resizeLine, 'resize', i);
                 }
-                resizePoint = new EditPoint({ name: 'resize-point', around: 'center', strokeAlign: 'outside', hitRadius: 5 });
+                resizePoint = new EditPoint({ name: 'resize-point', hitRadius: 5 });
                 resizePoints.push(resizePoint);
                 this.listenPointEvents(resizePoint, 'resize', i);
             }
-            buttons.add(circle);
             this.listenPointEvents(circle, 'rotate', 2);
-            this.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints);
+            view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
+            this.add(view);
         }
-        update(bounds) {
-            const { config, list } = this.editor;
-            const { width, height } = bounds;
-            const { rect, circle, resizePoints, rotatePoints, resizeLines } = this;
-            const { middlePoint, resizeable, rotateable, stroke, strokeWidth } = config;
+        load() {
+            const { mergeConfig, element, single } = this.editor;
+            const { rect, circle, resizePoints } = this;
+            const { stroke, strokeWidth, moveable } = mergeConfig;
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
-            this.visible = list[0] && !list[0].locked;
-            let point = {}, style, rotateP, resizeP, resizeL;
+            let resizeP;
             for (let i = 0; i < 8; i++) {
-                core.AroundHelper.toPoint(core.AroundHelper.directionData[i], bounds, point);
-                style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]);
-                resizeP = resizePoints[i], rotateP = rotatePoints[i], resizeL = resizeLines[Math.floor(i / 2)];
-                resizeP.set(style);
-                resizeP.set(point), rotateP.set(point), resizeL.set(point);
-                resizeP.visible = resizeL.visible = resizeable || rotateable;
-                rotateP.visible = rotateable && resizeable;
-                if (i % 2) {
-                    resizeP.visible = rotateP.visible = !!middlePoint;
-                    if (((i + 1) / 2) % 2) {
-                        resizeL.width = width;
-                        if (resizeP.width > width - 30)
-                            resizeP.visible = false;
-                    }
-                    else {
-                        resizeL.height = height;
-                        resizeP.rotation = 90;
-                        if (resizeP.width > height - 30)
-                            resizeP.visible = false;
-                    }
-                }
-                else {
+                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;
+            }
+            circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
+            rect.set(Object.assign({ stroke, strokeWidth }, (mergeConfig.rect || {})));
+            rect.hittable = !single && !!moveable;
+            element.syncEventer = (single && moveable) ? rect : null;
+            this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null;
+        }
+        update(bounds) {
+            this.visible = !this.editor.element.locked;
+            if (this.view.worldOpacity) {
+                const { mergeConfig } = this.editor;
+                const { width, height } = bounds;
+                const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
+                const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig;
+                const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
+                const showPoints = !(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;
+                    if (i % 2) {
+                        resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
+                        if (((i + 1) / 2) % 2) {
+                            resizeL.width = width;
+                            if (resizeP.width > width - 30)
+                                resizeP.visible = false;
+                        }
+                        else {
+                            resizeL.height = height;
+                            resizeP.rotation = 90;
+                            if (resizeP.width > height - 30)
+                                resizeP.visible = false;
+                        }
+                    }
                 }
+                circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
+                if (circle.visible)
+                    this.layoutCircle(mergeConfig);
+                if (rect.path)
+                    rect.path = null;
+                rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
+                buttons.visible = showPoints && buttons.children.length > 0;
+                if (buttons.visible)
+                    this.layoutButtons(mergeConfig);
             }
-            circle.visible = rotateable && !!config.rotatePoint;
-            circle.set(this.getPointStyle(config.rotatePoint || pointsStyle[0]));
-            rect.set(Object.assign({ stroke, strokeWidth }, (config.rect || {})));
-            rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
-            this.layoutButtons();
         }
-        layoutButtons() {
-            const { buttons, resizePoints } = this;
-            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.config;
+        layoutCircle(config) {
+            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
+            const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'));
+            this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint);
+        }
+        layoutButtons(config) {
+            const { buttons } = this;
+            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config;
             const { flippedX, flippedY } = this;
             let index = fourDirection.indexOf(buttonsDirection);
             if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
@@ -659,11 +973,18 @@ this.LeaferIN.editor = (function (exports, core) {
                     index = (index + 2) % 4;
             }
             const direction = buttonsFixed ? EditDataHelper.getRotateDirection(index, this.flippedOne ? this.rotation : -this.rotation, 4) : index;
-            const point = resizePoints[direction * 2 + 1];
+            this.setButtonPosition(buttons, direction, buttonsMargin, !!middlePoint);
+            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 useWidth = index % 2;
-            const margin = (buttonsMargin + (useWidth ? ((middlePoint ? point.width : 0) + buttons.boxBounds.width) : ((middlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign;
+            const useWidth = direction % 2;
+            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;
@@ -672,48 +993,62 @@ this.LeaferIN.editor = (function (exports, core) {
                 buttons.x = point.x;
                 buttons.y = point.y + margin;
             }
-            if (buttonsFixed) {
-                buttons.rotation = (direction - index) * 90;
-                buttons.scaleX = flippedX ? -1 : 1;
-                buttons.scaleY = flippedY ? -1 : 1;
-            }
+        }
+        unload() {
+            this.visible = false;
         }
         getPointStyle(userStyle) {
-            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.config;
-            const defaultStyle = { fill: pointFill, stroke, strokeWidth, width: pointSize, height: pointSize, cornerRadius: pointRadius };
+            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig;
+            const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius };
             return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
         }
         getPointsStyle() {
-            const { point } = this.editor.config;
+            const { point } = this.editor.mergeConfig;
             return point instanceof Array ? point : [point];
         }
         getMiddlePointsStyle() {
-            const { middlePoint } = this.editor.config;
+            const { middlePoint } = this.editor.mergeConfig;
             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;
+            }
+        }
         onDragStart(e) {
             this.dragging = true;
-            if (e.target.name === 'rect')
-                this.editor.opacity = this.editor.config.hideOnMove ? 0 : 1;
+            const { editor } = this;
+            if (e.current.name === 'rect') {
+                this.moving = true;
+                editor.dragStartPoint = { x: editor.element.x, y: editor.element.y };
+                editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1;
+            }
+            else if (e.current.pointType === 'resize') {
+                editor.dragStartBounds = Object.assign({}, editor.element.getLayoutBounds('box', 'local'));
+            }
         }
         onDragEnd(e) {
             this.dragging = false;
-            if (e.target.name === 'rect')
+            this.moving = false;
+            if (e.current.name === 'rect')
                 this.editor.opacity = 1;
         }
         onDrag(e) {
             const { editor } = this;
-            const point = e.current;
-            if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.config.resizeable) {
-                if (editor.config.rotateable)
+            const point = this.enterPoint = e.current;
+            if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
+                if (editor.mergeConfig.rotateable)
                     editor.onRotate(e);
             }
-            else {
+            else if (point.pointType === 'resize') {
                 editor.onScale(e);
             }
+            updateCursor(editor, e);
         }
         onArrow(e) {
-            if (this.editor.hasTarget) {
+            if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
                 const move = { x: 0, y: 0 };
                 const distance = e.shiftKey ? 10 : 1;
                 switch (e.code) {
@@ -729,13 +1064,29 @@ this.LeaferIN.editor = (function (exports, core) {
                     case 'ArrowRight':
                         move.x = distance;
                 }
-                if (move.x || move.y)
-                    this.editor.move(move.x, move.y);
+                this.editor.move(move);
             }
         }
-        onDoubleClick() {
+        onDoubleTap(e) {
+            if (this.editor.mergeConfig.openInner === 'double')
+                this.openInner(e);
+        }
+        onLongPress(e) {
+            if (this.editor.mergeConfig.openInner === 'long')
+                this.openInner(e);
+        }
+        openInner(e) {
             const { editor } = this;
-            if (editor.single && editor.element.isBranch) ;
+            if (editor.single) {
+                const { element } = editor;
+                if (element.isBranch) {
+                    editor.openGroup(element);
+                    editor.target = editor.selector.findDeepOne(e);
+                }
+                else {
+                    editor.openInnerEditor();
+                }
+            }
         }
         listenPointEvents(point, type, direction) {
             const { editor } = this;
@@ -751,12 +1102,13 @@ this.LeaferIN.editor = (function (exports, core) {
         __listenEvents() {
             const { rect, editor } = this;
             this.__eventIds = [
-                editor.on_(EditorEvent.SELECT, () => { this.visible = editor.hasTarget; }),
+                editor.on_(EditorEvent.SELECT, this.onSelect, this),
                 rect.on_(core.DragEvent.START, this.onDragStart, this),
                 rect.on_(core.DragEvent.DRAG, editor.onMove, editor),
                 rect.on_(core.DragEvent.END, this.onDragEnd, this),
                 rect.on_(core.PointerEvent.ENTER, () => updateMoveCursor(editor)),
-                rect.on_(core.PointerEvent.DOUBLE_CLICK, this.onDoubleClick, this)
+                rect.on_(core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
+                rect.on_(core.PointerEvent.LONG_PRESS, this.onLongPress, this)
             ];
         }
         __removeListenEvents() {
@@ -770,167 +1122,112 @@ this.LeaferIN.editor = (function (exports, core) {
         }
     }
 
+    class EditMask extends draw.UI {
+        constructor(editor) {
+            super();
+            this.editor = editor;
+            this.hittable = false;
+        }
+        __draw(canvas, options) {
+            const { editor } = this;
+            const { mask } = editor.mergeConfig;
+            if (mask && editor.list.length) {
+                const { rect } = editor.editBox;
+                const { width, height } = rect.__;
+                canvas.resetTransform();
+                canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
+                canvas.setWorld(rect.__world, options.matrix);
+                canvas.clearRect(0, 0, width, height);
+            }
+        }
+        destroy() {
+            this.editor = null;
+            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 config = {
-        editSize: 'auto',
+        editSize: 'size',
+        keyEvent: true,
         stroke: '#836DFF',
         strokeWidth: 2,
         pointFill: '#FFFFFF',
-        pointSize: 8,
+        pointSize: 10,
         pointRadius: 16,
         rotateGap: 45,
         buttonsDirection: 'bottom',
         buttonsMargin: 12,
+        hideOnSmall: true,
         moveCursor: 'move',
-        resizeCursor: ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'],
-        rotateCursor: ['ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize', 'n-resize'],
+        resizeCursor: { url: resizeSVG, x: 12, y: 12 },
+        rotateCursor: { url: rotateSVG, x: 12, y: 12 },
+        skewCursor: { url: skewSVG, x: 12, y: 12 },
         selector: true,
         hover: true,
+        select: 'press',
+        openInner: 'double',
         boxSelect: true,
+        moveable: true,
         resizeable: true,
+        flipable: true,
         rotateable: true,
         skewable: true
     };
 
-    class EditTool {
-        constructor() {
-            this.tag = 'EditTool';
-        }
-        onMove(e) {
-            const { moveX, moveY, editor } = e;
-            const { app, list } = editor;
-            app.lockLayout();
-            list.forEach(target => {
-                const move = target.getLocalPoint({ x: moveX, y: moveY }, null, true);
-                target.move(move.x, move.y);
-            });
-            app.unlockLayout();
-        }
-        onScale(e) {
-            const { scaleX, scaleY, transform, worldOrigin, editor } = e;
-            const { app, list } = editor;
-            app.lockLayout();
-            list.forEach(target => {
-                const resize = editor.getEditSize(target) === 'size';
-                if (transform) {
-                    target.transform(transform, resize);
-                }
-                else {
-                    target.scaleOf(target.getInnerPoint(worldOrigin), scaleX, scaleY, resize);
-                }
-            });
-            app.unlockLayout();
-        }
-        onRotate(e) {
-            const { rotation, worldOrigin, editor } = e;
-            const { app, list } = editor;
-            app.lockLayout();
-            list.forEach(target => {
-                target.rotateOf(target.getInnerPoint(worldOrigin), rotation);
-            });
-            app.unlockLayout();
-        }
-        onSkew(e) {
-            const { skewX, skewY, transform, worldOrigin, editor } = e;
-            const { app, list } = editor;
-            app.lockLayout();
-            list.forEach(target => {
-                const resize = editor.getEditSize(target) === 'size';
-                if (transform) {
-                    target.transform(transform, resize);
-                }
-                else {
-                    target.skewOf(target.getInnerPoint(worldOrigin), skewX, skewY, resize);
-                }
-            });
-            app.unlockLayout();
-        }
-        update(editor) {
-            const { simulateTarget, element } = editor;
-            if (editor.multiple)
-                simulateTarget.parent.updateLayout();
-            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = element.getLayoutBounds('box', editor, true);
-            editor.editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
-            editor.editBox.update({ x: 0, y: 0, width, height });
-        }
-    }
-    EditTool.list = [];
-
-    const { left, right } = IDirection8;
-    class LineEditTool extends EditTool {
-        constructor() {
-            super(...arguments);
-            this.tag = 'LineEditTool';
-            this.scaleOfEvent = true;
-        }
-        onScaleWithDrag(e) {
-            const { drag, direction, lockRatio, around } = e;
-            const target = e.target;
-            const fromPoint = { x: 0, y: 0 };
-            const { toPoint } = target;
-            target.rotation = 0;
-            let { x, y } = drag.getInnerMove(target);
-            if (lockRatio) {
-                if (Math.abs(x) > Math.abs(y)) {
-                    y = 0;
-                }
-                else {
-                    x = 0;
-                }
-            }
-            if (direction === left) {
-                fromPoint.x += x;
-                fromPoint.y += y;
-                if (around) {
-                    toPoint.x -= x;
-                    toPoint.y -= y;
-                }
-            }
-            else {
-                if (around) {
-                    fromPoint.x -= x;
-                    fromPoint.y -= y;
-                }
-                toPoint.x += x;
-                toPoint.y += y;
-            }
-            target.getLocalPointByInner(fromPoint, null, null, true);
-            target.getLocalPointByInner(toPoint, null, null, true);
-            target.x = fromPoint.x;
-            target.y = fromPoint.y;
-            target.getInnerPointByLocal(toPoint, null, null, true);
-            target.toPoint = toPoint;
-        }
-        onSkew(_e) {
-        }
-        update(editor) {
-            const { rotatePoints, resizeLines, resizePoints } = editor.editBox;
-            super.update(editor);
-            for (let i = 0; i < 8; i++) {
-                if (i < 4)
-                    resizeLines[i].visible = false;
-                resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right);
-            }
-        }
-    }
-
-    function getEditTool(list) {
-        if (list.length === 1) {
-            const leaf = list[0];
-            if (leaf instanceof core.Line && !leaf.points) {
-                return new LineEditTool();
-            }
-            else {
-                return new EditTool();
-            }
-        }
-        else {
-            return new EditTool();
-        }
-    }
-
     function simulate(editor) {
         const { simulateTarget, leafList: targetList } = editor;
-        const { x, y, width, height } = new core.Bounds().setListWithFn(targetList.list, (leaf) => leaf.worldBoxBounds);
+        const { x, y, width, height } = new draw.Bounds().setListWithFn(targetList.list, (leaf) => leaf.worldBoxBounds);
         const parent = simulateTarget.parent = targetList.list[0].leafer.zoomLayer;
         const { scaleX, scaleY, e: worldX, f: worldY } = parent.__world;
         simulateTarget.reset({ x: (x - worldX) / scaleX, y: (y - worldY) / scaleY, width: width / scaleX, height: height / scaleY });
@@ -939,13 +1236,14 @@ this.LeaferIN.editor = (function (exports, core) {
     function onTarget(editor, oldValue) {
         const { target } = editor;
         if (target) {
-            editor.leafList = target instanceof core.LeafList ? target : new core.LeafList(target instanceof Array ? target : target);
+            editor.leafList = target instanceof draw.LeafList ? target : new draw.LeafList(target instanceof Array ? target : target);
         }
         else {
             editor.leafList.reset();
         }
         editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }));
-        if (editor.hasTarget) {
+        editor.checkOpenedGroups();
+        if (editor.editing) {
             editor.waitLeafer(() => {
                 if (editor.multiple)
                     simulate(editor);
@@ -956,6 +1254,7 @@ this.LeaferIN.editor = (function (exports, core) {
             });
         }
         else {
+            editor.updateEditTool();
             editor.removeTargetEvents();
         }
     }
@@ -966,14 +1265,19 @@ this.LeaferIN.editor = (function (exports, core) {
     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, group) {
+        group(list, element, userGroup) {
             list.sort(reverseOrder);
             const { app, parent } = list[0];
-            if (!group)
-                group = new core.Group();
+            let group;
+            if (userGroup && userGroup.add) {
+                group = userGroup;
+            }
+            else {
+                group = new draw.Group(userGroup);
+            }
             parent.addAt(group, parent.children.indexOf(list[0]));
             list.sort(order);
-            const matrx = new core.Matrix(element.worldTransform);
+            const matrx = new draw.Matrix(element.worldTransform);
             matrx.divideParent(parent.worldTransform);
             group.setTransform(matrx);
             group.editable = true;
@@ -1019,25 +1323,79 @@ this.LeaferIN.editor = (function (exports, core) {
         }
     };
 
-    class Editor extends core.Group {
+    const debug = draw.Debug.get('EditToolCreator');
+    function registerEditTool() {
+        return (target) => {
+            EditToolCreator.register(target);
+        };
+    }
+    const registerInnerEditor = registerEditTool;
+    const EditToolCreator = {
+        list: {},
+        register(EditTool) {
+            const { tag } = EditTool.prototype;
+            list[tag] ? debug.repeat(tag) : (list[tag] = EditTool);
+        },
+        get(tag, editor) {
+            return new list[tag](editor);
+        }
+    };
+    const { 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';
+
+    class EditorGroupEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorGroupEvent.GROUP = 'editor.group';
+    EditorGroupEvent.BEFORE_UNGROUP = 'editor.before_ungroup';
+    EditorGroupEvent.UNGROUP = 'editor.ungroup';
+    EditorGroupEvent.OPEN = 'editor.open_group';
+    EditorGroupEvent.CLOSE = 'editor.close_group';
+
+    class Editor extends draw.Group {
+        get mergeConfig() {
+            const { element, config } = this;
+            return this.single && element.editConfig ? Object.assign(Object.assign({}, config), element.editConfig) : config;
+        }
         get list() { return this.leafList.list; }
-        get hasTarget() { return !!this.list.length; }
+        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 element() { return this.multiple ? this.simulateTarget : this.list[0]; }
         get buttons() { return this.editBox.buttons; }
-        get dragging() { return this.editBox.dragging; }
         constructor(userConfig, data) {
             super(data);
             this.config = config;
-            this.leafList = new core.LeafList();
-            this.simulateTarget = new core.Rect({ visible: false });
+            this.leafList = new draw.LeafList();
+            this.openedGroupList = new draw.LeafList();
+            this.simulateTarget = new draw.Rect({ visible: false });
             this.editBox = new EditBox(this);
+            this.editToolList = {};
             this.selector = new EditSelect(this);
+            this.editMask = new EditMask(this);
             this.targetEventIds = [];
             if (userConfig)
-                this.config = core.DataHelper.default(userConfig, this.config);
-            this.addMany(this.selector, this.editBox);
+                this.config = draw.DataHelper.default(userConfig, this.config);
+            this.addMany(this.editMask, this.selector, this.editBox);
+        }
+        select(target) {
+            this.target = target;
+        }
+        cancel() {
+            this.target = null;
         }
         hasItem(item) {
             return this.leafList.has(item);
@@ -1054,77 +1412,117 @@ this.LeaferIN.editor = (function (exports, core) {
             this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
         }
         update() {
-            if (this.target) {
-                this.editTool.update(this);
+            if (this.editing) {
+                if (this.innerEditing)
+                    this.innerEditor.update();
+                this.editTool.update();
                 this.selector.update();
             }
         }
+        updateEditBox() {
+            if (this.multiple)
+                simulate(this);
+            this.update();
+        }
         updateEditTool() {
-            this.editTool = getEditTool(this.list);
+            const tool = this.editTool;
+            if (tool) {
+                this.editBox.unload();
+                tool.unload();
+                this.editTool = null;
+            }
+            if (this.editing) {
+                const tag = this.single ? this.list[0].editOuter : 'EditTool';
+                this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                this.editBox.load();
+                this.editTool.load();
+            }
         }
-        getEditSize(ui) {
-            let { editSize } = this.config;
-            return editSize === 'auto' ? ui.editSize : editSize;
+        getEditSize(_ui) {
+            return this.mergeConfig.editSize;
         }
         onMove(e) {
-            const move = e.getLocalMove(this.element);
-            if (e.shiftKey) {
-                if (Math.abs(move.x) > Math.abs(move.y))
-                    move.y = 0;
-                else
-                    move.x = 0;
+            if (e instanceof core.MoveEvent) {
+                if (e.moveType !== 'drag') {
+                    const { moveable, resizeable } = this.mergeConfig;
+                    const move = e.getLocalMove(this.element);
+                    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 };
+                if (e.shiftKey) {
+                    if (Math.abs(total.x) > Math.abs(total.y))
+                        total.y = 0;
+                    else
+                        total.x = 0;
+                }
+                this.move(core.DragEvent.getValidMove(this.element, this.dragStartPoint, total));
             }
-            this.move(move.x, move.y);
         }
         onScale(e) {
             const { element } = this;
-            const { direction } = e.current;
-            let { around, lockRatio } = this.config;
-            if (e.shiftKey)
-                lockRatio = true;
-            const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey));
-            if (this.editTool.onScaleWithDrag) {
-                data.drag = e;
-                this.scaleWithDrag(data);
+            let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
+            if (e instanceof core.ZoomEvent) {
+                if (resizeable === 'zoom')
+                    e.stop(), this.scaleOf(element.getInnerPoint(e), e.scale, e.scale);
             }
             else {
-                this.scaleOf(data.origin, data.scaleX, data.scaleY);
+                const { direction } = e.current;
+                if (e.shiftKey || element.lockRatio)
+                    lockRatio = true;
+                const data = EditDataHelper.getScaleData(element, this.dragStartBounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
+                if (this.editTool.onScaleWithDrag) {
+                    data.drag = e;
+                    this.scaleWithDrag(data);
+                }
+                else {
+                    this.scaleOf(data.origin, data.scaleX, data.scaleY);
+                }
             }
         }
         onRotate(e) {
-            const { skewable, around, rotateGap } = this.config;
+            const { skewable, rotateable, around, rotateGap } = this.mergeConfig;
             const { direction, name } = e.current;
             if (skewable && name === 'resize-line')
                 return this.onSkew(e);
-            const { element, editBox } = this;
+            const { element } = this;
             let origin, rotation;
             if (e instanceof core.RotateEvent) {
-                rotation = e.rotation, origin = element.getInnerPoint(e);
+                if (rotateable === 'rotate')
+                    e.stop(), rotation = e.rotation, origin = element.getInnerPoint(e);
+                else
+                    return;
             }
             else {
                 const last = { x: e.x - e.moveX, y: e.y - e.moveY };
-                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (around || 'center'));
+                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
                 rotation = data.rotation;
                 origin = data.origin;
             }
-            rotation = core.MathHelper.getGapRotation(rotation, rotateGap, element.rotation);
+            rotation = draw.MathHelper.getGapRotation(rotation, rotateGap, element.rotation);
             if (!rotation)
                 return;
-            if (editBox.flippedOne)
+            if (element.scaleX * element.scaleY < 0)
                 rotation = -rotation;
-            this.rotateOf(origin, rotation);
+            this.rotateOf(origin, draw.MathHelper.float(rotation, 2));
         }
         onSkew(e) {
             const { element } = this;
-            const { around } = this.config;
+            const { around } = this.mergeConfig;
             const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, e.current.direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey));
             if (!skewX && !skewY)
                 return;
             this.skewOf(origin, skewX, skewY);
         }
-        move(x, y) {
+        move(x, y = 0) {
+            if (!this.mergeConfig.moveable || this.element.locked)
+                return;
             const { element } = this;
-            const world = element.getWorldPointByLocal({ x, y }, null, true);
+            const world = element.getWorldPointByLocal(typeof x === 'object' ? Object.assign({}, x) : { x, y }, null, true);
             const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y });
             this.editTool.onMove(event);
             this.emitEvent(event);
@@ -1132,59 +1530,148 @@ this.LeaferIN.editor = (function (exports, core) {
                 element.move(x, y);
         }
         scaleWithDrag(data) {
+            if (!this.mergeConfig.resizeable || this.element.locked)
+                return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(data.origin);
-            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin }));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }));
             this.editTool.onScaleWithDrag(event);
             this.emitEvent(event);
         }
         scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
+            if (!this.mergeConfig.resizeable || this.element.locked)
+                return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(origin);
-            let transform;
-            if (this.multiple) {
-                const childMatrix = Object.assign({}, element.localTransform);
-                element.scaleOf(origin, scaleX, scaleY);
-                transform = new core.Matrix(element.localTransform).divide(childMatrix);
-            }
+            const worldOrigin = this.getWorldOrigin(origin);
+            const transform = this.multiple && this.getChangedTransform(() => element.scaleOf(origin, scaleX, scaleY));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform });
             this.editTool.onScale(event);
             this.emitEvent(event);
         }
+        flip(axis) {
+            if (this.element.locked)
+                return;
+            const { element } = this;
+            const worldOrigin = this.getWorldOrigin('center');
+            const transform = this.multiple ? this.getChangedTransform(() => element.flip(axis)) : new draw.Matrix(draw.LeafHelper.getFlipTransform(element, axis));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform });
+            this.editTool.onScale(event);
+            this.emitEvent(event);
+        }
         rotateOf(origin, rotation) {
+            if (!this.mergeConfig.rotateable || this.element.locked)
+                return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(origin);
-            const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation });
+            const worldOrigin = this.getWorldOrigin(origin);
+            const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation));
+            const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform });
             this.editTool.onRotate(event);
             this.emitEvent(event);
-            if (this.multiple)
-                element.rotateOf(origin, rotation);
         }
         skewOf(origin, skewX, skewY = 0, _resize) {
+            if (!this.mergeConfig.skewable || this.element.locked)
+                return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(origin);
-            let transform;
-            if (this.multiple) {
-                const childMatrix = Object.assign({}, element.localTransform);
-                element.skewOf(origin, skewX, skewY);
-                transform = new core.Matrix(element.localTransform).divide(childMatrix);
-            }
-            const event = new EditorSkewEvent(EditorSkewEvent.SKEW, {
-                target: element, editor: this, skewX, skewY, transform, worldOrigin
-            });
+            const worldOrigin = this.getWorldOrigin(origin);
+            const transform = this.multiple && this.getChangedTransform(() => element.skewOf(origin, skewX, skewY));
+            const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform });
             this.editTool.onSkew(event);
             this.emitEvent(event);
         }
-        group(group) {
-            if (this.multiple)
-                this.target = EditorHelper.group(this.list, this.element, group);
+        getWorldOrigin(origin) {
+            return this.element.getWorldPoint(draw.LeafHelper.getInnerOrigin(this.element, origin));
+        }
+        getChangedTransform(func) {
+            const { element } = this;
+            const oldMatrix = new draw.Matrix(element.worldTransform);
+            func();
+            return new draw.Matrix(element.worldTransform).divide(oldMatrix);
+        }
+        group(userGroup) {
+            if (this.multiple) {
+                this.target = EditorHelper.group(this.list, this.element, userGroup);
+                this.emitGroupEvent(EditorGroupEvent.GROUP, this.target);
+            }
             return this.target;
         }
         ungroup() {
-            if (this.list.length)
-                this.target = EditorHelper.ungroup(this.list);
+            const { list } = this;
+            if (list.length) {
+                list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.BEFORE_UNGROUP, item));
+                this.target = EditorHelper.ungroup(list);
+                list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.UNGROUP, item));
+            }
             return this.list;
         }
+        openGroup(group) {
+            this.openedGroupList.add(group);
+            group.hitChildren = true;
+            this.emitGroupEvent(EditorGroupEvent.OPEN, group);
+        }
+        closeGroup(group) {
+            this.openedGroupList.remove(group);
+            group.hitChildren = false;
+            this.emitGroupEvent(EditorGroupEvent.CLOSE, group);
+        }
+        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));
+                list.forEach(item => this.closeGroup(item));
+            }
+            if (this.editing && !this.selector.dragging)
+                this.checkDeepSelect();
+        }
+        checkDeepSelect() {
+            let parent, { list } = this;
+            for (let i = 0; i < list.length; i++) {
+                parent = list[i].parent;
+                while (parent && !parent.hitChildren) {
+                    this.openGroup(parent);
+                    parent = parent.parent;
+                }
+            }
+        }
+        emitGroupEvent(type, group) {
+            const event = new EditorGroupEvent(type, { editTarget: group });
+            this.emitEvent(event);
+            group.emitEvent(event);
+        }
+        openInnerEditor(target) {
+            if (target)
+                this.target = target;
+            if (this.single) {
+                const editTarget = this.element;
+                const tag = editTarget.editInner;
+                if (tag && EditToolCreator.list[tag]) {
+                    this.editTool.unload();
+                    this.innerEditing = true;
+                    this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                    this.innerEditor.editTarget = editTarget;
+                    this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
+                    this.innerEditor.load();
+                    this.emitInnerEvent(InnerEditorEvent.OPEN);
+                }
+            }
+        }
+        closeInnerEditor() {
+            if (this.innerEditing) {
+                this.innerEditing = false;
+                this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE);
+                this.innerEditor.unload();
+                this.emitInnerEvent(InnerEditorEvent.CLOSE);
+                this.editTool.load();
+                this.innerEditor = null;
+            }
+        }
+        emitInnerEvent(type) {
+            const { innerEditor } = this;
+            const { editTarget } = innerEditor;
+            const event = new InnerEditorEvent(type, { editTarget, innerEditor });
+            this.emitEvent(event);
+            editTarget.emitEvent(event);
+        }
         lock() {
             this.list.forEach(leaf => leaf.locked = true);
             this.update();
@@ -1209,7 +1696,10 @@ this.LeaferIN.editor = (function (exports, core) {
             if (!this.targetEventIds.length) {
                 const { leafer } = this.list[0];
                 this.targetEventIds = [
-                    leafer.on_(core.RenderEvent.START, this.update, this),
+                    this.app.on_(core.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
+                    this.app.on_(core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
+                    this.app.on_(core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
+                    leafer.on_(draw.RenderEvent.START, this.update, this),
                     leafer.on_([core.KeyEvent.HOLD, core.KeyEvent.UP], (e) => { updateCursor(this, e); }),
                     leafer.on_(core.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
                 ];
@@ -1225,7 +1715,9 @@ this.LeaferIN.editor = (function (exports, core) {
         destroy() {
             if (!this.destroyed) {
                 this.simulateTarget.destroy();
-                this.target = this.hoverTarget = this.simulateTarget = null;
+                Object.values(this.editToolList).forEach(item => item.destroy());
+                this.editToolList = {};
+                this.target = this.hoverTarget = this.simulateTarget = this.editTool = this.innerEditor = null;
                 super.destroy();
             }
         }
@@ -1237,8 +1729,254 @@ this.LeaferIN.editor = (function (exports, core) {
         targetAttr(onTarget)
     ], Editor.prototype, "target", void 0);
 
-    core.Creator.editor = function (options) {
-        return new Editor(options);
+    class InnerEditor {
+        static registerInnerEditor() {
+            EditToolCreator.register(this);
+        }
+        get tag() { return 'InnerEditor'; }
+        get editBox() { return this.editor.editBox; }
+        constructor(editor) {
+            this.editor = editor;
+            this.create();
+        }
+        onCreate() { }
+        create() {
+            this.view = new draw.Group();
+            this.onCreate();
+        }
+        onLoad() { }
+        load() {
+            this.editor.selector.hittable = this.editor.app.tree.hitChildren = false;
+            this.onLoad();
+        }
+        onUpdate() { }
+        update() { this.onUpdate(); }
+        onUnload() { }
+        unload() {
+            this.editor.selector.hittable = this.editor.app.tree.hitChildren = true;
+            this.onUnload();
+        }
+        onDestroy() { }
+        destroy() {
+            this.onDestroy();
+            if (this.editor) {
+                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'; }
+        onMove(e) {
+            const { moveX, moveY, editor } = e;
+            const { app, list } = editor;
+            app.lockLayout();
+            list.forEach(target => {
+                target.moveWorld(moveX, moveY);
+            });
+            app.unlockLayout();
+        }
+        onScale(e) {
+            const { scaleX, scaleY, transform, worldOrigin, editor } = e;
+            const { app, 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);
+                }
+            });
+            app.unlockLayout();
+        }
+        onRotate(e) {
+            const { rotation, transform, worldOrigin, editor } = e;
+            const { app, list } = editor;
+            app.lockLayout();
+            list.forEach(target => {
+                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;
+            app.lockLayout();
+            list.forEach(target => {
+                const resize = editor.getEditSize(target) !== 'scale';
+                if (transform) {
+                    target.transformWorld(transform, resize);
+                }
+                else {
+                    target.skewOfWorld(worldOrigin, skewX, skewY, resize);
+                }
+            });
+            app.unlockLayout();
+        }
+        load() {
+            this.editBox.view.visible = true;
+            this.onLoad();
+        }
+        update() {
+            const { editor, editBox } = this;
+            const { simulateTarget, element } = editor;
+            if (editor.multiple)
+                simulateTarget.parent.updateLayout();
+            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = element.getLayoutBounds('box', editor, true);
+            editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
+            editBox.update({ x: 0, y: 0, width, height });
+            this.onUpdate();
+        }
+        unload() {
+            this.editBox.view.visible = false;
+            this.onUnload();
+        }
+    };
+    exports.EditTool = __decorate([
+        registerEditTool()
+    ], exports.EditTool);
+
+    const { left, right } = draw.Direction9;
+    const { move, copy } = draw.PointHelper;
+    exports.LineEditTool = class LineEditTool extends exports.EditTool {
+        constructor() {
+            super(...arguments);
+            this.scaleOfEvent = true;
+        }
+        get tag() { return 'LineEditTool'; }
+        onScaleWithDrag(e) {
+            const { drag, direction, lockRatio, around } = e;
+            const line = e.target;
+            const isDragFrom = direction === left;
+            if (line.pathInputed) {
+                const { path } = line.__;
+                const { from, 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);
+                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 {
+                const from = draw.getPointData();
+                const { toPoint } = line;
+                line.rotation = 0;
+                this.dragPoint(from, toPoint, isDragFrom, around, this.getInnerMove(line, drag, lockRatio));
+                line.getLocalPointByInner(from, null, null, true);
+                line.getLocalPointByInner(toPoint, null, null, true);
+                line.x = from.x;
+                line.y = from.y;
+                line.getInnerPointByLocal(toPoint, null, null, true);
+                line.toPoint = toPoint;
+            }
+        }
+        getInnerMove(ui, event, lockRatio) {
+            const movePoint = event.getInnerMove(ui);
+            if (lockRatio) {
+                if (Math.abs(movePoint.x) > Math.abs(movePoint.y)) {
+                    movePoint.y = 0;
+                }
+                else {
+                    movePoint.x = 0;
+                }
+            }
+            return movePoint;
+        }
+        getFromToByPath(path) {
+            return {
+                from: { x: path[1], y: path[2] },
+                to: { x: path[4], y: path[5] }
+            };
+        }
+        getFromToByPoints(points) {
+            return {
+                from: { x: points[0], y: points[1] },
+                to: { x: points[2], y: points[3] }
+            };
+        }
+        dragPoint(fromPoint, toPoint, isDragFrom, around, movePoint) {
+            const { x, y } = movePoint;
+            if (isDragFrom) {
+                move(fromPoint, x, y);
+                if (around)
+                    move(toPoint, -x, -y);
+            }
+            else {
+                if (around)
+                    move(fromPoint, -x, -y);
+                move(toPoint, x, y);
+            }
+        }
+        onSkew(_e) {
+        }
+        onUpdate() {
+            const { editBox } = this, { rotatePoints, resizeLines, resizePoints, 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 (fromTo) {
+                const { from, 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);
+                copy(resizePoints[7], from);
+                copy(rotatePoints[7], from);
+                copy(resizePoints[3], to);
+                copy(rotatePoints[3], to);
+            }
+            for (let i = 0; i < 8; i++) {
+                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.Creator.editor = function (options) { return new Editor(options); };
+    draw.UI.setEditConfig = function (config) {
+        draw.defineKey(this.prototype, 'editConfig', {
+            get() { return typeof config === 'function' ? config(this) : config; }
+        });
+    };
+    draw.UI.setEditOuter = function (toolName) {
+        draw.defineKey(this.prototype, 'editOuter', {
+            get() { return typeof toolName === 'string' ? toolName : toolName(this); }
+        });
+    };
+    draw.UI.setEditInner = function (editorName) {
+        draw.defineKey(this.prototype, 'editInner', {
+            get() { return typeof editorName === 'string' ? editorName : editorName(this); }
+        });
     };
 
     exports.EditBox = EditBox;
@@ -1246,18 +1984,28 @@ this.LeaferIN.editor = (function (exports, core) {
     exports.EditPoint = EditPoint;
     exports.EditSelect = EditSelect;
     exports.EditSelectHelper = EditSelectHelper;
-    exports.EditTool = EditTool;
+    exports.EditToolCreator = EditToolCreator;
     exports.Editor = Editor;
     exports.EditorEvent = EditorEvent;
+    exports.EditorGroupEvent = EditorGroupEvent;
     exports.EditorHelper = EditorHelper;
     exports.EditorMoveEvent = EditorMoveEvent;
     exports.EditorRotateEvent = EditorRotateEvent;
     exports.EditorScaleEvent = EditorScaleEvent;
     exports.EditorSkewEvent = EditorSkewEvent;
-    exports.LineEditTool = LineEditTool;
+    exports.InnerEditor = InnerEditor;
+    exports.InnerEditorEvent = InnerEditorEvent;
+    exports.PathScaler = PathScaler;
     exports.SelectArea = SelectArea;
     exports.Stroker = Stroker;
+    exports.registerEditTool = registerEditTool;
+    exports.registerInnerEditor = registerInnerEditor;
+    exports.scaleResize = scaleResize;
+    exports.scaleResizeFontSize = scaleResizeFontSize;
+    exports.scaleResizeGroup = scaleResizeGroup;
+    exports.scaleResizePath = scaleResizePath;
+    exports.scaleResizePoints = scaleResizePoints;
 
     return exports;
 
-})({}, LeaferUI);
+})({}, LeaferUI, LeaferUI);