@leafer-in/editor 1.5.1 → 1.5.3

package/dist/editor.js

@@ -88,9 +88,24 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 set(value) {
                     const old = this[privateKey];
                     if (old !== value) {
-                        const type = key === 'target' ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
-                        if (this.hasEvent(type))
-                            this.emitEvent(new EditorEvent(type, { editor: this, value: value, oldValue: old }));
+                        if (this.config) {
+                            const isSelect = key === 'target';
+                            if (isSelect) {
+                                if (value instanceof Array && value.length > 1 && value[0].locked)
+                                    value.splice(0, 1);
+                                const { beforeSelect } = this.config;
+                                if (beforeSelect) {
+                                    const check = beforeSelect({ target: value });
+                                    if (typeof check === 'object')
+                                        value = check;
+                                    else if (check === false)
+                                        return;
+                                }
+                            }
+                            const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
+                            if (this.hasEvent(type))
+                                this.emitEvent(new EditorEvent(type, { editor: this, value: value, oldValue: old }));
+                        }
                         this[privateKey] = value, fn(this, old);
                     }
                 }
@@ -391,7 +406,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             return target.leafer !== this.editor.leafer;
         }
         allowDrag(e) {
-            if (this.running && (this.editor.mergeConfig.boxSelect) && !e.target.draggable) {
+            const { boxSelect, multipleSelect } = this.editor.mergeConfig;
+            if (this.running && (multipleSelect && boxSelect) && !e.target.draggable) {
                 return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
             }
             else {
@@ -409,7 +425,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             return this.isMultipleSelect(e) ? this.findDeepOne(e) : findOne(e.path);
         }
         isMultipleSelect(e) {
-            return e.shiftKey || this.editor.mergeConfig.continuousSelect;
+            const { multipleSelect, continuousSelect } = this.editor.mergeConfig;
+            return multipleSelect && (e.shiftKey || continuousSelect);
         }
         __listenEvents() {
             const { editor } = this;
@@ -584,21 +601,25 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             let last;
             switch (direction) {
                 case top:
+                case topLeft:
                     last = { x: 0.5, y: 0 };
                     align = 'bottom';
                     skewX = 1;
                     break;
                 case bottom:
+                case bottomRight:
                     last = { x: 0.5, y: 1 };
                     align = 'top';
                     skewX = 1;
                     break;
                 case left$1:
+                case bottomLeft:
                     last = { x: 0, y: 0.5 };
                     align = 'right';
                     skewY = 1;
                     break;
                 case right$1:
+                case topRight:
                     last = { x: 1, y: 0.5 };
                     align = 'left';
                     skewY = 1;
@@ -687,7 +708,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         let showResize = pointType.includes('resize');
         if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
             showResize = false;
-        const showSkew = skewable && !showResize && point.name === 'resize-line';
+        const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew');
         const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor);
         rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45;
         rotation = Math.round(draw.MathHelper.formatRotation(rotation, true) / 2) * 2;
@@ -909,6 +930,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 editor.onRotate(e);
             if (pointType.includes('resize'))
                 editor.onScale(e);
+            if (pointType === 'skew')
+                editor.onSkew(e);
             updateCursor(editor, e);
         }
         onArrow(e) {
@@ -1090,6 +1113,7 @@ ${filterStyle}
         hover: true,
         select: 'press',
         openInner: 'double',
+        multipleSelect: true,
         boxSelect: true,
         moveable: true,
         resizeable: true,
@@ -1116,11 +1140,7 @@ ${filterStyle}
     function onTarget(editor, oldValue) {
         const { target } = editor;
         if (target) {
-            const { list } = editor.leafList = target instanceof draw.LeafList ? target : new draw.LeafList(target instanceof Array ? target : target);
-            if (!list.every(checkEditable)) {
-                editor.target = list.filter(checkEditable);
-                return;
-            }
+            editor.leafList = target instanceof draw.LeafList ? target : new draw.LeafList(target);
             if (editor.multiple)
                 simulate(editor);
         }
@@ -1147,9 +1167,6 @@ ${filterStyle}
     function onHover(editor, oldValue) {
         editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
     }
-    function checkEditable(item) {
-        return item.editable && !item.locked;
-    }
 
     const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
     const reverseOrder = (a, b) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a);
@@ -1181,13 +1198,16 @@ ${filterStyle}
             const ungroupList = [];
             app.lockLayout();
             list.forEach(leaf => {
-                if (leaf.isBranch && !leaf.isBranchLeaf) {
+                if (leaf.isBranch) {
                     const { parent, children } = leaf;
                     while (children.length) {
                         ungroupList.push(children[0]);
                         children[0].dropTo(parent, parent.children.indexOf(leaf));
                     }
-                    leaf.remove();
+                    if (leaf.isBranchLeaf)
+                        ungroupList.push(leaf);
+                    else
+                        leaf.remove();
                 }
                 else {
                     ungroupList.push(leaf);
@@ -1492,13 +1512,22 @@ ${filterStyle}
             this.skewOf(origin, skewX, skewY);
         }
         move(x, y = 0) {
-            const { element } = this;
             if (!this.checkTransform('moveable'))
                 return;
-            const world = element.getWorldPointByLocal(typeof x === 'object' ? Object.assign({}, x) : { x, y }, null, true);
+            if (typeof x === 'object')
+                y = x.y, x = x.x;
+            const { element: target } = this, { beforeMove } = this.mergeConfig;
+            if (beforeMove) {
+                const check = beforeMove({ target, x, y });
+                if (typeof check === 'object')
+                    x = check.x, y = check.y;
+                else if (check === false)
+                    return;
+            }
+            const world = target.getWorldPointByLocal({ x, y }, null, true);
             if (this.multiple)
-                element.safeChange(() => element.move(x, y));
-            const data = { target: element, editor: this, moveX: world.x, moveY: world.y };
+                target.safeChange(() => target.move(x, y));
+            const data = { target, editor: this, moveX: world.x, moveY: world.y };
             this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data));
             const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data);
             this.editTool.onMove(event);
@@ -1507,8 +1536,14 @@ ${filterStyle}
         scaleWithDrag(data) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element } = this;
-            data = Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) });
+            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            if (beforeScale) {
+                const { origin, scaleX, scaleY, drag } = data;
+                const check = beforeScale({ target, drag, origin, scaleX, scaleY });
+                if (check === false)
+                    return;
+            }
+            data = Object.assign(Object.assign({}, data), { target, editor: this, worldOrigin: target.getWorldPoint(data.origin) });
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScaleWithDrag(event);
@@ -1517,10 +1552,17 @@ ${filterStyle}
         scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element } = this;
+            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            if (beforeScale) {
+                const check = beforeScale({ target, origin, scaleX, scaleY });
+                if (typeof check === 'object')
+                    scaleX = check.scaleX, scaleY = check.scaleY;
+                else if (check === false)
+                    return;
+            }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.scaleOf(origin, scaleX, scaleY)));
-            const data = { target: element, editor: this, worldOrigin, scaleX, scaleY, transform };
+            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
+            const data = { target, editor: this, worldOrigin, scaleX, scaleY, transform };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScale(event);
@@ -1541,10 +1583,17 @@ ${filterStyle}
         rotateOf(origin, rotation) {
             if (!this.checkTransform('rotateable'))
                 return;
-            const { element } = this;
+            const { element: target } = this, { beforeRotate } = this.mergeConfig;
+            if (beforeRotate) {
+                const check = beforeRotate({ target, origin, rotation });
+                if (typeof check === 'number')
+                    rotation = check;
+                else if (check === false)
+                    return;
+            }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.rotateOf(origin, rotation)));
-            const data = { target: element, editor: this, worldOrigin, rotation, transform };
+            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
+            const data = { target, editor: this, worldOrigin, rotation, transform };
             this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
             const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
             this.editTool.onRotate(event);
@@ -1553,10 +1602,17 @@ ${filterStyle}
         skewOf(origin, skewX, skewY = 0, _resize) {
             if (!this.checkTransform('skewable'))
                 return;
-            const { element } = this;
+            const { element: target } = this, { beforeSkew } = this.mergeConfig;
+            if (beforeSkew) {
+                const check = beforeSkew({ target, origin, skewX, skewY });
+                if (typeof check === 'object')
+                    skewX = check.skewX, skewY = check.skewY;
+                else if (check === false)
+                    return;
+            }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.skewOf(origin, skewX, skewY)));
-            const data = { target: element, editor: this, worldOrigin, skewX, skewY, transform };
+            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
+            const data = { target, editor: this, worldOrigin, skewX, skewY, transform };
             this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
             const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
             this.editTool.onSkew(event);