@leafer-editor/worker 1.0.9 → 1.0.10

package/dist/worker.js

@@ -1414,14 +1414,13 @@ var LeaferUI = (function (exports) {
         list: {},
         register(UI) {
             const { __tag: tag } = UI.prototype;
-            if (list$3[tag]) {
+            if (list$3[tag])
                 debug$f.repeat(tag);
-            }
-            else {
-                list$3[tag] = UI;
-            }
+            list$3[tag] = UI;
         },
         get(tag, data, x, y, width, height) {
+            if (!list$3[tag])
+                debug$f.error('not register ' + tag);
             const ui = new list$3[tag](data);
             if (x !== undefined) {
                 ui.x = x;
@@ -1445,7 +1444,7 @@ var LeaferUI = (function (exports) {
             Object.keys(Event).forEach(key => {
                 name = Event[key];
                 if (typeof name === 'string')
-                    nameList[name] ? debug$e.repeat(name) : nameList[name] = Event;
+                    nameList[name] && debug$e.repeat(name), nameList[name] = Event;
             });
         },
         changeName(oldName, newName) {
@@ -1647,7 +1646,7 @@ var LeaferUI = (function (exports) {
             const t = this;
             if (t.blendMode === 'pass-through') {
                 const leaf = this.__leaf;
-                if ((t.opacity < 1 && leaf.isBranch) || leaf.__hasEraser || t.eraser) {
+                if ((t.opacity < 1 && (leaf.isBranch || t.__hasMultiPaint)) || leaf.__hasEraser || t.eraser) {
                     t.__single = true;
                 }
                 else if (t.__single) {
@@ -2045,8 +2044,9 @@ var LeaferUI = (function (exports) {
                 takeCanvas = this.getSameCanvas();
                 takeCanvas.copyWorld(this);
             }
-            DataHelper.copyAttrs(this.size, size, canvasSizeAttrs);
-            this.size.pixelRatio || (this.size.pixelRatio = 1);
+            const s = this.size;
+            DataHelper.copyAttrs(s, size, canvasSizeAttrs);
+            canvasSizeAttrs.forEach(key => s[key] || (s[key] = 1));
             this.bounds = new Bounds(0, 0, this.width, this.height);
             if (this.context && !this.unreal) {
                 this.updateViewSize();
@@ -2160,6 +2160,17 @@ var LeaferUI = (function (exports) {
             if (!onlyResetTransform)
                 this.useWorldTransform();
         }
+        useGrayscaleAlpha(bounds) {
+            this.setTempBounds(bounds, true, true);
+            let alpha, pixel;
+            const { context } = this, imageData = context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height), { data } = imageData;
+            for (let i = 0, len = data.length; i < len; i += 4) {
+                pixel = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
+                if (alpha = data[i + 3])
+                    data[i + 3] = alpha === 255 ? pixel : alpha * (pixel / 255);
+            }
+            context.putImageData(imageData, tempBounds$1.x, tempBounds$1.y);
+        }
         useMask(maskCanvas, fromBounds, toBounds) {
             this.copyWorld(maskCanvas, fromBounds, toBounds, 'destination-in');
         }
@@ -2170,7 +2181,7 @@ var LeaferUI = (function (exports) {
             if (blendMode)
                 this.blendMode = blendMode;
             this.fillStyle = color;
-            tempBounds$1.set(bounds).scale(this.pixelRatio);
+            this.setTempBounds(bounds);
             this.fillRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
             if (blendMode)
                 this.blendMode = 'source-over';
@@ -2179,22 +2190,18 @@ var LeaferUI = (function (exports) {
             if (blendMode)
                 this.blendMode = blendMode;
             this.strokeStyle = color;
-            tempBounds$1.set(bounds).scale(this.pixelRatio);
+            this.setTempBounds(bounds);
             this.strokeRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
             if (blendMode)
                 this.blendMode = 'source-over';
         }
         clearWorld(bounds, ceilPixel) {
-            tempBounds$1.set(bounds).scale(this.pixelRatio);
-            if (ceilPixel)
-                tempBounds$1.ceil();
+            this.setTempBounds(bounds, ceilPixel);
             this.clearRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
         }
         clipWorld(bounds, ceilPixel) {
             this.beginPath();
-            tempBounds$1.set(bounds).scale(this.pixelRatio);
-            if (ceilPixel)
-                tempBounds$1.ceil();
+            this.setTempBounds(bounds, ceilPixel);
             this.rect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
             this.clip();
         }
@@ -2202,6 +2209,14 @@ var LeaferUI = (function (exports) {
             const { pixelRatio } = this;
             this.clearRect(0, 0, this.width * pixelRatio + 2, this.height * pixelRatio + 2);
         }
+        setTempBounds(bounds, ceil, intersect) {
+            tempBounds$1.set(bounds);
+            if (intersect)
+                tempBounds$1.intersect(this.bounds);
+            tempBounds$1.scale(this.pixelRatio);
+            if (ceil)
+                tempBounds$1.ceil();
+        }
         isSameSize(size) {
             return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio;
         }
@@ -5215,13 +5230,14 @@ var LeaferUI = (function (exports) {
             this.__.__checkSingle();
         },
         __render(canvas, options) {
+            this.__nowWorld = this.__getNowWorld(options);
             if (this.__worldOpacity) {
                 if (this.__.__single) {
                     if (this.__.eraser === 'path')
                         return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(false, true);
                     this.__renderBranch(tempCanvas, options);
-                    const nowWorld = this.__getNowWorld(options);
+                    const nowWorld = this.__nowWorld;
                     canvas.opacity = this.__.opacity;
                     canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, this.__.__blendMode, true);
                     tempCanvas.recycle(nowWorld);
@@ -5962,7 +5978,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.9";
+    const version = "1.0.10";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6431,7 +6447,8 @@ var LeaferUI = (function (exports) {
             this.totalBounds = new Bounds();
             debug$6.log(target.innerName, '--->');
             try {
-                target.app.emit(RenderEvent.CHILD_START, target);
+                if (!target.isApp)
+                    target.app.emit(RenderEvent.CHILD_START, target);
                 this.emitRender(RenderEvent.START);
                 this.renderOnce(callback);
                 this.emitRender(RenderEvent.END, this.totalBounds);
@@ -6985,6 +7002,12 @@ var LeaferUI = (function (exports) {
                 return strokeWidth;
         }
         get __hasStroke() { return this.stroke && this.strokeWidth; }
+        get __hasMultiPaint() {
+            const t = this;
+            if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
+                return true;
+            return t.fill && this.__hasStroke;
+        }
         get __clipAfterFill() { return (this.cornerRadius || this.__pathInputed); }
         get __autoWidth() { return !this._width; }
         get __autoHeight() { return !this._height; }
@@ -7354,9 +7377,8 @@ var LeaferUI = (function (exports) {
                             canvas.strokeRect(half, half, width, height);
                             canvas.restore();
                         }
-                        else {
+                        else
                             canvas.strokeRect(half, half, width, height);
-                        }
                         break;
                     case 'outside':
                         canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
@@ -7581,6 +7603,15 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType(0)
     ], exports.UI.prototype, "padding", void 0);
+    __decorate([
+        boundsType(false)
+    ], exports.UI.prototype, "lockRatio", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "widthRange", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "heightRange", void 0);
     __decorate([
         dataType(false)
     ], exports.UI.prototype, "draggable", void 0);
@@ -7872,8 +7903,6 @@ var LeaferUI = (function (exports) {
         __onResize(event) {
             this.emitEvent(event);
             DataHelper.copyAttrs(this.__, event, canvasSizeAttrs);
-            if (!event.width || !event.height)
-                debug$4.warn('w = 0 or h = 0');
             setTimeout(() => { if (this.canvasManager)
                 this.canvasManager.clearRecycled(); }, 0);
         }
@@ -8198,9 +8227,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType(false)
     ], exports.Box.prototype, "resizeChildren", void 0);
-    __decorate([
-        dataType(false)
-    ], exports.Box.prototype, "textBox", void 0);
     __decorate([
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
@@ -8955,19 +8981,13 @@ var LeaferUI = (function (exports) {
             Object.assign(this, params);
         }
         getBoxPoint(relative) {
-            if (!relative)
-                relative = this.current;
-            return relative.getBoxPoint(this);
+            return (relative || this.current).getBoxPoint(this);
         }
         getInnerPoint(relative) {
-            if (!relative)
-                relative = this.current;
-            return relative.getInnerPoint(this);
+            return (relative || this.current).getInnerPoint(this);
         }
         getLocalPoint(relative) {
-            if (!relative)
-                relative = this.current;
-            return relative.getLocalPoint(this);
+            return (relative || this.current).getLocalPoint(this);
         }
         getPagePoint() {
             return this.current.getPagePoint(this);
@@ -9201,7 +9221,8 @@ var LeaferUI = (function (exports) {
     const LeaferTypeCreator = {
         list: {},
         register(name, fn) {
-            list$1[name] ? debug$3.repeat(name) : list$1[name] = fn;
+            list$1[name] && debug$3.repeat(name);
+            list$1[name] = fn;
         },
         run(name, leafer) {
             const fn = list$1[name];
@@ -11217,16 +11238,16 @@ var LeaferUI = (function (exports) {
 
     const { excludeRenderBounds } = LeafBoundsHelper;
     exports.Group.prototype.__renderMask = function (canvas, options) {
-        let child, maskCanvas, contentCanvas, maskOpacity, currentMask;
+        let child, maskCanvas, contentCanvas, maskOpacity, currentMask, mask;
         const { children } = this;
         for (let i = 0, len = children.length; i < len; i++) {
-            child = children[i];
-            if (child.__.mask) {
+            child = children[i], mask = child.__.mask;
+            if (mask) {
                 if (currentMask) {
                     maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
                     maskCanvas = contentCanvas = null;
                 }
-                if (child.__.mask === 'path') {
+                if (mask === 'path' || mask === 'clipping-path') {
                     if (child.opacity < 1) {
                         currentMask = 'opacity-path';
                         maskOpacity = child.opacity;
@@ -11240,14 +11261,14 @@ var LeaferUI = (function (exports) {
                     child.__clip(contentCanvas || canvas, options);
                 }
                 else {
-                    currentMask = 'alpha';
+                    currentMask = mask === 'grayscale' ? 'grayscale' : 'alpha';
                     if (!maskCanvas)
                         maskCanvas = getCanvas(canvas);
                     if (!contentCanvas)
                         contentCanvas = getCanvas(canvas);
                     child.__render(maskCanvas, options);
                 }
-                if (child.__.mask !== 'clipping')
+                if (!(mask === 'clipping' || mask === 'clipping-path'))
                     continue;
             }
             if (excludeRenderBounds(child, options))
@@ -11258,6 +11279,8 @@ var LeaferUI = (function (exports) {
     };
     function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity) {
         switch (maskMode) {
+            case 'grayscale':
+                maskCanvas.useGrayscaleAlpha(leaf.__nowWorld);
             case 'alpha':
                 usePixelMask(leaf, canvas, contentCanvas, maskCanvas);
                 break;
@@ -11962,15 +11985,12 @@ var LeaferUI = (function (exports) {
     const debug$1 = Debug.get('@leafer-ui/export');
     canvas.export = function (filename, options) {
         const { quality, blob } = FileHelper.getExportOptions(options);
-        if (filename.includes('.')) {
+        if (filename.includes('.'))
             return this.saveAs(filename, quality);
-        }
-        else if (blob) {
+        else if (blob)
             return this.toBlob(filename, quality);
-        }
-        else {
+        else
             return this.toDataURL(filename, quality);
-        }
     };
     canvas.toBlob = function (type, quality) {
         return new Promise((resolve) => {
@@ -13012,7 +13032,7 @@ var LeaferUI = (function (exports) {
         }
         getPointStyle(userStyle) {
             const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig;
-            const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius };
+            const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0 };
             return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
         }
         getPointsStyle() {
@@ -13094,9 +13114,10 @@ var LeaferUI = (function (exports) {
             const { editor } = this;
             if (editor.single) {
                 const { element } = editor;
-                if (element.isBranch) {
+                if (element.isBranch && !element.editInner) {
                     if (element.textBox) {
-                        const find = element.children.find(item => item.editable && item instanceof exports.Text);
+                        const { children } = element;
+                        const find = children.find(item => item.editable && item instanceof exports.Text) || children.find(item => item instanceof exports.Text);
                         if (find)
                             return editor.openInnerEditor(find);
                     }
@@ -13356,7 +13377,8 @@ ${filterStyle}
         list: {},
         register(EditTool) {
             const { tag } = EditTool.prototype;
-            list[tag] ? debug.repeat(tag) : (list[tag] = EditTool);
+            list[tag] && debug.repeat(tag);
+            list[tag] = EditTool;
         },
         get(tag, editor) {
             return new list[tag](editor);
@@ -14050,12 +14072,16 @@ ${filterStyle}
     ], exports.LineEditTool);
 
     Creator.editor = function (options) { return new Editor(options); };
+    dataType(false)(exports.Box.prototype, 'textBox');
     defineKey(exports.UI.prototype, 'editOuter', {
         get() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
     });
     defineKey(exports.UI.prototype, 'editInner', {
         get() { return 'PathEditor'; }
     });
+    defineKey(exports.Group.prototype, 'editInner', {
+        get() { return ''; }
+    });
     defineKey(exports.Text.prototype, 'editInner', {
         get() { return 'TextEditor'; }
     });
@@ -14683,8 +14709,10 @@ ${filterStyle}
             this.textScale = textScale;
             const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale);
             let { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
+            if (!this.inBody)
+                x -= window.scrollX, y -= window.scrollY;
             let { width, height } = text;
-            x -= window.scrollX, y -= window.scrollY, width *= textScale, height *= textScale;
+            width *= textScale, height *= textScale;
             const data = text.__;
             if (data.__autoWidth && data.autoSizeAlign) {
                 width += 20;