@leafer-in/editor 1.0.0-rc.6 → 1.0.0-rc.7

package/dist/editor.js

@@ -2,6 +2,377 @@ this.LeaferIN = this.LeaferIN || {};
 this.LeaferIN.editor = (function (exports, core) {
     'use strict';
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol */
+
+
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    class EditorEvent extends core.Event {
+        constructor(type, data) {
+            super(type);
+            if (data)
+                Object.assign(this, data);
+        }
+    }
+    EditorEvent.SELECT = 'editor.select';
+    EditorEvent.HOVER = 'editor.hover';
+
+    class EditorMoveEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorMoveEvent.MOVE = 'editor.move';
+
+    class EditorScaleEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorScaleEvent.SCALE = 'editor.scale';
+
+    class EditorRotateEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorRotateEvent.ROTATE = 'editor.rotate';
+
+    class EditorSkewEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorSkewEvent.SKEW = 'editor.skew';
+
+    function targetAttr(fn) {
+        return (target, key) => {
+            const privateKey = '_' + key;
+            core.defineKey(target, key, {
+                get() { return this[privateKey]; },
+                set(value) { if (this[privateKey] !== value)
+                    this[privateKey] = value, fn(this); }
+            });
+        };
+    }
+
+    const matrix = core.MatrixHelper.get();
+    const { abs } = Math;
+    const { copy, scale } = core.MatrixHelper;
+    class Stroker extends core.UI {
+        constructor() {
+            super();
+            this.list = [];
+            this.hittable = false;
+            this.strokeAlign = 'center';
+        }
+        setTarget(target, style) {
+            const { stroke, strokeWidth } = style;
+            this.set({ stroke, strokeWidth });
+            this.target = target;
+        }
+        __draw(canvas, options) {
+            const { list } = this;
+            if (list.length) {
+                let leaf;
+                const { stroke, strokeWidth } = 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;
+                            }
+                        }
+                        if (!drewPath) {
+                            canvas.setWorld(leaf.__world, options.matrix);
+                            canvas.beginPath();
+                            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);
+                    }
+                }
+                this.__.strokeWidth = strokeWidth;
+            }
+        }
+        destroy() {
+            this.target = null;
+            super.destroy();
+        }
+    }
+    __decorate([
+        targetAttr(onTarget$1)
+    ], Stroker.prototype, "target", void 0);
+    function onTarget$1(stroker) {
+        const value = stroker.target;
+        stroker.list = value ? (value instanceof Array ? value : [value]) : [];
+        stroker.forceUpdate();
+    }
+
+    class SelectArea extends core.Group {
+        constructor(data) {
+            super(data);
+            this.strokeArea = new core.Rect({ strokeAlign: 'center' });
+            this.fillArea = new core.Rect();
+            this.visible = this.hittable = false;
+            this.addMany(this.fillArea, this.strokeArea);
+        }
+        setStyle(style, userStyle) {
+            const { visible, stroke, strokeWidth } = style;
+            this.visible = visible;
+            this.strokeArea.reset(Object.assign({ stroke, strokeWidth }, (userStyle || {})));
+            this.fillArea.reset({ visible: userStyle ? false : true, fill: stroke, opacity: 0.2 });
+        }
+        setBounds(bounds) {
+            this.strokeArea.set(bounds);
+            this.fillArea.set(bounds);
+        }
+    }
+
+    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 EditSelectHelper = {
+        findOne(path) {
+            return path.list.find((leaf) => leaf.editable);
+        },
+        findBounds(leaf, bounds) {
+            if (leaf.__.hittable && !leaf.__.locked && bounds.hit(leaf.__world)) {
+                if (leaf.__.editable) {
+                    if (leaf.isBranch && !leaf.__.hitChildren) {
+                        return leaf.__.hitSelf ? YesAndSkip : NoAndSkip;
+                    }
+                    else if (leaf.isFrame) {
+                        return bounds.includes(leaf.__layout.boxBounds, leaf.__world) ? YesAndSkip : No;
+                    }
+                    else {
+                        if (bounds.hit(leaf.__layout.boxBounds, leaf.__world) && leaf.__.hitSelf)
+                            return Yes;
+                    }
+                }
+                return No;
+            }
+            else {
+                return leaf.isBranch ? NoAndSkip : No;
+            }
+        }
+    };
+
+    const { findOne } = EditSelectHelper;
+    class EditSelect extends core.Group {
+        get dragging() { return !!this.originList; }
+        get running() { return this.editor.hittable && this.editor.config.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.selectArea = new SelectArea();
+            this.__eventIds = [];
+            this.editor = editor;
+            this.addMany(this.targetStroker, this.hoverStroker, this.selectArea);
+            this.__listenEvents();
+        }
+        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 });
+            }
+            else {
+                this.hoverStroker.target = null;
+            }
+        }
+        onSelect() {
+            if (this.running) {
+                const { 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)
+                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;
+            }
+            if (this.isMoveMode) {
+                this.editor.hoverTarget = null;
+            }
+        }
+        onBeforeDown(e) {
+            if (this.running && !this.isMoveMode && !e.middle) {
+                const find = this.lastDownLeaf = findOne(e.path);
+                if (find) {
+                    if (e.shiftKey) {
+                        this.editor.shiftItem(find);
+                    }
+                    else {
+                        this.editor.target = find;
+                    }
+                    this.editor.updateLayout();
+                    find.leafer.interaction.updateDownData();
+                }
+                else if (this.allow(e.target)) {
+                    if (!e.shiftKey)
+                        this.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)) {
+                const { editor } = this;
+                const { stroke, strokeWidth, area } = editor.config;
+                const { x, y } = e.getInner(this);
+                this.bounds.set(x, y);
+                this.selectArea.setStyle({ visible: true, stroke, strokeWidth, x, y }, area);
+                this.selectArea.setBounds(this.bounds.get());
+                this.originList = editor.leafList.clone();
+            }
+        }
+        onDrag(e) {
+            if (this.editor.dragging) {
+                this.onDragEnd();
+                return;
+            }
+            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));
+                this.bounds.width = total.x;
+                this.bounds.height = total.y;
+                this.selectArea.setBounds(dragBounds.get());
+                if (list.length) {
+                    const selectList = [];
+                    this.originList.forEach(item => { if (!list.has(item))
+                        selectList.push(item); });
+                    list.forEach(item => { if (!this.originList.has(item))
+                        selectList.push(item); });
+                    editor.target = selectList;
+                }
+                else {
+                    editor.target = this.originList;
+                    if (editor.leafList.length)
+                        editor.update();
+                }
+            }
+        }
+        onDragEnd() {
+            if (this.dragging)
+                this.originList = null, this.selectArea.visible = false;
+        }
+        onAutoMove(e) {
+            if (this.dragging) {
+                const { x, y } = e.getLocalMove(this);
+                this.bounds.x += x;
+                this.bounds.y += y;
+            }
+        }
+        allow(target) {
+            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));
+            }
+            else {
+                return false;
+            }
+        }
+        findDeepOne(e) {
+            const options = { exclude: new core.LeafList(this.editor.editBox.rect) };
+            return findOne(e.target.leafer.interaction.findPath(e, options));
+        }
+        __listenEvents() {
+            const { editor } = this;
+            editor.waitLeafer(() => {
+                const { app } = editor;
+                app.selector.proxy = editor;
+                this.__eventIds = [
+                    editor.on_(EditorEvent.HOVER, this.onHover, this),
+                    editor.on_(EditorEvent.SELECT, this.onSelect, this),
+                    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.DRAG, this.onDrag, this),
+                    app.on_(core.DragEvent.END, this.onDragEnd, this),
+                    app.on_(core.MoveEvent.MOVE, this.onAutoMove, this),
+                    app.on_([core.ZoomEvent.ZOOM, core.MoveEvent.MOVE], () => { this.editor.hoverTarget = null; }),
+                ];
+            });
+        }
+        __removeListenEvents() {
+            if (this.__eventIds) {
+                this.off_(this.__eventIds);
+                this.__eventIds.length = 0;
+            }
+        }
+        destroy() {
+            this.editor = this.originList = this.lastDownLeaf = null;
+            this.__removeListenEvents();
+            super.destroy();
+        }
+    }
+
     var IDirection8;
     (function (IDirection8) {
         IDirection8[IDirection8["topLeft"] = 0] = "topLeft";
@@ -14,110 +385,154 @@ this.LeaferIN.editor = (function (exports, core) {
         IDirection8[IDirection8["left"] = 7] = "left";
     })(IDirection8 || (IDirection8 = {}));
 
-    const { scaleOfOuter, reset } = core.MatrixHelper;
     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 matrix = {};
-    function getResizeData(old, direction, move, lockRatio, around) {
-        if (around) {
-            move.x *= 2;
-            move.y *= 2;
-        }
-        let origin, scaleX = 1, scaleY = 1;
-        const { x, y, width, height } = old;
-        const topScale = (-move.y + height) / height;
-        const rightScale = (move.x + width) / width;
-        const bottomScale = (move.y + height) / height;
-        const leftScale = (-move.x + width) / width;
-        switch (direction) {
-            case top$1:
-                scaleY = topScale;
-                if (lockRatio)
-                    scaleX = scaleY;
-                origin = { x: x + width / 2, y: y + height };
-                break;
-            case right$2:
-                scaleX = rightScale;
-                if (lockRatio)
-                    scaleY = scaleX;
-                origin = { x, y: y + height / 2 };
-                break;
-            case bottom$1:
-                scaleY = bottomScale;
-                if (lockRatio)
-                    scaleX = scaleY;
-                origin = { x: x + width / 2, y };
-                break;
-            case left$2:
-                scaleX = leftScale;
-                if (lockRatio)
+    const { toPoint } = core.AroundHelper;
+    const EditDataHelper = {
+        getScaleData(bounds, direction, pointMove, lockRatio, around) {
+            let origin, scaleX = 1, scaleY = 1;
+            const { width, height } = bounds;
+            if (around) {
+                pointMove.x *= 2;
+                pointMove.y *= 2;
+            }
+            const topScale = (-pointMove.y + height) / height;
+            const rightScale = (pointMove.x + width) / width;
+            const bottomScale = (pointMove.y + height) / height;
+            const leftScale = (-pointMove.x + width) / width;
+            switch (direction) {
+                case top$1:
+                    scaleY = topScale;
+                    origin = { x: 0.5, y: 1 };
+                    break;
+                case right$2:
+                    scaleX = rightScale;
+                    origin = { x: 0, y: 0.5 };
+                    break;
+                case bottom$1:
+                    scaleY = bottomScale;
+                    origin = { x: 0.5, y: 0 };
+                    break;
+                case left$2:
+                    scaleX = leftScale;
+                    origin = { x: 1, y: 0.5 };
+                    break;
+                case topLeft$1:
+                    scaleY = topScale;
+                    scaleX = leftScale;
+                    origin = { x: 1, y: 1 };
+                    break;
+                case topRight$1:
+                    scaleY = topScale;
+                    scaleX = rightScale;
+                    origin = { x: 0, y: 1 };
+                    break;
+                case bottomRight$1:
+                    scaleY = bottomScale;
+                    scaleX = rightScale;
+                    origin = { x: 0, y: 0 };
+                    break;
+                case bottomLeft$1:
+                    scaleY = bottomScale;
+                    scaleX = leftScale;
+                    origin = { x: 1, y: 0 };
+            }
+            if (lockRatio) {
+                if (scaleX !== 1)
                     scaleY = scaleX;
-                origin = { x: x + width, y: y + height / 2 };
-                break;
-            case topLeft$1:
-                scaleY = topScale;
-                scaleX = leftScale;
-                if (lockRatio)
-                    scaleX = scaleY;
-                origin = { x: x + width, y: y + height };
-                break;
-            case topRight$1:
-                scaleY = topScale;
-                scaleX = rightScale;
-                if (lockRatio)
-                    scaleX = scaleY;
-                origin = { x, y: y + height };
-                break;
-            case bottomRight$1:
-                scaleY = bottomScale;
-                scaleX = rightScale;
-                if (lockRatio)
+                else
                     scaleX = scaleY;
-                origin = { x, y };
-                break;
-            case bottomLeft$1:
-                scaleY = bottomScale;
-                scaleX = leftScale;
-                if (lockRatio)
-                    scaleX = scaleY;
-                origin = { x: x + width, y };
-                break;
-        }
-        if (around) {
-            if (typeof around === 'object') {
-                origin = { x: x + width / around.x, y: y + height / around.y };
             }
-            else {
-                origin = { x: x + width / 2, y: y + height / 2 };
+            toPoint(around || origin, bounds, origin);
+            return { origin, scaleX, scaleY, direction, lockRatio, around };
+        },
+        getRotateData(bounds, direction, current, last, around) {
+            let origin;
+            switch (direction) {
+                case topLeft$1:
+                    origin = { x: 1, y: 1 };
+                    break;
+                case topRight$1:
+                    origin = { x: 0, y: 1 };
+                    break;
+                case bottomRight$1:
+                    origin = { x: 0, y: 0 };
+                    break;
+                case bottomLeft$1:
+                    origin = { x: 1, y: 0 };
+                    break;
+                default:
+                    origin = { x: 0.5, y: 0.5 };
+            }
+            toPoint(around || origin, bounds, origin);
+            return { origin, rotation: core.PointHelper.getRotation(last, origin, current) };
+        },
+        getSkewData(bounds, direction, move, around) {
+            let origin, skewX = 0, skewY = 0;
+            let last;
+            switch (direction) {
+                case top$1:
+                    last = { x: 0.5, y: 0 };
+                    origin = { x: 0.5, y: 1 };
+                    skewX = 1;
+                    break;
+                case bottom$1:
+                    last = { x: 0.5, y: 1 };
+                    origin = { x: 0.5, y: 0 };
+                    skewX = 1;
+                    break;
+                case left$2:
+                    last = { x: 0, y: 0.5 };
+                    origin = { x: 1, y: 0.5 };
+                    skewY = 1;
+                    break;
+                case right$2:
+                    last = { x: 1, y: 0.5 };
+                    origin = { x: 0, y: 0.5 };
+                    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) });
+            skewX ? skewX = -rotation : skewY = rotation;
+            return { origin, skewX, skewY };
+        },
+        getAround(around, altKey) {
+            return (altKey && !around) ? core.AroundHelper.center : around;
+        },
+        getRotateDirection(direction, rotation, totalDirection = 8) {
+            direction = (direction + Math.round(rotation / (360 / totalDirection))) % totalDirection;
+            if (direction < 0)
+                direction += totalDirection;
+            return direction;
         }
-        reset(matrix);
-        scaleOfOuter(matrix, origin, scaleX, scaleY);
-        const bounds = { x: old.x + matrix.e, y: old.y + matrix.f, width: width * scaleX, height: height * scaleY };
-        return { bounds, old, origin, scaleX, scaleY, direction, lockRatio, around, };
-    }
+    };
 
     const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = IDirection8;
     function updateCursor(editor, e) {
-        const point = editor.enterPoint;
-        if (!point || !editor.target || !editor.visible)
+        const { editBox } = editor, point = editBox.enterPoint;
+        if (!point || !editor.hasTarget || !editBox.visible)
             return;
-        let { rotation } = editor;
-        let { resizeCursor, rotateCursor, resizeable } = editor.config;
-        const mirror = editor.tool.getMirrorData(editor);
-        const { __direction, __isResizePoint } = point.__;
-        editor.enterPoint = point;
-        if (__isResizePoint && (e.metaKey || e.ctrlKey || !resizeable))
+        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 (mirror.x || mirror.y) {
-            mirrorCursors(resizeCursor = [...resizeCursor], mirror.x, mirror.y);
-            mirrorCursors(rotateCursor = [...rotateCursor], mirror.y, mirror.x);
-            if (mirror.x + mirror.y === 1)
+        if (editBox.flipped) {
+            const { flippedX, flippedY } = editBox;
+            mirrorCursors(resizeCursor = [...resizeCursor], flippedX, flippedY);
+            mirrorCursors(rotateCursor = [...rotateCursor], flippedY, flippedX);
+            if (editBox.flippedOne)
                 rotation = -rotation;
         }
-        let index = (__direction + Math.round(rotation / 45)) % 8;
-        if (index < 0)
-            index += 8;
-        point.cursor = __isResizePoint ? resizeCursor[index] : rotateCursor[index];
+        const index = EditDataHelper.getRotateDirection(direction, rotation);
+        point.cursor = isResizePoint ? resizeCursor[index] : rotateCursor[index];
+    }
+    function updateMoveCursor(editor) {
+        editor.editBox.rect.cursor = editor.config.moveCursor;
     }
     function mirrorCursors(mirror, mirrorX, mirrorY) {
         if (mirrorX) {
@@ -140,133 +555,324 @@ this.LeaferIN.editor = (function (exports, core) {
         }
     }
 
-    const RectTool = {
-        name: 'RectTool',
-        getMirrorData(editor) {
-            const { scaleX, scaleY } = editor.target;
-            return {
-                x: scaleX < 0 ? 1 : 0,
-                y: scaleY < 0 ? 1 : 0
-            };
-        },
-        resize(e) {
-            const { target, bounds, resizeType, old } = e;
-            const { x, y, width, height } = bounds;
-            const point = { x: x - old.x, y: y - old.y };
-            target.innerToWorld(point, null, true, target.parent);
-            target.x += point.x;
-            target.y += point.y;
-            if (resizeType === 'scale') {
-                target.scaleX *= width / old.width;
-                target.scaleY *= height / old.height;
-            }
-            else {
-                if (width < 0) {
-                    target.width = -width;
-                    target.scaleX *= -1;
-                }
-                else {
-                    if (target.width !== width)
-                        target.width = width;
-                }
-                if (height < 0) {
-                    target.height = -height;
-                    target.scaleY *= -1;
-                }
-                else {
-                    if (target.height !== height)
-                        target.height = height;
+    class EditPoint extends core.Box {
+    }
+
+    const fourDirection = ['top', 'right', 'bottom', 'left'];
+    class EditBox extends core.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.resizePoints = [];
+            this.rotatePoints = [];
+            this.resizeLines = [];
+            this.__eventIds = [];
+            this.editor = editor;
+            this.visible = false;
+            this.create();
+            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 }];
+            for (let i = 0; i < 8; i++) {
+                rotatePoint = new EditPoint({ around: arounds[i], width: 15, height: 15, hitFill: "all" });
+                rotatePoints.push(rotatePoint);
+                this.listenPointEvents(rotatePoint, 'rotate', i);
+                if (i % 2) {
+                    resizeLine = new EditPoint({ name: 'resize-line', around: 'center', width: 10, height: 10, hitFill: "all" });
+                    resizeLines.push(resizeLine);
+                    this.listenPointEvents(resizeLine, 'resize', i);
                 }
+                resizePoint = new EditPoint({ name: 'resize-point', around: 'center', strokeAlign: 'outside', hitRadius: 5 });
+                resizePoints.push(resizePoint);
+                this.listenPointEvents(resizePoint, 'resize', i);
             }
-        },
-        rotate(e) {
-            const { target, rotation, origin } = e;
-            target.rotateOf(origin, rotation);
-        },
-        update(editor) {
-            const { target, config, rotatePoints, targetRect, rect, circle, resizeLines, resizePoints } = editor;
-            const { type, resizeable, rotateable, stroke, pointFill, pointSize, pointRadius } = config;
-            const defaultStyle = { fill: pointFill, stroke, width: pointSize, height: pointSize, cornerRadius: pointRadius };
-            const pointStyles = config.point instanceof Array ? config.point : [config.point || defaultStyle];
-            const box = new core.Bounds(target.boxBounds);
-            const w = target.worldTransform, pw = editor.parent.worldTransform;
-            const matrix = new core.Matrix(w);
-            matrix.divide(pw);
-            const worldX = matrix.e, worldY = matrix.f;
-            let { scaleX, scaleY, rotation, skewX, skewY } = w;
-            scaleX /= pw.scaleX, scaleY /= pw.scaleY, rotation -= pw.rotation, skewX -= pw.skewX, skewY -= pw.skewY;
-            const { x, y, width, height } = box.scale(scaleX, scaleY);
-            editor.set({ x: worldX, y: worldY, rotation, skewX, skewY });
-            targetRect.set({ x, y, width: box.width / scaleX, height: box.height / scaleY, scaleX, scaleY, visible: true });
-            const points = [
-                { x, y },
-                { x: x + width / 2, y },
-                { x: x + width, y },
-                { x: x + width, y: y + height / 2 },
-                { x: x + width, y: y + height },
-                { x: x + width / 2, y: y + height },
-                { x, y: y + height },
-                { x, y: y + height / 2 }
-            ];
-            const rectPoints = [];
+            buttons.add(circle);
+            this.listenPointEvents(circle, 'rotate', 2);
+            this.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints);
+        }
+        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;
+            const points = this.getDirection8Points(bounds);
+            const pointsStyle = this.getPointsStyle();
+            const middlePointsStyle = this.getMiddlePointsStyle();
+            this.visible = list[0] && !list[0].locked;
             let point, style, rotateP, resizeP, resizeL;
             for (let i = 0; i < 8; i++) {
-                point = points[i];
-                style = pointStyles[i % pointStyles.length];
-                resizeP = resizePoints[i];
-                resizeL = resizeLines[Math.floor(i / 2)];
-                rotateP = rotatePoints[i];
+                point = points[i], 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.x = rotateP.x = resizeL.x = point.x;
-                resizeP.y = rotateP.y = resizeL.y = point.y;
+                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 = Math.abs(width);
-                        rotateP.width = Math.max(10, Math.abs(width) - 30);
+                        resizeL.width = width;
+                        if (resizeP.width > width - 30)
+                            resizeP.visible = false;
                     }
                     else {
-                        resizeL.height = Math.abs(height);
-                        rotateP.height = Math.max(10, Math.abs(height) - 30);
+                        resizeL.height = height;
+                        resizeP.rotation = 90;
+                        if (resizeP.width > height - 30)
+                            resizeP.visible = false;
                     }
-                    resizeP.rotation = 90;
-                    resizeP.visible = type === 'mobile';
-                    rotateP.visible = false;
                 }
                 else {
-                    rotateP.visible = type !== 'mobile';
-                    rectPoints.push(point.x, point.y);
+                    resizeP.rotation = (i / 2) * 90;
+                }
+            }
+            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;
+            const { flippedX, flippedY } = this;
+            let index = fourDirection.indexOf(buttonsDirection);
+            if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
+                if (buttonsFixed)
+                    index = (index + 2) % 4;
+            }
+            const direction = buttonsFixed ? EditDataHelper.getRotateDirection(index, this.flippedOne ? this.rotation : -this.rotation, 4) : index;
+            const point = 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;
+            if (useX) {
+                buttons.x = point.x + margin;
+                buttons.y = point.y;
+            }
+            else {
+                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;
+            }
+        }
+        getPointStyle(userStyle) {
+            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.config;
+            const defaultStyle = { fill: pointFill, stroke, strokeWidth, width: pointSize, height: pointSize, cornerRadius: pointRadius };
+            return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
+        }
+        getPointsStyle() {
+            const { point } = this.editor.config;
+            return point instanceof Array ? point : [point];
+        }
+        getMiddlePointsStyle() {
+            const { middlePoint } = this.editor.config;
+            return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
+        }
+        getDirection8Points(bounds) {
+            const { x, y, width, height } = bounds;
+            return [
+                { x, y },
+                { x: x + width / 2, y },
+                { x: x + width, y },
+                { x: x + width, y: y + height / 2 },
+                { x: x + width, y: y + height },
+                { x: x + width / 2, y: y + height },
+                { x, y: y + height },
+                { x, y: y + height / 2 }
+            ];
+        }
+        onDragStart(e) {
+            this.dragging = true;
+            if (e.target.name === 'rect')
+                this.editor.opacity = this.editor.config.hideOnMove ? 0 : 1;
+        }
+        onDragEnd(e) {
+            this.dragging = false;
+            if (e.target.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)
+                    editor.onRotate(e);
+            }
+            else {
+                editor.onScale(e);
+            }
+        }
+        onArrow(e) {
+            if (this.editor.hasTarget) {
+                const move = { x: 0, y: 0 };
+                const distance = e.shiftKey ? 10 : 1;
+                switch (e.code) {
+                    case 'ArrowDown':
+                        move.y = distance;
+                        break;
+                    case 'ArrowUp':
+                        move.y = -distance;
+                        break;
+                    case 'ArrowLeft':
+                        move.x = -distance;
+                        break;
+                    case 'ArrowRight':
+                        move.x = distance;
                 }
+                if (move.x || move.y)
+                    this.editor.move(move.x, move.y);
             }
-            style = config.rotatePoint || style;
-            circle.set(style);
-            circle.x = x + width / 2;
-            if (!style.y)
-                circle.y = y - (10 + (resizeP.height + circle.height) / 2) * (this.getMirrorData(editor).y ? -1 : 1);
-            circle.visible = rotateable && type === 'mobile';
-            rect.set(config.rect || { stroke });
-            rect.points = rectPoints;
-            rect.visible = true;
         }
+        onDoubleClick() {
+            const { editor } = this;
+            if (editor.single && editor.element.isBranch) ;
+        }
+        listenPointEvents(point, type, direction) {
+            const { editor } = this;
+            point.direction = direction;
+            point.pointType = type;
+            point.on_(core.DragEvent.START, this.onDragStart, this);
+            point.on_(core.DragEvent.DRAG, this.onDrag, this);
+            point.on_(core.DragEvent.END, this.onDragEnd, this);
+            point.on_(core.PointerEvent.LEAVE, () => this.enterPoint = null);
+            if (point.name !== 'circle')
+                point.on_(core.PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(editor, e); });
+        }
+        __listenEvents() {
+            const { rect, editor } = this;
+            this.__eventIds = [
+                editor.on_(EditorEvent.SELECT, () => { this.visible = editor.hasTarget; }),
+                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)
+            ];
+        }
+        __removeListenEvents() {
+            this.off_(this.__eventIds);
+            this.__eventIds.length = 0;
+        }
+        destroy() {
+            this.editor = null;
+            this.__removeListenEvents();
+            super.destroy();
+        }
+    }
+
+    const config = {
+        editSize: 'auto',
+        stroke: '#836DFF',
+        strokeWidth: 2,
+        pointFill: '#FFFFFF',
+        pointSize: 8,
+        pointRadius: 16,
+        rotateGap: 45,
+        buttonsDirection: 'bottom',
+        buttonsMargin: 12,
+        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'],
+        selector: true,
+        hover: true,
+        boxSelect: true,
+        resizeable: 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;
-    const LineTool = {
-        name: 'LineTool',
-        getMirrorData(_editor) {
-            return {
-                x: 0,
-                y: 0
-            };
-        },
-        resize(e) {
-            const { direction, dragEvent, lockRatio, around } = e;
+    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 } = dragEvent.getInnerMove(target);
+            let { x, y } = drag.getInnerMove(target);
             if (lockRatio) {
                 if (Math.abs(x) > Math.abs(y)) {
                     y = 0;
@@ -297,226 +903,391 @@ this.LeaferIN.editor = (function (exports, core) {
             target.y = fromPoint.y;
             target.getInnerPointByLocal(toPoint, null, null, true);
             target.toPoint = toPoint;
-        },
-        rotate(e) {
-            RectTool.rotate(e);
-        },
+        }
+        onSkew(_e) {
+        }
         update(editor) {
-            const { rotatePoints, circle, resizeLines, resizePoints } = editor;
-            RectTool.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;
+                resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right);
             }
-            circle.visible = false;
         }
-    };
+    }
 
-    class EditorResizeEvent extends core.Event {
-        constructor(type, data) {
-            super(type);
-            if (data)
-                Object.assign(this, data);
+    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();
         }
     }
-    EditorResizeEvent.RESIZE = 'editor.resize';
 
-    class EditorRotateEvent extends core.Event {
-        constructor(type, data) {
-            super(type);
-            if (data)
-                Object.assign(this, data);
+    function simulate(editor) {
+        const { simulateTarget, leafList: targetList } = editor;
+        const { x, y, width, height } = new core.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 });
+    }
+
+    function onTarget(editor) {
+        const { target } = editor;
+        if (target) {
+            editor.leafList = target instanceof core.LeafList ? target : new core.LeafList(target instanceof Array ? target : target);
+        }
+        else {
+            editor.leafList.reset();
+        }
+        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor }));
+        if (editor.hasTarget) {
+            editor.waitLeafer(() => {
+                if (editor.multiple)
+                    simulate(editor);
+                updateMoveCursor(editor);
+                editor.updateEditTool();
+                editor.update();
+                editor.listenTargetEvents();
+            });
+        }
+        else {
+            editor.removeTargetEvents();
         }
     }
-    EditorRotateEvent.ROTATE = 'editor.rotate';
+    function onHover(editor) {
+        editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor }));
+    }
 
-    class Editor extends core.Group {
-        get target() { return this._target; }
-        set target(value) {
-            this.__removeTargetEvents();
-            this.visible = !!value;
-            this._target = value;
-            if (value)
-                this.onTarget();
+    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) {
+            list.sort(reverseOrder);
+            const { app, parent } = list[0];
+            if (!group)
+                group = new core.Group();
+            parent.addAt(group, parent.children.indexOf(list[0]));
+            list.sort(order);
+            const matrx = new core.Matrix(element.worldTransform);
+            matrx.divideParent(parent.worldTransform);
+            group.setTransform(matrx);
+            group.editable = true;
+            group.hitChildren = false;
+            app.lockLayout();
+            list.forEach(child => child.dropTo(group));
+            app.unlockLayout();
+            return group;
+        },
+        ungroup(list) {
+            const { app } = list[0];
+            const ungroupList = [];
+            app.lockLayout();
+            list.forEach(leaf => {
+                if (leaf.isBranch) {
+                    const { parent, children } = leaf;
+                    while (children.length) {
+                        ungroupList.push(children[0]);
+                        children[0].dropTo(parent, parent.children.indexOf(leaf));
+                    }
+                    leaf.remove();
+                }
+                else {
+                    ungroupList.push(leaf);
+                }
+            });
+            app.unlockLayout();
+            return ungroupList;
+        },
+        toTop(list) {
+            list.sort(order);
+            list.forEach(leaf => {
+                let zIndex;
+                const { parent } = leaf;
+                if (parent) {
+                    const { children } = parent;
+                    const top = children.length - 1;
+                    const zIndexOfTop = children[top].__.zIndex;
+                    const current = children.indexOf(leaf);
+                    if (current !== top) {
+                        children.splice(current, 1);
+                        children.push(leaf);
+                        zIndex = zIndexOfTop + 1;
+                    }
+                    else {
+                        zIndex = zIndexOfTop;
+                    }
+                    leaf.zIndex = zIndex;
+                }
+            });
+        },
+        toBottom(list) {
+            list.sort(reverseOrder);
+            list.forEach(leaf => {
+                let zIndex;
+                const { parent } = leaf;
+                if (parent) {
+                    const { children } = parent;
+                    const zIndexOfBottom = children[0].__.zIndex;
+                    const current = children.indexOf(leaf);
+                    if (current !== 0) {
+                        children.splice(current, 1);
+                        children.unshift(leaf);
+                        zIndex = zIndexOfBottom - 1;
+                    }
+                    else {
+                        zIndex = zIndexOfBottom;
+                    }
+                    leaf.zIndex = zIndex;
+                }
+            });
         }
+    };
+
+    class Editor extends core.Group {
+        get list() { return this.leafList.list; }
+        get hasTarget() { return !!this.list.length; }
+        get multiple() { return this.list.length > 1; }
+        get single() { return this.list.length === 1; }
+        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 = {
-                type: 'pc',
-                stroke: '#836DFF',
-                pointFill: '#FFFFFF',
-                pointSize: 10,
-                pointRadius: 10,
-                rotateGap: 90,
-                hideOnMove: false,
-                moveCursor: 'move',
-                resizeType: 'auto',
-                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'],
-                resizeable: true,
-                rotateable: true
-            };
-            this.resizePoints = [];
-            this.rotatePoints = [];
-            this.resizeLines = [];
-            this.targetRect = new core.Rect({ hitFill: 'all', hitRadius: 5 });
-            this.rect = new core.Polygon({ hittable: false, strokeAlign: 'center' });
-            this.circle = new core.Rect({ around: 'center', hitRadius: 10 });
-            this.__eventIds = [];
-            this.__targetEventIds = [];
+            this.config = config;
+            this.leafList = new core.LeafList();
+            this.simulateTarget = new core.Rect({ visible: false });
+            this.editBox = new EditBox(this);
+            this.selector = new EditSelect(this);
+            this.targetEventIds = [];
             if (userConfig)
                 this.config = core.DataHelper.default(userConfig, this.config);
-            this.init();
+            this.addMany(this.selector, this.editBox);
         }
-        init() {
-            let rotatePoint, resizeLine, resizePoint;
-            const { resizePoints, rotatePoints, resizeLines } = this;
-            const arounds = [{ x: 1, y: 1 }, 'center', { x: 0, y: 1 }, 'center', { x: 0, y: 0 }, 'center', { x: 1, y: 0 }, 'center'];
-            for (let i = 0; i < 8; i++) {
-                rotatePoint = new core.Rect({ around: arounds[i], width: 15, height: 15, hitFill: "all" });
-                rotatePoints.push(rotatePoint);
-                this.__listenPointEvents(rotatePoint, 'rotate', i);
-                if (i % 2) {
-                    resizeLine = new core.Rect({ around: 'center', width: 10, height: 10, hitFill: "all" });
-                    resizeLines.push(resizeLine);
-                    this.__listenPointEvents(resizeLine, 'resize', i);
-                }
-                resizePoint = new core.Rect({ around: 'center', hitRadius: 5 });
-                resizePoints.push(resizePoint);
-                this.__listenPointEvents(resizePoint, 'resize', i);
-            }
-            this.__listenPointEvents(this.circle, 'rotate', 1);
-            this.addMany(...rotatePoints, this.targetRect, this.rect, this.circle, ...resizeLines, ...resizePoints);
-            this.__listenEvents();
+        hasItem(item) {
+            return this.leafList.has(item);
         }
-        onTarget() {
-            this.tool = this.getTool(this.target);
-            this.waitLeafer(() => {
-                this.update();
-                this.updateMoveCursor();
-                this.__listenTargetEvents();
-            });
+        addItem(item) {
+            if (!this.hasItem(item) && !item.locked)
+                this.leafList.add(item), this.target = this.leafList.list;
         }
-        getTool(value) {
-            return (value.tag === 'Line' && value.resizeable) ? LineTool : RectTool;
+        removeItem(item) {
+            if (this.hasItem(item))
+                this.leafList.remove(item), this.target = this.leafList.list;
         }
-        update() {
-            if (!this.target)
-                return;
-            this.tool.update(this);
+        shiftItem(item) {
+            this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
         }
-        onDrag(e) {
-            const { resizeable, rotateable } = this.config;
-            if (e.metaKey || e.ctrlKey || !resizeable) {
-                if (rotateable)
-                    this.onRotate(e);
-            }
-            else {
-                this.onResize(e);
+        update() {
+            if (this.target) {
+                this.editTool.update(this);
+                this.selector.update();
             }
         }
+        updateEditTool() {
+            this.editTool = getEditTool(this.list);
+        }
+        getEditSize(ui) {
+            let { editSize } = this.config;
+            return editSize === 'auto' ? ui.editSize : editSize;
+        }
         onMove(e) {
-            const { target } = this;
-            const { x, y } = e.getLocalMove(target);
+            const move = e.getLocalMove(this.element);
             if (e.shiftKey) {
-                if (Math.abs(x) > Math.abs(y)) {
-                    target.x += x;
-                }
-                else {
-                    target.y += y;
-                }
+                if (Math.abs(move.x) > Math.abs(move.y))
+                    move.y = 0;
+                else
+                    move.x = 0;
+            }
+            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);
             }
             else {
-                target.x += x;
-                target.y += y;
+                this.scaleOf(data.origin, data.scaleX, data.scaleY);
             }
         }
         onRotate(e) {
-            const { target } = this;
-            const { rotateGap } = this.config;
-            const { x, y, width, height } = target.boxBounds;
-            const origin = { x: x + width / 2, y: y + height / 2 };
-            let rotation;
+            const { skewable, around, rotateGap } = this.config;
+            const { direction, name } = e.current;
+            if (skewable && name === 'resize-line')
+                return this.onSkew(e);
+            const { element, editBox } = this;
+            let origin, rotation;
             if (e instanceof core.RotateEvent) {
-                rotation = e.rotation;
+                rotation = e.rotation, origin = element.getInnerPoint(e);
             }
             else {
-                const point = e;
-                const last = { x: point.x - e.moveX, y: point.y - e.moveY };
-                rotation = core.PointHelper.getChangeAngle(last, target.getWorldPoint(origin), point);
-            }
-            rotation = core.MathHelper.getGapRotation(target.rotation + rotation, rotateGap) - target.rotation;
-            const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { editor: this, target, origin, rotation });
-            this.tool.rotate(event);
-            target.emitEvent(event);
-        }
-        onResize(e) {
-            const { target } = this;
-            const { __direction } = e.current.__;
-            let { resizeType, around, lockRatio } = this.config;
-            if (e.shiftKey)
-                lockRatio = true;
-            if (e.altKey && !around)
-                around = 'center';
-            if (resizeType === 'auto')
-                resizeType = target.resizeable ? 'size' : 'scale';
-            const data = getResizeData(target.boxBounds, __direction, e.getInnerMove(this.targetRect), lockRatio, around);
-            const event = new EditorResizeEvent(EditorResizeEvent.RESIZE, Object.assign(Object.assign({}, data), { target, editor: this, dragEvent: e, resizeType }));
-            this.tool.resize(event);
-            target.emitEvent(event);
-        }
-        updateMoveCursor() {
-            this.targetRect.cursor = this.config.moveCursor;
+                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'));
+                rotation = data.rotation;
+                origin = data.origin;
+            }
+            rotation = core.MathHelper.getGapRotation(rotation, rotateGap, element.rotation);
+            if (!rotation)
+                return;
+            if (editBox.flippedOne)
+                rotation = -rotation;
+            this.rotateOf(origin, rotation);
         }
-        __listenEvents() {
-            this.__eventIds = [
-                this.targetRect.on_(core.DragEvent.START, () => { this.opacity = this.config.hideOnMove ? 0 : 1; }),
-                this.targetRect.on_(core.DragEvent.DRAG, this.onMove, this),
-                this.targetRect.on_(core.DragEvent.END, () => { this.opacity = 1; }),
-                this.targetRect.on_(core.PointerEvent.ENTER, this.updateMoveCursor, this)
-            ];
+        onSkew(e) {
+            const { element } = this;
+            const { around } = this.config;
+            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);
         }
-        __removeListenEvents() {
-            this.targetRect.off_(this.__eventIds);
-            this.__eventIds.length = 0;
+        move(x, y) {
+            const { element } = this;
+            const world = element.getWorldPointByLocal({ 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);
+            if (this.multiple)
+                element.move(x, y);
         }
-        __listenPointEvents(point, type, direction) {
-            point.__.__direction = direction;
-            const resize = point.__.__isResizePoint = type === 'resize';
-            point.on_(core.DragEvent.DRAG, resize ? this.onDrag : this.onRotate, this);
-            point.on_(core.PointerEvent.LEAVE, () => this.enterPoint = null);
-            point.on_(core.PointerEvent.ENTER, (e) => { this.enterPoint = point; updateCursor(this, e); });
+        scaleWithDrag(data) {
+            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 }));
+            this.editTool.onScaleWithDrag(event);
+            this.emitEvent(event);
         }
-        __listenTargetEvents() {
-            if (this.target) {
-                const { leafer } = this.target;
-                this.__targetEventIds = [
+        scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
+            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 event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform });
+            this.editTool.onScale(event);
+            this.emitEvent(event);
+        }
+        rotateOf(origin, rotation) {
+            const { element } = this;
+            const worldOrigin = element.getWorldPoint(origin);
+            const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation });
+            this.editTool.onRotate(event);
+            this.emitEvent(event);
+            if (this.multiple)
+                element.rotateOf(origin, rotation);
+        }
+        skewOf(origin, skewX, skewY = 0, _resize) {
+            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
+            });
+            this.editTool.onSkew(event);
+            this.emitEvent(event);
+        }
+        group() {
+            if (this.multiple)
+                this.target = EditorHelper.group(this.list, this.element);
+        }
+        ungroup() {
+            if (this.list.length)
+                this.target = EditorHelper.ungroup(this.list);
+        }
+        lock() {
+            this.list.forEach(leaf => leaf.locked = true);
+            this.update();
+        }
+        unlock() {
+            this.list.forEach(leaf => leaf.locked = false);
+            this.update();
+        }
+        toTop() {
+            if (this.list.length) {
+                EditorHelper.toTop(this.list);
+                this.leafList.update();
+            }
+        }
+        toBottom() {
+            if (this.list.length) {
+                EditorHelper.toBottom(this.list);
+                this.leafList.update();
+            }
+        }
+        listenTargetEvents() {
+            if (!this.targetEventIds.length) {
+                const { leafer } = this.list[0];
+                this.targetEventIds = [
                     leafer.on_(core.RenderEvent.START, this.update, this),
-                    leafer.on_([core.KeyEvent.HOLD, core.KeyEvent.UP], (e) => { updateCursor(this, e); })
+                    leafer.on_([core.KeyEvent.HOLD, core.KeyEvent.UP], (e) => { updateCursor(this, e); }),
+                    leafer.on_(core.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
                 ];
             }
         }
-        __removeTargetEvents() {
-            if (this.__targetEventIds.length) {
-                const { leafer } = this.target;
-                if (leafer)
-                    leafer.off_(this.__targetEventIds);
-                this.__targetEventIds.length = 0;
+        removeTargetEvents() {
+            const { targetEventIds } = this;
+            if (targetEventIds.length) {
+                this.off_(targetEventIds);
+                targetEventIds.length = 0;
             }
         }
         destroy() {
-            this.__removeListenEvents();
-            this._target = null;
-            super.destroy();
+            if (!this.destroyed) {
+                this.simulateTarget.destroy();
+                this.target = this.hoverTarget = this.simulateTarget = null;
+                super.destroy();
+            }
         }
     }
+    __decorate([
+        targetAttr(onHover)
+    ], Editor.prototype, "hoverTarget", void 0);
+    __decorate([
+        targetAttr(onTarget)
+    ], Editor.prototype, "target", void 0);
+
+    core.Creator.editor = function (options) {
+        return new Editor(options);
+    };
 
+    exports.EditBox = EditBox;
+    exports.EditDataHelper = EditDataHelper;
+    exports.EditPoint = EditPoint;
+    exports.EditSelect = EditSelect;
+    exports.EditSelectHelper = EditSelectHelper;
+    exports.EditTool = EditTool;
     exports.Editor = Editor;
-    exports.EditorResizeEvent = EditorResizeEvent;
+    exports.EditorEvent = EditorEvent;
+    exports.EditorHelper = EditorHelper;
+    exports.EditorMoveEvent = EditorMoveEvent;
     exports.EditorRotateEvent = EditorRotateEvent;
-    exports.LineTool = LineTool;
-    exports.RectTool = RectTool;
+    exports.EditorScaleEvent = EditorScaleEvent;
+    exports.EditorSkewEvent = EditorSkewEvent;
+    exports.LineEditTool = LineEditTool;
+    exports.SelectArea = SelectArea;
+    exports.Stroker = Stroker;
 
     return exports;