@leafer-in/editor 1.5.2 → 1.6.0

package/dist/editor.esm.js

@@ -1,4 +1,4 @@
-import { Event, defineKey, MatrixHelper, BoundsHelper, LeafBoundsHelper, getMatrixData, getBoundsData, UI, Paint, Group, Rect, Bounds, LeafList, Direction9, AroundHelper, MathHelper, PointHelper, Box, Text, Matrix, Debug, LeafHelper, PropertyEvent, isNull, DataHelper, RenderEvent, getPointData, Plugin as Plugin$1, Creator, dataType } from '@leafer-ui/draw';
+import { Event, defineKey, isNull, MatrixHelper, BoundsHelper, LeafBoundsHelper, getMatrixData, getBoundsData, UI, Paint, Group, Rect, Bounds, LeafList, Direction9, AroundHelper, MathHelper, PointHelper, Box, ResizeEvent, Text, Matrix, Debug, LeafHelper, PropertyEvent, DataHelper, RenderEvent, getPointData, Plugin as Plugin$1, Creator, dataType } from '@leafer-ui/draw';
 import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, Plugin, RotateEvent, KeyEvent } from '@leafer-ui/core';
 import '@leafer-in/resize';
 
@@ -88,15 +88,52 @@ function targetAttr(fn) {
             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);
                 }
             }
         });
     };
 }
+function mergeConfigAttr() {
+    return (target, key) => {
+        defineKey(target, key, {
+            get() {
+                const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
+                if (element && element.editConfig)
+                    Object.assign(mergeConfig, element.editConfig);
+                if (dragPoint) {
+                    if (dragPoint.editConfig)
+                        Object.assign(mergeConfig, dragPoint.editConfig);
+                    if (mergeConfig.editSize === 'font-size')
+                        mergeConfig.lockRatio = true;
+                    if (dragPoint.pointType === 'resize-rotate') {
+                        mergeConfig.around || (mergeConfig.around = 'center');
+                        isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
+                    }
+                }
+                return this.mergedConfig = mergeConfig;
+            }
+        });
+    };
+}
 
 const { abs } = Math;
 const { copy: copy$1, scale } = MatrixHelper;
@@ -108,6 +145,7 @@ class Stroker extends UI {
     constructor() {
         super();
         this.list = [];
+        this.visible = 0;
         this.hittable = false;
         this.strokeAlign = 'center';
     }
@@ -121,10 +159,10 @@ class Stroker extends UI {
         if (list.length) {
             setListWithFn(bounds$1, list, worldBounds);
             this.set(bounds$1);
+            this.visible = true;
         }
-        else {
-            this.width = this.height = 1;
-        }
+        else
+            this.visible = 0;
     }
     __draw(canvas, options) {
         const { list } = this;
@@ -136,8 +174,9 @@ class Stroker extends UI {
                 const { worldTransform, worldRenderBounds } = leaf;
                 if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
                     const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
+                    copy$1(matrix, worldTransform);
+                    matrix.half = strokeWidth % 2;
                     if (aScaleX !== aScaleY) {
-                        copy$1(matrix, worldTransform);
                         scale(matrix, 1 / aScaleX, 1 / aScaleY);
                         canvas.setWorld(matrix, options.matrix);
                         canvas.beginPath();
@@ -146,7 +185,7 @@ class Stroker extends UI {
                         canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
                     }
                     else {
-                        canvas.setWorld(worldTransform, options.matrix);
+                        canvas.setWorld(matrix, options.matrix);
                         canvas.beginPath();
                         if (leaf.__.__useArrow)
                             leaf.__drawPath(canvas);
@@ -181,7 +220,8 @@ class SelectArea extends Group {
         super(data);
         this.strokeArea = new Rect({ strokeAlign: 'center' });
         this.fillArea = new Rect();
-        this.visible = this.hittable = false;
+        this.visible = 0;
+        this.hittable = false;
         this.addMany(this.fillArea, this.strokeArea);
     }
     setStyle(style, userStyle) {
@@ -378,7 +418,7 @@ class EditSelect extends Group {
         if (e.multiTouch)
             return;
         if (this.dragging)
-            this.originList = null, this.selectArea.visible = false;
+            this.originList = null, this.selectArea.visible = 0;
     }
     onAutoMove(e) {
         if (this.dragging) {
@@ -526,8 +566,11 @@ const EditDataHelper = {
                 scaleY = scaleY < 0 ? -scale : scale;
             }
         }
-        scaleX /= changedScaleX;
-        scaleY /= changedScaleY;
+        const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1;
+        if (useScaleX)
+            scaleX /= changedScaleX;
+        if (useScaleY)
+            scaleY /= changedScaleY;
         if (!flipable) {
             const { worldTransform } = element;
             if (scaleX < 0)
@@ -542,22 +585,27 @@ const EditDataHelper = {
             localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
             if (!BoundsHelper.includes(allowBounds, localBounds)) {
                 const realBounds = localBounds.getIntersect(allowBounds);
-                scaleX *= realBounds.width / localBounds.width;
-                scaleY *= realBounds.height / localBounds.height;
+                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
+                if (useScaleX)
+                    scaleX *= fitScaleX;
+                if (useScaleY)
+                    scaleY *= fitScaleY;
             }
         }
-        if (widthRange) {
+        if (useScaleX && widthRange) {
             const nowWidth = boxBounds.width * element.scaleX;
             scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
         }
-        if (heightRange) {
+        if (useScaleY && heightRange) {
             const nowHeight = boxBounds.height * element.scaleY;
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
         }
-        if (Math.abs(scaleX * worldBoxBounds.width) < 1)
+        if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
             scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
-        if (Math.abs(scaleY * worldBoxBounds.height) < 1)
+        if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1)
             scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
+        if (lockRatio && scaleX !== scaleY)
+            scaleY = scaleX = Math.min(scaleX, scaleY);
         return { origin, scaleX, scaleY, direction, lockRatio, around };
     },
     getRotateData(bounds, direction, current, last, around) {
@@ -728,7 +776,7 @@ class EditBox extends Group {
         this.view = new Group();
         this.rect = new Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 });
         this.circle = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 });
-        this.buttons = new Group({ around: 'center', hitSelf: false });
+        this.buttons = new Group({ around: 'center', hitSelf: false, visible: 0 });
         this.resizePoints = [];
         this.rotatePoints = [];
         this.resizeLines = [];
@@ -783,12 +831,13 @@ class EditBox extends Group {
         }
     }
     update(bounds) {
-        const { mergeConfig, element, multiple } = this.editor;
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig;
+        const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this;
+        const { mergeConfig, element, multiple, editMask } = editor;
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
         this.visible = !element.locked;
+        editMask.visible = mask ? true : 0;
         if (this.view.worldOpacity) {
             const { width, height } = bounds;
-            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
             const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
             let point = {}, rotateP, resizeP, resizeL;
@@ -823,10 +872,12 @@ class EditBox extends Group {
             if (rect.path)
                 rect.path = null;
             rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
-            buttons.visible = showPoints && buttons.children.length > 0;
+            buttons.visible = showPoints && buttons.children.length > 0 || 0;
             if (buttons.visible)
                 this.layoutButtons(mergeConfig);
         }
+        else
+            rect.set(bounds);
     }
     layoutCircle(config) {
         const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
@@ -889,7 +940,7 @@ class EditBox extends Group {
     }
     onDragStart(e) {
         this.dragging = true;
-        const point = this.dragPoint = e.current;
+        const point = this.dragPoint = e.current, { pointType } = point;
         const { editor, dragStartData } = this, { element } = editor;
         if (point.name === 'rect') {
             this.moving = true;
@@ -900,43 +951,53 @@ class EditBox extends Group {
         dragStartData.point = { x: element.x, y: element.y };
         dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
         dragStartData.rotation = element.rotation;
+        if (pointType && pointType.includes('resize'))
+            ResizeEvent.resizingKeys = editor.leafList.keys;
     }
     onDragEnd(e) {
         this.dragging = false;
         this.dragPoint = null;
         this.moving = false;
-        if (e.current.name === 'rect')
+        const { name, pointType } = e.current;
+        if (name === 'rect')
             this.editor.opacity = 1;
+        if (pointType && pointType.includes('resize'))
+            ResizeEvent.resizingKeys = null;
     }
     onDrag(e) {
         const { editor } = this;
         const { pointType } = this.enterPoint = e.current;
-        if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable)
+        if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
             editor.onRotate(e);
-        if (pointType.includes('resize'))
+            if (pointType === 'resize-rotate')
+                editor.onScale(e);
+        }
+        else if (pointType === 'resize')
             editor.onScale(e);
         if (pointType === 'skew')
             editor.onSkew(e);
         updateCursor(editor, e);
     }
     onArrow(e) {
-        if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
-            const move = { x: 0, y: 0 };
+        const { editor } = this;
+        if (editor.editing && editor.mergeConfig.keyEvent) {
+            let x = 0, y = 0;
             const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
                 case 'ArrowDown':
-                    move.y = distance;
+                    y = distance;
                     break;
                 case 'ArrowUp':
-                    move.y = -distance;
+                    y = -distance;
                     break;
                 case 'ArrowLeft':
-                    move.x = -distance;
+                    x = -distance;
                     break;
                 case 'ArrowRight':
-                    move.x = distance;
+                    x = distance;
             }
-            this.editor.move(move);
+            if (x || y)
+                editor.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -1002,22 +1063,32 @@ class EditBox extends Group {
     }
 }
 
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class EditMask extends UI {
     constructor(editor) {
         super();
         this.editor = editor;
         this.hittable = false;
+        this.visible = 0;
+    }
+    __updateWorldBounds() {
+        Object.assign(this.__local, bigBounds);
+        Object.assign(this.__world, bigBounds);
     }
     __draw(canvas, options) {
-        const { editor } = this;
-        const { mask } = editor.mergeConfig;
-        if (mask && editor.list.length) {
-            const { rect } = editor.editBox;
-            const { width, height } = rect.__;
-            canvas.resetTransform();
+        const { editor } = this, { mask } = editor.mergedConfig;
+        if (mask && editor.editing) {
             canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
-            canvas.setWorld(rect.__world, options.matrix);
-            canvas.clearRect(0, 0, width, height);
+            if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
+                return;
+            canvas.saveBlendMode('destination-out');
+            editor.list.forEach(item => {
+                item.__renderShape(canvas, options);
+                const { __box, parent } = item;
+                if ((item = __box) || ((item = parent) && parent.textBox))
+                    item.__renderShape(canvas, options);
+            });
+            canvas.restoreBlendMode();
         }
     }
     destroy() {
@@ -1125,11 +1196,7 @@ function simulate(editor) {
 function onTarget(editor, oldValue) {
     const { target } = editor;
     if (target) {
-        const { list } = editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target);
-        if (!list.every(checkEditable)) {
-            editor.target = list.filter(checkEditable);
-            return;
-        }
+        editor.leafList = target instanceof LeafList ? target : new LeafList(target);
         if (editor.multiple)
             simulate(editor);
     }
@@ -1156,9 +1223,6 @@ function onTarget(editor, oldValue) {
 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);
@@ -1327,22 +1391,6 @@ class SimulateElement extends Rect {
 }
 
 class Editor extends Group {
-    get mergeConfig() {
-        const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
-        if (element && element.editConfig)
-            Object.assign(mergeConfig, element.editConfig);
-        if (dragPoint) {
-            if (dragPoint.editConfig)
-                Object.assign(mergeConfig, dragPoint.editConfig);
-            if (mergeConfig.editSize === 'font-size')
-                mergeConfig.lockRatio = true;
-            if (dragPoint.pointType === 'resize-rotate') {
-                mergeConfig.around || (mergeConfig.around = 'center');
-                isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
-            }
-        }
-        return mergeConfig;
-    }
     get list() { return this.leafList.list; }
     get dragHoverExclude() { return [this.editBox.rect]; }
     get editing() { return !!this.list.length; }
@@ -1356,7 +1404,6 @@ class Editor extends Group {
     get buttons() { return this.editBox.buttons; }
     constructor(userConfig, data) {
         super(data);
-        this.config = DataHelper.clone(config);
         this.leafList = new LeafList();
         this.openedGroupList = new LeafList();
         this.simulateTarget = new SimulateElement(this);
@@ -1365,8 +1412,10 @@ class Editor extends Group {
         this.selector = new EditSelect(this);
         this.editMask = new EditMask(this);
         this.targetEventIds = [];
+        let mergedConfig = DataHelper.clone(config);
         if (userConfig)
-            this.config = DataHelper.default(userConfig, this.config);
+            mergedConfig = DataHelper.default(userConfig, mergedConfig);
+        this.mergedConfig = this.config = mergedConfig;
         this.addMany(this.editMask, this.selector, this.editBox);
         if (!Plugin.has('resize'))
             this.config.editSize = 'scale';
@@ -1706,8 +1755,7 @@ class Editor extends Group {
         }
     }
     emitInnerEvent(type) {
-        const { innerEditor } = this;
-        const { editTarget } = innerEditor;
+        const { innerEditor } = this, { editTarget } = innerEditor;
         const event = new InnerEditorEvent(type, { editTarget, innerEditor });
         this.emitEvent(event);
         editTarget.emitEvent(event);
@@ -1732,25 +1780,40 @@ class Editor extends Group {
             this.leafList.update();
         }
     }
+    onAppRenderStart(app) {
+        if (this.targetChanged = app.children.some(leafer => leafer !== this.leafer && leafer.renderer.changed))
+            this.editBox.forceRender();
+    }
+    onRenderStart() {
+        if (this.targetChanged)
+            this.update();
+    }
+    onKey(e) {
+        updateCursor(this, e);
+    }
     listenTargetEvents() {
         if (!this.targetEventIds.length) {
-            const { app, leafer } = this;
+            const { app, leafer, editBox, editMask } = this;
             this.targetEventIds = [
-                leafer.on_(RenderEvent.START, this.update, this),
-                app.on_(RenderEvent.CHILD_START, this.forceRender, this),
+                leafer.on_(RenderEvent.START, this.onRenderStart, this),
+                app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this),
                 app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
                 app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
                 app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
-                app.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e); }),
-                app.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
+                app.on_([KeyEvent.HOLD, KeyEvent.UP], this.onKey, this),
+                app.on_(KeyEvent.DOWN, editBox.onArrow, editBox)
             ];
+            if (editMask.visible)
+                editMask.forceRender();
         }
     }
     removeTargetEvents() {
-        const { targetEventIds } = this;
+        const { targetEventIds, editMask } = this;
         if (targetEventIds.length) {
             this.off_(targetEventIds);
             targetEventIds.length = 0;
+            if (editMask.visible)
+                editMask.forceRender();
         }
     }
     destroy() {
@@ -1764,6 +1827,9 @@ class Editor extends Group {
         }
     }
 }
+__decorate([
+    mergeConfigAttr()
+], Editor.prototype, "mergeConfig", void 0);
 __decorate([
     targetAttr(onHover)
 ], Editor.prototype, "hoverTarget", void 0);
@@ -1828,9 +1894,7 @@ let EditTool = class EditTool extends InnerEditor {
         const { moveX, moveY, editor } = e;
         const { app, list } = editor;
         app.lockLayout();
-        list.forEach(target => {
-            target.moveWorld(moveX, moveY);
-        });
+        list.forEach(target => { target.moveWorld(moveX, moveY); });
         app.unlockLayout();
     }
     onScale(e) {
@@ -1839,12 +1903,10 @@ let EditTool = class EditTool extends InnerEditor {
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale';
-            if (transform) {
+            if (transform)
                 target.transformWorld(transform, resize);
-            }
-            else {
+            else
                 target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize);
-            }
         });
         app.unlockLayout();
     }
@@ -1854,12 +1916,10 @@ let EditTool = class EditTool extends InnerEditor {
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale';
-            if (transform) {
+            if (transform)
                 target.transformWorld(transform, resize);
-            }
-            else {
+            else
                 target.rotateOfWorld(worldOrigin, rotation);
-            }
         });
         app.unlockLayout();
     }
@@ -1869,12 +1929,10 @@ let EditTool = class EditTool extends InnerEditor {
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale';
-            if (transform) {
+            if (transform)
                 target.transformWorld(transform, resize);
-            }
-            else {
+            else
                 target.skewOfWorld(worldOrigin, skewX, skewY, resize);
-            }
         });
         app.unlockLayout();
     }