@leafer-in/editor 1.9.11 → 1.10.0

package/dist/editor.cjs

@@ -176,8 +176,8 @@ class Stroker extends draw.UI {
                         if (leaf.__.__useArrow) leaf.__drawPath(canvas); else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
                         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);
+                    if (stroke) draw.isString(stroke) ? draw.Paint.stroke(stroke, this, canvas, options) : draw.Paint.strokes(stroke, this, canvas, options);
+                    if (fill) draw.isString(fill) ? draw.Paint.fill(fill, this, canvas, options) : draw.Paint.fills(fill, this, canvas, options);
                 }
             }
             data.strokeWidth = strokeWidth;
@@ -595,6 +595,8 @@ const EditDataHelper = {
             scaleX = sign(scaleX) * lockScale;
             scaleY = sign(scaleY) * lockScale;
         }
+        isFinite(scaleX) || (scaleX = 1);
+        isFinite(scaleY) || (scaleY = 1);
         return {
             origin: origin,
             scaleX: scaleX,
@@ -925,9 +927,10 @@ 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, ignorePixelSnap: ignorePixelSnap} = mergeConfig;
+        const {stroke: stroke, strokeWidth: strokeWidth, ignorePixelSnap: ignorePixelSnap} = mergeConfig;
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
+        const resizeLinesStyle = this.getResizeLinesStyle();
         this.visible = !target.locked;
         let resizeP;
         for (let i = 0; i < 8; i++) {
@@ -937,12 +940,13 @@ class EditBox extends draw.Group {
             if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
                 pointType: "resize",
                 rotation: (i - 1) / 2 * 90
-            }, resizeLine || {}));
+            }, resizeLinesStyle[(i - 1) / 2 % resizeLinesStyle.length] || {}));
         }
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({
             stroke: stroke,
             strokeWidth: strokeWidth,
+            opacity: 1,
             editConfig: editConfig
         }, mergeConfig.rect || {}));
         const rectThrough = draw.isNull(mergeConfig.rectThrough) ? single : mergeConfig.rectThrough;
@@ -1067,6 +1071,7 @@ class EditBox extends draw.Group {
             strokeWidth: strokeWidth,
             around: "center",
             strokeAlign: "center",
+            opacity: 1,
             width: pointSize,
             height: pointSize,
             cornerRadius: pointRadius,
@@ -1084,6 +1089,10 @@ class EditBox extends draw.Group {
         const {middlePoint: middlePoint} = this.mergedConfig;
         return draw.isArray(middlePoint) ? middlePoint : middlePoint ? [ middlePoint ] : this.getPointsStyle();
     }
+    getResizeLinesStyle() {
+        const {resizeLine: resizeLine} = this.mergedConfig;
+        return draw.isArray(resizeLine) ? resizeLine : [ resizeLine ];
+    }
     onDragStart(e) {
         this.dragging = true;
         const point = this.dragPoint = e.current, {pointType: pointType} = point;
@@ -1118,7 +1127,7 @@ class EditBox extends draw.Group {
         this.dragPoint = null;
     }
     onTransformStart(e) {
-        if (this.moving) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1;
+        if (this.moving || this.gesturing) 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;
@@ -1143,7 +1152,18 @@ class EditBox extends draw.Group {
             e.stop();
             if (draw.isString(this.mergedConfig.moveable)) {
                 this.gesturing = this.moving = true;
-                e.type === core.MoveEvent.START ? this.onTransformStart(e) : this.transformTool.onMove(e);
+                switch (e.type) {
+                  case core.MoveEvent.START:
+                    this.onTransformStart(e);
+                    break;
+
+                  case core.MoveEvent.END:
+                    this.onTransformEnd(e);
+                    break;
+
+                  default:
+                    this.transformTool.onMove(e);
+                }
             }
         }
     }
@@ -1152,7 +1172,18 @@ class EditBox extends draw.Group {
             e.stop();
             if (draw.isString(this.mergedConfig.resizeable)) {
                 this.gesturing = this.resizing = true;
-                e.type === core.ZoomEvent.START ? this.onTransformStart(e) : this.transformTool.onScale(e);
+                switch (e.type) {
+                  case core.ZoomEvent.START:
+                    this.onTransformStart(e);
+                    break;
+
+                  case core.ZoomEvent.END:
+                    this.onTransformEnd(e);
+                    break;
+
+                  default:
+                    this.transformTool.onScale(e);
+                }
             }
         }
     }
@@ -1161,16 +1192,21 @@ class EditBox extends draw.Group {
             e.stop();
             if (draw.isString(this.mergedConfig.rotateable)) {
                 this.gesturing = this.rotating = true;
-                e.type === core.RotateEvent.START ? this.onTransformStart(e) : this.transformTool.onRotate(e);
+                switch (e.type) {
+                  case core.ZoomEvent.START:
+                    this.onTransformStart(e);
+                    break;
+
+                  case core.ZoomEvent.END:
+                    this.onTransformEnd(e);
+                    break;
+
+                  default:
+                    this.transformTool.onRotate(e);
+                }
             }
         }
     }
-    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);
@@ -1240,7 +1276,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.START, core.ZoomEvent.START, core.RotateEvent.START ], this.onGestureStart, this ], [ [ core.MoveEvent.END, core.ZoomEvent.END, core.RotateEvent.END ], this.onGestureEnd, 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, core.MoveEvent.END ], this.onMove, this, true ], [ [ core.ZoomEvent.START, core.ZoomEvent.BEFORE_ZOOM, core.ZoomEvent.END ], this.onScale, this, true ], [ [ core.RotateEvent.START, core.RotateEvent.BEFORE_ROTATE, core.RotateEvent.END ], this.onRotate, this, true ] ]));
         });
     }
     __removeListenEvents() {
@@ -1993,6 +2029,9 @@ exports.Editor = class Editor extends draw.Group {
         if (this.multiple) simulate(this);
         this.update();
     }
+    getEditTool(name) {
+        return this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+    }
     updateEditTool() {
         this.unloadEditTool();
         if (this.editing) {
@@ -2007,7 +2046,7 @@ exports.Editor = class Editor extends draw.Group {
                 if (draw.isString(check)) name = check; else if (check === false) return;
             }
             if (EditToolCreator.list[name]) {
-                const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+                const tool = this.editTool = this.getEditTool(name);
                 this.editBox.load();
                 tool.load();
                 this.update();
@@ -2096,9 +2135,12 @@ exports.Editor = class Editor extends draw.Group {
         const event = new EditorGroupEvent(type, {
             editTarget: group
         });
-        if (!group || !group.syncEventer) this.emitEvent(event);
+        this.emitEvent(event);
         if (group) group.emitEvent(event);
     }
+    getInnerEditor(name) {
+        return this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+    }
     openInnerEditor(target, nameOrSelect, select) {
         let name;
         if (draw.isString(nameOrSelect)) name = nameOrSelect; else if (!select) select = nameOrSelect;
@@ -2117,7 +2159,7 @@ exports.Editor = class Editor extends draw.Group {
             if (EditToolCreator.list[name]) {
                 this.editTool.unload();
                 this.innerEditing = true;
-                this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+                this.innerEditor = this.getInnerEditor(name);
                 this.innerEditor.editTarget = target;
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
                 this.innerEditor.load();
@@ -2141,7 +2183,7 @@ exports.Editor = class Editor extends draw.Group {
             editTarget: editTarget,
             innerEditor: innerEditor
         });
-        if (!editTarget.syncEventer) this.emitEvent(event);
+        this.emitEvent(event);
         editTarget.emitEvent(event);
     }
     lock() {

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, Box, DataHelper, ResizeEvent, getPointData, Text, Matrix, Debug, LeafHelper, PropertyEvent, Plugin, RenderEvent, LeaferEvent, Creator, dataType } from "@leafer-ui/draw";
 
-import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, DragBoundsHelper, RotateEvent, KeyEvent, useModule } from "@leafer-ui/core";
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, DragBoundsHelper, KeyEvent, RotateEvent, useModule } from "@leafer-ui/core";
 
 import "@leafer-in/resize";
 
@@ -174,8 +174,8 @@ class Stroker extends UI {
                         if (leaf.__.__useArrow) leaf.__drawPath(canvas); else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
                         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);
+                    if (stroke) isString(stroke) ? Paint.stroke(stroke, this, canvas, options) : Paint.strokes(stroke, this, canvas, options);
+                    if (fill) isString(fill) ? Paint.fill(fill, this, canvas, options) : Paint.fills(fill, this, canvas, options);
                 }
             }
             data.strokeWidth = strokeWidth;
@@ -593,6 +593,8 @@ const EditDataHelper = {
             scaleX = sign(scaleX) * lockScale;
             scaleY = sign(scaleY) * lockScale;
         }
+        isFinite(scaleX) || (scaleX = 1);
+        isFinite(scaleY) || (scaleY = 1);
         return {
             origin: origin,
             scaleX: scaleX,
@@ -923,9 +925,10 @@ 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, ignorePixelSnap: ignorePixelSnap} = mergeConfig;
+        const {stroke: stroke, strokeWidth: strokeWidth, ignorePixelSnap: ignorePixelSnap} = mergeConfig;
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
+        const resizeLinesStyle = this.getResizeLinesStyle();
         this.visible = !target.locked;
         let resizeP;
         for (let i = 0; i < 8; i++) {
@@ -935,12 +938,13 @@ class EditBox extends Group {
             if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
                 pointType: "resize",
                 rotation: (i - 1) / 2 * 90
-            }, resizeLine || {}));
+            }, resizeLinesStyle[(i - 1) / 2 % resizeLinesStyle.length] || {}));
         }
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({
             stroke: stroke,
             strokeWidth: strokeWidth,
+            opacity: 1,
             editConfig: editConfig
         }, mergeConfig.rect || {}));
         const rectThrough = isNull(mergeConfig.rectThrough) ? single : mergeConfig.rectThrough;
@@ -1065,6 +1069,7 @@ class EditBox extends Group {
             strokeWidth: strokeWidth,
             around: "center",
             strokeAlign: "center",
+            opacity: 1,
             width: pointSize,
             height: pointSize,
             cornerRadius: pointRadius,
@@ -1082,6 +1087,10 @@ class EditBox extends Group {
         const {middlePoint: middlePoint} = this.mergedConfig;
         return isArray(middlePoint) ? middlePoint : middlePoint ? [ middlePoint ] : this.getPointsStyle();
     }
+    getResizeLinesStyle() {
+        const {resizeLine: resizeLine} = this.mergedConfig;
+        return isArray(resizeLine) ? resizeLine : [ resizeLine ];
+    }
     onDragStart(e) {
         this.dragging = true;
         const point = this.dragPoint = e.current, {pointType: pointType} = point;
@@ -1116,7 +1125,7 @@ class EditBox extends Group {
         this.dragPoint = null;
     }
     onTransformStart(e) {
-        if (this.moving) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1;
+        if (this.moving || this.gesturing) 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;
@@ -1141,7 +1150,18 @@ class EditBox extends Group {
             e.stop();
             if (isString(this.mergedConfig.moveable)) {
                 this.gesturing = this.moving = true;
-                e.type === MoveEvent.START ? this.onTransformStart(e) : this.transformTool.onMove(e);
+                switch (e.type) {
+                  case MoveEvent.START:
+                    this.onTransformStart(e);
+                    break;
+
+                  case MoveEvent.END:
+                    this.onTransformEnd(e);
+                    break;
+
+                  default:
+                    this.transformTool.onMove(e);
+                }
             }
         }
     }
@@ -1150,7 +1170,18 @@ class EditBox extends Group {
             e.stop();
             if (isString(this.mergedConfig.resizeable)) {
                 this.gesturing = this.resizing = true;
-                e.type === ZoomEvent.START ? this.onTransformStart(e) : this.transformTool.onScale(e);
+                switch (e.type) {
+                  case ZoomEvent.START:
+                    this.onTransformStart(e);
+                    break;
+
+                  case ZoomEvent.END:
+                    this.onTransformEnd(e);
+                    break;
+
+                  default:
+                    this.transformTool.onScale(e);
+                }
             }
         }
     }
@@ -1159,16 +1190,21 @@ class EditBox extends Group {
             e.stop();
             if (isString(this.mergedConfig.rotateable)) {
                 this.gesturing = this.rotating = true;
-                e.type === RotateEvent.START ? this.onTransformStart(e) : this.transformTool.onRotate(e);
+                switch (e.type) {
+                  case ZoomEvent.START:
+                    this.onTransformStart(e);
+                    break;
+
+                  case ZoomEvent.END:
+                    this.onTransformEnd(e);
+                    break;
+
+                  default:
+                    this.transformTool.onRotate(e);
+                }
             }
         }
     }
-    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);
@@ -1238,7 +1274,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.START, ZoomEvent.START, RotateEvent.START ], this.onGestureStart, this ], [ [ MoveEvent.END, ZoomEvent.END, RotateEvent.END ], this.onGestureEnd, this ] ]));
+            events.push(editor.app.on_([ [ [ KeyEvent.HOLD, KeyEvent.UP ], this.onKey, this ], [ KeyEvent.DOWN, this.onArrow, this ], [ [ MoveEvent.START, MoveEvent.BEFORE_MOVE, MoveEvent.END ], this.onMove, this, true ], [ [ ZoomEvent.START, ZoomEvent.BEFORE_ZOOM, ZoomEvent.END ], this.onScale, this, true ], [ [ RotateEvent.START, RotateEvent.BEFORE_ROTATE, RotateEvent.END ], this.onRotate, this, true ] ]));
         });
     }
     __removeListenEvents() {
@@ -1991,6 +2027,9 @@ let Editor = class Editor extends Group {
         if (this.multiple) simulate(this);
         this.update();
     }
+    getEditTool(name) {
+        return this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+    }
     updateEditTool() {
         this.unloadEditTool();
         if (this.editing) {
@@ -2005,7 +2044,7 @@ let Editor = class Editor extends Group {
                 if (isString(check)) name = check; else if (check === false) return;
             }
             if (EditToolCreator.list[name]) {
-                const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+                const tool = this.editTool = this.getEditTool(name);
                 this.editBox.load();
                 tool.load();
                 this.update();
@@ -2094,9 +2133,12 @@ let Editor = class Editor extends Group {
         const event = new EditorGroupEvent(type, {
             editTarget: group
         });
-        if (!group || !group.syncEventer) this.emitEvent(event);
+        this.emitEvent(event);
         if (group) group.emitEvent(event);
     }
+    getInnerEditor(name) {
+        return this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+    }
     openInnerEditor(target, nameOrSelect, select) {
         let name;
         if (isString(nameOrSelect)) name = nameOrSelect; else if (!select) select = nameOrSelect;
@@ -2115,7 +2157,7 @@ let Editor = class Editor extends Group {
             if (EditToolCreator.list[name]) {
                 this.editTool.unload();
                 this.innerEditing = true;
-                this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+                this.innerEditor = this.getInnerEditor(name);
                 this.innerEditor.editTarget = target;
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
                 this.innerEditor.load();
@@ -2139,7 +2181,7 @@ let Editor = class Editor extends Group {
             editTarget: editTarget,
             innerEditor: innerEditor
         });
-        if (!editTarget.syncEventer) this.emitEvent(event);
+        this.emitEvent(event);
         editTarget.emitEvent(event);
     }
     lock() {