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

package/dist/editor.js

@@ -247,15 +247,14 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             this.strokeAlign = 'center';
         }
         setTarget(target, style) {
-            const { stroke, strokeWidth } = style;
-            this.set({ stroke, strokeWidth });
+            this.set(style);
             this.target = target;
         }
         __draw(canvas, options) {
             const { list } = this;
             if (list.length) {
                 let leaf;
-                const { stroke, strokeWidth } = this.__;
+                const { stroke, strokeWidth, fill } = this.__;
                 const { bounds } = options;
                 for (let i = 0; i < list.length; i++) {
                     leaf = list[i];
@@ -285,7 +284,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                             }
                             this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX);
                         }
-                        typeof stroke === 'string' ? draw.Paint.stroke(stroke, this, canvas) : draw.Paint.strokes(stroke, this, canvas);
+                        if (stroke)
+                            typeof stroke === 'string' ? draw.Paint.stroke(stroke, this, canvas) : draw.Paint.strokes(stroke, this, canvas);
+                        if (fill)
+                            typeof fill === 'string' ? draw.Paint.fill(fill, this, canvas) : draw.Paint.fills(fill, this, canvas);
                     }
                 }
                 this.__.strokeWidth = strokeWidth;
@@ -355,7 +357,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
     const { findOne } = EditSelectHelper;
     class EditSelect extends draw.Group {
         get dragging() { return !!this.originList; }
-        get running() { return this.editor.hittable && this.editor.config.selector; }
+        get running() { const { editor } = this; return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector; }
         get isMoveMode() { return this.app && this.app.interaction.moveMode; }
         constructor(editor) {
             super();
@@ -371,8 +373,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         onHover() {
             const { editor } = this;
             if (this.running && !this.dragging && !editor.dragging) {
-                const { stroke, strokeWidth, hover } = editor.config;
-                this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth });
+                const { stroke, strokeWidth, hover, hoverStyle } = editor.mergeConfig;
+                this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, Object.assign({ stroke, strokeWidth }, (hoverStyle || {})));
             }
             else {
                 this.hoverStroker.target = null;
@@ -380,20 +382,20 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         onSelect() {
             if (this.running) {
-                const { config, list } = this.editor;
+                const { mergeConfig: config, list } = this.editor;
                 const { stroke, strokeWidth } = config;
                 this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) });
                 this.hoverStroker.target = null;
             }
         }
         update() {
-            if (this.running)
+            if (this.targetStroker.target)
                 this.targetStroker.forceUpdate();
         }
         onPointerMove(e) {
             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) {
@@ -401,43 +403,37 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         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)
@@ -446,12 +442,12 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         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();
             }
@@ -499,17 +495,26 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             return target.leafer !== this.editor.leafer;
         }
         allowDrag(e) {
-            if (this.editor.config.boxSelect && !e.target.draggable) {
-                return (!this.editor.hasTarget && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
+            if (this.running && this.editor.mergeConfig.boxSelect && !e.target.draggable) {
+                return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
             }
             else {
                 return false;
             }
         }
+        allowSelect(e) {
+            return this.running && !this.isMoveMode && !e.middle;
+        }
         findDeepOne(e) {
             const options = { exclude: new draw.LeafList(this.editor.editBox.rect) };
             return findOne(e.target.leafer.interaction.findPath(e, options));
         }
+        findUI(e) {
+            return this.isMultipleSelect(e) ? this.findDeepOne(e) : findOne(e.path);
+        }
+        isMultipleSelect(e) {
+            return e.shiftKey || this.editor.mergeConfig.continuousSelect;
+        }
         __listenEvents() {
             const { editor } = this;
             editor.waitLeafer(() => {
@@ -536,25 +541,13 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         destroy() {
-            this.editor = this.originList = this.lastDownLeaf = null;
+            this.editor = this.originList = this.needRemoveItem = null;
             this.__removeListenEvents();
             super.destroy();
         }
     }
 
-    var IDirection8;
-    (function (IDirection8) {
-        IDirection8[IDirection8["topLeft"] = 0] = "topLeft";
-        IDirection8[IDirection8["top"] = 1] = "top";
-        IDirection8[IDirection8["topRight"] = 2] = "topRight";
-        IDirection8[IDirection8["right"] = 3] = "right";
-        IDirection8[IDirection8["bottomRight"] = 4] = "bottomRight";
-        IDirection8[IDirection8["bottom"] = 5] = "bottom";
-        IDirection8[IDirection8["bottomLeft"] = 6] = "bottomLeft";
-        IDirection8[IDirection8["left"] = 7] = "left";
-    })(IDirection8 || (IDirection8 = {}));
-
-    const { topLeft, 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 } = draw.Direction9;
     const { toPoint } = draw.AroundHelper;
     const EditDataHelper = {
         getScaleData(bounds, direction, pointMove, lockRatio, around) {
@@ -611,12 +604,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
             if (lockRatio) {
                 const unlockSide = lockRatio === 'corner' && direction % 2;
-                if (!unlockSide) {
-                    if (scaleY !== 1)
-                        scaleX = scaleY;
-                    else
-                        scaleY = scaleX;
-                }
+                if (!unlockSide)
+                    scaleX = scaleY = Math.sqrt(scaleX * scaleY);
             }
             toPoint(around || origin, bounds, origin);
             return { origin, scaleX, scaleY, direction, lockRatio, around };
@@ -735,12 +724,12 @@ this.LeaferIN.editor = (function (exports, draw, core) {
     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))
@@ -759,7 +748,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
     }
     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())) + '"';
@@ -776,6 +765,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         get flippedOne() { return this.scaleX * this.scaleY < 0; }
         constructor(editor) {
             super();
+            this.view = new draw.Group();
             this.rect = new draw.Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 });
             this.circle = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 });
             this.buttons = new draw.Group({ around: 'center', hitSelf: false });
@@ -790,7 +780,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         create() {
             let rotatePoint, resizeLine, resizePoint;
-            const { resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this;
+            const { view, 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({ name: 'rotate-point', around: arounds[i], width: 15, height: 15, hitFill: "all" });
@@ -801,62 +791,80 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     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++) {
-                draw.AroundHelper.toPoint(draw.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++) {
+                    draw.AroundHelper.toPoint(draw.AroundHelper.directionData[i], bounds, point);
+                    resizeP = resizePoints[i];
+                    rotateP = rotatePoints[i];
+                    resizeL = resizeLines[Math.floor(i / 2)];
+                    resizeP.set(point);
+                    rotateP.set(point);
+                    resizeL.set(point);
+                    resizeP.visible = resizeL.visible = showPoints && (resizeable || rotateable);
+                    rotateP.visible = showPoints && rotateable && resizeable && !mergeConfig.rotatePoint;
+                    if (i % 2) {
+                        resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
+                        if (((i + 1) / 2) % 2) {
+                            resizeL.width = width;
+                            if (resizeP.width > width - 30)
+                                resizeP.visible = false;
+                        }
+                        else {
+                            resizeL.height = height;
+                            resizeP.rotation = 90;
+                            if (resizeP.width > height - 30)
+                                resizeP.visible = false;
+                        }
+                    }
                 }
+                circle.visible = showPoints && rotateable && !!mergeConfig.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)) {
@@ -883,37 +891,46 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 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 {
@@ -922,7 +939,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             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) {
@@ -938,13 +955,29 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     case 'ArrowRight':
                         move.x = distance;
                 }
-                if (move.x || move.y)
-                    this.editor.move(move.x, move.y);
+                this.editor.move(move);
             }
         }
-        onDoubleClick() {
+        onDoubleTap(e) {
+            if (this.editor.mergeConfig.openInner === 'double')
+                this.openInner(e);
+        }
+        onLongPress(e) {
+            if (this.editor.mergeConfig.openInner === 'long')
+                this.openInner(e);
+        }
+        openInner(e) {
             const { editor } = this;
-            if (editor.single && editor.element.isBranch) ;
+            if (editor.single) {
+                const { element } = editor;
+                if (element.isBranch) {
+                    editor.openGroup(element);
+                    editor.target = editor.selector.findDeepOne(e);
+                }
+                else {
+                    editor.openInnerEditor();
+                }
+            }
         }
         listenPointEvents(point, type, direction) {
             const { editor } = this;
@@ -960,12 +993,13 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         __listenEvents() {
             const { rect, editor } = this;
             this.__eventIds = [
-                editor.on_(EditorEvent.SELECT, () => { this.visible = editor.hasTarget; }),
+                editor.on_(EditorEvent.SELECT, this.onSelect, this),
                 rect.on_(core.DragEvent.START, this.onDragStart, this),
                 rect.on_(core.DragEvent.DRAG, editor.onMove, editor),
                 rect.on_(core.DragEvent.END, this.onDragEnd, this),
                 rect.on_(core.PointerEvent.ENTER, () => updateMoveCursor(editor)),
-                rect.on_(core.PointerEvent.DOUBLE_CLICK, this.onDoubleClick, this)
+                rect.on_(core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
+                rect.on_(core.PointerEvent.LONG_PRESS, this.onLongPress, this)
             ];
         }
         __removeListenEvents() {
@@ -1049,6 +1083,7 @@ ${filterStyle}
         selector: true,
         hover: true,
         select: 'press',
+        openInner: 'double',
         boxSelect: true,
         moveable: true,
         resizeable: true,
@@ -1056,148 +1091,6 @@ ${filterStyle}
         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 = draw.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 draw.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 draw.Bounds().setListWithFn(targetList.list, (leaf) => leaf.worldBoxBounds);
@@ -1215,7 +1108,8 @@ ${filterStyle}
             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);
@@ -1226,6 +1120,7 @@ ${filterStyle}
             });
         }
         else {
+            editor.updateEditTool();
             editor.removeTargetEvents();
         }
     }
@@ -1294,26 +1189,55 @@ ${filterStyle}
         }
     };
 
+    const debug = draw.Debug.get('EditToolCreator');
+    function registerEditTool() {
+        return (target) => {
+            EditToolCreator.register(target);
+        };
+    }
+    const registerInnerEditor = registerEditTool;
+    const EditToolCreator = {
+        list: {},
+        register(EditTool) {
+            const { tag } = EditTool.prototype;
+            list[tag] ? debug.repeat(tag) : (list[tag] = EditTool);
+        },
+        get(tag, editor) {
+            return new list[tag](editor);
+        }
+    };
+    const { list } = EditToolCreator;
+
     class Editor extends draw.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 draw.LeafList();
+            this.openedGroupList = new draw.LeafList();
             this.simulateTarget = new draw.Rect({ visible: false });
             this.editBox = new EditBox(this);
+            this.editToolList = {};
             this.selector = new EditSelect(this);
             this.targetEventIds = [];
             if (userConfig)
                 this.config = draw.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);
         }
@@ -1329,38 +1253,52 @@ ${filterStyle}
             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;
+            let { editSize } = this.mergeConfig;
             return editSize === 'auto' ? ui.editSize : editSize;
         }
         onMove(e) {
-            const move = e.getLocalMove(this.element);
-            const { lockMove } = this.config;
+            const total = { x: e.totalX, y: e.totalY };
+            const { lockMove } = this.mergeConfig;
             if (lockMove === 'x')
-                move.y = 0;
+                total.y = 0;
             else if (lockMove === 'y')
-                move.x = 0;
+                total.x = 0;
             else if (e.shiftKey) {
-                if (Math.abs(move.x) > Math.abs(move.y))
-                    move.y = 0;
+                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(core.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));
@@ -1373,7 +1311,7 @@ ${filterStyle}
             }
         }
         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);
@@ -1397,17 +1335,17 @@ ${filterStyle}
         }
         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)
                 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);
@@ -1472,6 +1410,44 @@ ${filterStyle}
                 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 => !draw.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();
@@ -1512,7 +1488,9 @@ ${filterStyle}
         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();
             }
         }
@@ -1524,16 +1502,214 @@ ${filterStyle}
         targetAttr(onTarget)
     ], Editor.prototype, "target", void 0);
 
-    core.Creator.editor = function (options) {
-        return new Editor(options);
+    class InnerEditor {
+        static registerInnerEditor() {
+            EditToolCreator.register(this);
+        }
+        get tag() { return 'InnerEditor'; }
+        get editBox() { return this.editor.editBox; }
+        constructor(editor) {
+            this.editor = editor;
+            this.create();
+        }
+        onCreate() { }
+        create() {
+            this.view = new draw.Group();
+            this.onCreate();
+        }
+        onLoad() { }
+        load() {
+            this.editor.selector.hittable = this.editor.app.tree.hitChildren = false;
+            this.onLoad();
+        }
+        onUpdate() { }
+        update() { this.onUpdate(); }
+        onUnload() { }
+        unload() {
+            this.editor.selector.hittable = this.editor.app.tree.hitChildren = true;
+            this.onUnload();
+        }
+        onDestroy() { }
+        destroy() {
+            this.onDestroy();
+            if (this.editor) {
+                if (this.view)
+                    this.view.destroy();
+                if (this.eventIds)
+                    this.editor.off_(this.eventIds);
+                this.editor = this.view = this.eventIds = null;
+            }
+        }
+    }
+
+    exports.EditTool = class EditTool extends InnerEditor {
+        static registerEditTool() {
+            EditToolCreator.register(this);
+        }
+        get tag() { return 'EditTool'; }
+        onMove(e) {
+            const { moveX, moveY, editor } = e;
+            const { app, list } = editor;
+            app.lockLayout();
+            list.forEach(target => {
+                target.moveWorld(moveX, moveY);
+            });
+            app.unlockLayout();
+        }
+        onScale(e) {
+            const { scaleX, scaleY, transform, worldOrigin, editor } = e;
+            const { app, list } = editor;
+            app.lockLayout();
+            list.forEach(target => {
+                const resize = editor.getEditSize(target) === '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();
+        }
+    };
+    exports.EditTool = __decorate([
+        registerEditTool()
+    ], exports.EditTool);
+
+    const { left, right } = draw.Direction9;
+    exports.LineEditTool = class LineEditTool extends exports.EditTool {
+        constructor() {
+            super(...arguments);
+            this.scaleOfEvent = true;
+        }
+        get tag() { return 'LineEditTool'; }
+        onScaleWithDrag(e) {
+            const { drag, direction, lockRatio, around } = e;
+            const target = e.target;
+            const fromPoint = draw.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);
+            }
+        }
+    };
+    exports.LineEditTool = __decorate([
+        registerEditTool()
+    ], exports.LineEditTool);
+
+    draw.Creator.editor = function (options) { return new Editor(options); };
+    draw.UI.setEditConfig = function (config) {
+        draw.defineKey(this.prototype, 'editConfig', {
+            get() { return typeof config === 'function' ? config(this) : config; }
+        });
+    };
+    draw.UI.setEditOuter = function (toolName) {
+        draw.defineKey(this.prototype, 'editOuter', {
+            get() { return typeof toolName === 'string' ? toolName : toolName(this); }
+        });
+    };
+    draw.UI.setEditInner = function (editorName) {
+        draw.defineKey(this.prototype, 'editInner', {
+            get() { return typeof editorName === 'string' ? editorName : editorName(this); }
+        });
     };
+    draw.Line.setEditOuter(function (line) {
+        return (line.points || line.pathInputed) ? 'EditTool' : 'LineEditTool';
+    });
 
     exports.EditBox = EditBox;
     exports.EditDataHelper = EditDataHelper;
     exports.EditPoint = EditPoint;
     exports.EditSelect = EditSelect;
     exports.EditSelectHelper = EditSelectHelper;
-    exports.EditTool = EditTool;
+    exports.EditToolCreator = EditToolCreator;
     exports.Editor = Editor;
     exports.EditorEvent = EditorEvent;
     exports.EditorHelper = EditorHelper;
@@ -1541,9 +1717,11 @@ ${filterStyle}
     exports.EditorRotateEvent = EditorRotateEvent;
     exports.EditorScaleEvent = EditorScaleEvent;
     exports.EditorSkewEvent = EditorSkewEvent;
-    exports.LineEditTool = LineEditTool;
+    exports.InnerEditor = InnerEditor;
     exports.SelectArea = SelectArea;
     exports.Stroker = Stroker;
+    exports.registerEditTool = registerEditTool;
+    exports.registerInnerEditor = registerInnerEditor;
 
     return exports;