@leafer-in/editor 2.2.0 → 2.2.2

package/dist/editor.cjs

@@ -44,6 +44,69 @@ EditorEvent.BEFORE_HOVER = "editor.before_hover";
 
 EditorEvent.HOVER = "editor.hover";
 
+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);
+
+const EditorHelper = {
+    group(list, element, userGroup) {
+        list.sort(reverseOrder);
+        const {app: app, parent: parent} = list[0];
+        let group;
+        if (userGroup && userGroup.add) {
+            group = userGroup;
+        } else {
+            group = new draw.Group(userGroup);
+        }
+        parent.addAt(group, parent.children.indexOf(list[0]));
+        list.sort(order);
+        const matrx = new draw.Matrix(element.worldTransform);
+        matrx.divideParent(parent.scrollWorldTransform);
+        group.setTransform(matrx);
+        group.editable = true;
+        group.hitChildren = false;
+        app.lockLayout();
+        list.forEach(child => child.dropTo(group));
+        app.unlockLayout();
+        return group;
+    },
+    ungroup(list) {
+        const {app: app} = list[0];
+        const ungroupList = [];
+        app.lockLayout();
+        list.forEach(leaf => {
+            if (leaf.isBranch) {
+                const {parent: parent, children: children} = leaf;
+                while (children.length) {
+                    ungroupList.push(children[0]);
+                    children[0].dropTo(parent, parent.children.indexOf(leaf));
+                }
+                if (leaf.isBranchLeaf) ungroupList.push(leaf); else leaf.remove();
+            } else {
+                ungroupList.push(leaf);
+            }
+        });
+        app.unlockLayout();
+        return ungroupList;
+    },
+    toTop(list) {
+        list.sort(order);
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.add(leaf);
+        });
+    },
+    toBottom(list) {
+        list.sort(reverseOrder);
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.addAt(leaf, 0);
+        });
+    },
+    mergeMaskConfig(_mergeConfig, _editor) {},
+    getSiblingMaskElements(_editor) {
+        return undefined;
+    }
+};
+
 function targetAttr(fn) {
     return (target, key) => {
         const privateKey = "_" + key;
@@ -92,6 +155,7 @@ function mergeConfigAttr() {
             get() {
                 const {config: config, element: element, dragPoint: dragPoint, editBox: editBox, editTool: editTool, innerEditor: innerEditor, app: app} = this, mergeConfig = Object.assign({}, config);
                 if (innerEditor) innerEditor.editConfig && Object.assign(mergeConfig, innerEditor.editConfig); else if (editTool) editTool.editConfig && Object.assign(mergeConfig, editTool.editConfig);
+                if (element && element.mask) EditorHelper.mergeMaskConfig(mergeConfig, this);
                 if (element && element.editConfig) {
                     let {editConfig: editConfig} = element;
                     if (editConfig.hover || editConfig.hoverStyle || editConfig.hoverPathType) {
@@ -118,7 +182,28 @@ function mergeConfigAttr() {
     };
 }
 
-const {abs: abs$1} = Math;
+function editToolMergeConfigAttr() {
+    return (target, key) => {
+        draw.defineKey(target, key, {
+            get() {
+                const t = this;
+                const {config: config, userConfig: userConfig, configKeepKeys: configKeepKeys} = t, mergedConfig = config ? draw.DataHelper.clone(config) : {};
+                if (configKeepKeys) {
+                    for (let key in userConfig) {
+                        if (!configKeepKeys.includes(key)) mergedConfig[key] = userConfig[key];
+                    }
+                }
+                if (t.preMergedConfig) t.preMergedConfig(mergedConfig);
+                if (configKeepKeys) configKeepKeys.forEach(key => {
+                    userConfig[key] && Object.assign(mergedConfig[key], userConfig[key]);
+                });
+                return t.mergedConfig = mergedConfig;
+            }
+        });
+    };
+}
+
+const {abs: abs$2} = Math;
 
 const {copy: copy$1} = draw.MatrixHelper;
 
@@ -161,7 +246,7 @@ class Stroker extends draw.UI {
                 leaf = list[i];
                 const {worldTransform: worldTransform, worldRenderBounds: worldRenderBounds} = leaf;
                 if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
-                    const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
+                    const aScaleX = abs$2(worldTransform.scaleX), aScaleY = abs$2(worldTransform.scaleY);
                     copy$1(matrix, worldTransform);
                     matrix.half = strokeWidth % 2;
                     canvas.setWorld(matrix, options.matrix);
@@ -316,7 +401,11 @@ class EditSelect extends draw.Group {
     }
     onSelect() {
         if (this.running) {
-            this.targetStroker.setTarget(this.editor.list);
+            const {editor: editor} = this;
+            let {list: list} = editor;
+            const maskList = EditorHelper.getSiblingMaskElements(editor);
+            if (maskList) list = maskList.concat(list);
+            this.targetStroker.setTarget(list);
             this.hoverStroker.target = null;
         }
     }
@@ -488,13 +577,13 @@ class EditSelect extends draw.Group {
 
 const {topLeft: topLeft, top: top, topRight: topRight, right: right$1, bottomRight: bottomRight, bottom: bottom, bottomLeft: bottomLeft, left: left$1} = draw.Direction9;
 
-const {toPoint: toPoint} = draw.AroundHelper, {within: within, sign: sign} = draw.MathHelper, {abs: abs} = Math;
+const {toPoint: toPoint} = draw.AroundHelper, {within: within, sign: sign} = draw.MathHelper, {abs: abs$1} = Math;
 
 const EditDataHelper = {
     getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode) {
         let align, origin = {}, scaleX = 1, scaleY = 1, lockScale;
         const {widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldTransform: worldTransform, boxBounds: boxBounds} = target;
-        const {width: width, height: height} = startBounds, worldScaleX = abs(worldTransform.scaleX), worldScaleY = abs(worldTransform.scaleY);
+        const {width: width, height: height} = startBounds, worldScaleX = abs$1(worldTransform.scaleX), worldScaleY = abs$1(worldTransform.scaleY);
         const originChangedScaleX = target.scaleX / startBounds.scaleX;
         const originChangedScaleY = target.scaleY / startBounds.scaleY;
         const signX = sign(originChangedScaleX);
@@ -574,7 +663,7 @@ const EditDataHelper = {
                         break;
 
                       default:
-                        lockScale = Math.sqrt(abs(scaleX * scaleY));
+                        lockScale = Math.sqrt(abs$1(scaleX * scaleY));
                         scaleX = sign(scaleX) * lockScale;
                         scaleY = sign(scaleY) * lockScale;
                     }
@@ -608,10 +697,10 @@ const EditDataHelper = {
         }
         const minWidth = 1, minHeight = 1;
         const worldWidth = worldScaleX * boxBounds.width, worldHeight = worldScaleY * boxBounds.height;
-        if (useScaleX && abs(scaleX * worldWidth) < minWidth) scaleX = sign(scaleX) * minWidth / worldWidth;
-        if (useScaleY && abs(scaleY * worldHeight) < minHeight) scaleY = sign(scaleY) * minHeight / worldHeight;
+        if (useScaleX && abs$1(scaleX * worldWidth) < minWidth) scaleX = sign(scaleX) * minWidth / worldWidth;
+        if (useScaleY && abs$1(scaleY * worldHeight) < minHeight) scaleY = sign(scaleY) * minHeight / worldHeight;
         if (lockRatio && scaleX !== scaleY) {
-            lockScale = Math.min(abs(scaleX), abs(scaleY));
+            lockScale = Math.min(abs$1(scaleX), abs$1(scaleY));
             scaleX = sign(scaleX) * lockScale;
             scaleY = sign(scaleY) * lockScale;
         }
@@ -833,6 +922,8 @@ class EditPoint extends draw.Box {
 
 const fourDirection = [ "top", "right", "bottom", "left" ], editConfig = undefined;
 
+const debug$1 = draw.Debug.get("EditBox");
+
 class EditBox extends draw.Group {
     get mergeConfig() {
         const {config: config} = this, {mergeConfig: mergeConfig, editBox: editBox} = this.editor;
@@ -903,10 +994,12 @@ class EditBox extends draw.Group {
         this.resizeLines = [];
         this.dragStartData = {};
         this.__eventIds = [];
+        this.widgets = [];
         this.editor = editor;
         this.visible = false;
         this.create();
         this.__listenEvents();
+        this.createWidgets();
     }
     create() {
         let rotatePoint, resizeLine, resizePoint;
@@ -942,7 +1035,7 @@ class EditBox extends draw.Group {
         }
         this.listenPointEvents(circle, "rotate", 2);
         this.listenPointEvents(rect, "move", 8);
-        view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
+        view.add([ ...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints ]);
         this.add(view);
     }
     load() {
@@ -955,6 +1048,7 @@ class EditBox extends draw.Group {
         let resizeP;
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i];
+            if (resizeP.children.length) resizeP.clear();
             resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
             resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
             if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
@@ -980,6 +1074,7 @@ class EditBox extends draw.Group {
         }
         if (single) draw.DataHelper.stintSet(target.__world, "ignorePixelSnap", ignorePixelSnap);
         updateMoveCursor(this);
+        this.loadWidgets();
     }
     update() {
         const {editor: editor} = this;
@@ -1000,8 +1095,10 @@ class EditBox extends draw.Group {
             width: width,
             height: height
         });
+        this.updateWidgets();
     }
     unload() {
+        this.unloadWidgets();
         this.visible = false;
         if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
     }
@@ -1014,6 +1111,7 @@ class EditBox extends draw.Group {
             strokeBoxSpread && draw.BoundsHelper.spread(bounds, [ strokeBoxSpread * Math.abs(scaleY), strokeBoxSpread * Math.abs(scaleX) ]);
         }
         if (spread) draw.BoundsHelper.spread(bounds, spread);
+        this.rectBounds = bounds;
         editMask.visible = mask ? true : 0;
         if (!draw.isUndefined(dimOthers) || !draw.isUndefined(bright)) {
             editor.setDimOthers(dimOthers);
@@ -1025,7 +1123,7 @@ class EditBox extends draw.Group {
         if (this.view.worldOpacity) {
             const {width: width, height: height} = bounds;
             const smallSize = draw.isNumber(hideOnSmall) ? hideOnSmall : 10;
-            const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
+            const showPoints = this.showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
             let point = {}, rotateP, resizeP, resizeL;
             for (let i = 0; i < 8; i++) {
                 draw.AroundHelper.toPoint(draw.AroundHelper.directionData[i], bounds, point);
@@ -1319,13 +1417,38 @@ class EditBox extends draw.Group {
     __removeListenEvents() {
         this.off_(this.__eventIds);
     }
+    static registerWidget(Widget) {
+        const {tag: tag} = Widget.prototype;
+        EditBox.WidgetList[tag] && debug$1.repeat(tag);
+        EditBox.WidgetList[tag] = Widget;
+    }
+    createWidgets() {
+        Object.values(EditBox.WidgetList).forEach(item => {
+            this.widgets.push(new item(this));
+        });
+    }
+    loadWidgets() {
+        this.widgets.forEach(item => item.onLoad());
+    }
+    updateWidgets() {
+        this.widgets.forEach(item => item.onUpdate());
+    }
+    unloadWidgets() {
+        this.widgets.forEach(item => item.onUnload());
+    }
+    destroyWidgets() {
+        this.widgets.forEach(item => item.onDestroy());
+    }
     destroy() {
         this.editor = null;
         this.__removeListenEvents();
+        this.destroyWidgets();
         super.destroy();
     }
 }
 
+EditBox.WidgetList = {};
+
 const bigBounds = {
     x: 0,
     y: 0,
@@ -1472,65 +1595,6 @@ function onHover(editor, oldValue) {
     }));
 }
 
-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);
-
-const EditorHelper = {
-    group(list, element, userGroup) {
-        list.sort(reverseOrder);
-        const {app: app, parent: parent} = list[0];
-        let group;
-        if (userGroup && userGroup.add) {
-            group = userGroup;
-        } else {
-            group = new draw.Group(userGroup);
-        }
-        parent.addAt(group, parent.children.indexOf(list[0]));
-        list.sort(order);
-        const matrx = new draw.Matrix(element.worldTransform);
-        matrx.divideParent(parent.scrollWorldTransform);
-        group.setTransform(matrx);
-        group.editable = true;
-        group.hitChildren = false;
-        app.lockLayout();
-        list.forEach(child => child.dropTo(group));
-        app.unlockLayout();
-        return group;
-    },
-    ungroup(list) {
-        const {app: app} = list[0];
-        const ungroupList = [];
-        app.lockLayout();
-        list.forEach(leaf => {
-            if (leaf.isBranch) {
-                const {parent: parent, children: children} = leaf;
-                while (children.length) {
-                    ungroupList.push(children[0]);
-                    children[0].dropTo(parent, parent.children.indexOf(leaf));
-                }
-                if (leaf.isBranchLeaf) ungroupList.push(leaf); else leaf.remove();
-            } else {
-                ungroupList.push(leaf);
-            }
-        });
-        app.unlockLayout();
-        return ungroupList;
-    },
-    toTop(list) {
-        list.sort(order);
-        list.forEach(leaf => {
-            if (leaf.parent) leaf.parent.add(leaf);
-        });
-    },
-    toBottom(list) {
-        list.sort(reverseOrder);
-        list.forEach(leaf => {
-            if (leaf.parent) leaf.parent.addAt(leaf, 0);
-        });
-    }
-};
-
 const debug = draw.Debug.get("EditToolCreator");
 
 function registerEditTool() {
@@ -2306,6 +2370,8 @@ __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", voi
 
 exports.Editor = __decorate([ core.useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], exports.Editor);
 
+const {abs: abs} = Math, {scale: scale} = draw.PointHelper;
+
 class InnerEditor {
     static registerInnerEditor() {
         EditToolCreator.register(this);
@@ -2316,6 +2382,9 @@ class InnerEditor {
     get mode() {
         return "focus";
     }
+    get userConfig() {
+        return this.editBox.mergeConfig[this.tag] || {};
+    }
     get editBox() {
         return this._editBox || this.editor.editBox;
     }
@@ -2327,6 +2396,22 @@ class InnerEditor {
         this.editor = editor;
         this.create();
     }
+    getEditBoxPoint(editTargetPoint, change) {
+        const point = change ? editTargetPoint : {
+            x: editTargetPoint.x,
+            y: editTargetPoint.y
+        }, {scaleX: scaleX, scaleY: scaleY} = this.editTarget.worldTransform;
+        scale(point, abs(scaleX), abs(scaleY));
+        return point;
+    }
+    getEditTargetPoint(editBoxPoint, change) {
+        const point = change ? editBoxPoint : {
+            x: editBoxPoint.x,
+            y: editBoxPoint.y
+        }, {scaleX: scaleX, scaleY: scaleY} = this.editTarget.worldTransform;
+        scale(point, Math.abs(1 / scaleX), abs(1 / scaleY));
+        return point;
+    }
     onCreate() {}
     create() {
         this.view = new draw.Group;
@@ -2614,6 +2699,8 @@ exports.Stroker = Stroker;
 
 exports.TransformTool = TransformTool;
 
+exports.editToolMergeConfigAttr = editToolMergeConfigAttr;
+
 exports.registerEditTool = registerEditTool;
 
 exports.registerInnerEditor = registerInnerEditor;