@codehz/draw-call 0.2.0 → 0.2.1
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 +45 -2
- package/canvas.d.cts +60 -6
- package/canvas.d.mts +60 -6
- package/examples/customdraw-basic.ts +269 -0
- package/examples/customdraw.ts +339 -0
- package/examples/transform.ts +437 -0
- package/index.cjs +20 -0
- package/index.d.cts +7 -14
- package/index.d.mts +7 -14
- package/index.mjs +19 -1
- package/package.json +1 -1
- package/render.cjs +325 -13
- package/render.mjs +325 -13
|
@@ -0,0 +1,437 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 示例：演示 Transform 组件的基础属性
|
|
3
|
+
* 展示移动（translate）、旋转（rotate）、放大（scale）等变换效果
|
|
4
|
+
* 运行: bun examples/transform.ts
|
|
5
|
+
*/
|
|
6
|
+
import { Box, Text, Transform, printLayout } from "@codehz/draw-call";
|
|
7
|
+
import { createNodeCanvas } from "@codehz/draw-call/node";
|
|
8
|
+
import { GlobalFonts } from "@napi-rs/canvas";
|
|
9
|
+
import { fileURLToPath } from "bun";
|
|
10
|
+
|
|
11
|
+
GlobalFonts.registerFromPath(fileURLToPath(import.meta.resolve("@fontpkg/unifont/unifont-15.0.01.ttf")), "unifont");
|
|
12
|
+
|
|
13
|
+
const canvas = createNodeCanvas({
|
|
14
|
+
width: 800,
|
|
15
|
+
height: 1000,
|
|
16
|
+
pixelRatio: 2,
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// 创建一个简单的演示盒子
|
|
20
|
+
function DemoBox(label: string, transform?: any) {
|
|
21
|
+
return Transform({
|
|
22
|
+
transform,
|
|
23
|
+
transformOrigin: ["50%", "50%"],
|
|
24
|
+
children: Box({
|
|
25
|
+
width: 80,
|
|
26
|
+
height: 80,
|
|
27
|
+
background: "#667eea",
|
|
28
|
+
border: { radius: 8 },
|
|
29
|
+
justify: "center",
|
|
30
|
+
align: "center",
|
|
31
|
+
children: [
|
|
32
|
+
Text({
|
|
33
|
+
content: label,
|
|
34
|
+
font: { size: 12, weight: "bold", family: "unifont" },
|
|
35
|
+
color: "#ffffff",
|
|
36
|
+
}),
|
|
37
|
+
],
|
|
38
|
+
}),
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const layout = canvas.render(
|
|
43
|
+
Box({
|
|
44
|
+
width: "fill",
|
|
45
|
+
height: "fill",
|
|
46
|
+
background: "#f5f7fa",
|
|
47
|
+
padding: 20,
|
|
48
|
+
direction: "column",
|
|
49
|
+
gap: 20,
|
|
50
|
+
children: [
|
|
51
|
+
// 标题
|
|
52
|
+
Text({
|
|
53
|
+
content: "Transform 变换演示",
|
|
54
|
+
font: { size: 28, weight: "bold", family: "unifont" },
|
|
55
|
+
color: "#333333",
|
|
56
|
+
}),
|
|
57
|
+
|
|
58
|
+
// 第一行：平移演示
|
|
59
|
+
Box({
|
|
60
|
+
direction: "column",
|
|
61
|
+
gap: 10,
|
|
62
|
+
children: [
|
|
63
|
+
Text({
|
|
64
|
+
content: "1. 平移 (Translate)",
|
|
65
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
66
|
+
color: "#666666",
|
|
67
|
+
}),
|
|
68
|
+
Box({
|
|
69
|
+
background: "#ffffff",
|
|
70
|
+
border: { radius: 8 },
|
|
71
|
+
padding: 20,
|
|
72
|
+
direction: "row",
|
|
73
|
+
gap: 30,
|
|
74
|
+
align: "center",
|
|
75
|
+
children: [
|
|
76
|
+
// 没有变换
|
|
77
|
+
Box({
|
|
78
|
+
direction: "column",
|
|
79
|
+
gap: 8,
|
|
80
|
+
align: "center",
|
|
81
|
+
children: [
|
|
82
|
+
DemoBox("原始"),
|
|
83
|
+
Text({
|
|
84
|
+
content: "原始位置",
|
|
85
|
+
font: { size: 12, family: "unifont" },
|
|
86
|
+
color: "#999999",
|
|
87
|
+
}),
|
|
88
|
+
],
|
|
89
|
+
}),
|
|
90
|
+
// 向右平移 30 像素
|
|
91
|
+
Box({
|
|
92
|
+
direction: "column",
|
|
93
|
+
gap: 8,
|
|
94
|
+
align: "center",
|
|
95
|
+
children: [
|
|
96
|
+
DemoBox("右移30", {
|
|
97
|
+
translate: [30, 0],
|
|
98
|
+
}),
|
|
99
|
+
Text({
|
|
100
|
+
content: "translateX(30)",
|
|
101
|
+
font: { size: 12, family: "unifont" },
|
|
102
|
+
color: "#999999",
|
|
103
|
+
}),
|
|
104
|
+
],
|
|
105
|
+
}),
|
|
106
|
+
// 向下平移 20 像素
|
|
107
|
+
Box({
|
|
108
|
+
direction: "column",
|
|
109
|
+
gap: 8,
|
|
110
|
+
align: "center",
|
|
111
|
+
children: [
|
|
112
|
+
DemoBox("下移20", {
|
|
113
|
+
translate: [0, 20],
|
|
114
|
+
}),
|
|
115
|
+
Text({
|
|
116
|
+
content: "translateY(20)",
|
|
117
|
+
font: { size: 12, family: "unifont" },
|
|
118
|
+
color: "#999999",
|
|
119
|
+
}),
|
|
120
|
+
],
|
|
121
|
+
}),
|
|
122
|
+
// 同时平移
|
|
123
|
+
Box({
|
|
124
|
+
direction: "column",
|
|
125
|
+
gap: 8,
|
|
126
|
+
align: "center",
|
|
127
|
+
children: [
|
|
128
|
+
DemoBox("对角", {
|
|
129
|
+
translate: [25, 15],
|
|
130
|
+
}),
|
|
131
|
+
Text({
|
|
132
|
+
content: "translate(25, 15)",
|
|
133
|
+
font: { size: 12, family: "unifont" },
|
|
134
|
+
color: "#999999",
|
|
135
|
+
}),
|
|
136
|
+
],
|
|
137
|
+
}),
|
|
138
|
+
],
|
|
139
|
+
}),
|
|
140
|
+
],
|
|
141
|
+
}),
|
|
142
|
+
|
|
143
|
+
// 第二行：缩放演示
|
|
144
|
+
Box({
|
|
145
|
+
direction: "column",
|
|
146
|
+
gap: 10,
|
|
147
|
+
children: [
|
|
148
|
+
Text({
|
|
149
|
+
content: "2. 缩放 (Scale)",
|
|
150
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
151
|
+
color: "#666666",
|
|
152
|
+
}),
|
|
153
|
+
Box({
|
|
154
|
+
background: "#ffffff",
|
|
155
|
+
border: { radius: 8 },
|
|
156
|
+
padding: 20,
|
|
157
|
+
direction: "row",
|
|
158
|
+
gap: 30,
|
|
159
|
+
align: "center",
|
|
160
|
+
children: [
|
|
161
|
+
// 原始
|
|
162
|
+
Box({
|
|
163
|
+
direction: "column",
|
|
164
|
+
gap: 8,
|
|
165
|
+
align: "center",
|
|
166
|
+
children: [
|
|
167
|
+
DemoBox("1.0"),
|
|
168
|
+
Text({
|
|
169
|
+
content: "scale(1.0)",
|
|
170
|
+
font: { size: 12, family: "unifont" },
|
|
171
|
+
color: "#999999",
|
|
172
|
+
}),
|
|
173
|
+
],
|
|
174
|
+
}),
|
|
175
|
+
// 放大 1.5 倍
|
|
176
|
+
Box({
|
|
177
|
+
direction: "column",
|
|
178
|
+
gap: 8,
|
|
179
|
+
align: "center",
|
|
180
|
+
children: [
|
|
181
|
+
DemoBox("1.5倍", {
|
|
182
|
+
scale: 1.5,
|
|
183
|
+
}),
|
|
184
|
+
Text({
|
|
185
|
+
content: "scale(1.5)",
|
|
186
|
+
font: { size: 12, family: "unifont" },
|
|
187
|
+
color: "#999999",
|
|
188
|
+
}),
|
|
189
|
+
],
|
|
190
|
+
}),
|
|
191
|
+
// 缩小到 0.7 倍
|
|
192
|
+
Box({
|
|
193
|
+
direction: "column",
|
|
194
|
+
gap: 8,
|
|
195
|
+
align: "center",
|
|
196
|
+
children: [
|
|
197
|
+
DemoBox("0.7倍", {
|
|
198
|
+
scale: 0.7,
|
|
199
|
+
}),
|
|
200
|
+
Text({
|
|
201
|
+
content: "scale(0.7)",
|
|
202
|
+
font: { size: 12, family: "unifont" },
|
|
203
|
+
color: "#999999",
|
|
204
|
+
}),
|
|
205
|
+
],
|
|
206
|
+
}),
|
|
207
|
+
// 非均匀缩放
|
|
208
|
+
Box({
|
|
209
|
+
direction: "column",
|
|
210
|
+
gap: 8,
|
|
211
|
+
align: "center",
|
|
212
|
+
children: [
|
|
213
|
+
DemoBox("非均匀", {
|
|
214
|
+
scale: [1.3, 0.8],
|
|
215
|
+
}),
|
|
216
|
+
Text({
|
|
217
|
+
content: "scale(1.3, 0.8)",
|
|
218
|
+
font: { size: 12, family: "unifont" },
|
|
219
|
+
color: "#999999",
|
|
220
|
+
}),
|
|
221
|
+
],
|
|
222
|
+
}),
|
|
223
|
+
],
|
|
224
|
+
}),
|
|
225
|
+
],
|
|
226
|
+
}),
|
|
227
|
+
|
|
228
|
+
// 第三行：旋转演示
|
|
229
|
+
Box({
|
|
230
|
+
direction: "column",
|
|
231
|
+
gap: 10,
|
|
232
|
+
children: [
|
|
233
|
+
Text({
|
|
234
|
+
content: "3. 旋转 (Rotate)",
|
|
235
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
236
|
+
color: "#666666",
|
|
237
|
+
}),
|
|
238
|
+
Box({
|
|
239
|
+
background: "#ffffff",
|
|
240
|
+
border: { radius: 8 },
|
|
241
|
+
padding: 20,
|
|
242
|
+
direction: "row",
|
|
243
|
+
gap: 30,
|
|
244
|
+
align: "center",
|
|
245
|
+
children: [
|
|
246
|
+
// 原始
|
|
247
|
+
Box({
|
|
248
|
+
direction: "column",
|
|
249
|
+
gap: 8,
|
|
250
|
+
align: "center",
|
|
251
|
+
children: [
|
|
252
|
+
DemoBox("0°"),
|
|
253
|
+
Text({
|
|
254
|
+
content: "rotate(0°)",
|
|
255
|
+
font: { size: 12, family: "unifont" },
|
|
256
|
+
color: "#999999",
|
|
257
|
+
}),
|
|
258
|
+
],
|
|
259
|
+
}),
|
|
260
|
+
// 顺时针 45 度
|
|
261
|
+
Box({
|
|
262
|
+
direction: "column",
|
|
263
|
+
gap: 8,
|
|
264
|
+
align: "center",
|
|
265
|
+
children: [
|
|
266
|
+
DemoBox("45°", {
|
|
267
|
+
rotate: 45, // 45度
|
|
268
|
+
}),
|
|
269
|
+
Text({
|
|
270
|
+
content: "rotate(45°)",
|
|
271
|
+
font: { size: 12, family: "unifont" },
|
|
272
|
+
color: "#999999",
|
|
273
|
+
}),
|
|
274
|
+
],
|
|
275
|
+
}),
|
|
276
|
+
// 旋转 90 度
|
|
277
|
+
Box({
|
|
278
|
+
direction: "column",
|
|
279
|
+
gap: 8,
|
|
280
|
+
align: "center",
|
|
281
|
+
children: [
|
|
282
|
+
DemoBox("90°", {
|
|
283
|
+
rotate: 90, // 90度
|
|
284
|
+
}),
|
|
285
|
+
Text({
|
|
286
|
+
content: "rotate(90°)",
|
|
287
|
+
font: { size: 12, family: "unifont" },
|
|
288
|
+
color: "#999999",
|
|
289
|
+
}),
|
|
290
|
+
],
|
|
291
|
+
}),
|
|
292
|
+
// 旋转 -30 度
|
|
293
|
+
Box({
|
|
294
|
+
direction: "column",
|
|
295
|
+
gap: 8,
|
|
296
|
+
align: "center",
|
|
297
|
+
children: [
|
|
298
|
+
DemoBox("-30°", {
|
|
299
|
+
rotate: -30, // -30度
|
|
300
|
+
}),
|
|
301
|
+
Text({
|
|
302
|
+
content: "rotate(-30°)",
|
|
303
|
+
font: { size: 12, family: "unifont" },
|
|
304
|
+
color: "#999999",
|
|
305
|
+
}),
|
|
306
|
+
],
|
|
307
|
+
}),
|
|
308
|
+
],
|
|
309
|
+
}),
|
|
310
|
+
],
|
|
311
|
+
}),
|
|
312
|
+
|
|
313
|
+
// 第四行：组合变换演示
|
|
314
|
+
Box({
|
|
315
|
+
direction: "column",
|
|
316
|
+
gap: 10,
|
|
317
|
+
children: [
|
|
318
|
+
Text({
|
|
319
|
+
content: "4. 组合变换",
|
|
320
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
321
|
+
color: "#666666",
|
|
322
|
+
}),
|
|
323
|
+
Box({
|
|
324
|
+
background: "#ffffff",
|
|
325
|
+
border: { radius: 8 },
|
|
326
|
+
padding: 20,
|
|
327
|
+
direction: "row",
|
|
328
|
+
gap: 30,
|
|
329
|
+
align: "center",
|
|
330
|
+
children: [
|
|
331
|
+
// 平移 + 旋转
|
|
332
|
+
Box({
|
|
333
|
+
direction: "column",
|
|
334
|
+
gap: 8,
|
|
335
|
+
align: "center",
|
|
336
|
+
children: [
|
|
337
|
+
DemoBox("移+转", {
|
|
338
|
+
translate: [20, 10],
|
|
339
|
+
rotate: 30, // 30度
|
|
340
|
+
}),
|
|
341
|
+
Text({
|
|
342
|
+
content: "移动 + 旋转",
|
|
343
|
+
font: { size: 12, family: "unifont" },
|
|
344
|
+
color: "#999999",
|
|
345
|
+
}),
|
|
346
|
+
],
|
|
347
|
+
}),
|
|
348
|
+
// 缩放 + 旋转
|
|
349
|
+
Box({
|
|
350
|
+
direction: "column",
|
|
351
|
+
gap: 8,
|
|
352
|
+
align: "center",
|
|
353
|
+
children: [
|
|
354
|
+
DemoBox("缩+转", {
|
|
355
|
+
scale: 1.2,
|
|
356
|
+
rotate: -22.5, // -22.5度
|
|
357
|
+
}),
|
|
358
|
+
Text({
|
|
359
|
+
content: "缩放 + 旋转",
|
|
360
|
+
font: { size: 12, family: "unifont" },
|
|
361
|
+
color: "#999999",
|
|
362
|
+
}),
|
|
363
|
+
],
|
|
364
|
+
}),
|
|
365
|
+
// 三个变换组合
|
|
366
|
+
Box({
|
|
367
|
+
direction: "column",
|
|
368
|
+
gap: 8,
|
|
369
|
+
align: "center",
|
|
370
|
+
children: [
|
|
371
|
+
DemoBox("全部", {
|
|
372
|
+
translate: [15, 10],
|
|
373
|
+
scale: 1.1,
|
|
374
|
+
rotate: 45, // 45度
|
|
375
|
+
}),
|
|
376
|
+
Text({
|
|
377
|
+
content: "移动 + 缩放 + 旋转",
|
|
378
|
+
font: { size: 12, family: "unifont" },
|
|
379
|
+
color: "#999999",
|
|
380
|
+
}),
|
|
381
|
+
],
|
|
382
|
+
}),
|
|
383
|
+
// 使用 transformOrigin 改变变换中心
|
|
384
|
+
Box({
|
|
385
|
+
direction: "column",
|
|
386
|
+
gap: 8,
|
|
387
|
+
align: "center",
|
|
388
|
+
children: [
|
|
389
|
+
Transform({
|
|
390
|
+
transformOrigin: ["100%", "100%"],
|
|
391
|
+
transform: {
|
|
392
|
+
rotate: 45, // 45度
|
|
393
|
+
scale: 1.2,
|
|
394
|
+
},
|
|
395
|
+
children: Box({
|
|
396
|
+
width: 80,
|
|
397
|
+
height: 80,
|
|
398
|
+
background: "#764ba2",
|
|
399
|
+
border: { radius: 8 },
|
|
400
|
+
justify: "center",
|
|
401
|
+
align: "center",
|
|
402
|
+
children: [
|
|
403
|
+
Text({
|
|
404
|
+
content: "变换原点",
|
|
405
|
+
font: {
|
|
406
|
+
size: 12,
|
|
407
|
+
weight: "bold",
|
|
408
|
+
family: "unifont",
|
|
409
|
+
},
|
|
410
|
+
color: "#ffffff",
|
|
411
|
+
}),
|
|
412
|
+
],
|
|
413
|
+
}),
|
|
414
|
+
}),
|
|
415
|
+
Text({
|
|
416
|
+
content: "自定义原点",
|
|
417
|
+
font: { size: 12, family: "unifont" },
|
|
418
|
+
color: "#999999",
|
|
419
|
+
}),
|
|
420
|
+
],
|
|
421
|
+
}),
|
|
422
|
+
],
|
|
423
|
+
}),
|
|
424
|
+
],
|
|
425
|
+
}),
|
|
426
|
+
],
|
|
427
|
+
})
|
|
428
|
+
);
|
|
429
|
+
|
|
430
|
+
// 保存文件
|
|
431
|
+
const buffer = await canvas.toBuffer("image/png");
|
|
432
|
+
await Bun.write("examples/transform.png", buffer);
|
|
433
|
+
console.log("Transform demo saved to examples/transform.png");
|
|
434
|
+
|
|
435
|
+
// 打印布局树
|
|
436
|
+
console.log("\n=== Layout Tree ===");
|
|
437
|
+
printLayout(layout);
|
package/index.cjs
CHANGED
|
@@ -61,6 +61,15 @@ function Box(props) {
|
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
//#endregion
|
|
65
|
+
//#region src/components/CustomDraw.ts
|
|
66
|
+
function CustomDraw(props) {
|
|
67
|
+
return {
|
|
68
|
+
type: "customdraw",
|
|
69
|
+
...props
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
|
|
64
73
|
//#endregion
|
|
65
74
|
//#region src/components/Image.ts
|
|
66
75
|
function Image(props) {
|
|
@@ -144,6 +153,15 @@ function Text(props) {
|
|
|
144
153
|
};
|
|
145
154
|
}
|
|
146
155
|
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/components/Transform.ts
|
|
158
|
+
function Transform(props) {
|
|
159
|
+
return {
|
|
160
|
+
type: "transform",
|
|
161
|
+
...props
|
|
162
|
+
};
|
|
163
|
+
}
|
|
164
|
+
|
|
147
165
|
//#endregion
|
|
148
166
|
//#region src/layout/utils/print.ts
|
|
149
167
|
/**
|
|
@@ -204,11 +222,13 @@ function layoutToString(node, _indent = " ") {
|
|
|
204
222
|
|
|
205
223
|
//#endregion
|
|
206
224
|
exports.Box = Box;
|
|
225
|
+
exports.CustomDraw = CustomDraw;
|
|
207
226
|
exports.Image = Image;
|
|
208
227
|
exports.RichText = RichText;
|
|
209
228
|
exports.Stack = Stack;
|
|
210
229
|
exports.Svg = Svg;
|
|
211
230
|
exports.Text = Text;
|
|
231
|
+
exports.Transform = Transform;
|
|
212
232
|
exports.computeLayout = require_render.computeLayout;
|
|
213
233
|
exports.createCanvas = createCanvas;
|
|
214
234
|
exports.createCanvasMeasureContext = require_render.createCanvasMeasureContext;
|
package/index.d.cts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { $ as
|
|
1
|
+
import { $ as GradientDescriptor, A as SvgRectChild, B as ContainerLayoutProps, C as SvgEllipseChild, D as SvgPolygonChild, E as SvgPathChild, F as TextProps, G as LayoutProps, H as JustifyContent, I as TransformElement, J as Border, K as MeasureContext, L as TransformProps, M as SvgTextChild, N as SvgTransformProps, O as SvgPolylineChild, P as TextElement, Q as FontProps, R as AlignItems, S as SvgElement, T as SvgLineChild, U as LayoutConstraints, V as FlexDirection, W as LayoutNode, X as Color, Y as Bounds, Z as ColorStop, _ as StackElement, a as BoxElement, at as StrokeProps, b as SvgChild, c as CustomDrawProps, d as ImageProps, et as LinearGradientDescriptor, f as ProxiedCanvasContextOptions, g as StackAlign, h as RichTextSpan, i as createCanvas, it as Spacing, j as SvgStyleProps, k as SvgProps, l as Element, m as RichTextProps, n as DrawCallCanvas, nt as Shadow, o as BoxProps, ot as linearGradient, p as RichTextElement, q as createCanvasMeasureContext, r as LayoutSize, rt as Size, s as CustomDrawElement, st as radialGradient, t as CanvasOptions, tt as RadialGradientDescriptor, u as ImageElement, v as StackProps, w as SvgGroupChild, x as SvgCircleChild, y as SvgAlign, z as AlignSelf } from "./canvas.cjs";
|
|
2
2
|
|
|
3
3
|
//#region src/components/Box.d.ts
|
|
4
4
|
declare function Box(props: BoxProps): BoxElement;
|
|
5
5
|
//#endregion
|
|
6
|
+
//#region src/components/CustomDraw.d.ts
|
|
7
|
+
declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
|
|
8
|
+
//#endregion
|
|
6
9
|
//#region src/components/Image.d.ts
|
|
7
10
|
declare function Image(props: ImageProps): ImageElement;
|
|
8
11
|
//#endregion
|
|
@@ -29,18 +32,8 @@ declare const svg: {
|
|
|
29
32
|
//#region src/components/Text.d.ts
|
|
30
33
|
declare function Text(props: TextProps): TextElement;
|
|
31
34
|
//#endregion
|
|
32
|
-
//#region src/
|
|
33
|
-
|
|
34
|
-
width: number;
|
|
35
|
-
height: number;
|
|
36
|
-
offset: number;
|
|
37
|
-
ascent: number;
|
|
38
|
-
descent: number;
|
|
39
|
-
}
|
|
40
|
-
interface MeasureContext {
|
|
41
|
-
measureText(text: string, font: FontProps): MeasureTextResult;
|
|
42
|
-
}
|
|
43
|
-
declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
|
|
35
|
+
//#region src/components/Transform.d.ts
|
|
36
|
+
declare function Transform(props: TransformProps): TransformElement;
|
|
44
37
|
//#endregion
|
|
45
38
|
//#region src/layout/engine.d.ts
|
|
46
39
|
declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
|
|
@@ -58,4 +51,4 @@ declare function printLayout(node: LayoutNode): void;
|
|
|
58
51
|
*/
|
|
59
52
|
declare function layoutToString(node: LayoutNode, _indent?: string): string;
|
|
60
53
|
//#endregion
|
|
61
|
-
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
|
54
|
+
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawElement, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type ProxiedCanvasContextOptions, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
package/index.d.mts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { $ as
|
|
1
|
+
import { $ as GradientDescriptor, A as SvgRectChild, B as ContainerLayoutProps, C as SvgEllipseChild, D as SvgPolygonChild, E as SvgPathChild, F as TextProps, G as LayoutProps, H as JustifyContent, I as TransformElement, J as Border, K as MeasureContext, L as TransformProps, M as SvgTextChild, N as SvgTransformProps, O as SvgPolylineChild, P as TextElement, Q as FontProps, R as AlignItems, S as SvgElement, T as SvgLineChild, U as LayoutConstraints, V as FlexDirection, W as LayoutNode, X as Color, Y as Bounds, Z as ColorStop, _ as StackElement, a as BoxElement, at as StrokeProps, b as SvgChild, c as CustomDrawProps, d as ImageProps, et as LinearGradientDescriptor, f as ProxiedCanvasContextOptions, g as StackAlign, h as RichTextSpan, i as createCanvas, it as Spacing, j as SvgStyleProps, k as SvgProps, l as Element, m as RichTextProps, n as DrawCallCanvas, nt as Shadow, o as BoxProps, ot as linearGradient, p as RichTextElement, q as createCanvasMeasureContext, r as LayoutSize, rt as Size, s as CustomDrawElement, st as radialGradient, t as CanvasOptions, tt as RadialGradientDescriptor, u as ImageElement, v as StackProps, w as SvgGroupChild, x as SvgCircleChild, y as SvgAlign, z as AlignSelf } from "./canvas.mjs";
|
|
2
2
|
|
|
3
3
|
//#region src/components/Box.d.ts
|
|
4
4
|
declare function Box(props: BoxProps): BoxElement;
|
|
5
5
|
//#endregion
|
|
6
|
+
//#region src/components/CustomDraw.d.ts
|
|
7
|
+
declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
|
|
8
|
+
//#endregion
|
|
6
9
|
//#region src/components/Image.d.ts
|
|
7
10
|
declare function Image(props: ImageProps): ImageElement;
|
|
8
11
|
//#endregion
|
|
@@ -29,18 +32,8 @@ declare const svg: {
|
|
|
29
32
|
//#region src/components/Text.d.ts
|
|
30
33
|
declare function Text(props: TextProps): TextElement;
|
|
31
34
|
//#endregion
|
|
32
|
-
//#region src/
|
|
33
|
-
|
|
34
|
-
width: number;
|
|
35
|
-
height: number;
|
|
36
|
-
offset: number;
|
|
37
|
-
ascent: number;
|
|
38
|
-
descent: number;
|
|
39
|
-
}
|
|
40
|
-
interface MeasureContext {
|
|
41
|
-
measureText(text: string, font: FontProps): MeasureTextResult;
|
|
42
|
-
}
|
|
43
|
-
declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
|
|
35
|
+
//#region src/components/Transform.d.ts
|
|
36
|
+
declare function Transform(props: TransformProps): TransformElement;
|
|
44
37
|
//#endregion
|
|
45
38
|
//#region src/layout/engine.d.ts
|
|
46
39
|
declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
|
|
@@ -58,4 +51,4 @@ declare function printLayout(node: LayoutNode): void;
|
|
|
58
51
|
*/
|
|
59
52
|
declare function layoutToString(node: LayoutNode, _indent?: string): string;
|
|
60
53
|
//#endregion
|
|
61
|
-
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
|
54
|
+
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawElement, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type ProxiedCanvasContextOptions, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
package/index.mjs
CHANGED
|
@@ -61,6 +61,15 @@ function Box(props) {
|
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
//#endregion
|
|
65
|
+
//#region src/components/CustomDraw.ts
|
|
66
|
+
function CustomDraw(props) {
|
|
67
|
+
return {
|
|
68
|
+
type: "customdraw",
|
|
69
|
+
...props
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
|
|
64
73
|
//#endregion
|
|
65
74
|
//#region src/components/Image.ts
|
|
66
75
|
function Image(props) {
|
|
@@ -144,6 +153,15 @@ function Text(props) {
|
|
|
144
153
|
};
|
|
145
154
|
}
|
|
146
155
|
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/components/Transform.ts
|
|
158
|
+
function Transform(props) {
|
|
159
|
+
return {
|
|
160
|
+
type: "transform",
|
|
161
|
+
...props
|
|
162
|
+
};
|
|
163
|
+
}
|
|
164
|
+
|
|
147
165
|
//#endregion
|
|
148
166
|
//#region src/layout/utils/print.ts
|
|
149
167
|
/**
|
|
@@ -203,4 +221,4 @@ function layoutToString(node, _indent = " ") {
|
|
|
203
221
|
}
|
|
204
222
|
|
|
205
223
|
//#endregion
|
|
206
|
-
export { Box, Image, RichText, Stack, Svg, Text, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
|
224
|
+
export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|