@leafer-in/editor 1.6.7 → 1.8.0

package/dist/editor.js

@@ -45,41 +45,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
     }
     EditorEvent.BEFORE_SELECT = 'editor.before_select';
     EditorEvent.SELECT = 'editor.select';
+    EditorEvent.AFTER_SELECT = 'editor.after_select';
     EditorEvent.BEFORE_HOVER = 'editor.before_hover';
     EditorEvent.HOVER = 'editor.hover';
 
-    class EditorMoveEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
-    EditorMoveEvent.MOVE = 'editor.move';
-
-    class EditorScaleEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
-    EditorScaleEvent.SCALE = 'editor.scale';
-
-    class EditorRotateEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
-    EditorRotateEvent.ROTATE = 'editor.rotate';
-
-    class EditorSkewEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
-    EditorSkewEvent.SKEW = 'editor.skew';
-
     function targetAttr(fn) {
         return (target, key) => {
             const privateKey = '_' + key;
@@ -93,6 +62,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                             if (isSelect) {
                                 if (value instanceof Array && value.length > 1 && value[0].locked)
                                     value.splice(0, 1);
+                                if (this.single)
+                                    this.element.syncEventer = null;
                                 const { beforeSelect } = this.config;
                                 if (beforeSelect) {
                                     const check = beforeSelect({ target: value });
@@ -116,9 +87,11 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         return (target, key) => {
             draw.defineKey(target, key, {
                 get() {
-                    const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
+                    const { config, element, dragPoint, editBox } = this, mergeConfig = Object.assign({}, config);
                     if (element && element.editConfig)
                         Object.assign(mergeConfig, element.editConfig);
+                    if (editBox.config)
+                        Object.assign(mergeConfig, editBox.config);
                     if (dragPoint) {
                         if (dragPoint.editConfig)
                             Object.assign(mergeConfig, dragPoint.editConfig);
@@ -150,14 +123,17 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             this.strokeAlign = 'center';
         }
         setTarget(target, style) {
-            this.set(style);
+            if (style)
+                this.set(style);
             this.target = target;
             this.update();
         }
-        update() {
+        update(style) {
             const { list } = this;
             if (list.length) {
                 setListWithFn(bounds$1, list, worldBounds);
+                if (style)
+                    this.set(style);
                 this.set(bounds$1);
                 this.visible = true;
             }
@@ -300,15 +276,14 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         onSelect() {
             if (this.running) {
-                const { mergeConfig, list } = this.editor;
-                const { stroke, strokeWidth, selectedStyle } = mergeConfig;
-                this.targetStroker.setTarget(list, Object.assign({ stroke, strokeWidth: Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
+                this.targetStroker.setTarget(this.editor.list);
                 this.hoverStroker.target = null;
             }
         }
         update() {
             this.hoverStroker.update();
-            this.targetStroker.update();
+            const { stroke, strokeWidth, selectedStyle } = this.editor.mergedConfig;
+            this.targetStroker.update(Object.assign({ stroke, strokeWidth: strokeWidth && Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
         }
         onPointerMove(e) {
             const { app, editor } = this;
@@ -490,16 +465,16 @@ this.LeaferIN.editor = (function (exports, draw, core) {
     const { toPoint } = draw.AroundHelper;
     const { within } = draw.MathHelper;
     const EditDataHelper = {
-        getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
+        getScaleData(target, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
             let align, origin = {}, scaleX = 1, scaleY = 1;
-            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = element;
+            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = target;
             const { width, height } = startBounds;
             if (around) {
                 totalMove.x *= 2;
                 totalMove.y *= 2;
             }
-            const originChangedScaleX = element.scaleX / startBounds.scaleX;
-            const originChangedScaleY = element.scaleY / startBounds.scaleY;
+            const originChangedScaleX = target.scaleX / startBounds.scaleX;
+            const originChangedScaleY = target.scaleY / startBounds.scaleY;
             const signX = originChangedScaleX < 0 ? -1 : 1;
             const signY = originChangedScaleY < 0 ? -1 : 1;
             const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
@@ -575,7 +550,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             if (useScaleY)
                 scaleY /= changedScaleY;
             if (!flipable) {
-                const { worldTransform } = element;
+                const { worldTransform } = target;
                 if (scaleX < 0)
                     scaleX = 1 / boxBounds.width / worldTransform.scaleX;
                 if (scaleY < 0)
@@ -583,24 +558,26 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
             toPoint(around || align, boxBounds, origin, true);
             if (dragBounds) {
-                const allowBounds = dragBounds === 'parent' ? element.parent.boxBounds : dragBounds;
-                const localBounds = new draw.Bounds(element.__localBoxBounds);
-                localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
-                if (!draw.BoundsHelper.includes(allowBounds, localBounds)) {
-                    const realBounds = localBounds.getIntersect(allowBounds);
-                    const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
-                    if (useScaleX)
-                        scaleX *= fitScaleX;
-                    if (useScaleY)
-                        scaleY *= fitScaleY;
+                const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds;
+                const childBounds = new draw.Bounds(target.__localBoxBounds);
+                if (draw.BoundsHelper.includes(new draw.Bounds(allowBounds).spread(0.1), childBounds)) {
+                    childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
+                    if (!draw.BoundsHelper.includes(allowBounds, childBounds)) {
+                        const realBounds = childBounds.getIntersect(allowBounds);
+                        const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height;
+                        if (useScaleX)
+                            scaleX *= fitScaleX;
+                        if (useScaleY)
+                            scaleY *= fitScaleY;
+                    }
                 }
             }
             if (useScaleX && widthRange) {
-                const nowWidth = boxBounds.width * element.scaleX;
+                const nowWidth = boxBounds.width * target.scaleX;
                 scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
             }
             if (useScaleY && heightRange) {
-                const nowHeight = boxBounds.height * element.scaleY;
+                const nowHeight = boxBounds.height * target.scaleY;
                 scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
             }
             if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
@@ -611,7 +588,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 scaleY = scaleX = Math.min(scaleX, scaleY);
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
-        getRotateData(bounds, direction, current, last, around) {
+        getRotateData(target, direction, current, last, around) {
             let align, origin = {};
             switch (direction) {
                 case topLeft:
@@ -629,8 +606,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 default:
                     align = 'center';
             }
-            toPoint(around || align, bounds, origin, true);
-            return { origin, rotation: draw.PointHelper.getRotation(last, origin, current) };
+            toPoint(around || align, target.boxBounds, origin, true);
+            return { origin, rotation: draw.PointHelper.getRotation(last, target.getWorldPointByBox(origin), current) };
         },
         getSkewData(bounds, direction, move, around) {
             let align, origin = {}, skewX = 0, skewY = 0;
@@ -727,9 +704,9 @@ this.LeaferIN.editor = (function (exports, draw, core) {
     };
 
     const cacheCursors = {};
-    function updateCursor(editor, e) {
-        const { editBox } = editor, point = editBox.enterPoint;
-        if (!point || !editor.editing || !editBox.visible)
+    function updatePointCursor(editBox, e) {
+        const { enterPoint: point, dragging, skewing, resizing, flippedX, flippedY } = editBox;
+        if (!point || !editBox.editor.editing || !editBox.canUse)
             return;
         if (point.name === 'circle')
             return;
@@ -739,13 +716,14 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             return;
         }
         let { rotation } = editBox;
-        const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
-        const { pointType } = point, { flippedX, flippedY } = editBox;
+        const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig;
         let showResize = pointType.includes('resize');
         if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
             showResize = false;
         const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew');
-        const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor);
+        const cursor = dragging
+            ? (skewing ? skewCursor : (resizing ? resizeCursor : rotateCursor))
+            : (showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor));
         rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45;
         rotation = Math.round(draw.MathHelper.formatRotation(rotation, true) / 2) * 2;
         const { url, x, y } = cursor;
@@ -757,9 +735,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             cacheCursors[key] = point.cursor = { url: toDataURL(url, rotation), x, y };
         }
     }
-    function updateMoveCursor(editor) {
-        const { moveCursor, moveable } = editor.mergeConfig;
-        editor.editBox.rect.cursor = moveable ? moveCursor : undefined;
+    function updateMoveCursor(editBox) {
+        const { moveCursor, moveable } = editBox.mergeConfig;
+        if (editBox.canUse)
+            editBox.rect.cursor = moveable ? moveCursor : undefined;
     }
     function toDataURL(svg, rotation) {
         return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
@@ -774,10 +753,26 @@ this.LeaferIN.editor = (function (exports, draw, core) {
 
     const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
     class EditBox extends draw.Group {
+        get mergeConfig() {
+            const { config } = this, { mergeConfig, editBox } = this.editor;
+            return this.mergedConfig = config && (editBox !== this) ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
+        }
+        get target() { return this._target || this.editor.element; }
+        set target(target) { this._target = target; }
+        get single() { return !!this._target || this.editor.single; }
+        get transformTool() { return this._transformTool || this.editor; }
+        set transformTool(tool) { this._transformTool = tool; }
         get flipped() { return this.flippedX || this.flippedY; }
         get flippedX() { return this.scaleX < 0; }
         get flippedY() { return this.scaleY < 0; }
         get flippedOne() { return this.scaleX * this.scaleY < 0; }
+        get canUse() { return (this.visible && this.view.visible); }
+        get canGesture() {
+            if (!this.canUse)
+                return false;
+            const { moveable, resizeable, rotateable } = this.mergeConfig;
+            return typeof moveable === 'string' || typeof resizeable === 'string' || typeof rotateable === 'string';
+        }
         constructor(editor) {
             super();
             this.view = new draw.Group();
@@ -816,8 +811,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             this.add(view);
         }
         load() {
-            const { mergeConfig, element, single } = this.editor;
-            const { rect, circle, resizePoints } = this;
+            const { target, mergeConfig, single, rect, circle, resizePoints } = this;
             const { stroke, strokeWidth } = mergeConfig;
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
@@ -825,24 +819,38 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             for (let i = 0; i < 8; i++) {
                 resizeP = resizePoints[i];
                 resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]));
-                if (!(i % 2))
-                    resizeP.rotation = (i / 2) * 90;
+                resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90;
             }
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
             rect.set(Object.assign({ stroke, strokeWidth, editConfig }, (mergeConfig.rect || {})));
-            rect.hittable = !single;
-            rect.syncEventer = single && this.editor;
-            if (single) {
-                element.syncEventer = rect;
-                this.app.interaction.bottomList = [{ target: rect, proxy: element }];
-            }
-        }
-        update(bounds) {
-            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this;
-            const { mergeConfig, element, multiple, editMask } = editor;
-            const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
-            this.visible = !element.locked;
+            const syncEventer = single && this.transformTool.editTool;
+            rect.hittable = !syncEventer;
+            rect.syncEventer = syncEventer && this.editor;
+            if (syncEventer) {
+                target.syncEventer = rect;
+                this.app.interaction.bottomList = [{ target: rect, proxy: target }];
+            }
+            updateMoveCursor(this);
+        }
+        update() {
+            const { editor } = this;
+            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = this.target.getLayoutBounds('box', editor, true);
+            this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
+            this.updateBounds({ x: 0, y: 0, width, height });
+        }
+        unload() {
+            this.visible = false;
+            if (this.app)
+                this.rect.syncEventer = this.app.interaction.bottomList = null;
+        }
+        updateBounds(bounds) {
+            const { editMask } = this.editor;
+            const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
+            const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, spread } = mergeConfig;
+            this.visible = !this.target.locked;
             editMask.visible = mask ? true : 0;
+            if (spread)
+                draw.BoundsHelper.spread(bounds, spread);
             if (this.view.worldOpacity) {
                 const { width, height } = bounds;
                 const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
@@ -867,7 +875,6 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                         }
                         else {
                             resizeL.height = height;
-                            resizeP.rotation = 90;
                             if (hideOnSmall && resizeP.width * 2 > height)
                                 resizeP.visible = false;
                         }
@@ -875,25 +882,25 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 }
                 circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
                 if (circle.visible)
-                    this.layoutCircle(mergeConfig);
+                    this.layoutCircle();
                 if (rect.path)
                     rect.path = null;
-                rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
+                rect.set(Object.assign(Object.assign({}, bounds), { visible: single ? editBox : true }));
                 buttons.visible = showPoints && buttons.children.length > 0 || 0;
                 if (buttons.visible)
-                    this.layoutButtons(mergeConfig);
+                    this.layoutButtons();
             }
             else
                 rect.set(bounds);
         }
-        layoutCircle(config) {
-            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
+        layoutCircle() {
+            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = this.mergedConfig;
             const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'));
             this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint);
         }
-        layoutButtons(config) {
+        layoutButtons() {
             const { buttons } = this;
-            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config;
+            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.mergedConfig;
             const { flippedX, flippedY } = this;
             let index = fourDirection.indexOf(buttonsDirection);
             if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
@@ -922,49 +929,51 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 buttons.y = point.y + margin;
             }
         }
-        unload() {
-            this.visible = false;
-        }
         getPointStyle(userStyle) {
-            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig;
+            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig;
             const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig };
             return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
         }
         getPointsStyle() {
-            const { point } = this.editor.mergeConfig;
+            const { point } = this.mergedConfig;
             return point instanceof Array ? point : [point];
         }
         getMiddlePointsStyle() {
-            const { middlePoint } = this.editor.mergeConfig;
+            const { middlePoint } = this.mergedConfig;
             return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
         }
-        onSelect(e) {
-            if (e.oldList.length === 1) {
-                e.oldList[0].syncEventer = null;
-                if (this.app)
-                    this.app.interaction.bottomList = null;
-            }
-        }
         onDragStart(e) {
             this.dragging = true;
             const point = this.dragPoint = e.current, { pointType } = point;
-            const { editor, dragStartData } = this, { element } = editor;
+            const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig;
             if (point.name === 'rect') {
-                this.moving = true;
-                editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1;
+                moveable && (this.moving = true);
+                editor.opacity = hideOnMove ? 0 : 1;
+            }
+            else {
+                if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !resizeable) {
+                    rotateable && (this.rotating = true);
+                    if (pointType === 'resize-rotate')
+                        resizeable && (this.resizing = true);
+                    else if (point.name === 'resize-line')
+                        skewable && (this.skewing = true), this.rotating = false;
+                }
+                else if (pointType === 'resize')
+                    resizeable && (this.resizing = true);
+                if (pointType === 'skew')
+                    skewable && (this.skewing = true);
             }
             dragStartData.x = e.x;
             dragStartData.y = e.y;
-            dragStartData.point = { x: element.x, y: element.y };
-            dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
-            dragStartData.rotation = element.rotation;
+            dragStartData.point = { x: target.x, y: target.y };
+            dragStartData.bounds = Object.assign({}, target.getLayoutBounds('box', 'local'));
+            dragStartData.rotation = target.rotation;
             if (pointType && pointType.includes('resize'))
                 draw.ResizeEvent.resizingKeys = editor.leafList.keys;
         }
         onDragEnd(e) {
-            this.dragging = false;
             this.dragPoint = null;
-            this.moving = false;
+            this.resetDoing();
             const { name, pointType } = e.current;
             if (name === 'rect')
                 this.editor.opacity = 1;
@@ -972,22 +981,61 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 draw.ResizeEvent.resizingKeys = null;
         }
         onDrag(e) {
-            const { editor } = this;
-            const { pointType } = this.enterPoint = e.current;
-            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
-                editor.onRotate(e);
-                if (pointType === 'resize-rotate')
-                    editor.onScale(e);
-            }
-            else if (pointType === 'resize')
-                editor.onScale(e);
-            if (pointType === 'skew')
-                editor.onSkew(e);
-            updateCursor(editor, e);
+            const { transformTool, moving, resizing, rotating, skewing } = this;
+            if (moving) {
+                transformTool.onMove(e);
+                updateMoveCursor(this);
+            }
+            else if (resizing || rotating || skewing) {
+                const point = e.current;
+                if (point.pointType)
+                    this.enterPoint = point;
+                if (rotating)
+                    transformTool.onRotate(e);
+                if (resizing)
+                    transformTool.onScale(e);
+                if (skewing)
+                    transformTool.onSkew(e);
+                updatePointCursor(this, e);
+            }
+        }
+        resetDoing() {
+            if (this.canUse)
+                this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+        }
+        onMove(e) {
+            if (this.canGesture && e.moveType !== 'drag') {
+                e.stop();
+                if (typeof this.mergeConfig.moveable === 'string') {
+                    this.gesturing = this.moving = true;
+                    this.transformTool.onMove(e);
+                }
+            }
+        }
+        onScale(e) {
+            if (this.canGesture) {
+                e.stop();
+                if (typeof this.mergeConfig.resizeable === 'string') {
+                    this.gesturing = this.resizing = true;
+                    this.transformTool.onScale(e);
+                }
+            }
+        }
+        onRotate(e) {
+            if (this.canGesture) {
+                e.stop();
+                if (typeof this.mergeConfig.rotateable === 'string') {
+                    this.gesturing = this.rotating = true;
+                    this.transformTool.onRotate(e);
+                }
+            }
+        }
+        onKey(e) {
+            updatePointCursor(this, e);
         }
         onArrow(e) {
-            const { editor } = this;
-            if (editor.editing && editor.mergeConfig.keyEvent) {
+            const { editor, transformTool } = this;
+            if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
                 let x = 0, y = 0;
                 const distance = e.shiftKey ? 10 : 1;
                 switch (e.code) {
@@ -1004,31 +1052,32 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                         x = distance;
                 }
                 if (x || y)
-                    editor.move(x, y);
+                    transformTool.move(x, y);
             }
         }
         onDoubleTap(e) {
-            if (this.editor.mergeConfig.openInner === 'double')
+            const { openInner, preventEditInner } = this.mergeConfig;
+            if (openInner === 'double' && !preventEditInner)
                 this.openInner(e);
         }
         onLongPress(e) {
-            if (this.editor.mergeConfig.openInner === 'long')
+            const { openInner, preventEditInner } = this.mergeConfig;
+            if (openInner === 'long' && preventEditInner)
                 this.openInner(e);
         }
         openInner(e) {
-            const { editor } = this;
-            if (editor.single) {
-                const { element } = editor;
-                if (element.locked)
+            const { editor, target } = this;
+            if (this.single) {
+                if (target.locked)
                     return;
-                if (element.isBranch && !element.editInner) {
-                    if (element.textBox) {
-                        const { children } = element;
+                if (target.isBranch && !target.editInner) {
+                    if (target.textBox) {
+                        const { children } = target;
                         const find = children.find(item => item.editable && item instanceof draw.Text) || children.find(item => item instanceof draw.Text);
                         if (find)
                             return editor.openInnerEditor(find);
                     }
-                    editor.openGroup(element);
+                    editor.openGroup(target);
                     editor.target = editor.selector.findDeepOne(e);
                 }
                 else {
@@ -1037,7 +1086,6 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         listenPointEvents(point, type, direction) {
-            const { editor } = this;
             point.direction = direction;
             point.pointType = type;
             const events = [
@@ -1047,19 +1095,31 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 [core.PointerEvent.LEAVE, () => { this.enterPoint = null; }],
             ];
             if (point.name !== 'circle')
-                events.push([core.PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(editor, e); }]);
+                events.push([core.PointerEvent.ENTER, (e) => { this.enterPoint = point, updatePointCursor(this, e); }]);
             this.__eventIds.push(point.on_(events));
         }
         __listenEvents() {
-            const { rect, editor } = this;
-            this.__eventIds.push(editor.on_(EditorEvent.SELECT, this.onSelect, this), rect.on_([
+            const { rect, editor, __eventIds: events } = this;
+            events.push(rect.on_([
                 [core.DragEvent.START, this.onDragStart, this],
-                [core.DragEvent.DRAG, editor.onMove, editor],
+                [core.DragEvent.DRAG, this.onDrag, this],
                 [core.DragEvent.END, this.onDragEnd, this],
-                [core.PointerEvent.ENTER, () => updateMoveCursor(editor)],
+                [core.PointerEvent.ENTER, () => updateMoveCursor(this)],
                 [core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this],
                 [core.PointerEvent.LONG_PRESS, this.onLongPress, this]
             ]));
+            this.waitLeafer(() => {
+                events.push(editor.app.on_([
+                    [[core.KeyEvent.HOLD, core.KeyEvent.UP], this.onKey, this],
+                    [core.KeyEvent.DOWN, this.onArrow, this],
+                    [core.MoveEvent.BEFORE_MOVE, this.onMove, this, true],
+                    [core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
+                    [core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
+                    [core.MoveEvent.END, this.resetDoing, this],
+                    [core.ZoomEvent.END, this.resetDoing, this],
+                    [core.RotateEvent.END, this.resetDoing, this],
+                ]));
+            });
         }
         __removeListenEvents() {
             this.off_(this.__eventIds);
@@ -1090,11 +1150,12 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
                     return;
                 canvas.saveBlendMode('destination-out');
+                options = Object.assign(Object.assign({}, options), { shape: true });
                 editor.list.forEach(item => {
-                    item.__renderShape(canvas, options);
-                    const { __box, parent } = item;
-                    if ((item = __box) || ((item = parent) && parent.textBox))
-                        item.__renderShape(canvas, options);
+                    item.__render(canvas, options);
+                    const { parent } = item;
+                    if (parent && parent.textBox)
+                        parent.__renderShape(canvas, options);
                 });
                 canvas.restoreBlendMode();
             }
@@ -1189,7 +1250,7 @@ ${filterStyle}
     const bounds = new draw.Bounds();
     function simulate(editor) {
         const { simulateTarget, list } = editor;
-        const { zoomLayer } = list[0].leafer.zoomLayer;
+        const { zoomLayer } = list[0].leafer;
         simulateTarget.safeChange(() => {
             bounds.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page'));
             if (bounds.width === 0)
@@ -1211,15 +1272,15 @@ ${filterStyle}
         else {
             editor.simulateTarget.remove();
             editor.leafList.reset();
-            editor.closeInnerEditor();
         }
-        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }));
+        editor.closeInnerEditor(true);
+        editor.unloadEditTool();
+        const data = { editor, value: target, oldValue };
+        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data));
         editor.checkOpenedGroups();
         if (editor.editing) {
             editor.waitLeafer(() => {
-                updateMoveCursor(editor);
                 editor.updateEditTool();
-                editor.update();
                 editor.listenTargetEvents();
             });
         }
@@ -1227,6 +1288,7 @@ ${filterStyle}
             editor.updateEditTool();
             editor.removeTargetEvents();
         }
+        editor.emitEvent(new EditorEvent(EditorEvent.AFTER_SELECT, data));
     }
     function onHover(editor, oldValue) {
         editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
@@ -1398,98 +1460,44 @@ ${filterStyle}
         }
     }
 
-    class Editor extends draw.Group {
-        get list() { return this.leafList.list; }
-        get dragHoverExclude() { return [this.editBox.rect]; }
-        get editing() { return !!this.list.length; }
-        get groupOpening() { return !!this.openedGroupList.length; }
-        get multiple() { return this.list.length > 1; }
-        get single() { return this.list.length === 1; }
-        get dragging() { return this.editBox.dragging; }
-        get moving() { return this.editBox.moving; }
-        get dragPoint() { return this.editBox.dragPoint; }
-        get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
-        get buttons() { return this.editBox.buttons; }
-        constructor(userConfig, data) {
-            super(data);
-            this.leafList = new draw.LeafList();
-            this.openedGroupList = new draw.LeafList();
-            this.simulateTarget = new SimulateElement(this);
-            this.editBox = new EditBox(this);
-            this.editToolList = {};
-            this.selector = new EditSelect(this);
-            this.editMask = new EditMask(this);
-            this.targetEventIds = [];
-            let mergedConfig = draw.DataHelper.clone(config);
-            if (userConfig)
-                mergedConfig = draw.DataHelper.default(userConfig, mergedConfig);
-            this.mergedConfig = this.config = mergedConfig;
-            this.addMany(this.editMask, this.selector, this.editBox);
-            if (!draw.Plugin.has('resize'))
-                this.config.editSize = 'scale';
-        }
-        select(target) {
-            this.target = target;
-        }
-        cancel() {
-            this.target = null;
-        }
-        hasItem(item) {
-            return this.leafList.has(item);
-        }
-        addItem(item) {
-            if (!this.hasItem(item) && !item.locked)
-                this.leafList.add(item), this.target = this.leafList.list;
-        }
-        removeItem(item) {
-            if (this.hasItem(item))
-                this.leafList.remove(item), this.target = this.leafList.list;
-        }
-        shiftItem(item) {
-            this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
-        }
-        update() {
-            if (this.editing) {
-                if (!this.element.parent)
-                    return this.cancel();
-                if (this.innerEditing)
-                    this.innerEditor.update();
-                this.editTool.update();
-                this.selector.update();
-            }
+    class EditorMoveEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        updateEditBox() {
-            if (this.multiple)
-                simulate(this);
-            this.update();
+    }
+    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
+    EditorMoveEvent.MOVE = 'editor.move';
+
+    class EditorScaleEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        updateEditTool() {
-            const tool = this.editTool;
-            if (tool) {
-                this.editBox.unload();
-                tool.unload();
-                this.editTool = null;
-            }
-            if (this.editing) {
-                const tag = this.single ? this.list[0].editOuter : 'EditTool';
-                this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
-                this.editBox.load();
-                this.editTool.load();
-            }
+    }
+    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
+    EditorScaleEvent.SCALE = 'editor.scale';
+
+    class EditorRotateEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        getEditSize(_ui) {
-            return this.mergeConfig.editSize;
+    }
+    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
+    EditorRotateEvent.ROTATE = 'editor.rotate';
+
+    class EditorSkewEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
+    }
+    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
+    EditorSkewEvent.SKEW = 'editor.skew';
+
+    class TransformTool {
         onMove(e) {
+            const { target, dragStartData } = this.editBox;
             if (e instanceof core.MoveEvent) {
-                if (e.moveType !== 'drag') {
-                    const { moveable, resizeable } = this.mergeConfig;
-                    const move = e.getLocalMove(this.element);
-                    if (moveable === 'move')
-                        e.stop(), this.move(move.x, move.y);
-                    else if (resizeable === 'zoom')
-                        e.stop();
-                }
+                const move = e.getLocalMove(target);
+                this.move(move.x, move.y);
             }
             else {
                 const total = { x: e.totalX, y: e.totalY };
@@ -1499,22 +1507,21 @@ ${filterStyle}
                     else
                         total.x = 0;
                 }
-                this.move(core.DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total));
+                this.move(core.DragEvent.getValidMove(target, dragStartData.point, total));
             }
         }
         onScale(e) {
-            const { element } = this;
-            let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
+            const { target, mergeConfig, single, dragStartData } = this.editBox;
+            let { around, lockRatio, flipable, editSize } = mergeConfig;
             if (e instanceof core.ZoomEvent) {
-                if (resizeable === 'zoom')
-                    e.stop(), this.scaleOf(element.getBoxPoint(e), e.scale, e.scale);
+                this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
             }
             else {
                 const { direction } = e.current;
-                if (e.shiftKey || element.lockRatio)
+                if (e.shiftKey || target.lockRatio)
                     lockRatio = true;
-                const data = EditDataHelper.getScaleData(element, this.editBox.dragStartData.bounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
-                if (this.editTool.onScaleWithDrag) {
+                const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, e.getInnerTotal(target), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === 'scale');
+                if (this.editTool && this.editTool.onScaleWithDrag) {
                     data.drag = e;
                     this.scaleWithDrag(data);
                 }
@@ -1524,38 +1531,28 @@ ${filterStyle}
             }
         }
         onRotate(e) {
-            const { skewable, rotateable, around, rotateGap } = this.mergeConfig;
-            const { direction, name } = e.current;
-            if (skewable && name === 'resize-line')
-                return this.onSkew(e);
-            const { element } = this, { dragStartData } = this.editBox;
+            const { target, mergeConfig, dragStartData } = this.editBox;
+            const { around, rotateAround, rotateGap } = mergeConfig;
+            const { direction } = e.current;
             let origin, rotation;
             if (e instanceof core.RotateEvent) {
-                if (rotateable === 'rotate')
-                    e.stop(), rotation = e.rotation, origin = element.getBoxPoint(e);
-                else
-                    return;
-                if (element.scaleX * element.scaleY < 0)
-                    rotation = -rotation;
+                rotation = e.rotation;
+                origin = rotateAround ? draw.AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
             }
             else {
-                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(dragStartData), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
-                rotation = data.rotation;
+                const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (rotateAround || target.around || target.origin || around || 'center'));
+                rotation = dragStartData.rotation + data.rotation - target.rotation;
                 origin = data.origin;
             }
-            if (element.scaleX * element.scaleY < 0)
-                rotation = -rotation;
-            if (e instanceof core.DragEvent)
-                rotation = dragStartData.rotation + rotation - element.rotation;
-            rotation = draw.MathHelper.float(draw.MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2);
+            rotation = draw.MathHelper.float(draw.MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
             if (!rotation)
                 return;
             this.rotateOf(origin, rotation);
         }
         onSkew(e) {
-            const { element } = this;
-            const { around } = this.mergeConfig;
-            const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, e.current.direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey));
+            const { target, mergeConfig } = this.editBox;
+            const { around } = mergeConfig;
+            const { origin, skewX, skewY } = EditDataHelper.getSkewData(target.boxBounds, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey));
             if (!skewX && !skewY)
                 return;
             this.skewOf(origin, skewX, skewY);
@@ -1565,7 +1562,8 @@ ${filterStyle}
                 return;
             if (typeof x === 'object')
                 y = x.y, x = x.x;
-            const { element: target } = this, { beforeMove } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeMove } = mergeConfig;
             if (beforeMove) {
                 const check = beforeMove({ target, x, y });
                 if (typeof check === 'object')
@@ -1574,25 +1572,26 @@ ${filterStyle}
                     return;
             }
             const world = target.getWorldPointByLocal({ x, y }, null, true);
-            if (this.multiple)
+            if (!single)
                 target.safeChange(() => target.move(x, y));
-            const data = { target, editor: this, moveX: world.x, moveY: world.y };
+            const data = { target, editor, moveX: world.x, moveY: world.y };
             this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data));
             const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data);
-            this.editTool.onMove(event);
+            this.doMove(event);
             this.emitEvent(event);
         }
         scaleWithDrag(data) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            const { target, mergeConfig, editor } = this.editBox;
+            const { beforeScale } = mergeConfig;
             if (beforeScale) {
                 const { origin, scaleX, scaleY, drag } = data;
                 const check = beforeScale({ target, drag, origin, scaleX, scaleY });
                 if (check === false)
                     return;
             }
-            data = Object.assign(Object.assign({}, data), { target, editor: this, worldOrigin: target.getWorldPoint(data.origin) });
+            data = Object.assign(Object.assign({}, data), { target, editor, worldOrigin: target.getWorldPoint(data.origin) });
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScaleWithDrag(event);
@@ -1601,7 +1600,8 @@ ${filterStyle}
         scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeScale } = mergeConfig;
             if (beforeScale) {
                 const check = beforeScale({ target, origin, scaleX, scaleY });
                 if (typeof check === 'object')
@@ -1610,29 +1610,30 @@ ${filterStyle}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
-            const data = { target, editor: this, worldOrigin, scaleX, scaleY, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
+            const data = { target, editor, worldOrigin, scaleX, scaleY, transform };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
-            this.editTool.onScale(event);
+            this.doScale(event);
             this.emitEvent(event);
         }
         flip(axis) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element } = this;
+            const { target, single, editor } = this.editBox;
             const worldOrigin = this.getWorldOrigin('center');
-            const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new draw.Matrix(draw.LeafHelper.getFlipTransform(element, axis));
-            const data = { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
+            const transform = !single ? this.getChangedTransform(() => target.safeChange(() => target.flip(axis))) : new draw.Matrix(draw.LeafHelper.getFlipTransform(target, axis));
+            const data = { target, editor, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
-            this.editTool.onScale(event);
+            this.doScale(event);
             this.emitEvent(event);
         }
         rotateOf(origin, rotation) {
             if (!this.checkTransform('rotateable'))
                 return;
-            const { element: target } = this, { beforeRotate } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeRotate } = mergeConfig;
             if (beforeRotate) {
                 const check = beforeRotate({ target, origin, rotation });
                 if (typeof check === 'number')
@@ -1641,17 +1642,18 @@ ${filterStyle}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
-            const data = { target, editor: this, worldOrigin, rotation, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
+            const data = { target, editor, worldOrigin, rotation, transform };
             this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
             const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
-            this.editTool.onRotate(event);
+            this.doRotate(event);
             this.emitEvent(event);
         }
         skewOf(origin, skewX, skewY = 0, _resize) {
             if (!this.checkTransform('skewable'))
                 return;
-            const { element: target } = this, { beforeSkew } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeSkew } = mergeConfig;
             if (beforeSkew) {
                 const check = beforeSkew({ target, origin, skewX, skewY });
                 if (typeof check === 'object')
@@ -1660,25 +1662,149 @@ ${filterStyle}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
-            const data = { target, editor: this, worldOrigin, skewX, skewY, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
+            const data = { target, editor, worldOrigin, skewX, skewY, transform };
             this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
             const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
-            this.editTool.onSkew(event);
+            this.doSkew(event);
             this.emitEvent(event);
         }
-        checkTransform(type) { return this.element && !this.element.locked && this.mergeConfig[type]; }
+        doMove(event) {
+            this.editTool.onMove(event);
+        }
+        doScale(event) {
+            this.editTool.onScale(event);
+        }
+        doRotate(event) {
+            this.editTool.onRotate(event);
+        }
+        doSkew(event) {
+            this.editTool.onSkew(event);
+        }
+        checkTransform(type) {
+            const { target, mergeConfig } = this.editBox;
+            return target && !target.locked && mergeConfig[type];
+        }
         getWorldOrigin(origin) {
-            return this.element.getWorldPoint(draw.LeafHelper.getInnerOrigin(this.element, origin));
+            const { target } = this.editBox;
+            return target.getWorldPoint(draw.LeafHelper.getInnerOrigin(target, origin));
         }
         getChangedTransform(func) {
-            const { element } = this;
-            if (this.multiple && !element.canChange)
-                return element.changedTransform;
-            const oldMatrix = new draw.Matrix(element.worldTransform);
+            const { target, single } = this.editBox;
+            if (!single && !target.canChange)
+                return target.changedTransform;
+            const oldMatrix = new draw.Matrix(target.worldTransform);
             func();
-            return new draw.Matrix(element.worldTransform).divide(oldMatrix);
+            return new draw.Matrix(target.worldTransform).divide(oldMatrix);
+        }
+        emitEvent(event, capture) {
+            this.editBox.editor.emitEvent(event, capture);
+        }
+    }
+
+    exports.Editor = class Editor extends draw.Group {
+        get list() { return this.leafList.list; }
+        get dragHoverExclude() { return [this.editBox.rect]; }
+        get editing() { return !!this.list.length; }
+        get groupOpening() { return !!this.openedGroupList.length; }
+        get multiple() { return this.list.length > 1; }
+        get single() { return this.list.length === 1; }
+        get dragPoint() { return this.editBox.dragPoint; }
+        get dragging() { return this.editBox.dragging; }
+        get gesturing() { return this.editBox.gesturing; }
+        get moving() { return this.editBox.moving; }
+        get resizing() { return this.editBox.resizing; }
+        get rotating() { return this.editBox.rotating; }
+        get skewing() { return this.editBox.skewing; }
+        get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
+        get buttons() { return this.editBox.buttons; }
+        constructor(userConfig, data) {
+            super(data);
+            this.leafList = new draw.LeafList();
+            this.openedGroupList = new draw.LeafList();
+            this.simulateTarget = new SimulateElement(this);
+            this.editBox = new EditBox(this);
+            this.editToolList = {};
+            this.selector = new EditSelect(this);
+            this.editMask = new EditMask(this);
+            this.targetEventIds = [];
+            let mergedConfig = draw.DataHelper.clone(config);
+            if (userConfig)
+                mergedConfig = draw.DataHelper.default(userConfig, mergedConfig);
+            this.mergedConfig = this.config = mergedConfig;
+            this.addMany(this.editMask, this.selector, this.editBox);
+            if (!draw.Plugin.has('resize'))
+                this.config.editSize = 'scale';
+        }
+        select(target) {
+            this.target = target;
+        }
+        cancel() {
+            this.target = null;
+        }
+        hasItem(item) {
+            return this.leafList.has(item);
+        }
+        addItem(item) {
+            if (!this.hasItem(item) && !item.locked)
+                this.leafList.add(item), this.target = this.leafList.list;
+        }
+        removeItem(item) {
+            if (this.hasItem(item))
+                this.leafList.remove(item), this.target = this.leafList.list;
+        }
+        shiftItem(item) {
+            this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
+        }
+        update() {
+            if (this.editing) {
+                if (!this.element.parent)
+                    return this.cancel();
+                if (this.innerEditing)
+                    this.innerEditor.update();
+                this.editTool.update();
+                this.selector.update();
+            }
         }
+        updateEditBox() {
+            if (this.multiple)
+                simulate(this);
+            this.update();
+        }
+        updateEditTool() {
+            this.unloadEditTool();
+            if (this.editing) {
+                const name = this.element.editOuter || 'EditTool';
+                const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+                this.editBox.load();
+                tool.load();
+                this.update();
+            }
+        }
+        unloadEditTool() {
+            let tool = this.editTool;
+            if (tool) {
+                this.editBox.unload();
+                tool.unload();
+                this.editTool = null;
+            }
+        }
+        getEditSize(_ui) {
+            return this.mergeConfig.editSize;
+        }
+        onMove(_e) { }
+        onScale(_e) { }
+        onRotate(_e) { }
+        onSkew(_e) { }
+        move(_x, _y = 0) { }
+        scaleWithDrag(_data) { }
+        scaleOf(_origin, scaleX, _scaleY = scaleX, _resize) { }
+        flip(_axis) { }
+        rotateOf(_origin, _rotation) { }
+        skewOf(_origin, _skewX, _skewY = 0, _resize) { }
+        checkTransform(_type) { return undefined; }
+        getWorldOrigin(_origin) { return undefined; }
+        getChangedTransform(_func) { return undefined; }
         group(userGroup) {
             if (this.multiple) {
                 this.emitGroupEvent(EditorGroupEvent.BEFORE_GROUP);
@@ -1735,16 +1861,21 @@ ${filterStyle}
             if (group)
                 group.emitEvent(event);
         }
-        openInnerEditor(target, select) {
+        openInnerEditor(target, nameOrSelect, select) {
+            let name;
+            if (typeof nameOrSelect === 'string')
+                name = nameOrSelect;
+            else if (!select)
+                select = nameOrSelect;
             if (target && select)
                 this.target = target;
             if (this.single) {
                 const editTarget = target || this.element;
-                const tag = editTarget.editInner;
-                if (tag && EditToolCreator.list[tag]) {
+                name || (name = editTarget.editInner);
+                if (name && EditToolCreator.list[name]) {
                     this.editTool.unload();
                     this.innerEditing = true;
-                    this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                    this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
                     this.innerEditor.editTarget = editTarget;
                     this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
                     this.innerEditor.load();
@@ -1752,13 +1883,14 @@ ${filterStyle}
                 }
             }
         }
-        closeInnerEditor() {
+        closeInnerEditor(onlyInnerEditor) {
             if (this.innerEditing) {
                 this.innerEditing = false;
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE);
                 this.innerEditor.unload();
                 this.emitInnerEvent(InnerEditorEvent.CLOSE);
-                this.editTool.load();
+                if (!onlyInnerEditor)
+                    this.updateEditTool();
                 this.innerEditor = null;
             }
         }
@@ -1796,22 +1928,12 @@ ${filterStyle}
             if (this.targetChanged)
                 this.update();
         }
-        onKey(e) {
-            updateCursor(this, e);
-        }
         listenTargetEvents() {
             if (!this.targetEventIds.length) {
-                const { app, leafer, editBox, editMask } = this;
+                const { app, leafer, editMask } = this;
                 this.targetEventIds = [
                     leafer.on_(draw.RenderEvent.START, this.onRenderStart, this),
-                    app.on_([
-                        [draw.RenderEvent.CHILD_START, this.onAppRenderStart, this],
-                        [core.MoveEvent.BEFORE_MOVE, this.onMove, this, true],
-                        [core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
-                        [core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                        [[core.KeyEvent.HOLD, core.KeyEvent.UP], this.onKey, this],
-                        [core.KeyEvent.DOWN, editBox.onArrow, editBox]
-                    ])
+                    app.on_(draw.RenderEvent.CHILD_START, this.onAppRenderStart, this)
                 ];
                 if (editMask.visible)
                     editMask.forceRender();
@@ -1835,24 +1957,29 @@ ${filterStyle}
                 super.destroy();
             }
         }
-    }
+    };
     __decorate([
         mergeConfigAttr()
-    ], Editor.prototype, "mergeConfig", void 0);
+    ], exports.Editor.prototype, "mergeConfig", void 0);
     __decorate([
         targetAttr(onHover)
-    ], Editor.prototype, "hoverTarget", void 0);
+    ], exports.Editor.prototype, "hoverTarget", void 0);
     __decorate([
         targetAttr(onTarget)
-    ], Editor.prototype, "target", void 0);
+    ], exports.Editor.prototype, "target", void 0);
+    exports.Editor = __decorate([
+        core.useModule(TransformTool, ['editBox', 'editTool', 'emitEvent'])
+    ], exports.Editor);
 
     class InnerEditor {
         static registerInnerEditor() {
             EditToolCreator.register(this);
         }
         get tag() { return 'InnerEditor'; }
+        get mode() { return 'focus'; }
         get editBox() { return this.editor.editBox; }
         constructor(editor) {
+            this.eventIds = [];
             this.editor = editor;
             this.create();
         }
@@ -1865,7 +1992,7 @@ ${filterStyle}
         load() {
             const { editor } = this;
             if (editor) {
-                if (editor.app)
+                if (editor.app && this.mode === 'focus')
                     editor.selector.hittable = editor.app.tree.hitChildren = false;
                 this.onLoad();
             }
@@ -1876,7 +2003,7 @@ ${filterStyle}
         unload() {
             const { editor } = this;
             if (editor) {
-                if (editor.app)
+                if (editor.app && this.mode === 'focus')
                     editor.selector.hittable = editor.app.tree.hitChildren = true;
                 this.onUnload();
             }
@@ -1950,10 +2077,7 @@ ${filterStyle}
             this.onLoad();
         }
         update() {
-            const { editor, editBox } = this;
-            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = editor.element.getLayoutBounds('box', editor, true);
-            editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
-            editBox.update({ x: 0, y: 0, width, height });
+            this.editBox.update();
             this.onUpdate();
         }
         unload() {
@@ -2073,14 +2197,14 @@ ${filterStyle}
 
     draw.Plugin.add('editor', 'resize');
     draw.Creator.editor = function (options, app) {
-        const editor = new Editor(options);
+        const editor = new exports.Editor(options);
         if (app)
             app.sky.add(app.editor = editor);
         return editor;
     };
     draw.Box.addAttr('textBox', false, draw.dataType);
     draw.UI.addAttr('editConfig', undefined, draw.dataType);
-    draw.UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', draw.dataType);
+    draw.UI.addAttr('editOuter', (ui) => { ui.updateLayout(); return ui.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }, draw.dataType);
     draw.UI.addAttr('editInner', 'PathEditor', draw.dataType);
     draw.Group.addAttr('editInner', '', draw.dataType);
     draw.Text.addAttr('editInner', 'TextEditor', draw.dataType);
@@ -2094,7 +2218,6 @@ ${filterStyle}
     exports.EditSelect = EditSelect;
     exports.EditSelectHelper = EditSelectHelper;
     exports.EditToolCreator = EditToolCreator;
-    exports.Editor = Editor;
     exports.EditorEvent = EditorEvent;
     exports.EditorGroupEvent = EditorGroupEvent;
     exports.EditorHelper = EditorHelper;
@@ -2106,6 +2229,7 @@ ${filterStyle}
     exports.InnerEditorEvent = InnerEditorEvent;
     exports.SelectArea = SelectArea;
     exports.Stroker = Stroker;
+    exports.TransformTool = TransformTool;
     exports.registerEditTool = registerEditTool;
     exports.registerInnerEditor = registerInnerEditor;