leafer-ui 1.4.0 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -15
- package/dist/web.cjs +13 -10
- package/dist/web.cjs.map +1 -1
- package/dist/web.esm.js +14 -11
- package/dist/web.esm.js.map +1 -1
- package/dist/web.esm.min.js +1 -1
- package/dist/web.esm.min.js.map +1 -1
- package/dist/web.js +324 -273
- package/dist/web.js.map +1 -1
- package/dist/web.min.cjs +1 -1
- package/dist/web.min.cjs.map +1 -1
- package/dist/web.min.js +1 -1
- package/dist/web.min.js.map +1 -1
- package/dist/web.module.js +323 -274
- package/dist/web.module.js.map +1 -1
- package/dist/web.module.min.js +1 -1
- package/dist/web.module.min.js.map +1 -1
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -12,7 +12,11 @@
|
|
|
12
12
|
|
|
13
13
|
📘 [绝境中盛开，LeaferJS 的创业故事](https://leaferjs.com/ui/blog/2024-04-08.html)
|
|
14
14
|
|
|
15
|
-
如果你觉得不错，请帮我们点个 [Star](https://github.com/leaferjs/leafer-ui) 🌟 ，让这个库被更多的人看见
|
|
15
|
+
如果你觉得不错，请帮我们点个 [Star](https://github.com/leaferjs/leafer-ui) 🌟 ，让这个库被更多的人看见 ✨ ✨ ✨
|
|
16
|
+
|
|
17
|
+
<a target="_blank" href="https://github.com/leaferjs/leafer-ui">
|
|
18
|
+
<img width="120" title="github" src="https://www.leaferjs.com/svg/github-stars.svg" />
|
|
19
|
+
</a>
|
|
16
20
|
|
|
17
21
|
## 快速入门
|
|
18
22
|
|
|
@@ -26,22 +30,15 @@
|
|
|
26
30
|
|
|
27
31
|
## 快速安装
|
|
28
32
|
|
|
29
|
-
🚀 想马上在产品中使用，请安装 [leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)
|
|
33
|
+
🚀 想马上在产品中使用，请安装 [leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)（60KB min+gzip），开始你的探索之旅。
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
<!-- ### 场景包
|
|
32
36
|
|
|
33
37
|
高效绘图场景，推荐直接安装更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/install/draw/start.html) （50KB min+gzip）。
|
|
34
38
|
|
|
35
39
|
游戏开发场景，推荐直接安装更省心的 [leafer-game](https://leaferjs.com/ui/guide/install/game/start.html)，已集成了游戏相关插件。
|
|
36
40
|
|
|
37
|
-
图形编辑场景，推荐直接安装更省心的 [leafer-editor](https://leaferjs.com/ui/guide/install/editor/start.html)，已集成了图形编辑器相关插件。
|
|
38
|
-
|
|
39
|
-
## 互动交流
|
|
40
|
-
|
|
41
|
-
有 Bug、建议可以 [提交 issue](https://github.com/leaferjs/leafer-ui/issues)，留下你的贡献足迹，了解 [提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7)
|
|
42
|
-
。
|
|
43
|
-
|
|
44
|
-
欢迎加入 [技术交流群](https://leaferjs.com/#contact) ，与小伙伴们建立联系，共同学习进步，偶尔会有特殊福利。
|
|
41
|
+
图形编辑场景，推荐直接安装更省心的 [leafer-editor](https://leaferjs.com/ui/guide/install/editor/start.html)，已集成了图形编辑器相关插件。 -->
|
|
45
42
|
|
|
46
43
|
## 仓库组成
|
|
47
44
|
|
|
@@ -61,6 +58,62 @@
|
|
|
61
58
|
|
|
62
59
|
[docs](https://github.com/leaferjs/docs) 在线文档仓库。
|
|
63
60
|
|
|
61
|
+
## 社区提问指南
|
|
62
|
+
|
|
63
|
+
### ⏰ 每周 4 天工作制
|
|
64
|
+
|
|
65
|
+
LeaferJS 试行 [4 天工作制](https://www.leaferjs.com/ui/blog/2025-02-06.html)（周一、二、四、五），寻求支持请留意时间，感谢你的支持与理解。
|
|
66
|
+
|
|
67
|
+
### 一. 反馈 Bug 与建议
|
|
68
|
+
|
|
69
|
+
发现 Bug 或有改进建议？欢迎在 GitHub 上 [提交 issue](https://github.com/leaferjs/leafer-ui/issues)，你的贡献能让 LeaferJS 变得更强大！
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
提交模版
|
|
73
|
+
|
|
74
|
+
【Bug/建议】xxxxxxxxxxx 标题 xxxxxxxxxxxxxx
|
|
75
|
+
|
|
76
|
+
环境：电脑 + window 11 + chrome 131 + leaferjs 1.4.2
|
|
77
|
+
|
|
78
|
+
复现步骤：请提供详细的复现逻辑及可直接运行的代码，以便更快解决问题。
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 二. 求助使用问题？
|
|
82
|
+
|
|
83
|
+
使用过程中遇到不懂的问题或缺失功能？我们提供了多种求助渠道，同时也招募社区管理员参与。
|
|
84
|
+
|
|
85
|
+
#### 1. 社区支持（推荐）
|
|
86
|
+
|
|
87
|
+
为让更多的人可以参与解答，同时让搜索引擎收录问题（避免重复劳动），请公开求助你的问题。
|
|
88
|
+
|
|
89
|
+
[前往知乎](https://www.zhihu.com/topic/736459154/unanswered) 创建一个问题并绑定话题 [#LeaferJS](https://www.zhihu.com/topic/736459154/unanswered):
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
提交模版
|
|
93
|
+
|
|
94
|
+
【leaferjs】xxxxxxxxxxx 标题 xxxxxxxxxxxxxx
|
|
95
|
+
|
|
96
|
+
环境：电脑 + window 11 + chrome 131 + leaferjs 1.4.2
|
|
97
|
+
|
|
98
|
+
#LeaferJS （点击知乎提问框底部的 # 号，可绑定话题）
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
我和社区管理员们会安排固定的时间查看、回复大家的问题，也可将链接转发到 [LeaferJS 技术交流群](https://leaferjs.com/#contact) 里。多次有效回答问题即视为有意愿成为 LeaferJS 社区管理员，可 [联系我们](https://leaferjs.com/#contact) 进管理群。
|
|
102
|
+
|
|
103
|
+
#### 2. 官方支持
|
|
104
|
+
|
|
105
|
+
由于资源有限，我们优先为 [金牌以上赞助用户](https://www.leaferjs.com/ui/sponsor/#%E5%BC%80%E5%8F%91%E8%B5%9E%E5%8A%A9) 和社区管理员提供支持（如优先修复 Bug、补充缺失功能）。随着资源增加，我们将招募更多专业人员，并开发系统化的 LeaferJS 场景教程。
|
|
106
|
+
|
|
107
|
+
#### 3. 询问 AI （即将上线）
|
|
108
|
+
|
|
109
|
+
我们计划训练、对接外部 AI 助手，预计 **未来几个月内** 上线，可自动解答 LeaferJS 相关问题。
|
|
110
|
+
|
|
111
|
+
### 三、技术交流
|
|
112
|
+
|
|
113
|
+
欢迎加入 [LeaferJS 技术交流群](https://leaferjs.com/#contact)，与社区开发者交流、分享经验、改进产品。
|
|
114
|
+
|
|
115
|
+
偶尔还有 **福利活动**，不容错过！
|
|
116
|
+
|
|
64
117
|
## 使命与愿景
|
|
65
118
|
|
|
66
119
|
LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标准，表现力丰富，便于 AI 理解，人类可视化使用，并为数字化产品开发提供跨平台、轻量化、高性能的运行时。
|
|
@@ -71,6 +124,8 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
|
|
|
71
124
|
|
|
72
125
|
我们的目标不仅是让它成为前沿的 2D 和未来的 3D 引擎技术，还希望它能够为开发者带来极致的开发体验，助力开发者快速构建 AI 时代的网页、应用、设计、画布、游戏和动画等可视化生产力工具（如下一代 local-first 的 Figma、Miro、Notion、Unity、Adobe、Canva、Webflow 等）。
|
|
73
126
|
|
|
127
|
+
|
|
128
|
+
|
|
74
129
|
|
|
75
130
|
|
|
76
131
|
这是一段漫长而又充满乐趣的旅程，我们正在年复一年、坚定地向这个目标持续前进，可以通过 [开发计划](https://www.leaferjs.com/ui/plan/) 了解更多信息。
|
|
@@ -99,8 +154,6 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
|
|
|
99
154
|
|
|
100
155
|
[提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7)
|
|
101
156
|
|
|
102
|
-
有问题、建议可以 提交 [issue](/https://github.com/leaferjs/leafer-ui/issues) 讨论，它更加开放与透明，能够帮助社区沉淀经验，避免重复劳动。
|
|
103
|
-
|
|
104
157
|
## 致谢贡献者
|
|
105
158
|
|
|
106
159
|
[每一位贡献代码的社区成员](https://github.com/leaferjs/leafer-ui/graphs/contributors)
|
|
@@ -141,7 +194,10 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
|
|
|
141
194
|
</p>
|
|
142
195
|
<p><h3 align="center">银牌赞助</h3></p>
|
|
143
196
|
<p style="display: flex;flex-wrap: wrap;justify-content: center;gap: 5px;">
|
|
144
|
-
<a target="_blank" href="https://
|
|
197
|
+
<a target="_blank" href="https://www.u-tools.cn/plugins/detail/%E6%88%AA%E5%9B%BE%E5%B7%A5%E5%85%B7%20Plus/index.html">
|
|
198
|
+
<img width="40" title="截图工具 Plus" src="https://www.leaferjs.com/image/sponsor/user/135.png" loading="lazy" />
|
|
199
|
+
</a>
|
|
200
|
+
<a target="_blank" href="https://frameelf.com/">
|
|
145
201
|
<img width="40" title="边框水印精灵" src="https://www.leaferjs.com/image/sponsor/user/134.jpg" loading="lazy" />
|
|
146
202
|
</a>
|
|
147
203
|
<a target="_blank" href="">
|
|
@@ -288,7 +344,7 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
|
|
|
288
344
|
</p>
|
|
289
345
|
<p><h3 align="center">铜牌赞助</h3></p>
|
|
290
346
|
<p style="display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;">
|
|
291
|
-
|
|
347
|
+
在路上 张余🌈 Jerry 李狗嗨。💢 李维亮 朝夕 SaltedFish zhk 格子 等等 goosen 建伟F4nniu 梁福斌 江万江 杨超 ToB Dev 前端之虎陈随易 A☀️云☀️A ʚ LMT ɞ 爱发电用户_c9c82 轻简历 爱发电用户_0fac0 wangyesheji.cn 风间 爱发电用户_Tqsm 爱发电用户_6KpE dongdong zwm 爱发电用户_3725c Noth1ng 纳西妲の√ 爱发电用户_Ahb9 爱发电用户_7617d 冷漠 爱发电用户_9RXB 今日值得读 爱发电用户_49sT 爱发电用户_NFCS 爱发电用户_43ad8 爱发电用户_30455 xiaozhang 砖吐筷筷 爱发电用户_b47b3 longbow1998 爱发电用户_5d755 爱发电用户_b76b8 爱发电用户_e70c2 爱发电用户_039dc 花祁 爱发电用户_99f39 坤坤 爱发电用户_X6hp 爱发电用户_s5u9 曹吉美爸爸 啸沧海 Ronny Biu 王志强 PD.新城คิดถึง 糖颂缘冥倾 ALBERT. 爱发电用户_UXEV SaltedFish 爱发电用户_76f9d Leafer 爱发电用户_Pbm7 </p>
|
|
292
348
|
|
|
293
349
|
## License
|
|
294
350
|
|
package/dist/web.cjs
CHANGED
|
@@ -259,7 +259,7 @@ if (userAgent.indexOf("Firefox") > -1) {
|
|
|
259
259
|
core.Platform.intWheelDeltaY = true;
|
|
260
260
|
core.Platform.syncDomFont = true;
|
|
261
261
|
}
|
|
262
|
-
else if (userAgent.indexOf("
|
|
262
|
+
else if (userAgent.indexOf("AppleWebKit") > -1) {
|
|
263
263
|
core.Platform.fullImageShadow = true;
|
|
264
264
|
}
|
|
265
265
|
if (userAgent.indexOf('Windows') > -1) {
|
|
@@ -528,7 +528,7 @@ class Layouter {
|
|
|
528
528
|
}
|
|
529
529
|
partLayout() {
|
|
530
530
|
var _a;
|
|
531
|
-
if (!((_a = this.__updatedList) === null || _a ===
|
|
531
|
+
if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
|
|
532
532
|
return;
|
|
533
533
|
const t = core.Run.start('PartLayout');
|
|
534
534
|
const { target, __updatedList: updateList } = this;
|
|
@@ -993,9 +993,10 @@ class Selector {
|
|
|
993
993
|
this.finder = core.Creator.finder && core.Creator.finder();
|
|
994
994
|
}
|
|
995
995
|
getByPoint(hitPoint, hitRadius, options) {
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
996
|
+
const { target, picker } = this;
|
|
997
|
+
if (core.Platform.backgrounder)
|
|
998
|
+
target && target.updateLayout();
|
|
999
|
+
return picker.getByPoint(hitPoint, hitRadius, options);
|
|
999
1000
|
}
|
|
1000
1001
|
getBy(condition, branch, one, options) {
|
|
1001
1002
|
return this.finder ? this.finder.getBy(condition, branch, one, options) : core.Plugin.need('find');
|
|
@@ -1683,7 +1684,7 @@ function getPatternData(paint, box, image) {
|
|
|
1683
1684
|
box = tempBox.set(box).shrink(paint.padding);
|
|
1684
1685
|
if (paint.mode === 'strench')
|
|
1685
1686
|
paint.mode = 'stretch';
|
|
1686
|
-
const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint;
|
|
1687
|
+
const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
|
|
1687
1688
|
const sameBox = box.width === width && box.height === height;
|
|
1688
1689
|
const data = { mode };
|
|
1689
1690
|
const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
|
|
@@ -1746,6 +1747,8 @@ function getPatternData(paint, box, image) {
|
|
|
1746
1747
|
data.height = height;
|
|
1747
1748
|
if (opacity)
|
|
1748
1749
|
data.opacity = opacity;
|
|
1750
|
+
if (filters)
|
|
1751
|
+
data.filters = filters;
|
|
1749
1752
|
if (repeat)
|
|
1750
1753
|
data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
|
|
1751
1754
|
return data;
|
|
@@ -1848,7 +1851,7 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1848
1851
|
scaleX = abs$1(scaleX);
|
|
1849
1852
|
scaleY = abs$1(scaleY);
|
|
1850
1853
|
const { image, data } = paint;
|
|
1851
|
-
let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy,
|
|
1854
|
+
let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
|
|
1852
1855
|
if (sx) {
|
|
1853
1856
|
imageMatrix = get$1();
|
|
1854
1857
|
copy$1(imageMatrix, transform);
|
|
@@ -1891,7 +1894,7 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1891
1894
|
}
|
|
1892
1895
|
scale(imageMatrix, 1 / scaleX, 1 / scaleY);
|
|
1893
1896
|
}
|
|
1894
|
-
const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, opacity);
|
|
1897
|
+
const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, data.opacity, data.filters);
|
|
1895
1898
|
const pattern = image.getPattern(canvas, repeat || (core.Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint);
|
|
1896
1899
|
paint.style = pattern;
|
|
1897
1900
|
paint.patternId = id;
|
|
@@ -1967,7 +1970,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1967
1970
|
canvas.opacity *= data.opacity;
|
|
1968
1971
|
if (data.transform)
|
|
1969
1972
|
canvas.transform(data.transform);
|
|
1970
|
-
canvas.drawImage(paint.image.
|
|
1973
|
+
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1971
1974
|
canvas.restore();
|
|
1972
1975
|
return true;
|
|
1973
1976
|
}
|
|
@@ -1977,7 +1980,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1977
1980
|
}
|
|
1978
1981
|
else {
|
|
1979
1982
|
if (!paint.patternTask) {
|
|
1980
|
-
paint.patternTask = core.ImageManager.patternTasker.add(() => __awaiter(this,
|
|
1983
|
+
paint.patternTask = core.ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
|
|
1981
1984
|
paint.patternTask = null;
|
|
1982
1985
|
if (canvas.bounds.hit(ui.__nowWorld))
|
|
1983
1986
|
createPattern(ui, paint, pixelRatio);
|