@leafer-in/editor 1.5.0 → 1.5.2

package/dist/editor.esm.js

@@ -43,7 +43,9 @@ class EditorEvent extends Event {
             Object.assign(this, data);
     }
 }
+EditorEvent.BEFORE_SELECT = 'editor.before_select';
 EditorEvent.SELECT = 'editor.select';
+EditorEvent.BEFORE_HOVER = 'editor.before_hover';
 EditorEvent.HOVER = 'editor.hover';
 
 class EditorMoveEvent extends EditorEvent {
@@ -85,8 +87,12 @@ function targetAttr(fn) {
             get() { return this[privateKey]; },
             set(value) {
                 const old = this[privateKey];
-                if (old !== value)
+                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 }));
                     this[privateKey] = value, fn(this, old);
+                }
             }
         });
     };
@@ -385,7 +391,8 @@ class EditSelect extends Group {
         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 {
@@ -403,7 +410,8 @@ class EditSelect extends Group {
         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;
@@ -578,21 +586,25 @@ const EditDataHelper = {
         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;
@@ -681,7 +693,7 @@ function updateCursor(editor, e) {
     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(MathHelper.formatRotation(rotation, true) / 2) * 2;
@@ -903,6 +915,8 @@ class EditBox extends Group {
             editor.onRotate(e);
         if (pointType.includes('resize'))
             editor.onScale(e);
+        if (pointType === 'skew')
+            editor.onSkew(e);
         updateCursor(editor, e);
     }
     onArrow(e) {
@@ -1084,6 +1098,7 @@ const config = {
     hover: true,
     select: 'press',
     openInner: 'double',
+    multipleSelect: true,
     boxSelect: true,
     moveable: true,
     resizeable: true,
@@ -1175,13 +1190,16 @@ const EditorHelper = {
         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);
@@ -1486,13 +1504,22 @@ class Editor extends Group {
         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);
@@ -1501,8 +1528,14 @@ class Editor extends Group {
     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);
@@ -1511,10 +1544,17 @@ class Editor extends Group {
     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);
@@ -1535,10 +1575,17 @@ class Editor extends Group {
     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);
@@ -1547,10 +1594,17 @@ class Editor extends Group {
     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);