@leafer-editor/worker 1.0.8 → 1.0.10

package/dist/worker.module.js

@@ -1411,14 +1411,13 @@ const UICreator = {
     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;
@@ -1442,7 +1441,7 @@ const EventCreator = {
         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) {
@@ -1644,7 +1643,7 @@ class LeafData {
         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) {
@@ -2042,8 +2041,9 @@ class LeaferCanvasBase extends Canvas$1 {
             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();
@@ -2157,6 +2157,17 @@ class LeaferCanvasBase extends Canvas$1 {
         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');
     }
@@ -2167,7 +2178,7 @@ class LeaferCanvasBase extends Canvas$1 {
         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';
@@ -2176,22 +2187,18 @@ class LeaferCanvasBase extends Canvas$1 {
         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();
     }
@@ -2199,6 +2206,14 @@ class LeaferCanvasBase extends Canvas$1 {
         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;
     }
@@ -5212,13 +5227,14 @@ const BranchRender = {
         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);
@@ -5959,7 +5975,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.8";
+const version = "1.0.10";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return true; }
@@ -6428,7 +6444,8 @@ class Renderer {
         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);
@@ -6982,6 +6999,12 @@ class UIData extends LeafData {
             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; }
@@ -7351,9 +7374,8 @@ const RectRender = {
                         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);
@@ -7578,6 +7600,15 @@ __decorate([
 __decorate([
     boundsType(0)
 ], UI.prototype, "padding", void 0);
+__decorate([
+    boundsType(false)
+], UI.prototype, "lockRatio", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "widthRange", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "heightRange", void 0);
 __decorate([
     dataType(false)
 ], UI.prototype, "draggable", void 0);
@@ -7869,8 +7900,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     __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);
     }
@@ -8195,9 +8224,6 @@ __decorate([
 __decorate([
     dataType(false)
 ], Box.prototype, "resizeChildren", void 0);
-__decorate([
-    dataType(false)
-], Box.prototype, "textBox", void 0);
 __decorate([
     affectRenderBoundsType('show')
 ], Box.prototype, "overflow", void 0);
@@ -8608,7 +8634,6 @@ let Text = class Text extends UI {
         this.__updateTextDrawData();
         const { bounds } = data.__textDrawData;
         const b = layout.boxBounds;
-        console.log(bounds, autoWidth, autoHeight);
         if (data.__lineHeight < fontSize)
             spread(bounds, fontSize / 2);
         if (autoWidth || autoHeight) {
@@ -8953,19 +8978,13 @@ class UIEvent extends Event {
         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);
@@ -9199,7 +9218,8 @@ const debug$3 = Debug.get('LeaferTypeCreator');
 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];
@@ -11215,16 +11235,16 @@ const EffectModule = {
 
 const { excludeRenderBounds } = LeafBoundsHelper;
 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;
@@ -11238,14 +11258,14 @@ Group.prototype.__renderMask = function (canvas, options) {
                 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))
@@ -11256,6 +11276,8 @@ Group.prototype.__renderMask = function (canvas, options) {
 };
 function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity) {
     switch (maskMode) {
+        case 'grayscale':
+            maskCanvas.useGrayscaleAlpha(leaf.__nowWorld);
         case 'alpha':
             usePixelMask(leaf, canvas, contentCanvas, maskCanvas);
             break;
@@ -11960,15 +11982,12 @@ const canvas = LeaferCanvasBase.prototype;
 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) => {
@@ -13010,7 +13029,7 @@ class EditBox extends Group {
     }
     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() {
@@ -13092,9 +13111,10 @@ class EditBox extends Group {
         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 Text);
+                    const { children } = element;
+                    const find = children.find(item => item.editable && item instanceof Text) || children.find(item => item instanceof Text);
                     if (find)
                         return editor.openInnerEditor(find);
                 }
@@ -13354,7 +13374,8 @@ const EditToolCreator = {
     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);
@@ -14048,12 +14069,16 @@ LineEditTool = __decorate([
 ], LineEditTool);
 
 Creator.editor = function (options) { return new Editor(options); };
+dataType(false)(Box.prototype, 'textBox');
 defineKey(UI.prototype, 'editOuter', {
     get() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
 });
 defineKey(UI.prototype, 'editInner', {
     get() { return 'PathEditor'; }
 });
+defineKey(Group.prototype, 'editInner', {
+    get() { return ''; }
+});
 defineKey(Text.prototype, 'editInner', {
     get() { return 'TextEditor'; }
 });
@@ -14681,8 +14706,10 @@ let TextEditor = class TextEditor extends InnerEditor {
         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;