@leafer-in/editor 1.9.6 → 1.9.8

package/dist/editor.esm.js

@@ -1,6 +1,6 @@
-import { Event, isArray, defineKey, isNull, isUndefined, isObject, MatrixHelper, BoundsHelper, LeafBoundsHelper, getMatrixData, getBoundsData, UI, isString, Paint, Group, Rect, Bounds, LeafList, Direction9, AroundHelper, MathHelper, PointHelper, DragBoundsHelper, Box, isNumber, ResizeEvent, Text, Matrix, Debug, LeafHelper, PropertyEvent, DataHelper, Plugin, RenderEvent, LeaferEvent, getPointData, Creator, dataType } from "@leafer-ui/draw";
+import { Event, isArray, defineKey, isNull, isUndefined, isObject, MatrixHelper, BoundsHelper, LeafBoundsHelper, getMatrixData, getBoundsData, UI, isString, Paint, Group, Rect, Bounds, LeafList, Direction9, AroundHelper, MathHelper, PointHelper, isNumber, DragBoundsHelper, Box, ResizeEvent, getPointData, Text, Matrix, Debug, LeafHelper, PropertyEvent, DataHelper, Plugin, RenderEvent, LeaferEvent, Creator, dataType } from "@leafer-ui/draw";
 
-import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, KeyEvent, RotateEvent, useModule } from "@leafer-ui/core";
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent, KeyEvent, useModule } from "@leafer-ui/core";
 
 import "@leafer-in/resize";
 
@@ -52,22 +52,25 @@ function targetAttr(fn) {
             set(value) {
                 const old = this[privateKey];
                 if (old !== value) {
-                    if (this.config) {
+                    const t = this;
+                    if (t.config) {
                         const isSelect = key === "target";
                         if (isSelect) {
-                            if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
-                            if (this.single) this.element.syncEventer = null;
-                            const {beforeSelect: beforeSelect} = this.config;
+                            const {beforeSelect: beforeSelect} = t.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({
                                     target: value
                                 });
                                 if (isObject(check)) value = check; else if (check === false) return;
                             }
+                            t.setDimOthers(false);
+                            t.setBright(false);
+                            if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
+                            if (t.single) t.element.syncEventer = null;
                         }
                         const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
                         if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
-                            editor: this,
+                            editor: t,
                             value: value,
                             oldValue: old
                         }));
@@ -249,11 +252,12 @@ class EditSelect extends Group {
         return !!this.originList;
     }
     get running() {
-        const {editor: editor} = this;
-        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && this.app.mode === "normal";
+        const {editor: editor, app: app} = this;
+        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && (app && app.mode === "normal");
     }
     get isMoveMode() {
-        return this.app && this.app.interaction.moveMode;
+        const {app: app} = this;
+        return app && app.interaction.moveMode;
     }
     constructor(editor) {
         super();
@@ -316,12 +320,12 @@ class EditSelect extends Group {
     onTap(e) {
         if (e.multiTouch) return;
         const {editor: editor} = this;
-        const {select: select} = editor.mergeConfig;
+        const {select: select, selectKeep: selectKeep} = editor.mergeConfig;
         if (select === "tap") this.checkAndSelect(e); else if (this.waitSelect) this.waitSelect();
         if (this.needRemoveItem) {
             editor.removeItem(this.needRemoveItem);
         } else if (this.isMoveMode) {
-            editor.target = null;
+            if (!selectKeep) editor.target = null;
         }
     }
     checkAndSelect(e) {
@@ -336,7 +340,7 @@ class EditSelect extends Group {
                     editor.target = find;
                 }
             } else if (this.allow(e.target)) {
-                if (!this.isHoldMultipleSelectKey(e)) editor.target = null;
+                if (!this.isHoldMultipleSelectKey(e) && !this.editor.mergedConfig.selectKeep) editor.target = null;
             }
         }
     }
@@ -455,91 +459,95 @@ const {toPoint: toPoint} = AroundHelper;
 const {within: within, sign: sign} = MathHelper;
 
 const EditDataHelper = {
-    getScaleData(target, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
+    getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode) {
         let align, origin = {}, scaleX = 1, scaleY = 1;
         const {boxBounds: boxBounds, widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldBoxBounds: worldBoxBounds} = target;
         const {width: width, height: height} = startBounds;
-        if (around) {
-            totalMove.x *= 2;
-            totalMove.y *= 2;
-        }
         const originChangedScaleX = target.scaleX / startBounds.scaleX;
         const originChangedScaleY = target.scaleY / startBounds.scaleY;
         const signX = sign(originChangedScaleX);
         const signY = sign(originChangedScaleY);
         const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
         const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height;
-        totalMove.x *= scaleMode ? originChangedScaleX : signX;
-        totalMove.y *= scaleMode ? originChangedScaleY : signY;
-        const topScale = (-totalMove.y + height) / height;
-        const rightScale = (totalMove.x + width) / width;
-        const bottomScale = (totalMove.y + height) / height;
-        const leftScale = (-totalMove.x + width) / width;
-        switch (direction) {
-          case top:
-            scaleY = topScale;
-            align = "bottom";
-            break;
-
-          case right$1:
-            scaleX = rightScale;
-            align = "left";
-            break;
-
-          case bottom:
-            scaleY = bottomScale;
-            align = "top";
-            break;
+        if (isNumber(totalMoveOrScale)) {
+            scaleX = scaleY = Math.sqrt(totalMoveOrScale);
+        } else {
+            if (around) {
+                totalMoveOrScale.x *= 2;
+                totalMoveOrScale.y *= 2;
+            }
+            totalMoveOrScale.x *= scaleMode ? originChangedScaleX : signX;
+            totalMoveOrScale.y *= scaleMode ? originChangedScaleY : signY;
+            const topScale = (-totalMoveOrScale.y + height) / height;
+            const rightScale = (totalMoveOrScale.x + width) / width;
+            const bottomScale = (totalMoveOrScale.y + height) / height;
+            const leftScale = (-totalMoveOrScale.x + width) / width;
+            switch (direction) {
+              case top:
+                scaleY = topScale;
+                align = "bottom";
+                break;
 
-          case left$1:
-            scaleX = leftScale;
-            align = "right";
-            break;
+              case right$1:
+                scaleX = rightScale;
+                align = "left";
+                break;
 
-          case topLeft:
-            scaleY = topScale;
-            scaleX = leftScale;
-            align = "bottom-right";
-            break;
+              case bottom:
+                scaleY = bottomScale;
+                align = "top";
+                break;
 
-          case topRight:
-            scaleY = topScale;
-            scaleX = rightScale;
-            align = "bottom-left";
-            break;
+              case left$1:
+                scaleX = leftScale;
+                align = "right";
+                break;
 
-          case bottomRight:
-            scaleY = bottomScale;
-            scaleX = rightScale;
-            align = "top-left";
-            break;
+              case topLeft:
+                scaleY = topScale;
+                scaleX = leftScale;
+                align = "bottom-right";
+                break;
 
-          case bottomLeft:
-            scaleY = bottomScale;
-            scaleX = leftScale;
-            align = "top-right";
-        }
-        if (lockRatio) {
-            if (lockRatio === "corner" && direction % 2) {
-                lockRatio = false;
-            } else {
-                let scale;
-                switch (direction) {
-                  case top:
-                  case bottom:
-                    scale = scaleY;
-                    break;
+              case topRight:
+                scaleY = topScale;
+                scaleX = rightScale;
+                align = "bottom-left";
+                break;
 
-                  case left$1:
-                  case right$1:
-                    scale = scaleX;
-                    break;
+              case bottomRight:
+                scaleY = bottomScale;
+                scaleX = rightScale;
+                align = "top-left";
+                break;
 
-                  default:
-                    scale = Math.sqrt(Math.abs(scaleX * scaleY));
+              case bottomLeft:
+                scaleY = bottomScale;
+                scaleX = leftScale;
+                align = "top-right";
+            }
+            if (lockRatio) {
+                if (lockRatio === "corner" && direction % 2) {
+                    lockRatio = false;
+                } else {
+                    let scale;
+                    switch (direction) {
+                      case top:
+                      case bottom:
+                        scale = scaleY;
+                        break;
+
+                      case left$1:
+                      case right$1:
+                        scale = scaleX;
+                        break;
+
+                      default:
+                        scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                    }
+                    scaleX = scaleX < 0 ? -scale : scale;
+                    scaleY = scaleY < 0 ? -scale : scale;
                 }
-                scaleX = scaleX < 0 ? -scale : scale;
-                scaleY = scaleY < 0 ? -scale : scale;
             }
         }
         const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1;
@@ -738,13 +746,18 @@ const cacheCursors = {};
 function updatePointCursor(editBox, e) {
     const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
     if (!point || !editBox.editor.editing || !editBox.canUse) return;
+    if (point.name === "rect") return updateMoveCursor(editBox);
     if (point.name === "circle") return;
-    if (point.pointType === "button") {
+    let {rotation: rotation} = editBox;
+    const {pointType: pointType} = point, {moveCursor: moveCursor, resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
+    if (pointType === "move") {
+        point.cursor = moveCursor;
+        if (!moveable) point.visible = false;
+        return;
+    } else if (pointType === "button") {
         if (!point.cursor) point.cursor = "pointer";
         return;
     }
-    let {rotation: rotation} = editBox;
-    const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
     let showResize = pointType.includes("resize");
     if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
     const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
@@ -822,10 +835,13 @@ class EditBox extends Group {
         const {moveable: moveable, resizeable: resizeable, rotateable: rotateable} = this.mergeConfig;
         return isString(moveable) || isString(resizeable) || isString(rotateable);
     }
+    get canDragLimitAnimate() {
+        return this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds;
+    }
     constructor(editor) {
         super();
         this.view = new Group;
-        this.rect = new Box({
+        this.rect = new EditPoint({
             name: "rect",
             hitFill: "all",
             hitStroke: "none",
@@ -887,12 +903,13 @@ class EditBox extends Group {
             this.listenPointEvents(resizePoint, "resize", i);
         }
         this.listenPointEvents(circle, "rotate", 2);
+        this.listenPointEvents(rect, "move", 8);
         view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
         this.add(view);
     }
     load() {
-        const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
-        const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
+        const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints, resizeLines: resizeLines} = this;
+        const {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine} = mergeConfig;
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
         this.visible = !target.locked;
@@ -901,6 +918,10 @@ class EditBox extends Group {
             resizeP = resizePoints[i];
             resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
             resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
+            if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
+                pointType: "resize",
+                rotation: (i - 1) / 2 * 90
+            }, resizeLine || {}));
         }
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({
@@ -945,10 +966,12 @@ class EditBox extends Group {
         if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
     }
     updateBounds(bounds) {
-        const {editMask: editMask} = this.editor;
-        const {mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
-        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
+        const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
+        const {editMask: editMask} = editor;
+        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
         editMask.visible = mask ? true : 0;
+        editor.setDimOthers(dimOthers);
+        editor.setBright(!!dimOthers || bright);
         if (spread) BoundsHelper.spread(bounds, spread);
         if (this.view.worldOpacity) {
             const {width: width, height: height} = bounds;
@@ -969,10 +992,10 @@ class EditBox extends Group {
                     resizeL.visible = resizeP.visible && !hideResizeLines;
                     resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
                     if ((i + 1) / 2 % 2) {
-                        resizeL.width = width;
+                        resizeL.width = width + resizeL.height;
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
                     } else {
-                        resizeL.height = height;
+                        resizeL.width = height + resizeL.height;
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
                     }
                 }
@@ -1048,10 +1071,9 @@ class EditBox extends Group {
     onDragStart(e) {
         this.dragging = true;
         const point = this.dragPoint = e.current, {pointType: pointType} = point;
-        const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
-        if (point.name === "rect") {
+        const {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = this.mergeConfig;
+        if (pointType === "move") {
             moveable && (this.moving = true);
-            editor.opacity = hideOnMove ? 0 : 1;
         } else {
             if (pointType.includes("rotate") || this.isHoldRotateKey(e) || !resizeable) {
                 rotateable && (this.rotating = true);
@@ -1060,69 +1082,74 @@ class EditBox extends Group {
             } 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: target.x,
-            y: target.y
-        };
-        dragStartData.bounds = Object.assign({}, target.getLayoutBounds("box", "local"));
-        dragStartData.rotation = target.rotation;
-        if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = editor.leafList.keys;
-    }
-    onDragEnd(e) {
-        if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e);
-        this.dragPoint = null;
-        this.resetDoing();
-        const {name: name, pointType: pointType} = e.current;
-        if (name === "rect") this.editor.opacity = 1;
-        if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = null;
+        this.onTransformStart(e);
     }
     onDrag(e) {
         const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: 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);
         }
+        updatePointCursor(this, e);
     }
-    resetDoing() {
-        if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+    onDragEnd(e) {
+        this.onTransformEnd(e);
+        this.dragPoint = null;
+    }
+    onTransformStart(e) {
+        if (this.canUse) {
+            if (this.moving) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1;
+            if (this.resizing) ResizeEvent.resizingKeys = this.editor.leafList.keys;
+            const {dragStartData: dragStartData, target: target} = this;
+            dragStartData.x = e.x;
+            dragStartData.y = e.y;
+            dragStartData.totalOffset = getPointData();
+            dragStartData.point = {
+                x: target.x,
+                y: target.y
+            };
+            dragStartData.bounds = Object.assign({}, target.getLayoutBounds("box", "local"));
+            dragStartData.rotation = target.rotation;
+        }
+    }
+    onTransformEnd(e) {
+        if (this.canUse) {
+            if (this.canDragLimitAnimate && (e instanceof DragEvent || e instanceof MoveEvent)) this.transformTool.onMove(e);
+            if (this.resizing) ResizeEvent.resizingKeys = null;
+            this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+            this.editor.opacity = 1;
+            this.update();
+        }
     }
     onMove(e) {
         if (this.canGesture && e.moveType !== "drag") {
             e.stop();
-            if (isString(this.mergeConfig.moveable)) {
+            if (isString(this.mergedConfig.moveable)) {
                 this.gesturing = this.moving = true;
-                this.transformTool.onMove(e);
+                e.type === MoveEvent.START ? this.onTransformStart(e) : this.transformTool.onMove(e);
             }
         }
     }
-    onMoveEnd(e) {
-        if (this.moving) this.transformTool.onMove(e);
-        this.resetDoing();
-    }
     onScale(e) {
         if (this.canGesture) {
             e.stop();
-            if (isString(this.mergeConfig.resizeable)) {
+            if (isString(this.mergedConfig.resizeable)) {
                 this.gesturing = this.resizing = true;
-                this.transformTool.onScale(e);
+                e.type === ZoomEvent.START ? this.onTransformStart(e) : this.transformTool.onScale(e);
             }
         }
     }
     onRotate(e) {
         if (this.canGesture) {
             e.stop();
-            if (isString(this.mergeConfig.rotateable)) {
+            if (isString(this.mergedConfig.rotateable)) {
                 this.gesturing = this.rotating = true;
-                this.transformTool.onRotate(e);
+                e.type === RotateEvent.START ? this.onTransformStart(e) : this.transformTool.onRotate(e);
             }
         }
     }
@@ -1135,8 +1162,7 @@ class EditBox extends Group {
         updatePointCursor(this, e);
     }
     onArrow(e) {
-        const {editor: editor, transformTool: transformTool} = this;
-        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
+        if (this.canUse && this.mergeConfig.keyEvent) {
             let x = 0, y = 0;
             const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
@@ -1155,7 +1181,7 @@ class EditBox extends Group {
               case "ArrowRight":
                 x = distance;
             }
-            if (x || y) transformTool.move(x, y);
+            if (x || y) this.transformTool.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -1186,19 +1212,17 @@ class EditBox extends Group {
     listenPointEvents(point, type, direction) {
         point.direction = direction;
         point.pointType = type;
-        const events = [ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.LEAVE, () => {
-            this.enterPoint = null;
-        } ] ];
-        if (point.name !== "circle") events.push([ PointerEvent.ENTER, e => {
+        this.__eventIds.push(point.on_([ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.ENTER, e => {
             this.enterPoint = point, updatePointCursor(this, e);
-        } ]);
-        this.__eventIds.push(point.on_(events));
+        } ], [ PointerEvent.LEAVE, () => {
+            this.enterPoint = null;
+        } ] ]));
     }
     __listenEvents() {
         const {rect: rect, editor: editor, __eventIds: events} = this;
-        events.push(rect.on_([ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.ENTER, () => updateMoveCursor(this) ], [ PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
+        events.push(rect.on_([ [ PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
         this.waitLeafer(() => {
-            events.push(editor.app.on_([ [ [ KeyEvent.HOLD, KeyEvent.UP ], this.onKey, this ], [ KeyEvent.DOWN, this.onArrow, this ], [ MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ MoveEvent.END, this.onMoveEnd, this ], [ ZoomEvent.END, this.resetDoing, this ], [ RotateEvent.END, this.resetDoing, this ] ]));
+            events.push(editor.app.on_([ [ [ KeyEvent.HOLD, KeyEvent.UP ], this.onKey, this ], [ KeyEvent.DOWN, this.onArrow, this ], [ [ MoveEvent.START, MoveEvent.BEFORE_MOVE ], this.onMove, this, true ], [ [ ZoomEvent.START, ZoomEvent.BEFORE_ZOOM ], this.onScale, this, true ], [ [ RotateEvent.START, RotateEvent.BEFORE_ROTATE ], this.onRotate, this, true ], [ [ MoveEvent.END, ZoomEvent.END, RotateEvent.END ], this.onTransformEnd, this ] ]));
         });
     }
     __removeListenEvents() {
@@ -1596,56 +1620,61 @@ class TransformTool {
         const isMoveEnd = e.type === MoveEvent.END || e.type === DragEvent.END;
         const axisDrag = isString(target.draggable);
         const checkLimitMove = !dragLimitAnimate || isMoveEnd || axisDrag;
+        const total = {
+            x: e.totalX,
+            y: e.totalY
+        };
         if (e instanceof MoveEvent) {
-            move = e.getLocalMove(target);
-            if (checkLimitMove) DragEvent.limitMove(target, move);
-        } else {
-            const total = {
-                x: e.totalX,
-                y: e.totalY
-            };
-            if (e.shiftKey) {
-                if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0; else total.x = 0;
-            }
-            move = DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
+            PointHelper.move(total, target.getWorldPointByLocal(dragStartData.totalOffset, null, true));
         }
+        if (e.shiftKey) {
+            if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0; else total.x = 0;
+        }
+        move = DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
         if (move.x || move.y) {
             if (dragLimitAnimate && !axisDrag && isMoveEnd) LeafHelper.animateMove(this, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else this.move(move);
         }
     }
     onScale(e) {
         const {target: target, mergeConfig: mergeConfig, single: single, dragStartData: dragStartData} = this.editBox;
-        let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize} = mergeConfig;
+        let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize} = mergeConfig, totalMove;
         if (e instanceof ZoomEvent) {
-            this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
+            around = target.getBoxPoint(e);
+            totalMove = e.totalScale;
         } else {
-            const {direction: direction} = e.current;
-            if (e.shiftKey || target.lockRatio) lockRatio = true;
-            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);
-            } else {
-                this.scaleOf(data.origin, data.scaleX, data.scaleY);
-            }
+            totalMove = e.getInnerTotal(target);
+        }
+        const {direction: direction} = e.current;
+        if (e.shiftKey || target.lockRatio) lockRatio = true;
+        const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, totalMove, lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === "scale");
+        const targetX = target.x, targetY = target.y;
+        if (e instanceof DragEvent && this.editTool && this.editTool.onScaleWithDrag) {
+            data.drag = e;
+            this.scaleWithDrag(data);
+        } else {
+            this.scaleOf(data.origin, data.scaleX, data.scaleY);
         }
+        PointHelper.move(dragStartData.totalOffset, target.x - targetX, target.y - targetY);
     }
     onRotate(e) {
         const {target: target, mergeConfig: mergeConfig, dragStartData: dragStartData} = this.editBox;
-        const {around: around, rotateAround: rotateAround, rotateGap: rotateGap} = mergeConfig;
+        const {around: around, rotateAround: rotateAround, rotateGap: rotateGap, diagonalRotateKey: diagonalRotateKey} = mergeConfig;
         const {direction: direction} = e.current;
         let origin, rotation;
         if (e instanceof RotateEvent) {
             rotation = e.rotation;
             origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
         } else {
-            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : rotateAround || target.around || target.origin || around || "center");
+            const isDiagonalRotate = diagonalRotateKey ? e.isHoldKeys(diagonalRotateKey) : e.shiftKey;
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, isDiagonalRotate ? null : rotateAround || target.around || target.origin || around || "center");
             rotation = dragStartData.rotation + data.rotation - target.rotation;
             origin = data.origin;
         }
         rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
         if (!rotation) return;
+        const targetX = target.x, targetY = target.y;
         this.rotateOf(origin, rotation);
+        PointHelper.move(dragStartData.totalOffset, target.x - targetX, target.y - targetY);
     }
     onSkew(e) {
         const {target: target, mergeConfig: mergeConfig} = this.editBox;
@@ -1924,6 +1953,16 @@ let Editor = class Editor extends Group {
     shiftItem(item) {
         this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
     }
+    setDimOthers(value, attrName = "dim", list) {
+        if (!list) {
+            const {dimTarget: dimTarget, targetLeafer: targetLeafer} = this;
+            list = dimTarget ? isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
+        }
+        if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => DataHelper.stintSet(item, attrName, value));
+    }
+    setBright(value) {
+        this.setDimOthers(value, "bright", this.list);
+    }
     update() {
         if (this.editing) {
             if (!this.element.parent) return this.cancel();
@@ -2146,10 +2185,10 @@ let Editor = class Editor extends Group {
 
 __decorate([ mergeConfigAttr() ], Editor.prototype, "mergeConfig", void 0);
 
-__decorate([ targetAttr(onHover) ], Editor.prototype, "hoverTarget", void 0);
-
 __decorate([ targetAttr(onTarget) ], Editor.prototype, "target", void 0);
 
+__decorate([ targetAttr(onHover) ], Editor.prototype, "hoverTarget", void 0);
+
 Editor = __decorate([ useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], Editor);
 
 class InnerEditor {