@leafer-in/editor 1.0.0-rc.21 → 1.0.0-rc.23

package/dist/editor.esm.js

@@ -1,5 +1,5 @@
-import { PathCommandMap, Leaf, Path, Line, Polygon, MatrixHelper, Group, Box, Event, defineKey, UI, Paint, Rect, Answer, Bounds, LeafList, PointHelper, AroundHelper, MathHelper, getPointData, Matrix, DataHelper, RenderEvent } from '@leafer-ui/draw';
-import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent, KeyEvent, Creator } from '@leafer-ui/core';
+import { PathCommandMap, Leaf, Path, Line, Polygon, MatrixHelper, Group, Box, Event, defineKey, UI, Paint, Rect, Answer, Bounds, LeafList, PointHelper, AroundHelper, Direction9, MathHelper, Matrix, Debug, DataHelper, LeafHelper, RenderEvent, getPointData, Creator } from '@leafer-ui/draw';
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent, KeyEvent } from '@leafer-ui/core';
 
 const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = PathCommandMap;
 const PathScaler = {
@@ -246,34 +246,29 @@ class Stroker extends UI {
         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(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();
                         if (leaf.__.__useArrow) {
@@ -284,7 +279,10 @@ class Stroker extends UI {
                         }
                         this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX);
                     }
-                    typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas);
+                    if (stroke)
+                        typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas);
+                    if (fill)
+                        typeof fill === 'string' ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas);
                 }
             }
             this.__.strokeWidth = strokeWidth;
@@ -354,7 +352,7 @@ const EditSelectHelper = {
 const { findOne } = EditSelectHelper;
 class EditSelect extends 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();
@@ -370,8 +368,8 @@ class EditSelect extends Group {
     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;
@@ -379,20 +377,20 @@ class EditSelect extends Group {
     }
     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) {
         const { app, editor } = this;
         if (this.running && !this.isMoveMode && app.config.pointer.hover && !app.interaction.dragging) {
-            const find = e.shiftKey ? this.findDeepOne(e) : findOne(e.path);
+            const find = this.findUI(e);
             editor.hoverTarget = editor.hasItem(find) ? null : find;
         }
         if (this.isMoveMode) {
@@ -400,43 +398,37 @@ class EditSelect extends Group {
         }
     }
     onBeforeDown(e) {
-        const { select } = this.editor.config;
+        const { select } = this.editor.mergeConfig;
         if (select === 'press')
-            this.checkAndSelect(e, true);
+            this.checkAndSelect(e);
     }
     onTap(e) {
         const { editor } = this;
-        const { select, continuousSelect } = editor.config;
+        const { select } = editor.mergeConfig;
         if (select === 'tap')
             this.checkAndSelect(e);
-        if (this.running && (e.shiftKey || continuousSelect) && !e.middle && !this.lastDownLeaf) {
-            const find = this.findDeepOne(e);
-            if (find)
-                editor.shiftItem(find);
-            else if (!e.shiftKey && continuousSelect)
-                editor.target = null;
+        if (this.needRemoveItem) {
+            editor.removeItem(this.needRemoveItem);
         }
         else if (this.isMoveMode) {
             editor.target = null;
         }
-        this.lastDownLeaf = null;
     }
-    checkAndSelect(e, isDownType) {
-        if (this.running && !this.isMoveMode && !e.middle) {
+    checkAndSelect(e) {
+        this.needRemoveItem = null;
+        if (this.allowSelect(e)) {
             const { editor } = this;
-            const find = this.lastDownLeaf = findOne(e.path);
+            const find = this.findUI(e);
             if (find) {
-                if (e.shiftKey || editor.config.continuousSelect) {
-                    editor.shiftItem(find);
+                if (this.isMultipleSelect(e)) {
+                    if (editor.hasItem(find))
+                        this.needRemoveItem = find;
+                    else
+                        editor.addItem(find);
                 }
                 else {
                     editor.target = find;
                 }
-                if (isDownType) {
-                    editor.updateLayout();
-                    if (!find.locked)
-                        this.app.interaction.updateDownData(e, { findList: [editor.editBox.rect] }, editor.config.dualEvent);
-                }
             }
             else if (this.allow(e.target)) {
                 if (!e.shiftKey)
@@ -445,12 +437,12 @@ class EditSelect extends Group {
         }
     }
     onDragStart(e) {
-        if (this.running && this.allowDrag(e)) {
+        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();
         }
@@ -498,17 +490,26 @@ class EditSelect extends Group {
         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 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(() => {
@@ -535,29 +536,17 @@ class EditSelect extends Group {
         }
     }
     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, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = IDirection8;
+const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = Direction9;
 const { toPoint } = AroundHelper;
 const EditDataHelper = {
     getScaleData(bounds, direction, pointMove, lockRatio, around) {
-        let origin, scaleX = 1, scaleY = 1;
+        let align, origin = {}, scaleX = 1, scaleY = 1;
         const { width, height } = bounds;
         if (around) {
             pointMove.x *= 2;
@@ -574,101 +563,100 @@ const EditDataHelper = {
         switch (direction) {
             case top:
                 scaleY = topScale;
-                origin = { x: 0.5, y: 1 };
+                align = 'bottom';
                 break;
             case right$1:
                 scaleX = rightScale;
-                origin = { x: 0, y: 0.5 };
+                align = 'left';
                 break;
             case bottom:
                 scaleY = bottomScale;
-                origin = { x: 0.5, y: 0 };
+                align = 'top';
                 break;
             case left$1:
                 scaleX = leftScale;
-                origin = { x: 1, y: 0.5 };
+                align = 'right';
                 break;
             case topLeft:
                 scaleY = topScale;
                 scaleX = leftScale;
-                origin = { x: 1, y: 1 };
+                align = 'bottom-right';
                 break;
             case topRight:
                 scaleY = topScale;
                 scaleX = rightScale;
-                origin = { x: 0, y: 1 };
+                align = 'bottom-left';
                 break;
             case bottomRight:
                 scaleY = bottomScale;
                 scaleX = rightScale;
-                origin = { x: 0, y: 0 };
+                align = 'top-left';
                 break;
             case bottomLeft:
                 scaleY = bottomScale;
                 scaleX = leftScale;
-                origin = { x: 1, y: 0 };
+                align = 'top-right';
         }
         if (lockRatio) {
             const unlockSide = lockRatio === 'corner' && direction % 2;
             if (!unlockSide) {
-                if (scaleY !== 1)
-                    scaleX = scaleY;
-                else
-                    scaleY = scaleX;
+                const scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                scaleX = scaleX < 0 ? -scale : scale;
+                scaleY = scaleY < 0 ? -scale : scale;
             }
         }
-        toPoint(around || origin, bounds, origin);
+        toPoint(around || align, bounds, origin);
         return { origin, scaleX, scaleY, direction, lockRatio, around };
     },
     getRotateData(bounds, direction, current, last, around) {
-        let origin;
+        let align, origin = {};
         switch (direction) {
             case topLeft:
-                origin = { x: 1, y: 1 };
+                align = 'bottom-right';
                 break;
             case topRight:
-                origin = { x: 0, y: 1 };
+                align = 'bottom-left';
                 break;
             case bottomRight:
-                origin = { x: 0, y: 0 };
+                align = 'top-left';
                 break;
             case bottomLeft:
-                origin = { x: 1, y: 0 };
+                align = 'top-right';
                 break;
             default:
-                origin = { x: 0.5, y: 0.5 };
+                align = 'center';
         }
-        toPoint(around || origin, bounds, origin);
+        toPoint(around || align, bounds, origin);
         return { origin, rotation: 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:
                 last = { x: 0.5, y: 0 };
-                origin = { x: 0.5, y: 1 };
+                align = 'bottom';
                 skewX = 1;
                 break;
             case bottom:
                 last = { x: 0.5, y: 1 };
-                origin = { x: 0.5, y: 0 };
+                align = 'top';
                 skewX = 1;
                 break;
             case left$1:
                 last = { x: 0, y: 0.5 };
-                origin = { x: 1, y: 0.5 };
+                align = 'right';
                 skewY = 1;
                 break;
             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);
+        toPoint(around || align, bounds, origin);
         const rotation = 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 };
@@ -734,12 +722,12 @@ const EditDataHelper = {
 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;
     let { rotation } = editBox;
-    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.config;
+    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))
@@ -758,7 +746,7 @@ function updateCursor(editor, e) {
     }
 }
 function updateMoveCursor(editor) {
-    editor.editBox.rect.cursor = editor.config.moveCursor;
+    editor.editBox.rect.cursor = editor.mergeConfig.moveCursor;
 }
 function toDataURL(svg, rotation) {
     return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
@@ -775,6 +763,7 @@ class EditBox extends Group {
     get flippedOne() { return this.scaleX * this.scaleY < 0; }
     constructor(editor) {
         super();
+        this.view = new Group();
         this.rect = new 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 Group({ around: 'center', hitSelf: false });
@@ -789,8 +778,8 @@ class EditBox extends Group {
     }
     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({ name: 'rotate-point', around: arounds[i], width: 15, height: 15, hitFill: "all" });
             rotatePoints.push(rotatePoint);
@@ -800,62 +789,80 @@ class EditBox extends Group {
                 resizeLines.push(resizeLine);
                 this.listenPointEvents(resizeLine, 'resize', i);
             }
-            resizePoint = new EditPoint({ name: 'resize-point', around: 'center', strokeAlign: 'center', 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, 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, hideOnSmall } = 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();
-        const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
-        const showPoints = !(hideOnSmall && width < smallSize && height < smallSize);
-        this.visible = list[0] && !list[0].locked;
-        let point = {}, style, rotateP, resizeP, resizeL;
+        let resizeP;
         for (let i = 0; i < 8; i++) {
-            AroundHelper.toPoint(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 = showPoints && (resizeable || rotateable);
-            rotateP.visible = showPoints && rotateable && resizeable && !config.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;
-                }
-            }
-            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.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;
+        this.visible = !element.locked;
+    }
+    update(bounds) {
+        if (this.view.worldOpacity) {
+            const { mergeConfig } = this.editor;
+            const { width, height } = bounds;
+            const { rect, circle, 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++) {
+                AroundHelper.toPoint(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.rotatePoint;
+            rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
+            const buttonVisible = showPoints && (circle.visible || this.buttons.children.length > 1);
+            this.buttons.visible = buttonVisible;
+            if (buttonVisible)
+                this.layoutButtons();
         }
-        circle.visible = showPoints && 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 }));
-        rect.hittable = config.moveable;
-        this.buttons.visible = showPoints;
-        this.layoutButtons();
     }
     layoutButtons() {
         const { buttons, resizePoints } = this;
-        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.config;
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.mergeConfig;
         const { flippedX, flippedY } = this;
         let index = fourDirection.indexOf(buttonsDirection);
         if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
@@ -882,37 +889,46 @@ class EditBox extends Group {
             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 = this.app.interaction.bottomList = null;
+    }
     onDragStart(e) {
         this.dragging = true;
-        if (e.target.name === 'rect') {
+        if (e.current.name === 'rect') {
+            const { editor } = this;
             this.moving = true;
-            this.editor.opacity = this.editor.config.hideOnMove ? 0 : 1;
+            editor.dragStartPoint = { x: editor.element.x, y: editor.element.y };
+            editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1;
         }
     }
     onDragEnd(e) {
         this.dragging = false;
         this.moving = false;
-        if (e.target.name === 'rect')
+        if (e.current.name === 'rect')
             this.editor.opacity = 1;
     }
     onDrag(e) {
         const { editor } = this;
         const point = this.enterPoint = e.current;
-        if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.config.resizeable) {
-            if (editor.config.rotateable)
+        if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
+            if (editor.mergeConfig.rotateable)
                 editor.onRotate(e);
         }
         else {
@@ -921,7 +937,7 @@ class EditBox extends Group {
         updateCursor(editor, e);
     }
     onArrow(e) {
-        if (this.editor.hasTarget && this.editor.config.keyEvent) {
+        if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
             const move = { x: 0, y: 0 };
             const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
@@ -937,13 +953,29 @@ class EditBox extends Group {
                 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;
@@ -959,12 +991,13 @@ class EditBox extends Group {
     __listenEvents() {
         const { rect, editor } = this;
         this.__eventIds = [
-            editor.on_(EditorEvent.SELECT, () => { this.visible = editor.hasTarget; }),
+            editor.on_(EditorEvent.SELECT, this.onSelect, this),
             rect.on_(DragEvent.START, this.onDragStart, this),
             rect.on_(DragEvent.DRAG, editor.onMove, editor),
             rect.on_(DragEvent.END, this.onDragEnd, this),
             rect.on_(PointerEvent.ENTER, () => updateMoveCursor(editor)),
-            rect.on_(PointerEvent.DOUBLE_CLICK, this.onDoubleClick, this)
+            rect.on_(PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
+            rect.on_(PointerEvent.LONG_PRESS, this.onLongPress, this)
         ];
     }
     __removeListenEvents() {
@@ -1030,7 +1063,7 @@ ${filterStyle}
 `;
 
 const config = {
-    editSize: 'auto',
+    editSize: 'size',
     keyEvent: true,
     stroke: '#836DFF',
     strokeWidth: 2,
@@ -1048,6 +1081,7 @@ const config = {
     selector: true,
     hover: true,
     select: 'press',
+    openInner: 'double',
     boxSelect: true,
     moveable: true,
     resizeable: true,
@@ -1055,148 +1089,6 @@ const config = {
     skewable: true
 };
 
-class EditTool {
-    constructor() {
-        this.tag = '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) === 'size';
-            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) === 'size';
-            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) === 'size';
-            if (transform) {
-                target.transformWorld(transform, resize);
-            }
-            else {
-                target.skewOfWorld(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 = getPointData();
-        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 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 Bounds().setListWithFn(targetList.list, (leaf) => leaf.worldBoxBounds);
@@ -1214,7 +1106,8 @@ function onTarget(editor, oldValue) {
         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);
@@ -1225,6 +1118,7 @@ function onTarget(editor, oldValue) {
         });
     }
     else {
+        editor.updateEditTool();
         editor.removeTargetEvents();
     }
 }
@@ -1293,26 +1187,55 @@ const EditorHelper = {
     }
 };
 
+const debug = 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 Editor extends Group {
     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.mergeConfig = config;
         this.leafList = new LeafList();
+        this.openedGroupList = new LeafList();
         this.simulateTarget = new Rect({ visible: false });
         this.editBox = new EditBox(this);
+        this.editToolList = {};
         this.selector = new EditSelect(this);
         this.targetEventIds = [];
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
         this.addMany(this.selector, this.editBox);
     }
+    select(target) {
+        this.target = target;
+    }
+    cancel() {
+        this.target = null;
+    }
     hasItem(item) {
         return this.leafList.has(item);
     }
@@ -1328,38 +1251,46 @@ class Editor extends Group {
         this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
     }
     update() {
-        if (this.hasTarget) {
-            if (this.editTool)
-                this.editTool.update(this);
+        if (this.editing) {
+            if (this.innerEditing)
+                this.innerEditor.update();
+            this.editTool.update();
             this.selector.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);
+            const { editConfig } = this.element;
+            this.mergeConfig = this.single && editConfig ? Object.assign(Object.assign({}, this.mergeConfig), editConfig) : this.config;
+            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);
-        const { lockMove } = this.config;
-        if (lockMove === 'x')
-            move.y = 0;
-        else if (lockMove === 'y')
-            move.x = 0;
-        else if (e.shiftKey) {
-            if (Math.abs(move.x) > Math.abs(move.y))
-                move.y = 0;
+        const total = { x: e.totalX, y: e.totalY };
+        if (e.shiftKey) {
+            if (Math.abs(total.x) > Math.abs(total.y))
+                total.y = 0;
             else
-                move.x = 0;
+                total.x = 0;
         }
-        this.move(move.x, move.y);
+        this.move(DragEvent.getValidMove(this.element, this.dragStartPoint, total));
     }
     onScale(e) {
         const { element } = this;
         const { direction } = e.current;
-        let { around, lockRatio } = this.config;
+        let { around, lockRatio } = this.mergeConfig;
         if (e.shiftKey)
             lockRatio = true;
         const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey));
@@ -1372,7 +1303,7 @@ class Editor extends Group {
         }
     }
     onRotate(e) {
-        const { skewable, around, rotateGap } = this.config;
+        const { skewable, around, rotateGap } = this.mergeConfig;
         const { direction, name } = e.current;
         if (skewable && name === 'resize-line')
             return this.onSkew(e);
@@ -1396,17 +1327,17 @@ class Editor extends Group {
     }
     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) {
-        if (!this.config.moveable)
+    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);
@@ -1471,6 +1402,44 @@ class Editor extends Group {
             this.target = EditorHelper.ungroup(this.list);
         return this.list;
     }
+    openGroup(group) {
+        this.openedGroupList.add(group);
+        group.hitChildren = true;
+    }
+    closeGroup(group) {
+        this.openedGroupList.remove(group);
+        group.hitChildren = false;
+    }
+    checkOpenedGroups() {
+        const opened = this.openedGroupList;
+        if (opened.length) {
+            let { list } = opened;
+            if (this.editing)
+                list = [], opened.forEach(item => this.list.every(leaf => !LeafHelper.hasParent(leaf, item)) && list.push(item));
+            list.forEach(item => this.closeGroup(item));
+        }
+    }
+    openInnerEditor() {
+        if (this.single) {
+            const tag = this.element.editInner;
+            if (tag) {
+                if (EditToolCreator.list[tag]) {
+                    this.editTool.unload();
+                    this.innerEditing = true;
+                    this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                    this.innerEditor.load();
+                }
+            }
+        }
+    }
+    closeInnerEditor() {
+        if (this.innerEditing) {
+            this.innerEditing = false;
+            this.innerEditor.unload();
+            this.editTool.load();
+            this.innerEditor = null;
+        }
+    }
     lock() {
         this.list.forEach(leaf => leaf.locked = true);
         this.update();
@@ -1511,7 +1480,9 @@ class Editor extends Group {
     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();
         }
     }
@@ -1523,8 +1494,206 @@ __decorate([
     targetAttr(onTarget)
 ], Editor.prototype, "target", void 0);
 
-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 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;
+        }
+    }
+}
+
+let 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) === 'size';
+            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) === 'size';
+            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) === 'size';
+            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();
+    }
+};
+EditTool = __decorate([
+    registerEditTool()
+], EditTool);
+
+const { left, right } = Direction9;
+let LineEditTool = class LineEditTool extends EditTool {
+    constructor() {
+        super(...arguments);
+        this.scaleOfEvent = true;
+    }
+    get tag() { return 'LineEditTool'; }
+    onScaleWithDrag(e) {
+        const { drag, direction, lockRatio, around } = e;
+        const target = e.target;
+        const fromPoint = getPointData();
+        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) {
+    }
+    onUpdate() {
+        const { rotatePoints, resizeLines, resizePoints } = this.editor.editBox;
+        for (let i = 0; i < 8; i++) {
+            if (i < 4)
+                resizeLines[i].visible = false;
+            resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right);
+        }
+    }
+};
+LineEditTool = __decorate([
+    registerEditTool()
+], LineEditTool);
+
+Creator.editor = function (options) { return new Editor(options); };
+UI.setEditConfig = function (config) {
+    defineKey(this.prototype, 'editConfig', {
+        get() { return typeof config === 'function' ? config(this) : config; }
+    });
+};
+UI.setEditOuter = function (toolName) {
+    defineKey(this.prototype, 'editOuter', {
+        get() { return typeof toolName === 'string' ? toolName : toolName(this); }
+    });
+};
+UI.setEditInner = function (editorName) {
+    defineKey(this.prototype, 'editInner', {
+        get() { return typeof editorName === 'string' ? editorName : editorName(this); }
+    });
 };
+Line.setEditOuter(function (line) {
+    return (line.points || line.pathInputed) ? 'EditTool' : 'LineEditTool';
+});
 
-export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, Editor, EditorEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, LineEditTool, SelectArea, Stroker };
+export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, InnerEditor, LineEditTool, SelectArea, Stroker, registerEditTool, registerInnerEditor };