leafer-ui 1.5.3 → 1.6.0

package/README.md

@@ -296,7 +296,7 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
     </p>
 <p><h3 align="center">铜牌赞助</h3></p>
 <p style="display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;">
-在路上 &nbsp;&nbsp;张余🌈 &nbsp;&nbsp;Jerry &nbsp;&nbsp;李狗嗨。💢 &nbsp;&nbsp;李维亮 &nbsp;&nbsp;朝夕 &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;zhk &nbsp;&nbsp;格子 &nbsp;&nbsp;等等 &nbsp;&nbsp;goosen &nbsp;&nbsp;建伟F4nniu &nbsp;&nbsp;梁福斌 &nbsp;&nbsp;江万江 &nbsp;&nbsp;杨超 &nbsp;&nbsp;ToB Dev &nbsp;&nbsp;前端之虎陈随易 &nbsp;&nbsp;A☀️云☀️A &nbsp;&nbsp;ʚ LMT ɞ &nbsp;&nbsp;爱发电用户_c9c82 &nbsp;&nbsp;轻简历 &nbsp;&nbsp;爱发电用户_0fac0 &nbsp;&nbsp;wangyesheji.cn &nbsp;&nbsp;风间 &nbsp;&nbsp;爱发电用户_Tqsm &nbsp;&nbsp;爱发电用户_6KpE &nbsp;&nbsp;dongdong &nbsp;&nbsp;zwm &nbsp;&nbsp;爱发电用户_3725c &nbsp;&nbsp;Noth1ng &nbsp;&nbsp;纳西妲の√ &nbsp;&nbsp;爱发电用户_Ahb9 &nbsp;&nbsp;爱发电用户_7617d &nbsp;&nbsp;冷漠 &nbsp;&nbsp;爱发电用户_9RXB &nbsp;&nbsp;今日值得读 &nbsp;&nbsp;爱发电用户_49sT &nbsp;&nbsp;爱发电用户_NFCS &nbsp;&nbsp;爱发电用户_43ad8 &nbsp;&nbsp;爱发电用户_30455 &nbsp;&nbsp;xiaozhang &nbsp;&nbsp;砖吐筷筷 &nbsp;&nbsp;爱发电用户_b47b3 &nbsp;&nbsp;longbow1998 &nbsp;&nbsp;爱发电用户_5d755 &nbsp;&nbsp;爱发电用户_b76b8 &nbsp;&nbsp;爱发电用户_e70c2 &nbsp;&nbsp;爱发电用户_039dc &nbsp;&nbsp;花祁 &nbsp;&nbsp;爱发电用户_99f39 &nbsp;&nbsp;坤坤 &nbsp;&nbsp;爱发电用户_X6hp &nbsp;&nbsp;爱发电用户_s5u9 &nbsp;&nbsp;曹吉美爸爸 &nbsp;&nbsp;啸沧海 &nbsp;&nbsp;Ronny &nbsp;&nbsp;Biu &nbsp;&nbsp;王志强 &nbsp;&nbsp;PD.新城คิดถึง &nbsp;&nbsp;糖颂缘冥倾 &nbsp;&nbsp;ALBERT. &nbsp;&nbsp;爱发电用户_UXEV &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;爱发电用户_76f9d &nbsp;&nbsp;Leafer &nbsp;&nbsp;爱发电用户_Pbm7 &nbsp;&nbsp;</p>
+Lauginwing &nbsp;&nbsp;江万江 &nbsp;&nbsp;在路上 &nbsp;&nbsp;张余🌈 &nbsp;&nbsp;Jerry &nbsp;&nbsp;李狗嗨。💢 &nbsp;&nbsp;李维亮 &nbsp;&nbsp;朝夕 &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;zhk &nbsp;&nbsp;格子 &nbsp;&nbsp;等等 &nbsp;&nbsp;goosen &nbsp;&nbsp;建伟F4nniu &nbsp;&nbsp;梁福斌 &nbsp;&nbsp;江万江 &nbsp;&nbsp;杨超 &nbsp;&nbsp;ToB Dev &nbsp;&nbsp;前端之虎陈随易 &nbsp;&nbsp;A☀️云☀️A &nbsp;&nbsp;ʚ LMT ɞ &nbsp;&nbsp;爱发电用户_c9c82 &nbsp;&nbsp;轻简历 &nbsp;&nbsp;爱发电用户_0fac0 &nbsp;&nbsp;wangyesheji.cn &nbsp;&nbsp;风间 &nbsp;&nbsp;爱发电用户_Tqsm &nbsp;&nbsp;爱发电用户_6KpE &nbsp;&nbsp;dongdong &nbsp;&nbsp;zwm &nbsp;&nbsp;爱发电用户_3725c &nbsp;&nbsp;Noth1ng &nbsp;&nbsp;纳西妲の√ &nbsp;&nbsp;爱发电用户_Ahb9 &nbsp;&nbsp;爱发电用户_7617d &nbsp;&nbsp;冷漠 &nbsp;&nbsp;爱发电用户_9RXB &nbsp;&nbsp;今日值得读 &nbsp;&nbsp;爱发电用户_49sT &nbsp;&nbsp;爱发电用户_NFCS &nbsp;&nbsp;爱发电用户_43ad8 &nbsp;&nbsp;爱发电用户_30455 &nbsp;&nbsp;xiaozhang &nbsp;&nbsp;砖吐筷筷 &nbsp;&nbsp;爱发电用户_b47b3 &nbsp;&nbsp;longbow1998 &nbsp;&nbsp;爱发电用户_5d755 &nbsp;&nbsp;爱发电用户_b76b8 &nbsp;&nbsp;爱发电用户_e70c2 &nbsp;&nbsp;爱发电用户_039dc &nbsp;&nbsp;花祁 &nbsp;&nbsp;爱发电用户_99f39 &nbsp;&nbsp;坤坤 &nbsp;&nbsp;爱发电用户_X6hp &nbsp;&nbsp;爱发电用户_s5u9 &nbsp;&nbsp;曹吉美爸爸 &nbsp;&nbsp;啸沧海 &nbsp;&nbsp;Ronny &nbsp;&nbsp;Biu &nbsp;&nbsp;王志强 &nbsp;&nbsp;PD.新城คิดถึง &nbsp;&nbsp;糖颂缘冥倾 &nbsp;&nbsp;ALBERT. &nbsp;&nbsp;爱发电用户_UXEV &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;爱发电用户_76f9d &nbsp;&nbsp;Leafer &nbsp;&nbsp;爱发电用户_Pbm7 &nbsp;&nbsp;</p>
 
 ## License
 

package/dist/web.cjs

@@ -423,7 +423,6 @@ function updateChange(updateList) {
 }
 
 const { worldBounds } = core.LeafBoundsHelper;
-const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
         this.updatedBounds = new core.Bounds();
@@ -437,13 +436,7 @@ class LayoutBlockData {
         this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
     }
     setAfter() {
-        const { list } = this.updatedList;
-        if (list.some(leaf => leaf.noBounds)) {
-            this.afterBounds.set(bigBounds);
-        }
-        else {
-            this.afterBounds.setListWithFn(list, worldBounds);
-        }
+        this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
         this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
     }
     merge(data) {
@@ -645,6 +638,13 @@ class Renderer {
     requestLayout() {
         this.target.emit(core.LayoutEvent.REQUEST);
     }
+    checkRender() {
+        if (this.running) {
+            if (this.changed && this.canvas.view)
+                this.render();
+            this.target.emit(core.RenderEvent.NEXT);
+        }
+    }
     render(callback) {
         if (!(this.running && this.canvas.view))
             return this.update();
@@ -653,8 +653,6 @@ class Renderer {
         this.totalBounds = new core.Bounds();
         debug.log(target.innerName, '--->');
         try {
-            if (!target.isApp)
-                target.app.emit(core.RenderEvent.CHILD_START, target);
             this.emitRender(core.RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(core.RenderEvent.END, this.totalBounds);
@@ -722,20 +720,12 @@ class Renderer {
     }
     clipRender(block) {
         const t = core.Run.start('PartRender');
-        const { canvas } = this;
-        const bounds = block.getIntersect(canvas.bounds);
-        const includes = block.includes(this.target.__world);
-        const realBounds = new core.Bounds(bounds);
+        const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new core.Bounds(bounds);
         canvas.save();
-        if (includes && !core.Debug.showRepaint) {
-            canvas.clear();
-        }
-        else {
-            bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
-            canvas.clearWorld(bounds, true);
-            canvas.clipWorld(bounds, true);
-        }
-        this.__render(bounds, includes, realBounds);
+        bounds.spread(Renderer.clipSpread).ceil();
+        canvas.clearWorld(bounds, true);
+        canvas.clipWorld(bounds, true);
+        this.__render(bounds, block.includes(this.target.__world), realBounds);
         canvas.restore();
         core.Run.end(t);
     }
@@ -749,23 +739,17 @@ class Renderer {
         core.Run.end(t);
     }
     __render(bounds, includes, realBounds) {
-        const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
+        const { canvas } = this, options = includes ? { includes } : { bounds, includes };
         if (this.needFill)
-            this.canvas.fillWorld(bounds, this.config.fill);
+            canvas.fillWorld(bounds, this.config.fill);
         if (core.Debug.showRepaint)
-            this.canvas.strokeWorld(bounds, 'red');
-        this.target.__render(this.canvas, options);
+            core.Debug.drawRepaint(canvas, bounds);
+        this.target.__render(canvas, options);
         this.renderBounds = realBounds = realBounds || bounds;
         this.renderOptions = options;
         this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
-        if (core.Debug.showHitView)
-            this.renderHitView(options);
-        if (core.Debug.showBoundsView)
-            this.renderBoundsView(options);
-        this.canvas.updateRender(realBounds);
-    }
-    renderHitView(_options) { }
-    renderBoundsView(_options) { }
+        canvas.updateRender(realBounds);
+    }
     addBlock(block) {
         if (!this.updateBlocks)
             this.updateBlocks = [];
@@ -781,17 +765,24 @@ class Renderer {
         }
     }
     __requestRender() {
+        const target = this.target;
+        if (target.parentApp)
+            return target.parentApp.renderer.update(false);
         if (this.requestTime)
             return;
         const requestTime = this.requestTime = Date.now();
         core.Platform.requestRender(() => {
             this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
             this.requestTime = 0;
-            if (this.running) {
-                if (this.changed && this.canvas.view)
-                    this.render();
-                this.target.emit(core.RenderEvent.NEXT);
+            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();
         });
     }
     __onResize(e) {
@@ -849,6 +840,7 @@ class Renderer {
         }
     }
 }
+Renderer.clipSpread = 10;
 
 const { hitRadiusPoint } = core.BoundsHelper;
 class Picker {
@@ -1677,9 +1669,11 @@ const tempBox = new core.Bounds();
 const tempPoint = {};
 const tempScaleData = {};
 function createData(leafPaint, image, paint, box) {
-    const { blendMode, sync } = paint;
+    const { blendMode, changeful, sync } = paint;
     if (blendMode)
         leafPaint.blendMode = blendMode;
+    if (changeful)
+        leafPaint.changeful = changeful;
     if (sync)
         leafPaint.sync = sync;
     leafPaint.data = getPatternData(paint, box, image);
@@ -1944,40 +1938,32 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 const { abs } = Math;
-function checkImage(ui, canvas, paint, allowPaint) {
+function checkImage(ui, canvas, paint, allowDraw) {
     const { scaleX, scaleY } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-    const { pixelRatio } = canvas;
-    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
+    const { pixelRatio } = canvas, { data } = paint;
+    if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
         return false;
     }
     else {
-        const { data } = paint;
-        if (allowPaint) {
-            if (!data.repeat) {
-                let { width, height } = data;
-                width *= abs(scaleX) * pixelRatio;
-                height *= abs(scaleY) * pixelRatio;
-                if (data.scaleX) {
-                    width *= data.scaleX;
-                    height *= data.scaleY;
-                }
-                allowPaint = (width * height > core.Platform.image.maxCacheSize) || draw.Export.running;
+        if (allowDraw) {
+            if (data.repeat) {
+                allowDraw = false;
             }
             else {
-                allowPaint = false;
+                if (!(paint.changeful || core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
+                    let { width, height } = data;
+                    width *= abs(scaleX) * pixelRatio;
+                    height *= abs(scaleY) * pixelRatio;
+                    if (data.scaleX) {
+                        width *= data.scaleX;
+                        height *= data.scaleY;
+                    }
+                    allowDraw = (width * height > core.Platform.image.maxCacheSize);
+                }
             }
         }
-        if (allowPaint) {
-            canvas.save();
-            ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
-            if (paint.blendMode)
-                canvas.blendMode = paint.blendMode;
-            if (data.opacity)
-                canvas.opacity *= data.opacity;
-            if (data.transform)
-                canvas.transform(data.transform);
-            canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
-            canvas.restore();
+        if (allowDraw) {
+            drawImage(ui, canvas, paint, data);
             return true;
         }
         else {
@@ -1998,13 +1984,26 @@ function checkImage(ui, canvas, paint, allowPaint) {
         }
     }
 }
+function drawImage(ui, canvas, paint, data) {
+    canvas.save();
+    ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
+    if (paint.blendMode)
+        canvas.blendMode = paint.blendMode;
+    if (data.opacity)
+        canvas.opacity *= data.opacity;
+    if (data.transform)
+        canvas.transform(data.transform);
+    canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
+    canvas.restore();
+}
 
 function recycleImage(attrName, data) {
     const paints = data['_' + attrName];
     if (paints instanceof Array) {
-        let image, recycleMap, input, url;
+        let paint, image, recycleMap, input, url;
         for (let i = 0, len = paints.length; i < len; i++) {
-            image = paints[i].image;
+            paint = paints[i];
+            image = paint.image;
             url = image && image.url;
             if (url) {
                 if (!recycleMap)
@@ -2019,8 +2018,6 @@ function recycleImage(attrName, data) {
                     }
                     image.unload(paints[i].loadId, !input.some((item) => item.url === url));
                 }
-                else
-                    paints[i].style = null;
             }
         }
         return recycleMap;
@@ -2199,7 +2196,7 @@ const { toOffsetOutBounds } = core.BoundsHelper;
 const offsetOutBounds = {};
 function innerShadow(ui, current, shape) {
     let copyBounds, spreadScale;
-    const { __nowWorld: nowWorld, __layout: __layout } = ui;
+    const { __nowWorld: nowWorld, __layout } = ui;
     const { innerShadow } = ui.__;
     const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
     const other = current.getSameCanvas();