@leafer-in/editor 1.9.9 → 1.9.11

package/dist/editor.cjs

@@ -68,7 +68,10 @@ function targetAttr(fn) {
                             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;
+                            if (t.single) {
+                                delete t.element.syncEventer;
+                                delete t.element.__world.ignorePixelSnap;
+                            }
                         }
                         const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
                         if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
@@ -89,7 +92,15 @@ function mergeConfigAttr() {
         draw.defineKey(target, key, {
             get() {
                 const {config: config, element: element, dragPoint: dragPoint, editBox: editBox, app: app} = this, mergeConfig = Object.assign({}, config);
-                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig);
+                if (element && element.editConfig) {
+                    let {editConfig: editConfig} = element;
+                    if (editConfig.hover || editConfig.hoverStyle) {
+                        editConfig = Object.assign({}, editConfig);
+                        delete editConfig.hover;
+                        delete editConfig.hoverStyle;
+                    }
+                    Object.assign(mergeConfig, editConfig);
+                }
                 if (editBox.config) Object.assign(mergeConfig, editBox.config);
                 if (dragPoint) {
                     if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig);
@@ -106,7 +117,7 @@ function mergeConfigAttr() {
     };
 }
 
-const {abs: abs} = Math;
+const {abs: abs$1} = Math;
 
 const {copy: copy$1, scale: scale} = draw.MatrixHelper;
 
@@ -149,7 +160,7 @@ class Stroker extends draw.UI {
                 leaf = list[i];
                 const {worldTransform: worldTransform, worldRenderBounds: worldRenderBounds} = leaf;
                 if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
-                    const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
+                    const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
                     copy$1(matrix, worldTransform);
                     matrix.half = strokeWidth % 2;
                     if (aScaleX !== aScaleY) {
@@ -163,7 +174,7 @@ class Stroker extends draw.UI {
                         canvas.setWorld(matrix, options.matrix);
                         canvas.beginPath();
                         if (leaf.__.__useArrow) leaf.__drawPath(canvas); else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
-                        data.strokeWidth = strokeWidth / abs(worldTransform.scaleX);
+                        data.strokeWidth = strokeWidth / abs$1(worldTransform.scaleX);
                     }
                     if (stroke) draw.isString(stroke) ? draw.Paint.stroke(stroke, this, canvas) : draw.Paint.strokes(stroke, this, canvas);
                     if (fill) draw.isString(fill) ? draw.Paint.fill(fill, this, canvas) : draw.Paint.fills(fill, this, canvas);
@@ -275,8 +286,10 @@ class EditSelect extends draw.Group {
     onHover() {
         const {editor: editor} = this;
         if (this.running && !this.dragging && !editor.dragging) {
-            const {stroke: stroke, strokeWidth: strokeWidth, hover: hover, hoverStyle: hoverStyle} = editor.mergeConfig;
-            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, Object.assign({
+            const {hoverTarget: hoverTarget, mergeConfig: mergeConfig} = editor, config = Object.assign({}, mergeConfig);
+            if (hoverTarget && hoverTarget.editConfig) Object.assign(config, hoverTarget.editConfig);
+            const {stroke: stroke, strokeWidth: strokeWidth, hover: hover, hoverStyle: hoverStyle} = config;
+            this.hoverStroker.setTarget(hover ? hoverTarget : null, Object.assign({
                 stroke: stroke,
                 strokeWidth: strokeWidth
             }, hoverStyle || {}));
@@ -456,13 +469,11 @@ class EditSelect extends draw.Group {
 
 const {topLeft: topLeft, top: top, topRight: topRight, right: right$1, bottomRight: bottomRight, bottom: bottom, bottomLeft: bottomLeft, left: left$1} = draw.Direction9;
 
-const {toPoint: toPoint} = draw.AroundHelper;
-
-const {within: within, sign: sign} = draw.MathHelper;
+const {toPoint: toPoint} = draw.AroundHelper, {within: within, sign: sign} = draw.MathHelper, {abs: abs} = Math;
 
 const EditDataHelper = {
     getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode) {
-        let align, origin = {}, scaleX = 1, scaleY = 1;
+        let align, origin = {}, scaleX = 1, scaleY = 1, lockScale;
         const {boxBounds: boxBounds, widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldBoxBounds: worldBoxBounds} = target;
         const {width: width, height: height} = startBounds;
         const originChangedScaleX = target.scaleX / startBounds.scaleX;
@@ -532,23 +543,22 @@ const EditDataHelper = {
                 if (lockRatio === "corner" && direction % 2) {
                     lockRatio = false;
                 } else {
-                    let scale;
                     switch (direction) {
                       case top:
                       case bottom:
-                        scale = scaleY;
+                        scaleX = scaleY;
                         break;
 
                       case left$1:
                       case right$1:
-                        scale = scaleX;
+                        scaleY = scaleX;
                         break;
 
                       default:
-                        scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                        lockScale = Math.sqrt(abs(scaleX * scaleY));
+                        scaleX = sign(scaleX) * lockScale;
+                        scaleY = sign(scaleY) * lockScale;
                     }
-                    scaleX = scaleX < 0 ? -scale : scale;
-                    scaleY = scaleY < 0 ? -scale : scale;
                 }
             }
         }
@@ -566,7 +576,7 @@ const EditDataHelper = {
                 x: scaleX,
                 y: scaleY
             };
-            draw.DragBoundsHelper.limitScaleOf(target, origin, scaleData);
+            core.DragBoundsHelper.limitScaleOf(target, origin, scaleData, lockRatio);
             scaleX = scaleData.x;
             scaleY = scaleData.y;
         }
@@ -578,9 +588,13 @@ const EditDataHelper = {
             const nowHeight = boxBounds.height * target.scaleY;
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
         }
-        if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1) scaleX = sign(scaleX) / worldBoxBounds.width;
-        if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1) scaleY = sign(scaleY) / worldBoxBounds.height;
-        if (lockRatio && scaleX !== scaleY) scaleY = scaleX = Math.min(scaleX, scaleY);
+        if (useScaleX && abs(scaleX * worldBoxBounds.width) < 1) scaleX = sign(scaleX) / worldBoxBounds.width;
+        if (useScaleY && abs(scaleY * worldBoxBounds.height) < 1) scaleY = sign(scaleY) / worldBoxBounds.height;
+        if (lockRatio && scaleX !== scaleY) {
+            lockScale = Math.min(abs(scaleX), abs(scaleY));
+            scaleX = sign(scaleX) * lockScale;
+            scaleY = sign(scaleY) * lockScale;
+        }
         return {
             origin: origin,
             scaleX: scaleX,
@@ -830,7 +844,7 @@ class EditBox extends draw.Group {
         return this.scaleX * this.scaleY < 0;
     }
     get canUse() {
-        return this.visible && this.view.visible;
+        return this.app && this.editor.editing;
     }
     get canGesture() {
         if (!this.canUse) return false;
@@ -911,7 +925,7 @@ class EditBox extends draw.Group {
     }
     load() {
         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 {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine, ignorePixelSnap: ignorePixelSnap} = mergeConfig;
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
         this.visible = !target.locked;
@@ -931,16 +945,16 @@ class EditBox extends draw.Group {
             strokeWidth: strokeWidth,
             editConfig: editConfig
         }, mergeConfig.rect || {}));
-        const syncEventer = single && this.transformTool.editTool;
-        rect.hittable = !syncEventer;
-        rect.syncEventer = syncEventer && this.editor;
-        if (syncEventer) {
+        const rectThrough = draw.isNull(mergeConfig.rectThrough) ? single : mergeConfig.rectThrough;
+        rect.hittable = !rectThrough;
+        if (rectThrough) {
             target.syncEventer = rect;
             this.app.interaction.bottomList = [ {
                 target: rect,
                 proxy: target
             } ];
         }
+        if (single) draw.DataHelper.stintSet(target.__world, "ignorePixelSnap", ignorePixelSnap);
         updateMoveCursor(this);
     }
     update() {
@@ -1104,29 +1118,25 @@ class EditBox extends draw.Group {
         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;
-        }
+        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();
-        }
+        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.editor.update();
     }
     onMove(e) {
         if (this.canGesture && e.moveType !== "drag") {
@@ -1155,6 +1165,12 @@ class EditBox extends draw.Group {
             }
         }
     }
+    onGestureStart(e) {
+        if (this.canGesture && e.moveType !== "drag") this.onTransformStart(e);
+    }
+    onGestureEnd(e) {
+        if (this.canGesture && e.moveType !== "drag") this.onTransformEnd(e);
+    }
     isHoldRotateKey(e) {
         const {rotateKey: rotateKey} = this.mergedConfig;
         if (rotateKey) return e.isHoldKeys(rotateKey);
@@ -1224,7 +1240,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.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 ] ]));
+            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.START, core.ZoomEvent.START, core.RotateEvent.START ], this.onGestureStart, this ], [ [ core.MoveEvent.END, core.ZoomEvent.END, core.RotateEvent.END ], this.onGestureEnd, this ] ]));
         });
     }
     __removeListenEvents() {

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, isNumber, DragBoundsHelper, Box, ResizeEvent, getPointData, Text, Matrix, Debug, LeafHelper, PropertyEvent, DataHelper, Plugin, RenderEvent, LeaferEvent, 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, Box, DataHelper, ResizeEvent, getPointData, Text, Matrix, Debug, LeafHelper, PropertyEvent, Plugin, RenderEvent, LeaferEvent, Creator, dataType } from "@leafer-ui/draw";
 
-import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent, KeyEvent, useModule } from "@leafer-ui/core";
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, DragBoundsHelper, RotateEvent, KeyEvent, useModule } from "@leafer-ui/core";
 
 import "@leafer-in/resize";
 
@@ -66,7 +66,10 @@ function targetAttr(fn) {
                             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;
+                            if (t.single) {
+                                delete t.element.syncEventer;
+                                delete t.element.__world.ignorePixelSnap;
+                            }
                         }
                         const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
                         if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
@@ -87,7 +90,15 @@ function mergeConfigAttr() {
         defineKey(target, key, {
             get() {
                 const {config: config, element: element, dragPoint: dragPoint, editBox: editBox, app: app} = this, mergeConfig = Object.assign({}, config);
-                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig);
+                if (element && element.editConfig) {
+                    let {editConfig: editConfig} = element;
+                    if (editConfig.hover || editConfig.hoverStyle) {
+                        editConfig = Object.assign({}, editConfig);
+                        delete editConfig.hover;
+                        delete editConfig.hoverStyle;
+                    }
+                    Object.assign(mergeConfig, editConfig);
+                }
                 if (editBox.config) Object.assign(mergeConfig, editBox.config);
                 if (dragPoint) {
                     if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig);
@@ -104,7 +115,7 @@ function mergeConfigAttr() {
     };
 }
 
-const {abs: abs} = Math;
+const {abs: abs$1} = Math;
 
 const {copy: copy$1, scale: scale} = MatrixHelper;
 
@@ -147,7 +158,7 @@ class Stroker extends UI {
                 leaf = list[i];
                 const {worldTransform: worldTransform, worldRenderBounds: worldRenderBounds} = leaf;
                 if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
-                    const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
+                    const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
                     copy$1(matrix, worldTransform);
                     matrix.half = strokeWidth % 2;
                     if (aScaleX !== aScaleY) {
@@ -161,7 +172,7 @@ class Stroker extends UI {
                         canvas.setWorld(matrix, options.matrix);
                         canvas.beginPath();
                         if (leaf.__.__useArrow) leaf.__drawPath(canvas); else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
-                        data.strokeWidth = strokeWidth / abs(worldTransform.scaleX);
+                        data.strokeWidth = strokeWidth / abs$1(worldTransform.scaleX);
                     }
                     if (stroke) isString(stroke) ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas);
                     if (fill) isString(fill) ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas);
@@ -273,8 +284,10 @@ class EditSelect extends Group {
     onHover() {
         const {editor: editor} = this;
         if (this.running && !this.dragging && !editor.dragging) {
-            const {stroke: stroke, strokeWidth: strokeWidth, hover: hover, hoverStyle: hoverStyle} = editor.mergeConfig;
-            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, Object.assign({
+            const {hoverTarget: hoverTarget, mergeConfig: mergeConfig} = editor, config = Object.assign({}, mergeConfig);
+            if (hoverTarget && hoverTarget.editConfig) Object.assign(config, hoverTarget.editConfig);
+            const {stroke: stroke, strokeWidth: strokeWidth, hover: hover, hoverStyle: hoverStyle} = config;
+            this.hoverStroker.setTarget(hover ? hoverTarget : null, Object.assign({
                 stroke: stroke,
                 strokeWidth: strokeWidth
             }, hoverStyle || {}));
@@ -454,13 +467,11 @@ class EditSelect extends Group {
 
 const {topLeft: topLeft, top: top, topRight: topRight, right: right$1, bottomRight: bottomRight, bottom: bottom, bottomLeft: bottomLeft, left: left$1} = Direction9;
 
-const {toPoint: toPoint} = AroundHelper;
-
-const {within: within, sign: sign} = MathHelper;
+const {toPoint: toPoint} = AroundHelper, {within: within, sign: sign} = MathHelper, {abs: abs} = Math;
 
 const EditDataHelper = {
     getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode) {
-        let align, origin = {}, scaleX = 1, scaleY = 1;
+        let align, origin = {}, scaleX = 1, scaleY = 1, lockScale;
         const {boxBounds: boxBounds, widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldBoxBounds: worldBoxBounds} = target;
         const {width: width, height: height} = startBounds;
         const originChangedScaleX = target.scaleX / startBounds.scaleX;
@@ -530,23 +541,22 @@ const EditDataHelper = {
                 if (lockRatio === "corner" && direction % 2) {
                     lockRatio = false;
                 } else {
-                    let scale;
                     switch (direction) {
                       case top:
                       case bottom:
-                        scale = scaleY;
+                        scaleX = scaleY;
                         break;
 
                       case left$1:
                       case right$1:
-                        scale = scaleX;
+                        scaleY = scaleX;
                         break;
 
                       default:
-                        scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                        lockScale = Math.sqrt(abs(scaleX * scaleY));
+                        scaleX = sign(scaleX) * lockScale;
+                        scaleY = sign(scaleY) * lockScale;
                     }
-                    scaleX = scaleX < 0 ? -scale : scale;
-                    scaleY = scaleY < 0 ? -scale : scale;
                 }
             }
         }
@@ -564,7 +574,7 @@ const EditDataHelper = {
                 x: scaleX,
                 y: scaleY
             };
-            DragBoundsHelper.limitScaleOf(target, origin, scaleData);
+            DragBoundsHelper.limitScaleOf(target, origin, scaleData, lockRatio);
             scaleX = scaleData.x;
             scaleY = scaleData.y;
         }
@@ -576,9 +586,13 @@ const EditDataHelper = {
             const nowHeight = boxBounds.height * target.scaleY;
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
         }
-        if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1) scaleX = sign(scaleX) / worldBoxBounds.width;
-        if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1) scaleY = sign(scaleY) / worldBoxBounds.height;
-        if (lockRatio && scaleX !== scaleY) scaleY = scaleX = Math.min(scaleX, scaleY);
+        if (useScaleX && abs(scaleX * worldBoxBounds.width) < 1) scaleX = sign(scaleX) / worldBoxBounds.width;
+        if (useScaleY && abs(scaleY * worldBoxBounds.height) < 1) scaleY = sign(scaleY) / worldBoxBounds.height;
+        if (lockRatio && scaleX !== scaleY) {
+            lockScale = Math.min(abs(scaleX), abs(scaleY));
+            scaleX = sign(scaleX) * lockScale;
+            scaleY = sign(scaleY) * lockScale;
+        }
         return {
             origin: origin,
             scaleX: scaleX,
@@ -828,7 +842,7 @@ class EditBox extends Group {
         return this.scaleX * this.scaleY < 0;
     }
     get canUse() {
-        return this.visible && this.view.visible;
+        return this.app && this.editor.editing;
     }
     get canGesture() {
         if (!this.canUse) return false;
@@ -909,7 +923,7 @@ class EditBox extends Group {
     }
     load() {
         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 {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine, ignorePixelSnap: ignorePixelSnap} = mergeConfig;
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
         this.visible = !target.locked;
@@ -929,16 +943,16 @@ class EditBox extends Group {
             strokeWidth: strokeWidth,
             editConfig: editConfig
         }, mergeConfig.rect || {}));
-        const syncEventer = single && this.transformTool.editTool;
-        rect.hittable = !syncEventer;
-        rect.syncEventer = syncEventer && this.editor;
-        if (syncEventer) {
+        const rectThrough = isNull(mergeConfig.rectThrough) ? single : mergeConfig.rectThrough;
+        rect.hittable = !rectThrough;
+        if (rectThrough) {
             target.syncEventer = rect;
             this.app.interaction.bottomList = [ {
                 target: rect,
                 proxy: target
             } ];
         }
+        if (single) DataHelper.stintSet(target.__world, "ignorePixelSnap", ignorePixelSnap);
         updateMoveCursor(this);
     }
     update() {
@@ -1102,29 +1116,25 @@ class EditBox extends Group {
         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;
-        }
+        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();
-        }
+        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.editor.update();
     }
     onMove(e) {
         if (this.canGesture && e.moveType !== "drag") {
@@ -1153,6 +1163,12 @@ class EditBox extends Group {
             }
         }
     }
+    onGestureStart(e) {
+        if (this.canGesture && e.moveType !== "drag") this.onTransformStart(e);
+    }
+    onGestureEnd(e) {
+        if (this.canGesture && e.moveType !== "drag") this.onTransformEnd(e);
+    }
     isHoldRotateKey(e) {
         const {rotateKey: rotateKey} = this.mergedConfig;
         if (rotateKey) return e.isHoldKeys(rotateKey);
@@ -1222,7 +1238,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.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 ] ]));
+            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.START, ZoomEvent.START, RotateEvent.START ], this.onGestureStart, this ], [ [ MoveEvent.END, ZoomEvent.END, RotateEvent.END ], this.onGestureEnd, this ] ]));
         });
     }
     __removeListenEvents() {