@leafer-in/editor 1.9.6 → 1.9.8

package/dist/editor.js

@@ -41,22 +41,25 @@ this.LeaferIN.editor = function(exports, draw, core) {
                 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 (draw.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 (draw.isObject(check)) value = check; else if (check === false) return;
                                 }
+                                t.setDimOthers(false);
+                                t.setBright(false);
+                                if (draw.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
                             }));
@@ -223,11 +226,12 @@ this.LeaferIN.editor = function(exports, draw, core) {
             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();
@@ -290,12 +294,12 @@ this.LeaferIN.editor = function(exports, draw, core) {
         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) {
@@ -310,7 +314,7 @@ this.LeaferIN.editor = function(exports, draw, core) {
                         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;
                 }
             }
         }
@@ -425,91 +429,95 @@ this.LeaferIN.editor = function(exports, draw, core) {
     const {toPoint: toPoint} = draw.AroundHelper;
     const {within: within, sign: sign} = draw.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;
+            if (draw.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 right$1:
-                scaleX = rightScale;
-                align = "left";
-                break;
+                  case right$1:
+                    scaleX = rightScale;
+                    align = "left";
+                    break;
 
-              case bottom:
-                scaleY = bottomScale;
-                align = "top";
-                break;
+                  case bottom:
+                    scaleY = bottomScale;
+                    align = "top";
+                    break;
 
-              case left$1:
-                scaleX = leftScale;
-                align = "right";
-                break;
+                  case left$1:
+                    scaleX = leftScale;
+                    align = "right";
+                    break;
 
-              case topLeft:
-                scaleY = topScale;
-                scaleX = leftScale;
-                align = "bottom-right";
-                break;
+                  case topLeft:
+                    scaleY = topScale;
+                    scaleX = leftScale;
+                    align = "bottom-right";
+                    break;
 
-              case topRight:
-                scaleY = topScale;
-                scaleX = rightScale;
-                align = "bottom-left";
-                break;
+                  case topRight:
+                    scaleY = topScale;
+                    scaleX = rightScale;
+                    align = "bottom-left";
+                    break;
 
-              case bottomRight:
-                scaleY = bottomScale;
-                scaleX = rightScale;
-                align = "top-left";
-                break;
+                  case bottomRight:
+                    scaleY = bottomScale;
+                    scaleX = rightScale;
+                    align = "top-left";
+                    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 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;
+                          case left$1:
+                          case right$1:
+                            scale = scaleX;
+                            break;
 
-                      default:
-                        scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                          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;
@@ -706,13 +714,18 @@ this.LeaferIN.editor = function(exports, draw, core) {
     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");
@@ -785,10 +798,13 @@ this.LeaferIN.editor = function(exports, draw, core) {
             const {moveable: moveable, resizeable: resizeable, rotateable: rotateable} = this.mergeConfig;
             return draw.isString(moveable) || draw.isString(resizeable) || draw.isString(rotateable);
         }
+        get canDragLimitAnimate() {
+            return this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds;
+        }
         constructor(editor) {
             super();
             this.view = new draw.Group;
-            this.rect = new draw.Box({
+            this.rect = new EditPoint({
                 name: "rect",
                 hitFill: "all",
                 hitStroke: "none",
@@ -850,12 +866,13 @@ this.LeaferIN.editor = function(exports, draw, core) {
                 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;
@@ -864,6 +881,10 @@ this.LeaferIN.editor = function(exports, draw, core) {
                 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({
@@ -908,10 +929,12 @@ this.LeaferIN.editor = function(exports, draw, core) {
             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) draw.BoundsHelper.spread(bounds, spread);
             if (this.view.worldOpacity) {
                 const {width: width, height: height} = bounds;
@@ -932,10 +955,10 @@ this.LeaferIN.editor = function(exports, draw, core) {
                         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;
                         }
                     }
@@ -1011,10 +1034,9 @@ this.LeaferIN.editor = function(exports, draw, core) {
         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);
@@ -1023,69 +1045,74 @@ this.LeaferIN.editor = function(exports, draw, core) {
                 } 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")) draw.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")) draw.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) draw.ResizeEvent.resizingKeys = this.editor.leafList.keys;
+                const {dragStartData: dragStartData, target: target} = this;
+                dragStartData.x = e.x;
+                dragStartData.y = e.y;
+                dragStartData.totalOffset = draw.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 core.DragEvent || e instanceof core.MoveEvent)) this.transformTool.onMove(e);
+                if (this.resizing) draw.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 (draw.isString(this.mergeConfig.moveable)) {
+                if (draw.isString(this.mergedConfig.moveable)) {
                     this.gesturing = this.moving = true;
-                    this.transformTool.onMove(e);
+                    e.type === core.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 (draw.isString(this.mergeConfig.resizeable)) {
+                if (draw.isString(this.mergedConfig.resizeable)) {
                     this.gesturing = this.resizing = true;
-                    this.transformTool.onScale(e);
+                    e.type === core.ZoomEvent.START ? this.onTransformStart(e) : this.transformTool.onScale(e);
                 }
             }
         }
         onRotate(e) {
             if (this.canGesture) {
                 e.stop();
-                if (draw.isString(this.mergeConfig.rotateable)) {
+                if (draw.isString(this.mergedConfig.rotateable)) {
                     this.gesturing = this.rotating = true;
-                    this.transformTool.onRotate(e);
+                    e.type === core.RotateEvent.START ? this.onTransformStart(e) : this.transformTool.onRotate(e);
                 }
             }
         }
@@ -1098,8 +1125,7 @@ this.LeaferIN.editor = function(exports, draw, core) {
             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) {
@@ -1118,7 +1144,7 @@ this.LeaferIN.editor = function(exports, draw, core) {
                   case "ArrowRight":
                     x = distance;
                 }
-                if (x || y) transformTool.move(x, y);
+                if (x || y) this.transformTool.move(x, y);
             }
         }
         onDoubleTap(e) {
@@ -1149,19 +1175,17 @@ this.LeaferIN.editor = function(exports, draw, core) {
         listenPointEvents(point, type, direction) {
             point.direction = direction;
             point.pointType = type;
-            const events = [ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.LEAVE, () => {
-                this.enterPoint = null;
-            } ] ];
-            if (point.name !== "circle") events.push([ core.PointerEvent.ENTER, e => {
+            this.__eventIds.push(point.on_([ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.ENTER, e => {
                 this.enterPoint = point, updatePointCursor(this, e);
-            } ]);
-            this.__eventIds.push(point.on_(events));
+            } ], [ core.PointerEvent.LEAVE, () => {
+                this.enterPoint = null;
+            } ] ]));
         }
         __listenEvents() {
             const {rect: rect, editor: editor, __eventIds: events} = this;
-            events.push(rect.on_([ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.ENTER, () => updateMoveCursor(this) ], [ core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ core.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
+            events.push(rect.on_([ [ 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.onMoveEnd, this ], [ core.ZoomEvent.END, this.resetDoing, this ], [ core.RotateEvent.END, this.resetDoing, this ] ]));
+                events.push(editor.app.on_([ [ [ core.KeyEvent.HOLD, core.KeyEvent.UP ], this.onKey, this ], [ core.KeyEvent.DOWN, this.onArrow, this ], [ [ core.MoveEvent.START, core.MoveEvent.BEFORE_MOVE ], this.onMove, this, true ], [ [ core.ZoomEvent.START, core.ZoomEvent.BEFORE_ZOOM ], this.onScale, this, true ], [ [ core.RotateEvent.START, core.RotateEvent.BEFORE_ROTATE ], this.onRotate, this, true ], [ [ core.MoveEvent.END, core.ZoomEvent.END, core.RotateEvent.END ], this.onTransformEnd, this ] ]));
             });
         }
         __removeListenEvents() {
@@ -1510,56 +1534,61 @@ this.LeaferIN.editor = function(exports, draw, core) {
             const isMoveEnd = e.type === core.MoveEvent.END || e.type === core.DragEvent.END;
             const axisDrag = draw.isString(target.draggable);
             const checkLimitMove = !dragLimitAnimate || isMoveEnd || axisDrag;
+            const total = {
+                x: e.totalX,
+                y: e.totalY
+            };
             if (e instanceof core.MoveEvent) {
-                move = e.getLocalMove(target);
-                if (checkLimitMove) core.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 = core.DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
+                draw.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 = core.DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
             if (move.x || move.y) {
                 if (dragLimitAnimate && !axisDrag && isMoveEnd) draw.LeafHelper.animateMove(this, move, draw.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 core.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 core.DragEvent && this.editTool && this.editTool.onScaleWithDrag) {
+                data.drag = e;
+                this.scaleWithDrag(data);
+            } else {
+                this.scaleOf(data.origin, data.scaleX, data.scaleY);
             }
+            draw.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 core.RotateEvent) {
                 rotation = e.rotation;
                 origin = rotateAround ? draw.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 = draw.MathHelper.float(draw.MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
             if (!rotation) return;
+            const targetX = target.x, targetY = target.y;
             this.rotateOf(origin, rotation);
+            draw.PointHelper.move(dragStartData.totalOffset, target.x - targetX, target.y - targetY);
         }
         onSkew(e) {
             const {target: target, mergeConfig: mergeConfig} = this.editBox;
@@ -1837,6 +1866,16 @@ this.LeaferIN.editor = function(exports, draw, core) {
         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 ? draw.isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
+            }
+            if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => draw.DataHelper.stintSet(item, attrName, value));
+        }
+        setBright(value) {
+            this.setDimOthers(value, "bright", this.list);
+        }
         update() {
             if (this.editing) {
                 if (!this.element.parent) return this.cancel();
@@ -2057,8 +2096,8 @@ this.LeaferIN.editor = function(exports, draw, core) {
         }
     };
     __decorate([ mergeConfigAttr() ], exports.Editor.prototype, "mergeConfig", void 0);
-    __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
     __decorate([ targetAttr(onTarget) ], exports.Editor.prototype, "target", void 0);
+    __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
     exports.Editor = __decorate([ core.useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], exports.Editor);
     class InnerEditor {
         static registerInnerEditor() {