@leafer-in/editor 2.1.2 → 2.1.4

package/dist/editor.cjs

@@ -94,10 +94,11 @@ function mergeConfigAttr() {
                 if (innerEditor) innerEditor.editConfig && Object.assign(mergeConfig, innerEditor.editConfig); else if (editTool) editTool.editConfig && Object.assign(mergeConfig, editTool.editConfig);
                 if (element && element.editConfig) {
                     let {editConfig: editConfig} = element;
-                    if (editConfig.hover || editConfig.hoverStyle) {
+                    if (editConfig.hover || editConfig.hoverStyle || editConfig.hoverPathType) {
                         editConfig = Object.assign({}, editConfig);
                         delete editConfig.hover;
                         delete editConfig.hoverStyle;
+                        delete editConfig.hoverPathType;
                     }
                     Object.assign(mergeConfig, editConfig);
                 }
@@ -165,9 +166,22 @@ class Stroker extends draw.UI {
                     matrix.half = strokeWidth % 2;
                     canvas.setWorld(matrix, options.matrix);
                     canvas.beginPath();
-                    if (this.strokePathType === "path") {
+                    switch (this.strokePathType) {
+                      case "box":
+                        const {boxBounds: boxBounds} = leaf.__layout;
+                        canvas.rect(boxBounds.x, boxBounds.y, boxBounds.width, boxBounds.height);
+                        break;
+
+                      case "stroke":
+                        const {strokeBounds: strokeBounds} = leaf.__layout;
+                        canvas.rect(strokeBounds.x, strokeBounds.y, strokeBounds.width, strokeBounds.height);
+                        break;
+
+                      case "path":
                         leaf.__drawPath(canvas);
-                    } else {
+                        break;
+
+                      default:
                         if (leaf.__.__useArrow) leaf.__drawPath(canvas); else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
                     }
                     data.strokeWidth = strokeWidth / Math.max(aScaleX, aScaleY);
@@ -290,10 +304,11 @@ class EditSelect extends draw.Group {
         if (this.running && !this.dragging && !editor.dragging) {
             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;
+            const {stroke: stroke, strokeWidth: strokeWidth, hover: hover, hoverStyle: hoverStyle, hoverPathType: hoverPathType} = config;
             this.hoverStroker.setTarget(hover ? hoverTarget : null, Object.assign({
                 stroke: stroke,
-                strokeWidth: strokeWidth
+                strokeWidth: strokeWidth,
+                strokePathType: hoverPathType
             }, hoverStyle || {}));
         } else {
             this.hoverStroker.target = null;
@@ -476,16 +491,17 @@ const {topLeft: topLeft, top: top, topRight: topRight, right: right$1, bottomRig
 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) {
+    getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode, boundsType) {
         let align, origin = {}, scaleX = 1, scaleY = 1, lockScale;
-        const {boxBounds: boxBounds, widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldBoxBounds: worldBoxBounds} = target;
+        const {widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldTransform: worldTransform, boxBounds: boxBounds} = target;
         const {width: width, height: height} = startBounds;
+        const innerBounds = target.getBounds(boundsType, "inner");
         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;
+        const changedScaleX = scaleMode ? originChangedScaleX : signX * innerBounds.width / width;
+        const changedScaleY = scaleMode ? originChangedScaleY : signY * innerBounds.height / height;
         if (draw.isNumber(totalMoveOrScale)) {
             scaleX = scaleY = Math.sqrt(totalMoveOrScale);
         } else {
@@ -571,10 +587,11 @@ const EditDataHelper = {
         if (useScaleY) scaleY /= changedScaleY;
         if (!flipable) {
             const {worldTransform: worldTransform} = target;
-            if (scaleX < 0) scaleX = 1 / boxBounds.width / worldTransform.scaleX;
-            if (scaleY < 0) scaleY = 1 / boxBounds.height / worldTransform.scaleY;
+            if (scaleX < 0) scaleX = 1 / innerBounds.width / worldTransform.scaleX;
+            if (scaleY < 0) scaleY = 1 / innerBounds.height / worldTransform.scaleY;
         }
-        toPoint(around || align, boxBounds, origin, true);
+        toPoint(around || align, innerBounds, origin, true);
+        this.checkOrigin(target, origin, boundsType);
         if (dragBounds) {
             const scaleData = {
                 x: scaleX,
@@ -585,15 +602,20 @@ const EditDataHelper = {
             scaleY = scaleData.y;
         }
         if (useScaleX && widthRange) {
-            const nowWidth = boxBounds.width * target.scaleX;
+            const nowWidth = innerBounds.width * target.scaleX;
             scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
         }
         if (useScaleY && heightRange) {
-            const nowHeight = boxBounds.height * target.scaleY;
+            const nowHeight = innerBounds.height * target.scaleY;
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
         }
-        if (useScaleX && abs(scaleX * worldBoxBounds.width) < 1) scaleX = sign(scaleX) / worldBoxBounds.width;
-        if (useScaleY && abs(scaleY * worldBoxBounds.height) < 1) scaleY = sign(scaleY) / worldBoxBounds.height;
+        let minWidth = 1 * abs(worldTransform.scaleX), minHeight = 1 * abs(worldTransform.scaleY);
+        if (boundsType !== "box") {
+            minWidth += innerBounds.width - boxBounds.width;
+            minHeight += innerBounds.height - boxBounds.height;
+        }
+        if (useScaleX && abs(scaleX * innerBounds.width) < minWidth) scaleX = sign(scaleX) * minWidth / innerBounds.width;
+        if (useScaleY && abs(scaleY * innerBounds.height) < minHeight) scaleY = sign(scaleY) * minHeight / innerBounds.height;
         if (lockRatio && scaleX !== scaleY) {
             lockScale = Math.min(abs(scaleX), abs(scaleY));
             scaleX = sign(scaleX) * lockScale;
@@ -610,7 +632,7 @@ const EditDataHelper = {
             around: around
         };
     },
-    getRotateData(target, direction, current, last, around) {
+    getRotateData(target, direction, current, last, around, boundsType) {
         let align, origin = {};
         switch (direction) {
           case topLeft:
@@ -632,13 +654,14 @@ const EditDataHelper = {
           default:
             align = "center";
         }
-        toPoint(around || align, target.boxBounds, origin, true);
+        toPoint(around || align, target.getBounds(boundsType, "inner"), origin, true);
+        this.checkOrigin(target, origin, boundsType);
         return {
             origin: origin,
             rotation: draw.PointHelper.getRotation(last, target.getWorldPointByBox(origin), current)
         };
     },
-    getSkewData(bounds, direction, move, around) {
+    getSkewData(target, direction, move, around, boundsType) {
         let align, origin = {}, skewX = 0, skewY = 0;
         let last;
         switch (direction) {
@@ -681,10 +704,12 @@ const EditDataHelper = {
             align = "left";
             skewY = 1;
         }
-        const {width: width, height: height} = bounds;
+        const innerBounds = target.getBounds(boundsType, "inner");
+        const {width: width, height: height} = innerBounds;
         last.x = last.x * width;
         last.y = last.y * height;
-        toPoint(around || align, bounds, origin, true);
+        toPoint(around || align, innerBounds, origin, true);
+        this.checkOrigin(target, origin, boundsType);
         const rotation = draw.PointHelper.getRotation(last, origin, {
             x: last.x + (skewX ? move.x : 0),
             y: last.y + (skewY ? move.y : 0)
@@ -696,6 +721,13 @@ const EditDataHelper = {
             skewY: skewY
         };
     },
+    checkOrigin(target, origin, boundsType) {
+        if (boundsType !== "box") {
+            const {boxBounds: boxBounds} = target, innerBounds = target.getBounds(boundsType, "inner");
+            origin.x += innerBounds.x - boxBounds.x;
+            origin.y += innerBounds.y - boxBounds.y;
+        }
+    },
     getAround(around, altKey) {
         return altKey && !around ? "center" : around;
     },
@@ -966,8 +998,8 @@ class EditBox extends draw.Group {
         updateMoveCursor(this);
     }
     update() {
-        const {editor: editor} = this;
-        const {x: x, y: y, scaleX: scaleX, scaleY: scaleY, rotation: rotation, skewX: skewX, skewY: skewY, width: width, height: height} = this.target.getLayoutBounds("box", editor, true);
+        const {editor: editor, mergeConfig: mergeConfig} = this;
+        const {x: x, y: y, scaleX: scaleX, scaleY: scaleY, rotation: rotation, skewX: skewX, skewY: skewY, width: width, height: height} = this.target.getLayoutBounds(mergeConfig.editBoxType, editor, true);
         this.visible = !this.target.locked;
         this.set({
             x: x,
@@ -990,9 +1022,9 @@ class EditBox extends draw.Group {
         if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
     }
     updateBounds(bounds) {
-        const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
+        const {editor: editor, mergedConfig: mergedConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
         const {editMask: editMask} = editor;
-        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
+        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergedConfig;
         editMask.visible = mask ? true : 0;
         if (!draw.isUndefined(dimOthers) || !draw.isUndefined(bright)) {
             editor.setDimOthers(dimOthers);
@@ -1030,7 +1062,7 @@ class EditBox extends draw.Group {
                     }
                 }
             }
-            circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
+            circle.visible = showPoints && rotateable && !!(mergedConfig.circle || mergedConfig.rotatePoint);
             if (circle.visible) this.layoutCircle();
             if (rect.path) rect.path = null;
             rect.set(Object.assign(Object.assign({}, bounds), {
@@ -1138,7 +1170,8 @@ class EditBox extends draw.Group {
         this.dragPoint = null;
     }
     onTransformStart(e) {
-        if (this.moving || this.gesturing) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1;
+        const {hideOnMove: hideOnMove, editBoxType: editBoxType} = this.mergedConfig;
+        if (this.moving || this.gesturing) this.editor.opacity = hideOnMove ? 0 : 1;
         if (this.resizing) draw.ResizeEvent.resizingKeys = this.editor.leafList.keys;
         const {dragStartData: dragStartData, target: target} = this;
         dragStartData.x = e.x;
@@ -1148,7 +1181,7 @@ class EditBox extends draw.Group {
             x: target.x,
             y: target.y
         };
-        dragStartData.bounds = Object.assign({}, target.getLayoutBounds("box", "local"));
+        dragStartData.bounds = Object.assign({}, target.getLayoutBounds(editBoxType, "local"));
         dragStartData.rotation = target.rotation;
     }
     onTransformEnd(e) {
@@ -1386,6 +1419,7 @@ const config = {
     },
     selector: true,
     editBox: true,
+    editBoxType: "box",
     hover: true,
     select: "press",
     openInner: "double",
@@ -1710,7 +1744,7 @@ class TransformTool {
     }
     onScale(e) {
         const {target: target, mergeConfig: mergeConfig, single: single, dragStartData: dragStartData} = this.editBox;
-        let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize} = mergeConfig, totalMove;
+        let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize, editBoxType: editBoxType} = mergeConfig, totalMove;
         if (e instanceof core.ZoomEvent) {
             if (!around) around = target.getBoxPoint(e);
             totalMove = e.totalScale;
@@ -1719,7 +1753,7 @@ class TransformTool {
         }
         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 data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, totalMove, lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === "scale", editBoxType);
         const targetX = target.x, targetY = target.y;
         if (e instanceof core.DragEvent && this.editTool && this.editTool.onScaleWithDrag) {
             data.drag = e;
@@ -1731,7 +1765,7 @@ class TransformTool {
     }
     onRotate(e) {
         const {target: target, mergeConfig: mergeConfig, dragStartData: dragStartData} = this.editBox;
-        const {around: around, rotateAround: rotateAround, rotateGap: rotateGap, diagonalRotateKey: diagonalRotateKey} = mergeConfig;
+        const {around: around, rotateAround: rotateAround, rotateGap: rotateGap, diagonalRotateKey: diagonalRotateKey, editBoxType: editBoxType} = mergeConfig;
         const {direction: direction} = e.current;
         let origin, rotation;
         if (e instanceof core.RotateEvent) {
@@ -1739,7 +1773,7 @@ class TransformTool {
             origin = rotateAround ? draw.AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
         } else {
             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");
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, isDiagonalRotate ? null : rotateAround || target.around || target.origin || around || "center", editBoxType);
             rotation = dragStartData.rotation + data.rotation - target.rotation;
             origin = data.origin;
         }
@@ -1751,8 +1785,8 @@ class TransformTool {
     }
     onSkew(e) {
         const {target: target, mergeConfig: mergeConfig} = this.editBox;
-        const {around: around} = mergeConfig;
-        const {origin: origin, skewX: skewX, skewY: skewY} = EditDataHelper.getSkewData(target.boxBounds, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey));
+        const {around: around, editBoxType: editBoxType} = mergeConfig;
+        const {origin: origin, skewX: skewX, skewY: skewY} = EditDataHelper.getSkewData(target, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey), editBoxType);
         if (!skewX && !skewY) return;
         this.skewOf(origin, skewX, skewY);
     }
@@ -1813,7 +1847,7 @@ class TransformTool {
     scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
         if (!this.checkTransform("resizeable")) return;
         const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
-        const {beforeScale: beforeScale} = mergeConfig;
+        const {beforeScale: beforeScale, editBoxType: editBoxType} = mergeConfig;
         if (beforeScale) {
             const check = beforeScale({
                 target: target,
@@ -1831,7 +1865,8 @@ class TransformTool {
             worldOrigin: worldOrigin,
             scaleX: scaleX,
             scaleY: scaleY,
-            transform: transform
+            transform: transform,
+            editBoxType: editBoxType
         };
         this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
@@ -1859,7 +1894,7 @@ class TransformTool {
     rotateOf(origin, rotation) {
         if (!this.checkTransform("rotateable")) return;
         const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
-        const {beforeRotate: beforeRotate} = mergeConfig;
+        const {beforeRotate: beforeRotate, editBoxType: editBoxType} = mergeConfig;
         if (beforeRotate) {
             const check = beforeRotate({
                 target: target,
@@ -1875,7 +1910,8 @@ class TransformTool {
             editor: editor,
             worldOrigin: worldOrigin,
             rotation: rotation,
-            transform: transform
+            transform: transform,
+            editBoxType: editBoxType
         };
         this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
         const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
@@ -1885,7 +1921,7 @@ class TransformTool {
     skewOf(origin, skewX, skewY = 0, _resize) {
         if (!this.checkTransform("skewable")) return;
         const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
-        const {beforeSkew: beforeSkew} = mergeConfig;
+        const {beforeSkew: beforeSkew, editBoxType: editBoxType} = mergeConfig;
         if (beforeSkew) {
             const check = beforeSkew({
                 target: target,
@@ -1903,7 +1939,8 @@ class TransformTool {
             worldOrigin: worldOrigin,
             skewX: skewX,
             skewY: skewY,
-            transform: transform
+            transform: transform,
+            editBoxType: editBoxType
         };
         this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
         const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
@@ -2352,32 +2389,32 @@ exports.EditTool = class EditTool extends InnerEditor {
         app.unlockLayout();
     }
     onScale(e) {
-        const {scaleX: scaleX, scaleY: scaleY, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
+        const {scaleX: scaleX, scaleY: scaleY, transform: transform, worldOrigin: worldOrigin, editor: editor, editBoxType: editBoxType} = e;
         const {app: app, list: list} = editor;
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== "scale";
-            if (transform) target.transformWorld(transform, resize); else target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize);
+            if (transform) target.transformWorld(transform, resize, false, editBoxType); else target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize, false, editBoxType);
         });
         app.unlockLayout();
     }
     onRotate(e) {
-        const {rotation: rotation, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
+        const {rotation: rotation, transform: transform, worldOrigin: worldOrigin, editor: editor, editBoxType: editBoxType} = e;
         const {app: app, list: list} = editor;
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== "scale";
-            if (transform) target.transformWorld(transform, resize); else target.rotateOfWorld(worldOrigin, rotation);
+            if (transform) target.transformWorld(transform, resize, false, editBoxType); else target.rotateOfWorld(worldOrigin, rotation);
         });
         app.unlockLayout();
     }
     onSkew(e) {
-        const {skewX: skewX, skewY: skewY, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
+        const {skewX: skewX, skewY: skewY, transform: transform, worldOrigin: worldOrigin, editor: editor, editBoxType: editBoxType} = e;
         const {app: app, list: list} = editor;
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== "scale";
-            if (transform) target.transformWorld(transform, resize); else target.skewOfWorld(worldOrigin, skewX, skewY, resize);
+            if (transform) target.transformWorld(transform, resize, false, editBoxType); else target.skewOfWorld(worldOrigin, skewX, skewY, resize);
         });
         app.unlockLayout();
     }