@leafer-in/editor 1.9.7 → 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";
 
@@ -56,10 +56,6 @@ function targetAttr(fn) {
                     if (t.config) {
                         const isSelect = key === "target";
                         if (isSelect) {
-                            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 {beforeSelect: beforeSelect} = t.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({
@@ -67,6 +63,10 @@ function targetAttr(fn) {
                                 });
                                 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, {
@@ -252,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();
@@ -319,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) {
@@ -339,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;
             }
         }
     }
@@ -458,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;
@@ -830,6 +835,9 @@ 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;
@@ -1063,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;
+        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);
@@ -1075,23 +1082,7 @@ 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 {pointType: pointType} = e.current;
-        if (pointType === "move") 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;
@@ -1106,37 +1097,59 @@ class EditBox extends 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) 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);
             }
         }
     }
@@ -1149,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) {
@@ -1169,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) {
@@ -1210,7 +1222,7 @@ class EditBox extends Group {
         const {rect: rect, editor: editor, __eventIds: events} = 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() {
@@ -1608,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;