@leafer-in/editor 1.5.3 → 1.6.1

package/dist/editor.js

@@ -112,6 +112,28 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             });
         };
     }
+    function mergeConfigAttr() {
+        return (target, key) => {
+            draw.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');
+                            draw.isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
+                        }
+                    }
+                    return this.mergedConfig = mergeConfig;
+                }
+            });
+        };
+    }
 
     const { abs } = Math;
     const { copy: copy$1, scale } = draw.MatrixHelper;
@@ -123,6 +145,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         constructor() {
             super();
             this.list = [];
+            this.visible = 0;
             this.hittable = false;
             this.strokeAlign = 'center';
         }
@@ -136,10 +159,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             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;
@@ -151,8 +174,9 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     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();
@@ -161,7 +185,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                             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);
@@ -196,7 +220,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super(data);
             this.strokeArea = new draw.Rect({ strokeAlign: 'center' });
             this.fillArea = new draw.Rect();
-            this.visible = this.hittable = false;
+            this.visible = 0;
+            this.hittable = false;
             this.addMany(this.fillArea, this.strokeArea);
         }
         setStyle(style, userStyle) {
@@ -393,7 +418,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             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) {
@@ -541,8 +566,11 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     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)
@@ -557,22 +585,27 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
                 if (!draw.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) {
@@ -743,7 +776,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             this.view = new draw.Group();
             this.rect = new draw.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 draw.Group({ around: 'center', hitSelf: false });
+            this.buttons = new draw.Group({ around: 'center', hitSelf: false, visible: 0 });
             this.resizePoints = [];
             this.rotatePoints = [];
             this.resizeLines = [];
@@ -798,12 +831,13 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         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;
@@ -838,10 +872,12 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 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;
@@ -904,7 +940,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         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;
@@ -915,43 +951,53 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             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'))
+                draw.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'))
+                draw.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) {
@@ -1017,22 +1063,32 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
     }
 
+    const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
     class EditMask extends draw.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() {
@@ -1335,22 +1391,6 @@ ${filterStyle}
     }
 
     class Editor extends draw.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');
-                    draw.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; }
@@ -1364,7 +1404,6 @@ ${filterStyle}
         get buttons() { return this.editBox.buttons; }
         constructor(userConfig, data) {
             super(data);
-            this.config = draw.DataHelper.clone(config);
             this.leafList = new draw.LeafList();
             this.openedGroupList = new draw.LeafList();
             this.simulateTarget = new SimulateElement(this);
@@ -1373,8 +1412,10 @@ ${filterStyle}
             this.selector = new EditSelect(this);
             this.editMask = new EditMask(this);
             this.targetEventIds = [];
+            let mergedConfig = draw.DataHelper.clone(config);
             if (userConfig)
-                this.config = draw.DataHelper.default(userConfig, this.config);
+                mergedConfig = draw.DataHelper.default(userConfig, mergedConfig);
+            this.mergedConfig = this.config = mergedConfig;
             this.addMany(this.editMask, this.selector, this.editBox);
             if (!core.Plugin.has('resize'))
                 this.config.editSize = 'scale';
@@ -1714,8 +1755,7 @@ ${filterStyle}
             }
         }
         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);
@@ -1740,25 +1780,40 @@ ${filterStyle}
                 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_(draw.RenderEvent.START, this.update, this),
-                    app.on_(draw.RenderEvent.CHILD_START, this.forceRender, this),
+                    leafer.on_(draw.RenderEvent.START, this.onRenderStart, this),
+                    app.on_(draw.RenderEvent.CHILD_START, this.onAppRenderStart, this),
                     app.on_(core.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
                     app.on_(core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
                     app.on_(core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
-                    app.on_([core.KeyEvent.HOLD, core.KeyEvent.UP], (e) => { updateCursor(this, e); }),
-                    app.on_(core.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
+                    app.on_([core.KeyEvent.HOLD, core.KeyEvent.UP], this.onKey, this),
+                    app.on_(core.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() {
@@ -1772,6 +1827,9 @@ ${filterStyle}
             }
         }
     }
+    __decorate([
+        mergeConfigAttr()
+    ], Editor.prototype, "mergeConfig", void 0);
     __decorate([
         targetAttr(onHover)
     ], Editor.prototype, "hoverTarget", void 0);
@@ -1836,9 +1894,7 @@ ${filterStyle}
             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) {
@@ -1847,12 +1903,10 @@ ${filterStyle}
             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();
         }
@@ -1862,12 +1916,10 @@ ${filterStyle}
             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();
         }
@@ -1877,12 +1929,10 @@ ${filterStyle}
             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();
         }