@leafer-ui/node 1.6.0 → 1.6.2

package/dist/node.cjs

@@ -200,7 +200,7 @@ class Watcher {
     }
 }
 
-const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = core.LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange } = core.LeafHelper;
 const { pushAllChildBranch, pushAllParent } = core.BranchHelper;
 function updateMatrix(updateList, levelList) {
     let layout;
@@ -243,15 +243,7 @@ function updateBounds(boundsList) {
     });
 }
 function updateChange(updateList) {
-    let layout;
-    updateList.list.forEach(leaf => {
-        layout = leaf.__layout;
-        if (layout.opacityChanged)
-            updateAllWorldOpacity(leaf);
-        if (layout.stateStyleChanged)
-            setTimeout(() => layout.stateStyleChanged && leaf.updateState());
-        leaf.__updateChange();
-    });
+    updateList.list.forEach(updateOneChange);
 }
 
 const { worldBounds } = core.LeafBoundsHelper;
@@ -472,6 +464,15 @@ class Renderer {
     }
     checkRender() {
         if (this.running) {
+            const { target } = this;
+            if (target.isApp) {
+                target.emit(core.RenderEvent.CHILD_START, target);
+                target.children.forEach(leafer => {
+                    leafer.renderer.FPS = this.FPS;
+                    leafer.renderer.checkRender();
+                });
+                target.emit(core.RenderEvent.CHILD_END, target);
+            }
             if (this.changed && this.canvas.view)
                 this.render();
             this.target.emit(core.RenderEvent.NEXT);
@@ -557,7 +558,7 @@ class Renderer {
         bounds.spread(Renderer.clipSpread).ceil();
         canvas.clearWorld(bounds, true);
         canvas.clipWorld(bounds, true);
-        this.__render(bounds, block.includes(this.target.__world), realBounds);
+        this.__render(bounds, realBounds);
         canvas.restore();
         core.Run.end(t);
     }
@@ -566,12 +567,12 @@ class Renderer {
         const { canvas } = this;
         canvas.save();
         canvas.clear();
-        this.__render(canvas.bounds, true);
+        this.__render(canvas.bounds);
         canvas.restore();
         core.Run.end(t);
     }
-    __render(bounds, includes, realBounds) {
-        const { canvas } = this, options = includes ? { includes } : { bounds, includes };
+    __render(bounds, realBounds) {
+        const { canvas } = this, includes = bounds.includes(this.target.__world), options = includes ? { includes } : { bounds, includes };
         if (this.needFill)
             canvas.fillWorld(bounds, this.config.fill);
         if (core.Debug.showRepaint)
@@ -598,22 +599,14 @@ class Renderer {
     }
     __requestRender() {
         const target = this.target;
-        if (target.parentApp)
-            return target.parentApp.renderer.update(false);
-        if (this.requestTime)
+        if (this.requestTime || !target)
             return;
+        if (target.parentApp)
+            return target.parentApp.requestRender(false);
         const requestTime = this.requestTime = Date.now();
         core.Platform.requestRender(() => {
             this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
             this.requestTime = 0;
-            if (target.isApp) {
-                target.emit(core.RenderEvent.CHILD_START, target);
-                target.children.forEach(leafer => {
-                    leafer.renderer.FPS = this.FPS;
-                    leafer.renderer.checkRender();
-                });
-                target.emit(core.RenderEvent.CHILD_END, target);
-            }
             this.checkRender();
         });
     }
@@ -841,8 +834,10 @@ Object.assign(core.Creator, {
 core.Platform.layout = Layouter.fullLayout;
 
 function fillText(ui, canvas) {
-    let row, data = ui.__.__textDrawData;
-    const { rows, decorationY } = data;
+    const data = ui.__, { rows, decorationY } = data.__textDrawData;
+    if (data.__isPlacehold && data.placeholderColor)
+        canvas.fillStyle = data.placeholderColor;
+    let row;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         if (row.text)
@@ -851,7 +846,7 @@ function fillText(ui, canvas) {
             row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
     }
     if (decorationY) {
-        const { decorationColor, decorationHeight } = data;
+        const { decorationColor, decorationHeight } = data.__textDrawData;
         if (decorationColor)
             canvas.fillStyle = decorationColor;
         rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
@@ -860,38 +855,44 @@ function fillText(ui, canvas) {
 
 function fill(fill, ui, canvas) {
     canvas.fillStyle = fill;
-    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+    fillPathOrText(ui, canvas);
 }
 function fills(fills, ui, canvas) {
     let item;
-    const { windingRule, __font } = ui.__;
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i];
-        if (item.image && draw.PaintImage.checkImage(ui, canvas, item, !__font))
-            continue;
-        if (item.style) {
-            canvas.fillStyle = item.style;
-            if (item.transform) {
-                canvas.save();
-                canvas.transform(item.transform);
-                if (item.blendMode)
-                    canvas.blendMode = item.blendMode;
-                __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                canvas.restore();
+        if (item.image) {
+            if (draw.PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
+                continue;
+            if (!item.style) {
+                if (!i && item.image.isPlacehold)
+                    ui.drawImagePlaceholder(canvas, item.image);
+                continue;
             }
-            else {
-                if (item.blendMode) {
-                    canvas.saveBlendMode(item.blendMode);
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    canvas.restoreBlendMode();
-                }
-                else {
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                }
+        }
+        canvas.fillStyle = item.style;
+        if (item.transform) {
+            canvas.save();
+            canvas.transform(item.transform);
+            if (item.blendMode)
+                canvas.blendMode = item.blendMode;
+            fillPathOrText(ui, canvas);
+            canvas.restore();
+        }
+        else {
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode);
+                fillPathOrText(ui, canvas);
+                canvas.restoreBlendMode();
             }
+            else
+                fillPathOrText(ui, canvas);
         }
     }
 }
+function fillPathOrText(ui, canvas) {
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+}
 
 function strokeText(stroke, ui, canvas) {
     const { strokeAlign } = ui.__;
@@ -1131,6 +1132,7 @@ const PaintModule = {
     compute,
     fill,
     fills,
+    fillPathOrText,
     fillText,
     stroke,
     strokes,
@@ -1323,6 +1325,13 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
+        if (ui.placeholderColor)
+            setTimeout(() => {
+                if (!(image.ready || image.isPlacehold)) {
+                    image.isPlacehold = true;
+                    ui.forceUpdate('surface');
+                }
+            }, 100);
     }
     return leafPaint;
 }
@@ -2391,7 +2400,7 @@ const ExportModule = {
         else {
             let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
             const { worldTransform, isLeafer, leafer, isFrame } = leaf;
-            const { slice, trim, padding, onCanvas } = options;
+            const { slice, clip, trim, padding, onCanvas } = options;
             const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
             const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
             const screenshot = options.screenshot || leaf.isApp;
@@ -2435,7 +2444,9 @@ const ExportModule = {
                 scaleData.scaleY *= pixelRatio;
                 pixelRatio = leaf.app.pixelRatio;
             }
-            const { x, y, width, height } = new draw.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            let { x, y, width, height } = new draw.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            if (clip)
+                x += clip.x, y += clip.y, width = clip.width, height = clip.height;
             const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
             let canvas = draw.Creator.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
             let sliceLeaf;
@@ -2591,4 +2602,3 @@ Object.keys(core$1).forEach(function (k) {
         get: function () { return core$1[k]; }
     });
 });
-//# sourceMappingURL=node.cjs.map

package/dist/node.esm.js

@@ -201,7 +201,7 @@ class Watcher {
     }
 }
 
-const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper;
 const { pushAllChildBranch, pushAllParent } = BranchHelper;
 function updateMatrix(updateList, levelList) {
     let layout;
@@ -244,15 +244,7 @@ function updateBounds(boundsList) {
     });
 }
 function updateChange(updateList) {
-    let layout;
-    updateList.list.forEach(leaf => {
-        layout = leaf.__layout;
-        if (layout.opacityChanged)
-            updateAllWorldOpacity(leaf);
-        if (layout.stateStyleChanged)
-            setTimeout(() => layout.stateStyleChanged && leaf.updateState());
-        leaf.__updateChange();
-    });
+    updateList.list.forEach(updateOneChange);
 }
 
 const { worldBounds } = LeafBoundsHelper;
@@ -473,6 +465,15 @@ class Renderer {
     }
     checkRender() {
         if (this.running) {
+            const { target } = this;
+            if (target.isApp) {
+                target.emit(RenderEvent.CHILD_START, target);
+                target.children.forEach(leafer => {
+                    leafer.renderer.FPS = this.FPS;
+                    leafer.renderer.checkRender();
+                });
+                target.emit(RenderEvent.CHILD_END, target);
+            }
             if (this.changed && this.canvas.view)
                 this.render();
             this.target.emit(RenderEvent.NEXT);
@@ -558,7 +559,7 @@ class Renderer {
         bounds.spread(Renderer.clipSpread).ceil();
         canvas.clearWorld(bounds, true);
         canvas.clipWorld(bounds, true);
-        this.__render(bounds, block.includes(this.target.__world), realBounds);
+        this.__render(bounds, realBounds);
         canvas.restore();
         Run.end(t);
     }
@@ -567,12 +568,12 @@ class Renderer {
         const { canvas } = this;
         canvas.save();
         canvas.clear();
-        this.__render(canvas.bounds, true);
+        this.__render(canvas.bounds);
         canvas.restore();
         Run.end(t);
     }
-    __render(bounds, includes, realBounds) {
-        const { canvas } = this, options = includes ? { includes } : { bounds, includes };
+    __render(bounds, realBounds) {
+        const { canvas } = this, includes = bounds.includes(this.target.__world), options = includes ? { includes } : { bounds, includes };
         if (this.needFill)
             canvas.fillWorld(bounds, this.config.fill);
         if (Debug.showRepaint)
@@ -599,22 +600,14 @@ class Renderer {
     }
     __requestRender() {
         const target = this.target;
-        if (target.parentApp)
-            return target.parentApp.renderer.update(false);
-        if (this.requestTime)
+        if (this.requestTime || !target)
             return;
+        if (target.parentApp)
+            return target.parentApp.requestRender(false);
         const requestTime = this.requestTime = Date.now();
         Platform.requestRender(() => {
             this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
             this.requestTime = 0;
-            if (target.isApp) {
-                target.emit(RenderEvent.CHILD_START, target);
-                target.children.forEach(leafer => {
-                    leafer.renderer.FPS = this.FPS;
-                    leafer.renderer.checkRender();
-                });
-                target.emit(RenderEvent.CHILD_END, target);
-            }
             this.checkRender();
         });
     }
@@ -842,8 +835,10 @@ Object.assign(Creator, {
 Platform.layout = Layouter.fullLayout;
 
 function fillText(ui, canvas) {
-    let row, data = ui.__.__textDrawData;
-    const { rows, decorationY } = data;
+    const data = ui.__, { rows, decorationY } = data.__textDrawData;
+    if (data.__isPlacehold && data.placeholderColor)
+        canvas.fillStyle = data.placeholderColor;
+    let row;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         if (row.text)
@@ -852,7 +847,7 @@ function fillText(ui, canvas) {
             row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
     }
     if (decorationY) {
-        const { decorationColor, decorationHeight } = data;
+        const { decorationColor, decorationHeight } = data.__textDrawData;
         if (decorationColor)
             canvas.fillStyle = decorationColor;
         rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
@@ -861,38 +856,44 @@ function fillText(ui, canvas) {
 
 function fill(fill, ui, canvas) {
     canvas.fillStyle = fill;
-    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+    fillPathOrText(ui, canvas);
 }
 function fills(fills, ui, canvas) {
     let item;
-    const { windingRule, __font } = ui.__;
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i];
-        if (item.image && PaintImage.checkImage(ui, canvas, item, !__font))
-            continue;
-        if (item.style) {
-            canvas.fillStyle = item.style;
-            if (item.transform) {
-                canvas.save();
-                canvas.transform(item.transform);
-                if (item.blendMode)
-                    canvas.blendMode = item.blendMode;
-                __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                canvas.restore();
+        if (item.image) {
+            if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
+                continue;
+            if (!item.style) {
+                if (!i && item.image.isPlacehold)
+                    ui.drawImagePlaceholder(canvas, item.image);
+                continue;
             }
-            else {
-                if (item.blendMode) {
-                    canvas.saveBlendMode(item.blendMode);
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    canvas.restoreBlendMode();
-                }
-                else {
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                }
+        }
+        canvas.fillStyle = item.style;
+        if (item.transform) {
+            canvas.save();
+            canvas.transform(item.transform);
+            if (item.blendMode)
+                canvas.blendMode = item.blendMode;
+            fillPathOrText(ui, canvas);
+            canvas.restore();
+        }
+        else {
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode);
+                fillPathOrText(ui, canvas);
+                canvas.restoreBlendMode();
             }
+            else
+                fillPathOrText(ui, canvas);
         }
     }
 }
+function fillPathOrText(ui, canvas) {
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+}
 
 function strokeText(stroke, ui, canvas) {
     const { strokeAlign } = ui.__;
@@ -1132,6 +1133,7 @@ const PaintModule = {
     compute,
     fill,
     fills,
+    fillPathOrText,
     fillText,
     stroke,
     strokes,
@@ -1324,6 +1326,13 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
+        if (ui.placeholderColor)
+            setTimeout(() => {
+                if (!(image.ready || image.isPlacehold)) {
+                    image.isPlacehold = true;
+                    ui.forceUpdate('surface');
+                }
+            }, 100);
     }
     return leafPaint;
 }
@@ -2392,7 +2401,7 @@ const ExportModule = {
         else {
             let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
             const { worldTransform, isLeafer, leafer, isFrame } = leaf;
-            const { slice, trim, padding, onCanvas } = options;
+            const { slice, clip, trim, padding, onCanvas } = options;
             const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
             const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
             const screenshot = options.screenshot || leaf.isApp;
@@ -2436,7 +2445,9 @@ const ExportModule = {
                 scaleData.scaleY *= pixelRatio;
                 pixelRatio = leaf.app.pixelRatio;
             }
-            const { x, y, width, height } = new Bounds$1(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            let { x, y, width, height } = new Bounds$1(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            if (clip)
+                x += clip.x, y += clip.y, width = clip.width, height = clip.height;
             const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
             let canvas = Creator$1.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
             let sliceLeaf;
@@ -2570,4 +2581,3 @@ Object.assign(Creator, {
 });
 
 export { Layouter, LeaferCanvas, Picker, Renderer, Selector, Watcher, useCanvas };
-//# sourceMappingURL=node.esm.js.map