@leafer-in/editor 1.0.0-rc.25 → 1.0.0-rc.26

package/dist/editor.cjs

@@ -1,185 +1,9 @@
 'use strict';
 
+var resize = require('@leafer-in/resize');
 var draw = require('@leafer-ui/draw');
 var core = require('@leafer-ui/core');
 
-const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = draw.PathCommandMap;
-const PathScaler = {
-    scale(data, scaleX, scaleY) {
-        if (!data)
-            return;
-        let command;
-        let i = 0, len = data.length;
-        while (i < len) {
-            command = data[i];
-            switch (command) {
-                case M:
-                    scalePoints(data, scaleX, scaleY, i, 1);
-                    i += 3;
-                    break;
-                case L:
-                    scalePoints(data, scaleX, scaleY, i, 1);
-                    i += 3;
-                    break;
-                case C:
-                    scalePoints(data, scaleX, scaleY, i, 3);
-                    i += 7;
-                    break;
-                case Q:
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 5;
-                    break;
-                case Z:
-                    i += 1;
-                    break;
-                case N:
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 5;
-                    break;
-                case D:
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 9;
-                    break;
-                case X:
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 6;
-                    break;
-                case G:
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 9;
-                    break;
-                case F:
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 5;
-                    break;
-                case O:
-                    data[i] = G;
-                    data.splice(i + 4, 0, data[i + 3], 0);
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 7 + 2;
-                    len += 2;
-                    break;
-                case P:
-                    data[i] = F;
-                    data.splice(i + 4, 0, data[i + 3]);
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 4 + 1;
-                    len += 1;
-                    break;
-                case U:
-                    scalePoints(data, scaleX, scaleY, i, 2);
-                    i += 6;
-                    break;
-            }
-        }
-    },
-    scalePoints(data, scaleX, scaleY, start, pointCount) {
-        for (let i = pointCount ? start + 1 : 0, end = pointCount ? i + pointCount * 2 : data.length; i < end; i += 2) {
-            data[i] *= scaleX;
-            data[i + 1] *= scaleY;
-        }
-    }
-};
-const { scalePoints } = PathScaler;
-
-const matrix$1 = draw.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);
-    }
-}
-
-draw.Leaf.prototype.scaleResize = function (scaleX, scaleY = scaleX, noResize) {
-    const data = this;
-    if (noResize) {
-        data.scaleX *= scaleX;
-        data.scaleY *= scaleY;
-    }
-    else {
-        if (scaleX < 0)
-            data.scaleX *= -1, scaleX = -scaleX;
-        if (scaleY < 0)
-            data.scaleY *= -1, scaleY = -scaleY;
-        this.__scaleResize(scaleX, scaleY);
-    }
-};
-draw.Leaf.prototype.__scaleResize = function (scaleX, scaleY) {
-    scaleResize(this, scaleX, scaleY);
-};
-draw.Text.prototype.__scaleResize = function (scaleX, scaleY) {
-    if (this.editConfig && this.editConfig.editSize === 'font-size') {
-        scaleResizeFont(this, scaleX, scaleY);
-    }
-    else {
-        scaleResize(this, scaleX, scaleY);
-    }
-};
-draw.Path.prototype.__scaleResize = function (scaleX, scaleY) {
-    scaleResizePath(this, scaleX, scaleY);
-};
-draw.Line.prototype.__scaleResize = function (scaleX, scaleY) {
-    if (this.pathInputed) {
-        scaleResizePath(this, scaleX, scaleY);
-    }
-    else if (this.points) {
-        scaleResizePoints(this, scaleX, scaleY);
-    }
-    else {
-        const point = this.toPoint;
-        point.x *= scaleX;
-        point.y *= scaleY;
-        this.toPoint = point;
-    }
-};
-draw.Polygon.prototype.__scaleResize = function (scaleX, scaleY) {
-    if (this.pathInputed) {
-        scaleResizePath(this, scaleX, scaleY);
-    }
-    else if (this.points) {
-        scaleResizePoints(this, scaleX, scaleY);
-    }
-    else {
-        scaleResize(this, scaleX, scaleY);
-    }
-};
-draw.Group.prototype.__scaleResize = function (scaleX, scaleY) {
-    scaleResizeGroup(this, scaleX, scaleY);
-};
-draw.Box.prototype.__scaleResize = function (scaleX, scaleY) {
-    if (this.__.__autoSize && this.children.length) {
-        scaleResizeGroup(this, scaleX, scaleY);
-    }
-    else {
-        scaleResize(this, scaleX, scaleY);
-    }
-};
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -805,6 +629,7 @@ class EditBox extends draw.Group {
         this.editor = editor;
         this.visible = false;
         this.create();
+        this.rect.syncEventer = editor;
         this.__listenEvents();
     }
     create() {
@@ -847,9 +672,9 @@ class EditBox extends draw.Group {
         rect.hittable = !single && moveable;
         element.syncEventer = (single && moveable) ? rect : null;
         this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null;
-        this.visible = !element.locked;
     }
     update(bounds) {
+        this.visible = !this.editor.element.locked;
         if (this.view.worldOpacity) {
             const { mergeConfig } = this.editor;
             const { width, height } = bounds;
@@ -866,7 +691,7 @@ class EditBox extends draw.Group {
                 resizeP.set(point);
                 rotateP.set(point);
                 resizeL.set(point);
-                resizeP.visible = resizeL.visible = showPoints && (resizeable || rotateable);
+                resizeP.visible = resizeL.visible = showPoints && !!(resizeable || rotateable);
                 rotateP.visible = showPoints && rotateable && resizeable && !mergeConfig.rotatePoint;
                 if (i % 2) {
                     resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
@@ -1028,6 +853,8 @@ class EditBox extends draw.Group {
             rect.on_(core.DragEvent.START, this.onDragStart, this),
             rect.on_(core.DragEvent.DRAG, editor.onMove, editor),
             rect.on_(core.DragEvent.END, this.onDragEnd, this),
+            rect.on_(core.ZoomEvent.BEFORE_ZOOM, editor.onScale, editor, true),
+            rect.on_(core.RotateEvent.BEFORE_ROTATE, editor.onRotate, editor, true),
             rect.on_(core.PointerEvent.ENTER, () => updateMoveCursor(editor)),
             rect.on_(core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
             rect.on_(core.PointerEvent.LONG_PRESS, this.onLongPress, this)
@@ -1239,6 +1066,27 @@ const EditToolCreator = {
 };
 const { list } = EditToolCreator;
 
+class InnerEditorEvent extends EditorEvent {
+    constructor(type, data) {
+        super(type, data);
+    }
+}
+InnerEditorEvent.BEFORE_OPEN = 'innerEditor.before_open';
+InnerEditorEvent.OPEN = 'innerEditor.open';
+InnerEditorEvent.BEFORE_CLOSE = 'innerEditor.before_close';
+InnerEditorEvent.CLOSE = 'innerEditor.close';
+
+class EditorGroupEvent extends EditorEvent {
+    constructor(type, data) {
+        super(type, data);
+    }
+}
+EditorGroupEvent.GROUP = 'editor.group';
+EditorGroupEvent.BEFORE_UNGROUP = 'editor.before_ungroup';
+EditorGroupEvent.UNGROUP = 'editor.ungroup';
+EditorGroupEvent.OPEN = 'editor.open_group';
+EditorGroupEvent.CLOSE = 'editor.close_group';
+
 class Editor extends draw.Group {
     get list() { return this.leafList.list; }
     get editing() { return !!this.list.length; }
@@ -1322,17 +1170,25 @@ class Editor extends draw.Group {
     }
     onScale(e) {
         const { element } = this;
-        const { direction } = e.current;
-        let { around, lockRatio } = this.mergeConfig;
-        if (e.shiftKey)
-            lockRatio = true;
-        const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey));
-        if (this.editTool.onScaleWithDrag) {
-            data.drag = e;
-            this.scaleWithDrag(data);
+        if (e instanceof core.ZoomEvent) {
+            if (this.mergeConfig.resizeable === 'zoom') {
+                e.stop();
+                this.scaleOf(element.getInnerPoint(e), e.scale, e.scale);
+            }
         }
         else {
-            this.scaleOf(data.origin, data.scaleX, data.scaleY);
+            const { direction } = e.current;
+            let { around, lockRatio } = this.mergeConfig;
+            if (e.shiftKey || element.lockRatio)
+                lockRatio = true;
+            const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey));
+            if (this.editTool.onScaleWithDrag) {
+                data.drag = e;
+                this.scaleWithDrag(data);
+            }
+            else {
+                this.scaleOf(data.origin, data.scaleX, data.scaleY);
+            }
         }
     }
     onRotate(e) {
@@ -1343,7 +1199,12 @@ class Editor extends draw.Group {
         const { element } = this;
         let origin, rotation;
         if (e instanceof core.RotateEvent) {
-            rotation = e.rotation, origin = element.getInnerPoint(e);
+            if (this.mergeConfig.rotateable === 'rotate') {
+                e.stop();
+                rotation = e.rotation, origin = element.getInnerPoint(e);
+            }
+            else
+                return;
         }
         else {
             const last = { x: e.x - e.moveX, y: e.y - e.moveY };
@@ -1378,6 +1239,8 @@ class Editor extends draw.Group {
             element.move(x, y);
     }
     scaleWithDrag(data) {
+        if (!this.mergeConfig.resizeable || this.element.locked)
+            return;
         const { element } = this;
         const worldOrigin = element.getWorldPoint(data.origin);
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin }));
@@ -1385,8 +1248,10 @@ class Editor extends draw.Group {
         this.emitEvent(event);
     }
     scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
+        if (!this.mergeConfig.resizeable || this.element.locked)
+            return;
         const { element } = this;
-        const worldOrigin = element.getWorldPoint(origin);
+        const worldOrigin = element.getWorldPoint(draw.LeafHelper.getInnerOrigin(element, origin));
         let transform;
         if (this.multiple) {
             const oldMatrix = new draw.Matrix(element.worldTransform);
@@ -1398,8 +1263,10 @@ class Editor extends draw.Group {
         this.emitEvent(event);
     }
     rotateOf(origin, rotation) {
+        if (!this.mergeConfig.rotateable || this.element.locked)
+            return;
         const { element } = this;
-        const worldOrigin = element.getWorldPoint(origin);
+        const worldOrigin = element.getWorldPoint(draw.LeafHelper.getInnerOrigin(element, origin));
         let transform;
         if (this.multiple) {
             const oldMatrix = new draw.Matrix(element.worldTransform);
@@ -1411,8 +1278,10 @@ class Editor extends draw.Group {
         this.emitEvent(event);
     }
     skewOf(origin, skewX, skewY = 0, _resize) {
+        if (!this.mergeConfig.skewable || this.element.locked)
+            return;
         const { element } = this;
-        const worldOrigin = element.getWorldPoint(origin);
+        const worldOrigin = element.getWorldPoint(draw.LeafHelper.getInnerOrigin(element, origin));
         let transform;
         if (this.multiple) {
             const oldMatrix = new draw.Matrix(element.worldTransform);
@@ -1426,22 +1295,30 @@ class Editor extends draw.Group {
         this.emitEvent(event);
     }
     group(userGroup) {
-        if (this.multiple)
+        if (this.multiple) {
             this.target = EditorHelper.group(this.list, this.element, userGroup);
+            this.emitGroupEvent(EditorGroupEvent.GROUP, this.target);
+        }
         return this.target;
     }
     ungroup() {
-        if (this.list.length)
-            this.target = EditorHelper.ungroup(this.list);
+        const { list } = this;
+        if (list.length) {
+            list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.BEFORE_UNGROUP, item));
+            this.target = EditorHelper.ungroup(list);
+            list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.UNGROUP, item));
+        }
         return this.list;
     }
     openGroup(group) {
         this.openedGroupList.add(group);
         group.hitChildren = true;
+        this.emitGroupEvent(EditorGroupEvent.OPEN, group);
     }
     closeGroup(group) {
         this.openedGroupList.remove(group);
         group.hitChildren = false;
+        this.emitGroupEvent(EditorGroupEvent.CLOSE, group);
     }
     checkOpenedGroups() {
         const opened = this.openedGroupList;
@@ -1451,28 +1328,58 @@ class Editor extends draw.Group {
                 list = [], opened.forEach(item => this.list.every(leaf => !draw.LeafHelper.hasParent(leaf, item)) && list.push(item));
             list.forEach(item => this.closeGroup(item));
         }
+        if (this.editing && !this.selector.dragging)
+            this.checkDeepSelect();
+    }
+    checkDeepSelect() {
+        let parent, { list } = this;
+        for (let i = 0; i < list.length; i++) {
+            parent = list[i].parent;
+            while (parent && !parent.hitChildren) {
+                this.openGroup(parent);
+                parent = parent.parent;
+            }
+        }
     }
-    openInnerEditor() {
+    emitGroupEvent(type, group) {
+        const event = new EditorGroupEvent(type, { editTarget: group });
+        this.emitEvent(event);
+        group.emitEvent(event);
+    }
+    openInnerEditor(target) {
+        if (target)
+            this.target = target;
         if (this.single) {
-            const tag = this.element.editInner;
-            if (tag) {
-                if (EditToolCreator.list[tag]) {
-                    this.editTool.unload();
-                    this.innerEditing = true;
-                    this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
-                    this.innerEditor.load();
-                }
+            const editTarget = this.element;
+            const tag = editTarget.editInner;
+            if (tag && EditToolCreator.list[tag]) {
+                this.editTool.unload();
+                this.innerEditing = true;
+                this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                this.innerEditor.editTarget = editTarget;
+                this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
+                this.innerEditor.load();
+                this.emitInnerEvent(InnerEditorEvent.OPEN);
             }
         }
     }
     closeInnerEditor() {
         if (this.innerEditing) {
             this.innerEditing = false;
+            this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE);
             this.innerEditor.unload();
+            this.emitInnerEvent(InnerEditorEvent.CLOSE);
             this.editTool.load();
             this.innerEditor = null;
         }
     }
+    emitInnerEvent(type) {
+        const { innerEditor } = this;
+        const { editTarget } = innerEditor;
+        const event = new InnerEditorEvent(type, { editTarget, innerEditor });
+        this.emitEvent(event);
+        editTarget.emitEvent(event);
+    }
     lock() {
         this.list.forEach(leaf => leaf.locked = true);
         this.update();
@@ -1791,13 +1698,14 @@ exports.EditorRotateEvent = EditorRotateEvent;
 exports.EditorScaleEvent = EditorScaleEvent;
 exports.EditorSkewEvent = EditorSkewEvent;
 exports.InnerEditor = InnerEditor;
-exports.PathScaler = PathScaler;
+exports.InnerEditorEvent = InnerEditorEvent;
 exports.SelectArea = SelectArea;
 exports.Stroker = Stroker;
 exports.registerEditTool = registerEditTool;
 exports.registerInnerEditor = registerInnerEditor;
-exports.scaleResize = scaleResize;
-exports.scaleResizeFont = scaleResizeFont;
-exports.scaleResizeGroup = scaleResizeGroup;
-exports.scaleResizePath = scaleResizePath;
-exports.scaleResizePoints = scaleResizePoints;
+Object.keys(resize).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return resize[k]; }
+    });
+});