leafer-ui 1.5.2 → 1.6.0

package/README.md

@@ -63,62 +63,6 @@
 
 [docs](https://github.com/leaferjs/docs) 在线文档仓库。
 
-## 社区提问指南
-
-### ⏰ 每周 4 天工作制
-
-LeaferJS 试行 [4 天工作制](https://www.leaferjs.com/ui/blog/2025-02-06.html)（周一、二、四、五），寻求支持请留意时间，感谢你的支持与理解。
-
-### 一. 反馈 Bug 与建议
-
-发现 Bug 或有改进建议？欢迎在 GitHub 上 [提交 issue](https://github.com/leaferjs/leafer-ui/issues)，你的贡献能让 LeaferJS 变得更强大！
-
-```
-提交模版
-
-【Bug/建议】xxxxxxxxxxx 标题 xxxxxxxxxxxxxx
-
-环境：电脑 + window 11 + chrome 131 + leaferjs 1.5.2
-
-复现步骤：请提供详细的复现逻辑及可直接运行的代码，以便更快解决问题。
-```
-
-### 二. 求助使用问题？
-
-使用过程中遇到不懂的问题或缺失功能？我们提供了多种求助渠道，同时也招募社区管理员参与。
-
-#### 1. 社区支持（推荐）
-
-为让更多的人可以参与解答，同时让搜索引擎收录问题（避免重复劳动），请公开求助你的问题。
-
-[前往知乎](https://www.zhihu.com/topic/736459154/unanswered) 创建一个问题并绑定话题 [#LeaferJS](https://www.zhihu.com/topic/736459154/unanswered):
-
-```
-提交模版
-
-【leaferjs】xxxxxxxxxxx 标题 xxxxxxxxxxxxxx
-
-环境：电脑 + window 11 + chrome 131 + leaferjs 1.5.2
-
-#LeaferJS （点击知乎提问框底部的 # 号，可绑定话题）
-```
-
-我和社区管理员们会安排固定的时间查看、回复大家的问题，也可将链接转发到 [LeaferJS 技术交流群](https://leaferjs.com/#contact) 里。多次有效回答问题即视为有意愿成为 LeaferJS 社区管理员，可 [联系我们](https://leaferjs.com/#contact) 进管理群。
-
-#### 2. 官方支持
-
-由于资源有限，我们优先为 [金牌以上赞助用户](https://www.leaferjs.com/ui/sponsor/#%E5%BC%80%E5%8F%91%E8%B5%9E%E5%8A%A9) 和社区管理员提供支持（如优先修复 Bug、补充缺失功能）。随着资源增加，我们将招募更多专业人员，并开发系统化的 LeaferJS 场景教程。
-
-#### 3. 询问 AI （即将上线）
-
-我们计划训练、对接外部 AI 助手，预计 **未来几个月内** 上线，可自动解答 LeaferJS 相关问题。
-
-### 三、技术交流
-
-欢迎加入 [LeaferJS 技术交流群](https://leaferjs.com/#contact)，与社区开发者交流、分享经验、改进产品。
-
-偶尔还有 **福利活动**，不容错过！
-
 ## 使命与愿景
 
 LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标准，表现力丰富，便于 AI 理解，人类可视化使用，并为数字化产品开发提供跨平台、轻量化、高性能的运行时。
@@ -352,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();