leafer-ui 1.0.3 → 1.0.5

package/README.md

@@ -1,20 +1,26 @@
-# Leafer UI
+# leafer-ui
 
 [![LeaferJS](./leaferjs.jpg)](https://www.leaferjs.com)
 
-Leafer UI 是基于 [Leafer](https://github.com/leaferjs/leafer) 开发的一套绚丽多彩的 UI 绘图、交互框架，作为 [LeaferJS](https://www.leaferjs.com) 的表现层，可结合 AI 绘图、生成界面，表现力丰富、性能强劲。
+[**leafer-ui**](https://leaferjs.com/ui/guide/install/ui/start.html) 是基于核心库 [leafer](https://github.com/leaferjs/leafer) 开发的一套绚丽多彩的 UI 绘图、交互框架。作为[LeaferJS](https://www.leaferjs.com) 的表现层，可结合 AI 绘图、生成界面，表现力丰富、性能强劲，可媲美当前主流设计软件。
 
 提供了丰富的 UI 绘图元素，和开箱即用的功能，如自动布局、图形编辑、SVG 导出，方便与 Figma、Sketch 等产品进行数据交换。并为跨平台开发提供了统一的交互事件，如拖拽、旋转、缩放手势等。
 
-可用于高效绘图、组态、开发图形图像编辑软件。随着生态的不断发展，未来将支撑可视化开发网页、应用、游戏、动画。
+可用于高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑。随着生态的不断发展，未来将支撑可视化开发网页、应用、游戏、动画。
 
 v1.0 正式版已发布 🎉🎉🎉
 
-📗[图文并茂、由浅入深的了解 LeaferJS](https://leaferjs.com/ui/blog/2024-07-09.html)
+📗 [图文并茂、由浅入深的了解 LeaferJS](https://leaferjs.com/ui/blog/2024-07-09.html)
+
+📙 [全新动画、状态、过渡、游戏功能](https://leaferjs.com/ui/blog/2024-09-20.html)
+
+📘 [绝境中盛开，LeaferJS 的创业故事](https://leaferjs.com/ui/blog/2024-04-08.html)
+
+如果你觉得不错，请帮我们点个 [Star](https://github.com/leaferjs/leafer-ui) 🌟 ，让这个库被更多的人看见 - [GitHub](https://github.com/leaferjs/leafer-ui) / [Gitee](https://gitee.com/leaferjs/ui) ✨ ✨ ✨
 
 ## 快速安装
 
-🚀 想马上使用，请安装 [ leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)，开始你的探索之旅。
+🚀 想马上使用，请安装 [leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)，开始你的探索之旅。
 
 ## 场景版
 
@@ -22,17 +28,29 @@ v1.0 正式版已发布 🎉🎉🎉
 
 单纯绘图的场景，推荐安装更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/type/draw/start.html) （49KB min+gzip）。
 
+## 入门场景
+
+**高效绘图：** 长图、产品海报、印刷品等
+
+Flex 自动布局、中心绘制，后端批量生成，渐变、内外阴影、裁剪、遮罩、擦除...
+
+**UI 交互：** 小游戏、互动应用、组态等
+
+跨平台交互事件、手势，CSS 交互状态、光标，动画、状态、过渡、精灵，箭头、连线...
+
+**图形编辑：** 头像裁剪、图片、DIY 编辑器等
+
+丰富的图形编辑功能、高可定制，标尺、视窗控制、滚动条...
+
 ## 互动交流
 
-有问题、建议可以 [提交 issue](https://github.com/leaferjs/ui/issues)，留下你的贡献足迹。
+有问题、建议可以 [提交 issue](https://github.com/leaferjs/leafer-ui/issues)，留下你的贡献足迹。
 
 欢迎加入 [技术交流群](https://leaferjs.com/#contact) ，与小伙伴们建立联系，共同学习进步，偶尔会有特殊福利。
 
-🌟 记得前往 [GitHub](https://github.com/leaferjs/ui) / [Gitee](https://gitee.com/leaferjs/ui) 点亮你的 [小星星](https://github.com/leaferjs/ui) ✨ ✨ ✨
-
 ## 使命与愿景
 
-Leafer UI 致力于实现一套简洁、开放、现代化的 UI 绘图语言标准，表现力丰富，便于 AI 理解，人类可视化使用，并为数字化产品开发提供跨平台、轻量化、高性能的运行时。
+leafer-ui 致力于实现一套简洁、开放、现代化的 UI 绘图语言标准，表现力丰富，便于 AI 理解，人类可视化使用，并为数字化产品开发提供跨平台、轻量化、高性能的运行时。
 
 让不同的软件之间能够沟通、协作、共享绘图数据，让数字化产品开发可以更快、更简单。
 
@@ -50,10 +68,10 @@ Leafer UI 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
 
 [LeaferJS 主仓库](https://github.com/leaferjs/LeaferJS)
 
-[Leafer 仓库](https://github.com/leaferjs/leafer)
+[leafer 仓库](https://github.com/leaferjs/leafer)
 
-[LeaferIN 官方插件仓库](https://github.com/leaferjs/in)
+[leafer-in 官方插件仓库](https://github.com/leaferjs/leafer-in)
 
 ### License
 
-Leafer UI 是采用 MIT 许可的开源项目，可以永久免费使用。
+leafer-ui 是采用 MIT 许可的开源项目，可以永久免费使用。

package/dist/web.cjs

@@ -644,6 +644,7 @@ class Renderer {
         this.totalBounds = new core.Bounds();
         debug$1.log(target.innerName, '--->');
         try {
+            target.app.emit(core.RenderEvent.CHILD_START, target);
             this.emitRender(core.RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(core.RenderEvent.END, this.totalBounds);
@@ -941,7 +942,7 @@ class Picker {
             if (child.isBranch) {
                 if (hit || child.__ignoreHitWorld) {
                     this.eachFind(child.children, child.__onlyHitMask);
-                    if (child.isBranchLeaf && !this.findList.length)
+                    if (child.isBranchLeaf)
                         this.hitChild(child, point);
                 }
             }
@@ -1930,9 +1931,10 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, image.error);
     }
     else {
-        ignoreRender(ui, true);
-        if (firstUse)
+        if (firstUse) {
+            ignoreRender(ui, true);
             onLoad(ui, event);
+        }
         leafPaint.loadId = image.load(() => {
             ignoreRender(ui, false);
             if (!ui.destroyed) {
@@ -2576,11 +2578,12 @@ const { trimRight } = TextRowHelper;
 const { Letter, Single, Before, After, Symbol, Break } = CharType;
 let word, row, wordWidth, rowWidth, realWidth;
 let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
-let textDrawData, rows = [], bounds;
+let textDrawData, rows = [], bounds, findMaxWidth;
 function createRows(drawData, content, style) {
     textDrawData = drawData;
     rows = drawData.rows;
     bounds = drawData.bounds;
+    findMaxWidth = !bounds.width && !style.autoSizeAlign;
     const { __letterSpacing, paraIndent, textCase } = style;
     const { canvas } = core.Platform;
     const { width, height } = bounds;
@@ -2665,7 +2668,10 @@ function createRows(drawData, content, style) {
     else {
         content.split('\n').forEach(content => {
             textDrawData.paraNumber++;
-            rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
+            rowWidth = canvas.measureText(content).width;
+            rows.push({ x: paraIndent || 0, text: content, width: rowWidth, paraStart: true });
+            if (findMaxWidth)
+                setMaxWidth();
         });
     }
 }
@@ -2696,10 +2702,16 @@ function addRow() {
     row.width = rowWidth;
     if (bounds.width)
         trimRight(row);
+    else if (findMaxWidth)
+        setMaxWidth();
     rows.push(row);
     row = { words: [] };
     rowWidth = 0;
 }
+function setMaxWidth() {
+    if (rowWidth > (textDrawData.maxWidth || 0))
+        textDrawData.maxWidth = rowWidth;
+}
 
 const CharMode = 0;
 const WordMode = 1;
@@ -2771,34 +2783,32 @@ function toChar(data, charX, rowData, isOverflow) {
 
 function layoutText(drawData, style) {
     const { rows, bounds } = drawData;
-    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
+    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
     let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
     if (__clipText && realHeight > height) {
         realHeight = Math.max(height, __lineHeight);
         drawData.overflow = rows.length;
     }
-    else {
+    else if (height || autoSizeAlign) {
         switch (verticalAlign) {
             case 'middle':
                 y += (height - realHeight) / 2;
                 break;
-            case 'bottom':
-                y += (height - realHeight);
+            case 'bottom': y += (height - realHeight);
         }
     }
     starY += y;
-    let row, rowX, rowWidth;
+    let row, rowX, rowWidth, layoutWidth = (width || autoSizeAlign) ? width : drawData.maxWidth;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         row.x = x;
         if (row.width < width || (row.width > width && !__clipText)) {
             switch (textAlign) {
                 case 'center':
-                    row.x += (width - row.width) / 2;
+                    row.x += (layoutWidth - row.width) / 2;
                     break;
-                case 'right':
-                    row.x += width - row.width;
+                case 'right': row.x += layoutWidth - row.width;
             }
         }
         if (row.paraStart && paraSpacing && i > 0)
@@ -2903,14 +2913,14 @@ function getDrawData(content, style) {
     let height = style.__getInput('height') || 0;
     const { textDecoration, __font, __padding: padding } = style;
     if (padding) {
-        if (width) {
+        if (width)
+            x = padding[left], width -= (padding[right] + padding[left]);
+        else if (!style.autoSizeAlign)
             x = padding[left];
-            width -= (padding[right] + padding[left]);
-        }
-        if (height) {
+        if (height)
+            y = padding[top], height -= (padding[top] + padding[bottom]);
+        else if (!style.autoSizeAlign)
             y = padding[top];
-            height -= (padding[top] + padding[bottom]);
-        }
     }
     const drawData = {
         bounds: { x, y, width, height },
@@ -2930,22 +2940,20 @@ function getDrawData(content, style) {
     return drawData;
 }
 function padAutoText(padding, drawData, style, width, height) {
-    if (!width) {
+    if (!width && style.autoSizeAlign) {
         switch (style.textAlign) {
             case 'left':
                 offsetText(drawData, 'x', padding[left]);
                 break;
-            case 'right':
-                offsetText(drawData, 'x', -padding[right]);
+            case 'right': offsetText(drawData, 'x', -padding[right]);
         }
     }
-    if (!height) {
+    if (!height && style.autoSizeAlign) {
         switch (style.verticalAlign) {
             case 'top':
                 offsetText(drawData, 'y', padding[top]);
                 break;
-            case 'bottom':
-                offsetText(drawData, 'y', -padding[bottom]);
+            case 'bottom': offsetText(drawData, 'y', -padding[bottom]);
         }
     }
 }

package/dist/web.esm.js

@@ -645,6 +645,7 @@ class Renderer {
         this.totalBounds = new Bounds();
         debug$1.log(target.innerName, '--->');
         try {
+            target.app.emit(RenderEvent.CHILD_START, target);
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(RenderEvent.END, this.totalBounds);
@@ -942,7 +943,7 @@ class Picker {
             if (child.isBranch) {
                 if (hit || child.__ignoreHitWorld) {
                     this.eachFind(child.children, child.__onlyHitMask);
-                    if (child.isBranchLeaf && !this.findList.length)
+                    if (child.isBranchLeaf)
                         this.hitChild(child, point);
                 }
             }
@@ -1931,9 +1932,10 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, image.error);
     }
     else {
-        ignoreRender(ui, true);
-        if (firstUse)
+        if (firstUse) {
+            ignoreRender(ui, true);
             onLoad(ui, event);
+        }
         leafPaint.loadId = image.load(() => {
             ignoreRender(ui, false);
             if (!ui.destroyed) {
@@ -2577,11 +2579,12 @@ const { trimRight } = TextRowHelper;
 const { Letter, Single, Before, After, Symbol, Break } = CharType;
 let word, row, wordWidth, rowWidth, realWidth;
 let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
-let textDrawData, rows = [], bounds;
+let textDrawData, rows = [], bounds, findMaxWidth;
 function createRows(drawData, content, style) {
     textDrawData = drawData;
     rows = drawData.rows;
     bounds = drawData.bounds;
+    findMaxWidth = !bounds.width && !style.autoSizeAlign;
     const { __letterSpacing, paraIndent, textCase } = style;
     const { canvas } = Platform;
     const { width, height } = bounds;
@@ -2666,7 +2669,10 @@ function createRows(drawData, content, style) {
     else {
         content.split('\n').forEach(content => {
             textDrawData.paraNumber++;
-            rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
+            rowWidth = canvas.measureText(content).width;
+            rows.push({ x: paraIndent || 0, text: content, width: rowWidth, paraStart: true });
+            if (findMaxWidth)
+                setMaxWidth();
         });
     }
 }
@@ -2697,10 +2703,16 @@ function addRow() {
     row.width = rowWidth;
     if (bounds.width)
         trimRight(row);
+    else if (findMaxWidth)
+        setMaxWidth();
     rows.push(row);
     row = { words: [] };
     rowWidth = 0;
 }
+function setMaxWidth() {
+    if (rowWidth > (textDrawData.maxWidth || 0))
+        textDrawData.maxWidth = rowWidth;
+}
 
 const CharMode = 0;
 const WordMode = 1;
@@ -2772,34 +2784,32 @@ function toChar(data, charX, rowData, isOverflow) {
 
 function layoutText(drawData, style) {
     const { rows, bounds } = drawData;
-    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
+    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
     let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
     if (__clipText && realHeight > height) {
         realHeight = Math.max(height, __lineHeight);
         drawData.overflow = rows.length;
     }
-    else {
+    else if (height || autoSizeAlign) {
         switch (verticalAlign) {
             case 'middle':
                 y += (height - realHeight) / 2;
                 break;
-            case 'bottom':
-                y += (height - realHeight);
+            case 'bottom': y += (height - realHeight);
         }
     }
     starY += y;
-    let row, rowX, rowWidth;
+    let row, rowX, rowWidth, layoutWidth = (width || autoSizeAlign) ? width : drawData.maxWidth;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         row.x = x;
         if (row.width < width || (row.width > width && !__clipText)) {
             switch (textAlign) {
                 case 'center':
-                    row.x += (width - row.width) / 2;
+                    row.x += (layoutWidth - row.width) / 2;
                     break;
-                case 'right':
-                    row.x += width - row.width;
+                case 'right': row.x += layoutWidth - row.width;
             }
         }
         if (row.paraStart && paraSpacing && i > 0)
@@ -2904,14 +2914,14 @@ function getDrawData(content, style) {
     let height = style.__getInput('height') || 0;
     const { textDecoration, __font, __padding: padding } = style;
     if (padding) {
-        if (width) {
+        if (width)
+            x = padding[left], width -= (padding[right] + padding[left]);
+        else if (!style.autoSizeAlign)
             x = padding[left];
-            width -= (padding[right] + padding[left]);
-        }
-        if (height) {
+        if (height)
+            y = padding[top], height -= (padding[top] + padding[bottom]);
+        else if (!style.autoSizeAlign)
             y = padding[top];
-            height -= (padding[top] + padding[bottom]);
-        }
     }
     const drawData = {
         bounds: { x, y, width, height },
@@ -2931,22 +2941,20 @@ function getDrawData(content, style) {
     return drawData;
 }
 function padAutoText(padding, drawData, style, width, height) {
-    if (!width) {
+    if (!width && style.autoSizeAlign) {
         switch (style.textAlign) {
             case 'left':
                 offsetText(drawData, 'x', padding[left]);
                 break;
-            case 'right':
-                offsetText(drawData, 'x', -padding[right]);
+            case 'right': offsetText(drawData, 'x', -padding[right]);
         }
     }
-    if (!height) {
+    if (!height && style.autoSizeAlign) {
         switch (style.verticalAlign) {
             case 'top':
                 offsetText(drawData, 'y', padding[top]);
                 break;
-            case 'bottom':
-                offsetText(drawData, 'y', -padding[bottom]);
+            case 'bottom': offsetText(drawData, 'y', -padding[bottom]);
         }
     }
 }