@leafer-in/editor 1.0.0-rc.22 → 1.0.0-rc.24

package/dist/editor.esm.js

@@ -1,4 +1,4 @@
-import { PathCommandMap, Leaf, Path, Line, Polygon, MatrixHelper, Group, Box, Event, defineKey, UI, Paint, Rect, Answer, Bounds, LeafList, PointHelper, AroundHelper, Direction9, MathHelper, Matrix, Debug, DataHelper, LeafHelper, RenderEvent, getPointData, Creator } from '@leafer-ui/draw';
+import { PathCommandMap, MatrixHelper, Leaf, Text, Path, Line, Polygon, Group, Box, Event, defineKey, UI, Paint, Rect, Answer, Bounds, LeafList, PointHelper, AroundHelper, Direction9, MathHelper, Matrix, Debug, DataHelper, LeafHelper, RenderEvent, getPointData, Creator } from '@leafer-ui/draw';
 import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent, KeyEvent } from '@leafer-ui/core';
 
 const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = PathCommandMap;
@@ -80,6 +80,39 @@ const PathScaler = {
 };
 const { scalePoints } = PathScaler;
 
+const matrix$1 = MatrixHelper.get();
+function scaleResize(leaf, scaleX, scaleY) {
+    if (leaf.pathInputed) {
+        scaleResizePath(leaf, scaleX, scaleY);
+    }
+    else {
+        leaf.width *= scaleX;
+        leaf.height *= scaleY;
+    }
+}
+function scaleResizeFont(leaf, scaleX, scaleY) {
+    if (scaleX !== 1)
+        leaf.fontSize *= scaleX;
+    else if (scaleY !== 1)
+        leaf.fontSize *= scaleY;
+}
+function scaleResizePath(leaf, scaleX, scaleY) {
+    PathScaler.scale(leaf.__.path, scaleX, scaleY);
+    leaf.path = leaf.__.path;
+}
+function scaleResizePoints(leaf, scaleX, scaleY) {
+    PathScaler.scalePoints(leaf.__.points, scaleX, scaleY);
+    leaf.points = leaf.__.points;
+}
+function scaleResizeGroup(group, scaleX, scaleY) {
+    const { children } = group;
+    for (let i = 0; i < children.length; i++) {
+        matrix$1.a = scaleX;
+        matrix$1.d = scaleY;
+        children[i].transform(matrix$1, true);
+    }
+}
+
 Leaf.prototype.scaleResize = function (scaleX, scaleY = scaleX, noResize) {
     const data = this;
     if (noResize) {
@@ -94,23 +127,26 @@ Leaf.prototype.scaleResize = function (scaleX, scaleY = scaleX, noResize) {
         this.__scaleResize(scaleX, scaleY);
     }
 };
-function scaleResize(leaf, scaleX, scaleY) {
-    if (scaleX !== 1)
-        leaf.width *= scaleX;
-    if (scaleY !== 1)
-        leaf.height *= scaleY;
-}
 Leaf.prototype.__scaleResize = function (scaleX, scaleY) {
     scaleResize(this, scaleX, scaleY);
 };
+Text.prototype.__scaleResize = function (scaleX, scaleY) {
+    if (this.editConfig && this.editConfig.editSize === 'font-size') {
+        scaleResizeFont(this, scaleX, scaleY);
+    }
+    else {
+        scaleResize(this, scaleX, scaleY);
+    }
+};
 Path.prototype.__scaleResize = function (scaleX, scaleY) {
-    PathScaler.scale(this.__.path, scaleX, scaleY);
-    this.path = this.__.path;
+    scaleResizePath(this, scaleX, scaleY);
 };
 Line.prototype.__scaleResize = function (scaleX, scaleY) {
-    if (this.points) {
-        PathScaler.scalePoints(this.__.points, scaleX, scaleY);
-        this.points = this.__.points;
+    if (this.pathInputed) {
+        scaleResizePath(this, scaleX, scaleY);
+    }
+    else if (this.points) {
+        scaleResizePoints(this, scaleX, scaleY);
     }
     else {
         const point = this.toPoint;
@@ -120,29 +156,22 @@ Line.prototype.__scaleResize = function (scaleX, scaleY) {
     }
 };
 Polygon.prototype.__scaleResize = function (scaleX, scaleY) {
-    if (this.points) {
-        PathScaler.scalePoints(this.__.points, scaleX, scaleY);
-        this.points = this.__.points;
+    if (this.pathInputed) {
+        scaleResizePath(this, scaleX, scaleY);
+    }
+    else if (this.points) {
+        scaleResizePoints(this, scaleX, scaleY);
     }
     else {
         scaleResize(this, scaleX, scaleY);
     }
 };
-const matrix$1 = MatrixHelper.get();
-function groupScaleResize(group, scaleX, scaleY) {
-    const { children } = group;
-    for (let i = 0; i < children.length; i++) {
-        matrix$1.a = scaleX;
-        matrix$1.d = scaleY;
-        children[i].transform(matrix$1, true);
-    }
-}
 Group.prototype.__scaleResize = function (scaleX, scaleY) {
-    groupScaleResize(this, scaleX, scaleY);
+    scaleResizeGroup(this, scaleX, scaleY);
 };
 Box.prototype.__scaleResize = function (scaleX, scaleY) {
     if (this.__.__autoSize && this.children.length) {
-        groupScaleResize(this, scaleX, scaleY);
+        scaleResizeGroup(this, scaleX, scaleY);
     }
     else {
         scaleResize(this, scaleX, scaleY);
@@ -237,7 +266,7 @@ function targetAttr(fn) {
 
 const matrix = MatrixHelper.get();
 const { abs } = Math;
-const { copy, scale } = MatrixHelper;
+const { copy: copy$1, scale } = MatrixHelper;
 class Stroker extends UI {
     constructor() {
         super();
@@ -258,21 +287,17 @@ class Stroker extends UI {
             for (let i = 0; i < list.length; i++) {
                 leaf = list[i];
                 if (bounds && bounds.hit(leaf.__world, options.matrix)) {
-                    let drewPath;
-                    if (leaf.__.editSize === 'scale') {
-                        const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY);
-                        if (aScaleX !== aScaleY) {
-                            copy(matrix, leaf.__world);
-                            scale(matrix, 1 / aScaleX, 1 / aScaleY);
-                            canvas.setWorld(matrix, options.matrix);
-                            canvas.beginPath();
-                            this.__.strokeWidth = strokeWidth;
-                            const { x, y, width, height } = leaf.__layout.boxBounds;
-                            canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
-                            drewPath = true;
-                        }
+                    const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY);
+                    if (aScaleX !== aScaleY) {
+                        copy$1(matrix, leaf.__world);
+                        scale(matrix, 1 / aScaleX, 1 / aScaleY);
+                        canvas.setWorld(matrix, options.matrix);
+                        canvas.beginPath();
+                        this.__.strokeWidth = strokeWidth;
+                        const { x, y, width, height } = leaf.__layout.boxBounds;
+                        canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
                     }
-                    if (!drewPath) {
+                    else {
                         canvas.setWorld(leaf.__world, options.matrix);
                         canvas.beginPath();
                         if (leaf.__.__useArrow) {
@@ -550,7 +575,7 @@ const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft,
 const { toPoint } = AroundHelper;
 const EditDataHelper = {
     getScaleData(bounds, direction, pointMove, lockRatio, around) {
-        let origin, scaleX = 1, scaleY = 1;
+        let align, origin = {}, scaleX = 1, scaleY = 1;
         const { width, height } = bounds;
         if (around) {
             pointMove.x *= 2;
@@ -567,97 +592,100 @@ const EditDataHelper = {
         switch (direction) {
             case top:
                 scaleY = topScale;
-                origin = { x: 0.5, y: 1 };
+                align = 'bottom';
                 break;
             case right$1:
                 scaleX = rightScale;
-                origin = { x: 0, y: 0.5 };
+                align = 'left';
                 break;
             case bottom:
                 scaleY = bottomScale;
-                origin = { x: 0.5, y: 0 };
+                align = 'top';
                 break;
             case left$1:
                 scaleX = leftScale;
-                origin = { x: 1, y: 0.5 };
+                align = 'right';
                 break;
             case topLeft:
                 scaleY = topScale;
                 scaleX = leftScale;
-                origin = { x: 1, y: 1 };
+                align = 'bottom-right';
                 break;
             case topRight:
                 scaleY = topScale;
                 scaleX = rightScale;
-                origin = { x: 0, y: 1 };
+                align = 'bottom-left';
                 break;
             case bottomRight:
                 scaleY = bottomScale;
                 scaleX = rightScale;
-                origin = { x: 0, y: 0 };
+                align = 'top-left';
                 break;
             case bottomLeft:
                 scaleY = bottomScale;
                 scaleX = leftScale;
-                origin = { x: 1, y: 0 };
+                align = 'top-right';
         }
         if (lockRatio) {
             const unlockSide = lockRatio === 'corner' && direction % 2;
-            if (!unlockSide)
-                scaleX = scaleY = Math.sqrt(scaleX * scaleY);
+            if (!unlockSide) {
+                const scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                scaleX = scaleX < 0 ? -scale : scale;
+                scaleY = scaleY < 0 ? -scale : scale;
+            }
         }
-        toPoint(around || origin, bounds, origin);
+        toPoint(around || align, bounds, origin);
         return { origin, scaleX, scaleY, direction, lockRatio, around };
     },
     getRotateData(bounds, direction, current, last, around) {
-        let origin;
+        let align, origin = {};
         switch (direction) {
             case topLeft:
-                origin = { x: 1, y: 1 };
+                align = 'bottom-right';
                 break;
             case topRight:
-                origin = { x: 0, y: 1 };
+                align = 'bottom-left';
                 break;
             case bottomRight:
-                origin = { x: 0, y: 0 };
+                align = 'top-left';
                 break;
             case bottomLeft:
-                origin = { x: 1, y: 0 };
+                align = 'top-right';
                 break;
             default:
-                origin = { x: 0.5, y: 0.5 };
+                align = 'center';
         }
-        toPoint(around || origin, bounds, origin);
+        toPoint(around || align, bounds, origin);
         return { origin, rotation: PointHelper.getRotation(last, origin, current) };
     },
     getSkewData(bounds, direction, move, around) {
-        let origin, skewX = 0, skewY = 0;
+        let align, origin = {}, skewX = 0, skewY = 0;
         let last;
         switch (direction) {
             case top:
                 last = { x: 0.5, y: 0 };
-                origin = { x: 0.5, y: 1 };
+                align = 'bottom';
                 skewX = 1;
                 break;
             case bottom:
                 last = { x: 0.5, y: 1 };
-                origin = { x: 0.5, y: 0 };
+                align = 'top';
                 skewX = 1;
                 break;
             case left$1:
                 last = { x: 0, y: 0.5 };
-                origin = { x: 1, y: 0.5 };
+                align = 'right';
                 skewY = 1;
                 break;
             case right$1:
                 last = { x: 1, y: 0.5 };
-                origin = { x: 0, y: 0.5 };
+                align = 'left';
                 skewY = 1;
         }
         const { x, y, width, height } = bounds;
         last.x = x + last.x * width;
         last.y = y + last.y * height;
-        toPoint(around || origin, bounds, origin);
+        toPoint(around || align, bounds, origin);
         const rotation = PointHelper.getRotation(last, origin, { x: last.x + (skewX ? move.x : 0), y: last.y + (skewY ? move.y : 0) });
         skewX ? skewX = -rotation : skewY = rotation;
         return { origin, skewX, skewY };
@@ -780,7 +808,7 @@ class EditBox extends Group {
     create() {
         let rotatePoint, resizeLine, resizePoint;
         const { view, resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this;
-        const arounds = [{ x: 1, y: 1 }, { x: 0.5, y: 1 }, { x: 0, y: 1 }, { x: 0, y: 0.5 }, { x: 0, y: 0 }, { x: 0.5, y: 0 }, { x: 1, y: 0 }, { x: 1, y: 0.5 }];
+        const arounds = ['bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', 'top', 'top-right', 'right'];
         for (let i = 0; i < 8; i++) {
             rotatePoint = new EditPoint({ name: 'rotate-point', around: arounds[i], width: 15, height: 15, hitFill: "all" });
             rotatePoints.push(rotatePoint);
@@ -854,6 +882,8 @@ class EditBox extends Group {
                 }
             }
             circle.visible = showPoints && rotateable && !!mergeConfig.rotatePoint;
+            if (rect.path)
+                rect.path = null;
             rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
             const buttonVisible = showPoints && (circle.visible || this.buttons.children.length > 1);
             this.buttons.visible = buttonVisible;
@@ -1064,7 +1094,7 @@ ${filterStyle}
 `;
 
 const config = {
-    editSize: 'auto',
+    editSize: 'size',
     keyEvent: true,
     stroke: '#836DFF',
     strokeWidth: 2,
@@ -1275,18 +1305,12 @@ class Editor extends Group {
             this.editTool.load();
         }
     }
-    getEditSize(ui) {
-        let { editSize } = this.mergeConfig;
-        return editSize === 'auto' ? ui.editSize : editSize;
+    getEditSize(_ui) {
+        return this.mergeConfig.editSize;
     }
     onMove(e) {
         const total = { x: e.totalX, y: e.totalY };
-        const { lockMove } = this.mergeConfig;
-        if (lockMove === 'x')
-            total.y = 0;
-        else if (lockMove === 'y')
-            total.x = 0;
-        else if (e.shiftKey) {
+        if (e.shiftKey) {
             if (Math.abs(total.x) > Math.abs(total.y))
                 total.y = 0;
             else
@@ -1341,7 +1365,7 @@ class Editor extends Group {
         this.skewOf(origin, skewX, skewY);
     }
     move(x, y = 0) {
-        if (!this.mergeConfig.moveable)
+        if (!this.mergeConfig.moveable || this.element.locked)
             return;
         const { element } = this;
         const world = element.getWorldPointByLocal(typeof x === 'object' ? Object.assign({}, x) : { x, y }, null, true);
@@ -1560,7 +1584,7 @@ let EditTool = class EditTool extends InnerEditor {
         const { app, list } = editor;
         app.lockLayout();
         list.forEach(target => {
-            const resize = editor.getEditSize(target) === 'size';
+            const resize = editor.getEditSize(target) !== 'scale';
             if (transform) {
                 target.transformWorld(transform, resize);
             }
@@ -1575,7 +1599,7 @@ let EditTool = class EditTool extends InnerEditor {
         const { app, list } = editor;
         app.lockLayout();
         list.forEach(target => {
-            const resize = editor.getEditSize(target) === 'size';
+            const resize = editor.getEditSize(target) !== 'scale';
             if (transform) {
                 target.transformWorld(transform, resize);
             }
@@ -1590,7 +1614,7 @@ let EditTool = class EditTool extends InnerEditor {
         const { app, list } = editor;
         app.lockLayout();
         list.forEach(target => {
-            const resize = editor.getEditSize(target) === 'size';
+            const resize = editor.getEditSize(target) !== 'scale';
             if (transform) {
                 target.transformWorld(transform, resize);
             }
@@ -1624,6 +1648,7 @@ EditTool = __decorate([
 ], EditTool);
 
 const { left, right } = Direction9;
+const { move, copy } = PointHelper;
 let LineEditTool = class LineEditTool extends EditTool {
     constructor() {
         super(...arguments);
@@ -1632,50 +1657,100 @@ let LineEditTool = class LineEditTool extends EditTool {
     get tag() { return 'LineEditTool'; }
     onScaleWithDrag(e) {
         const { drag, direction, lockRatio, around } = e;
-        const target = e.target;
-        const fromPoint = getPointData();
-        const { toPoint } = target;
-        target.rotation = 0;
-        let { x, y } = drag.getInnerMove(target);
+        const line = e.target;
+        const isDragFrom = direction === left;
+        if (line.pathInputed) {
+            const { path } = line.__;
+            const { from, to } = this.getFromToByPath(path);
+            this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio));
+            path[1] = from.x, path[2] = from.y;
+            path[4] = to.x, path[5] = to.y;
+            line.path = path;
+        }
+        else if (line.points) {
+            const { points } = line;
+            const { from, to } = this.getFromToByPoints(points);
+            this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio));
+            points[0] = from.x, points[1] = from.y;
+            points[2] = to.x, points[3] = to.y;
+            line.points = points;
+        }
+        else {
+            const from = getPointData();
+            const { toPoint } = line;
+            line.rotation = 0;
+            this.dragPoint(from, toPoint, isDragFrom, around, this.getInnerMove(line, drag, lockRatio));
+            line.getLocalPointByInner(from, null, null, true);
+            line.getLocalPointByInner(toPoint, null, null, true);
+            line.x = from.x;
+            line.y = from.y;
+            line.getInnerPointByLocal(toPoint, null, null, true);
+            line.toPoint = toPoint;
+        }
+    }
+    getInnerMove(ui, event, lockRatio) {
+        const movePoint = event.getInnerMove(ui);
         if (lockRatio) {
-            if (Math.abs(x) > Math.abs(y)) {
-                y = 0;
+            if (Math.abs(movePoint.x) > Math.abs(movePoint.y)) {
+                movePoint.y = 0;
             }
             else {
-                x = 0;
+                movePoint.x = 0;
             }
         }
-        if (direction === left) {
-            fromPoint.x += x;
-            fromPoint.y += y;
-            if (around) {
-                toPoint.x -= x;
-                toPoint.y -= y;
-            }
+        return movePoint;
+    }
+    getFromToByPath(path) {
+        return {
+            from: { x: path[1], y: path[2] },
+            to: { x: path[4], y: path[5] }
+        };
+    }
+    getFromToByPoints(points) {
+        return {
+            from: { x: points[0], y: points[1] },
+            to: { x: points[2], y: points[3] }
+        };
+    }
+    dragPoint(fromPoint, toPoint, isDragFrom, around, movePoint) {
+        const { x, y } = movePoint;
+        if (isDragFrom) {
+            move(fromPoint, x, y);
+            if (around)
+                move(toPoint, -x, -y);
         }
         else {
-            if (around) {
-                fromPoint.x -= x;
-                fromPoint.y -= y;
-            }
-            toPoint.x += x;
-            toPoint.y += y;
+            if (around)
+                move(fromPoint, -x, -y);
+            move(toPoint, x, y);
         }
-        target.getLocalPointByInner(fromPoint, null, null, true);
-        target.getLocalPointByInner(toPoint, null, null, true);
-        target.x = fromPoint.x;
-        target.y = fromPoint.y;
-        target.getInnerPointByLocal(toPoint, null, null, true);
-        target.toPoint = toPoint;
     }
     onSkew(_e) {
     }
     onUpdate() {
-        const { rotatePoints, resizeLines, resizePoints } = this.editor.editBox;
+        const { editBox } = this, { rotatePoints, resizeLines, resizePoints, rect } = editBox;
+        const line = this.editor.element;
+        let fromTo, leftOrRight;
+        if (line.pathInputed)
+            fromTo = this.getFromToByPath(line.__.path);
+        else if (line.points)
+            fromTo = this.getFromToByPoints(line.__.points);
+        if (fromTo) {
+            const { from, to } = fromTo;
+            line.innerToWorld(from, from, false, editBox);
+            line.innerToWorld(to, to, false, editBox);
+            rect.pen.clearPath().moveTo(from.x, from.y).lineTo(to.x, to.y);
+            copy(resizePoints[7], from);
+            copy(rotatePoints[7], from);
+            copy(resizePoints[3], to);
+            copy(rotatePoints[3], to);
+        }
         for (let i = 0; i < 8; i++) {
             if (i < 4)
                 resizeLines[i].visible = false;
-            resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right);
+            leftOrRight = i === left || i === right;
+            resizePoints[i].visible = leftOrRight;
+            rotatePoints[i].visible = fromTo ? false : leftOrRight;
         }
     }
 };
@@ -1699,8 +1774,5 @@ UI.setEditInner = function (editorName) {
         get() { return typeof editorName === 'string' ? editorName : editorName(this); }
     });
 };
-Line.setEditOuter(function (line) {
-    return (line.points || line.pathInputed) ? 'EditTool' : 'LineEditTool';
-});
 
-export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, InnerEditor, LineEditTool, SelectArea, Stroker, registerEditTool, registerInnerEditor };
+export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, InnerEditor, LineEditTool, PathScaler, SelectArea, Stroker, registerEditTool, registerInnerEditor, scaleResize, scaleResizeFont, scaleResizeGroup, scaleResizePath, scaleResizePoints };