@leafer-in/editor 1.9.7 → 1.9.8

package/dist/editor.js

@@ -45,10 +45,6 @@ this.LeaferIN.editor = function(exports, draw, core) {
                         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({
@@ -56,6 +52,10 @@ this.LeaferIN.editor = function(exports, draw, core) {
                                     });
                                     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, {
@@ -226,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();
@@ -293,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) {
@@ -313,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;
                 }
             }
         }
@@ -428,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;
@@ -793,6 +798,9 @@ 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;
@@ -1026,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;
+            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);
@@ -1038,23 +1045,7 @@ 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 {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;
@@ -1069,37 +1060,59 @@ this.LeaferIN.editor = function(exports, draw, core) {
             }
             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);
                 }
             }
         }
@@ -1112,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) {
@@ -1132,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) {
@@ -1173,7 +1185,7 @@ this.LeaferIN.editor = function(exports, draw, core) {
             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() {
@@ -1522,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;