@leafer-draw/worker 1.0.0-rc.27 → 1.0.0-rc.30

package/dist/worker.module.js

@@ -11,8 +11,15 @@ const Platform = {
         hitCanvasSize: 100,
         maxCacheSize: 2560 * 1600,
         maxPatternSize: 4096 * 2160,
-        suffix: '',
-        crossOrigin: 'anonymous'
+        crossOrigin: 'anonymous',
+        getRealURL(url) {
+            const { prefix, suffix } = Platform.image;
+            if (suffix && !url.startsWith('data:') && !url.startsWith('blob:'))
+                url += (url.includes("?") ? "&" : "?") + suffix;
+            if (prefix && url[0] === '/')
+                url = prefix + url;
+            return url;
+        }
     }
 };
 
@@ -1548,7 +1555,7 @@ class LeafData {
         if (this.__input && this.__input[name] !== undefined)
             this.__input[name] = undefined;
     }
-    __getInputData(names) {
+    __getInputData(names, options) {
         const data = {};
         if (names) {
             if (names instanceof Array) {
@@ -1575,6 +1582,12 @@ class LeafData {
                 }
             }
         }
+        if (options) {
+            if (options.matrix) {
+                const { a, b, c, d, e, f } = this.__leaf.__localMatrix;
+                data.matrix = { a, b, c, d, e, f };
+            }
+        }
         return data;
     }
     __setMiddle(name, value) {
@@ -5126,6 +5139,7 @@ let Leaf = class Leaf {
     get __worldFlipped() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
     get __onlyHitMask() { return this.__hasMask && !this.__.hitChildren; }
     get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
+    get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
     get pathInputed() { return this.__.__pathInputed; }
     constructor(data) {
         this.innerId = create(LEAF);
@@ -5192,11 +5206,13 @@ let Leaf = class Leaf {
     setAttr(name, value) { this[name] = value; }
     getAttr(name) { return this[name]; }
     getComputedAttr(name) { return this.__[name]; }
-    toJSON() {
-        return this.__.__getInputData();
+    toJSON(options) {
+        if (options)
+            this.__layout.update();
+        return this.__.__getInputData(null, options);
     }
-    toString() {
-        return JSON.stringify(this.toJSON());
+    toString(options) {
+        return JSON.stringify(this.toJSON(options));
     }
     toSVG() { return undefined; }
     __SVG(_data) { }
@@ -5210,6 +5226,9 @@ let Leaf = class Leaf {
     findOne(_condition, _options) { return undefined; }
     findId(_id) { return undefined; }
     focus(_value) { }
+    updateLayout() {
+        this.__layout.update();
+    }
     forceUpdate(attrName) {
         if (attrName === undefined)
             attrName = 'width';
@@ -5219,8 +5238,8 @@ let Leaf = class Leaf {
         this.__[attrName] = value === undefined ? null : undefined;
         this[attrName] = value;
     }
-    updateLayout() {
-        this.__layout.update();
+    forceRender(_bounds) {
+        this.forceUpdate('surface');
     }
     __updateWorldMatrix() { }
     __updateLocalMatrix() { }
@@ -5266,14 +5285,6 @@ let Leaf = class Leaf {
             return this.__world;
         }
     }
-    getWorld(attrName) {
-        this.__layout.update();
-        if (attrName === 'x')
-            return this.__world.e;
-        if (attrName === 'y')
-            return this.__world.f;
-        return this.getLayoutBounds()[attrName];
-    }
     getTransform(relative) {
         return this.__layout.getTransform(relative || 'local');
     }
@@ -5394,14 +5405,8 @@ let Leaf = class Leaf {
         this.scaleY *= scaleY;
     }
     __scaleResize(_scaleX, _scaleY) { }
-    resizeWidth(width) {
-        const scale = width / this.__localBoxBounds.width;
-        this.scaleResize(scale, this.__.lockRatio ? scale : 1);
-    }
-    resizeHeight(height) {
-        const scale = height / this.__localBoxBounds.height;
-        this.scaleResize(this.__.lockRatio ? scale : 1, scale);
-    }
+    resizeWidth(_width) { }
+    resizeHeight(_height) { }
     __hitWorld(_point) { return true; }
     __hit(_local) { return true; }
     __hitFill(_inner) { return true; }
@@ -5752,7 +5757,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.0-rc.27";
+const version = "1.0.0-rc.30";
 const inviteCode = {};
 
 class LeaferCanvas extends LeaferCanvasBase {
@@ -5801,10 +5806,8 @@ function useCanvas(_canvasType, _power) {
         download(_url, _filename) { return undefined; },
         loadImage(src) {
             return new Promise((resolve, reject) => {
-                if (!src.startsWith('data:') && Platform.image.suffix)
-                    src += (src.includes("?") ? "&" : "?") + Platform.image.suffix;
                 let req = new XMLHttpRequest();
-                req.open('GET', src, true);
+                req.open('GET', Platform.image.getRealURL(src), true);
                 req.responseType = "blob";
                 req.onload = () => {
                     createImageBitmap(req.response).then(img => {
@@ -6937,7 +6940,7 @@ let UI = UI_1 = class UI extends Leaf {
     __onUpdateSize() {
         if (this.__.__input) {
             const data = this.__;
-            (data.lazy && this.leafer && this.leafer.created && !this.leafer.lazyBounds.hit(this.__world)) ? data.__needComputePaint = true : data.__computePaint();
+            (data.lazy && !this.__inLazyBounds && !Export.running) ? data.__needComputePaint = true : data.__computePaint();
         }
     }
     __updateRenderPath() {
@@ -7294,9 +7297,9 @@ let Group = class Group extends UI {
             super.set(data);
         }
     }
-    toJSON() {
-        const data = super.toJSON();
-        data.children = this.children.map(child => child.toJSON());
+    toJSON(options) {
+        const data = super.toJSON(options);
+        data.children = this.children.map(child => child.toJSON(options));
         return data;
     }
     pick(_hitPoint, _options) { return undefined; }
@@ -7463,6 +7466,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     __onResize(event) {
         this.emitEvent(event);
         DataHelper.copyAttrs(this.__, event, canvasSizeAttrs);
+        if (!event.width || !event.height)
+            debug$1.warn('w = 0 or h = 0');
         setTimeout(() => { if (this.canvasManager)
             this.canvasManager.clearRecycled(); }, 0);
     }
@@ -7486,6 +7491,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     __setAttr(attrName, newValue) {
         if (this.canvas) {
             if (canvasSizeAttrs.includes(attrName)) {
+                if (!newValue)
+                    debug$1.warn(attrName + ' is 0');
                 this.__changeCanvasSize(attrName, newValue);
             }
             else if (attrName === 'fill') {
@@ -7495,6 +7502,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                 if (!this.parent)
                     this.canvas.hittable = newValue;
             }
+            else if (attrName === 'zIndex') {
+                this.canvas.zIndex = newValue;
+                setTimeout(() => this.parent && this.parent.__updateSortChildren());
+            }
         }
         return super.__setAttr(attrName, newValue);
     }
@@ -8113,7 +8124,7 @@ let Canvas = class Canvas extends Rect {
     __drawAfterFill(canvas, _options) {
         const origin = this.canvas.view;
         const { width, height } = this;
-        if (this.__.cornerRadius) {
+        if (this.__.cornerRadius || this.pathInputed) {
             canvas.save();
             canvas.clip();
             canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
@@ -8994,7 +9005,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
                     width *= data.scaleX;
                     height *= data.scaleY;
                 }
-                allowPaint = width * height > Platform.image.maxCacheSize;
+                allowPaint = (width * height > Platform.image.maxCacheSize) || Export.running;
             }
             else {
                 allowPaint = false;
@@ -9506,7 +9517,8 @@ function createRows(drawData, content, style) {
                     if (breakAll) {
                         if (wordWidth)
                             addWord();
-                        addRow();
+                        if (rowWidth)
+                            addRow();
                     }
                     else {
                         if (!afterBreak)
@@ -9514,10 +9526,12 @@ function createRows(drawData, content, style) {
                         if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
                             if (wordWidth)
                                 addWord();
-                            addRow();
+                            if (rowWidth)
+                                addRow();
                         }
                         else {
-                            addRow();
+                            if (rowWidth)
+                                addRow();
                         }
                     }
                 }
@@ -9720,7 +9734,9 @@ function layoutText(drawData, style) {
     bounds.height = realHeight;
 }
 
-function clipText(drawData, style) {
+function clipText(drawData, style, x, width) {
+    if (!width)
+        return;
     const { rows, overflow } = drawData;
     let { textOverflow } = style;
     rows.splice(overflow);
@@ -9731,7 +9747,7 @@ function clipText(drawData, style) {
             textOverflow = '...';
         let char, charRight;
         const ellipsisWidth = textOverflow ? Platform.canvas.measureText(textOverflow).width : 0;
-        const right = style.x + style.width - ellipsisWidth;
+        const right = x + width - ellipsisWidth;
         const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
         list.forEach(row => {
             if (row.isOverflow && row.data) {
@@ -9807,7 +9823,7 @@ function getDrawData(content, style) {
     layoutText(drawData, style);
     layoutChar(drawData, style, width);
     if (drawData.overflow)
-        clipText(drawData, style);
+        clipText(drawData, style, x, width);
     if (textDecoration !== 'none')
         decorationText(drawData, style);
     return drawData;
@@ -9878,6 +9894,8 @@ function getTrimBounds(canvas) {
 const ExportModule = {
     export(leaf, filename, options) {
         this.running = true;
+        const fileType = FileHelper.fileType(filename);
+        options = FileHelper.getExportOptions(options);
         return addTask((success) => new Promise((resolve) => {
             const over = (result) => {
                 success(result);
@@ -9886,12 +9904,11 @@ const ExportModule = {
             };
             const { toURL } = Platform;
             const { download } = Platform.origin;
-            const fileType = FileHelper.fileType(filename);
             if (filename === 'json') {
-                return over({ data: leaf.toJSON() });
+                return over({ data: leaf.toJSON(options.json) });
             }
             else if (fileType === 'json') {
-                download(toURL(JSON.stringify(leaf.toJSON()), 'text'), filename);
+                download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
                 return over({ data: true });
             }
             if (filename === 'svg') {
@@ -9903,13 +9920,15 @@ const ExportModule = {
             }
             const { leafer } = leaf;
             if (leafer) {
+                checkLazy(leaf);
                 leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
-                    options = FileHelper.getExportOptions(options);
                     let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                     const { worldTransform, isLeafer, isFrame } = leaf;
                     const { slice, trim, onCanvas } = options;
                     let scale = options.scale || 1;
                     let pixelRatio = options.pixelRatio || 1;
+                    const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
+                    const contextSettings = options.contextSettings || leafer.config.contextSettings;
                     if (leaf.isApp) {
                         scale *= pixelRatio;
                         pixelRatio = leaf.app.pixelRatio;
@@ -9948,7 +9967,7 @@ const ExportModule = {
                         renderBounds = leaf.getBounds('render', relative);
                     }
                     const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
-                    let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio });
+                    let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
                     const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
                     if (slice) {
                         leaf = leafer;
@@ -9994,6 +10013,12 @@ function addTask(task) {
         tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
     });
 }
+function checkLazy(leaf) {
+    if (leaf.__.__needComputePaint)
+        leaf.__.__computePaint();
+    if (leaf.isBranch)
+        leaf.children.forEach(child => checkLazy(child));
+}
 
 const canvas = LeaferCanvasBase.prototype;
 const debug = Debug.get('@leafer-ui/export');