@leafer-in/editor 1.9.7 → 1.9.8

package/dist/editor.cjs

@@ -58,10 +58,6 @@ function targetAttr(fn) {
                     if (t.config) {
                         const isSelect = key === "target";
                         if (isSelect) {
-                            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 {beforeSelect: beforeSelect} = t.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({
@@ -69,6 +65,10 @@ function targetAttr(fn) {
                                 });
                                 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, {
@@ -254,11 +254,12 @@ class EditSelect extends draw.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();
@@ -321,12 +322,12 @@ class EditSelect extends draw.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) {
@@ -341,7 +342,7 @@ class EditSelect extends draw.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;
             }
         }
     }
@@ -460,91 +461,95 @@ 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;
-
-          case right$1:
-            scaleX = rightScale;
-            align = "left";
-            break;
-
-          case bottom:
-            scaleY = bottomScale;
-            align = "top";
-            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 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;
@@ -832,6 +837,9 @@ class EditBox extends draw.Group {
         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;
@@ -1065,10 +1073,9 @@ class EditBox extends draw.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;
+        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);
@@ -1077,23 +1084,7 @@ class EditBox extends draw.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")) 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 {pointType: pointType} = e.current;
-        if (pointType === "move") 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;
@@ -1108,37 +1099,59 @@ class EditBox extends draw.Group {
         }
         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);
             }
         }
     }
@@ -1151,8 +1164,7 @@ class EditBox extends draw.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) {
@@ -1171,7 +1183,7 @@ class EditBox extends draw.Group {
               case "ArrowRight":
                 x = distance;
             }
-            if (x || y) transformTool.move(x, y);
+            if (x || y) this.transformTool.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -1212,7 +1224,7 @@ class EditBox extends draw.Group {
         const {rect: rect, editor: editor, __eventIds: events} = 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() {
@@ -1610,56 +1622,61 @@ class TransformTool {
         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;