@leafer-in/editor 1.6.7 → 1.8.0

package/dist/editor.cjs

@@ -47,41 +47,10 @@ class EditorEvent extends draw.Event {
 }
 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;
@@ -95,6 +64,8 @@ function targetAttr(fn) {
                         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 });
@@ -118,9 +89,11 @@ function mergeConfigAttr() {
     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);
@@ -152,14 +125,17 @@ class Stroker extends draw.UI {
         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;
         }
@@ -302,15 +278,14 @@ class EditSelect extends draw.Group {
     }
     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;
@@ -492,16 +467,16 @@ const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft,
 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;
@@ -577,7 +552,7 @@ const EditDataHelper = {
         if (useScaleY)
             scaleY /= changedScaleY;
         if (!flipable) {
-            const { worldTransform } = element;
+            const { worldTransform } = target;
             if (scaleX < 0)
                 scaleX = 1 / boxBounds.width / worldTransform.scaleX;
             if (scaleY < 0)
@@ -585,24 +560,26 @@ const EditDataHelper = {
         }
         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)
@@ -613,7 +590,7 @@ const EditDataHelper = {
             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:
@@ -631,8 +608,8 @@ const EditDataHelper = {
             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;
@@ -729,9 +706,9 @@ const EditDataHelper = {
 };
 
 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;
@@ -741,13 +718,14 @@ function updateCursor(editor, e) {
         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;
@@ -759,9 +737,10 @@ function updateCursor(editor, e) {
         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())) + '"';
@@ -776,10 +755,26 @@ class EditPoint extends draw.Box {
 
 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();
@@ -818,8 +813,7 @@ class EditBox extends draw.Group {
         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();
@@ -827,24 +821,38 @@ class EditBox extends draw.Group {
         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;
@@ -869,7 +877,6 @@ class EditBox extends draw.Group {
                     }
                     else {
                         resizeL.height = height;
-                        resizeP.rotation = 90;
                         if (hideOnSmall && resizeP.width * 2 > height)
                             resizeP.visible = false;
                     }
@@ -877,25 +884,25 @@ class EditBox extends draw.Group {
             }
             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)) {
@@ -924,49 +931,51 @@ class EditBox extends draw.Group {
             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;
@@ -974,22 +983,61 @@ class EditBox extends draw.Group {
             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) {
@@ -1006,31 +1054,32 @@ class EditBox extends draw.Group {
                     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 {
@@ -1039,7 +1088,6 @@ class EditBox extends draw.Group {
         }
     }
     listenPointEvents(point, type, direction) {
-        const { editor } = this;
         point.direction = direction;
         point.pointType = type;
         const events = [
@@ -1049,19 +1097,31 @@ class EditBox extends draw.Group {
             [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);
@@ -1092,11 +1152,12 @@ class EditMask extends draw.UI {
             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();
         }
@@ -1191,7 +1252,7 @@ const config = {
 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)
@@ -1213,15 +1274,15 @@ function onTarget(editor, oldValue) {
     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();
         });
     }
@@ -1229,6 +1290,7 @@ function onTarget(editor, oldValue) {
         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 }));
@@ -1400,98 +1462,44 @@ class SimulateElement extends draw.Rect {
     }
 }
 
-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 };
@@ -1501,22 +1509,21 @@ class Editor extends draw.Group {
                 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);
             }
@@ -1526,38 +1533,28 @@ class Editor extends draw.Group {
         }
     }
     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);
@@ -1567,7 +1564,8 @@ class Editor extends draw.Group {
             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')
@@ -1576,25 +1574,26 @@ class Editor extends draw.Group {
                 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);
@@ -1603,7 +1602,8 @@ class Editor extends draw.Group {
     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')
@@ -1612,29 +1612,30 @@ class Editor extends draw.Group {
                 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')
@@ -1643,17 +1644,18 @@ class Editor extends draw.Group {
                 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')
@@ -1662,25 +1664,149 @@ class Editor extends draw.Group {
                 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);
@@ -1737,16 +1863,21 @@ class Editor extends draw.Group {
         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();
@@ -1754,13 +1885,14 @@ class Editor extends draw.Group {
             }
         }
     }
-    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;
         }
     }
@@ -1798,22 +1930,12 @@ class Editor extends draw.Group {
         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();
@@ -1837,24 +1959,29 @@ class Editor extends draw.Group {
             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();
     }
@@ -1867,7 +1994,7 @@ class InnerEditor {
     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();
         }
@@ -1878,7 +2005,7 @@ class InnerEditor {
     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();
         }
@@ -1952,10 +2079,7 @@ exports.EditTool = class EditTool extends InnerEditor {
         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() {
@@ -2075,14 +2199,14 @@ exports.LineEditTool = __decorate([
 
 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);
@@ -2096,7 +2220,6 @@ exports.EditPoint = EditPoint;
 exports.EditSelect = EditSelect;
 exports.EditSelectHelper = EditSelectHelper;
 exports.EditToolCreator = EditToolCreator;
-exports.Editor = Editor;
 exports.EditorEvent = EditorEvent;
 exports.EditorGroupEvent = EditorGroupEvent;
 exports.EditorHelper = EditorHelper;
@@ -2108,5 +2231,6 @@ exports.InnerEditor = InnerEditor;
 exports.InnerEditorEvent = InnerEditorEvent;
 exports.SelectArea = SelectArea;
 exports.Stroker = Stroker;
+exports.TransformTool = TransformTool;
 exports.registerEditTool = registerEditTool;
 exports.registerInnerEditor = registerInnerEditor;