@codehz/draw-call 0.2.2 → 0.4.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/index.d.cts DELETED
@@ -1,54 +0,0 @@
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
-
3
- //#region src/components/Box.d.ts
4
- declare function Box(props: BoxProps): BoxElement;
5
- //#endregion
6
- //#region src/components/CustomDraw.d.ts
7
- declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
8
- //#endregion
9
- //#region src/components/Image.d.ts
10
- declare function Image(props: ImageProps): ImageElement;
11
- //#endregion
12
- //#region src/components/RichText.d.ts
13
- declare function RichText(props: RichTextProps): RichTextElement;
14
- //#endregion
15
- //#region src/components/Stack.d.ts
16
- declare function Stack(props: StackProps): StackElement;
17
- //#endregion
18
- //#region src/components/Svg.d.ts
19
- declare function Svg(props: SvgProps): SvgElement;
20
- declare const svg: {
21
- rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
22
- circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
23
- ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
24
- line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
25
- polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
26
- polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
27
- path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
28
- text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
29
- g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
30
- };
31
- //#endregion
32
- //#region src/components/Text.d.ts
33
- declare function Text(props: TextProps): TextElement;
34
- //#endregion
35
- //#region src/components/Transform.d.ts
36
- declare function Transform(props: TransformProps): TransformElement;
37
- //#endregion
38
- //#region src/layout/engine.d.ts
39
- declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
40
- //#endregion
41
- //#region src/layout/utils/print.d.ts
42
- /**
43
- * 打印 LayoutNode 树结构到控制台
44
- */
45
- declare function printLayout(node: LayoutNode): void;
46
- /**
47
- * 将 LayoutNode 转换为美观的字符串
48
- * @param node LayoutNode 根节点
49
- * @param indent 缩进字符串,默认为两个空格
50
- * @returns 格式化的字符串
51
- */
52
- declare function layoutToString(node: LayoutNode, _indent?: string): string;
53
- //#endregion
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 DELETED
@@ -1,54 +0,0 @@
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
-
3
- //#region src/components/Box.d.ts
4
- declare function Box(props: BoxProps): BoxElement;
5
- //#endregion
6
- //#region src/components/CustomDraw.d.ts
7
- declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
8
- //#endregion
9
- //#region src/components/Image.d.ts
10
- declare function Image(props: ImageProps): ImageElement;
11
- //#endregion
12
- //#region src/components/RichText.d.ts
13
- declare function RichText(props: RichTextProps): RichTextElement;
14
- //#endregion
15
- //#region src/components/Stack.d.ts
16
- declare function Stack(props: StackProps): StackElement;
17
- //#endregion
18
- //#region src/components/Svg.d.ts
19
- declare function Svg(props: SvgProps): SvgElement;
20
- declare const svg: {
21
- rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
22
- circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
23
- ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
24
- line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
25
- polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
26
- polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
27
- path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
28
- text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
29
- g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
30
- };
31
- //#endregion
32
- //#region src/components/Text.d.ts
33
- declare function Text(props: TextProps): TextElement;
34
- //#endregion
35
- //#region src/components/Transform.d.ts
36
- declare function Transform(props: TransformProps): TransformElement;
37
- //#endregion
38
- //#region src/layout/engine.d.ts
39
- declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
40
- //#endregion
41
- //#region src/layout/utils/print.d.ts
42
- /**
43
- * 打印 LayoutNode 树结构到控制台
44
- */
45
- declare function printLayout(node: LayoutNode): void;
46
- /**
47
- * 将 LayoutNode 转换为美观的字符串
48
- * @param node LayoutNode 根节点
49
- * @param indent 缩进字符串,默认为两个空格
50
- * @returns 格式化的字符串
51
- */
52
- declare function layoutToString(node: LayoutNode, _indent?: string): string;
53
- //#endregion
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 DELETED
@@ -1,226 +0,0 @@
1
- import { a as radialGradient, i as linearGradient, n as computeLayout, r as createCanvasMeasureContext, t as renderNode } from "./render.mjs";
2
-
3
- //#region src/canvas.ts
4
- /**
5
- * 创建适用于浏览器环境的 Canvas
6
- *
7
- * 在浏览器环境中使用,支持传入已有的 canvas 实例
8
- */
9
- function createCanvas(options) {
10
- const { width, height, pixelRatio = 1 } = options;
11
- let canvas;
12
- if (options.canvas) canvas = options.canvas;
13
- else {
14
- const el = document.createElement("canvas");
15
- el.width = width * pixelRatio;
16
- el.height = height * pixelRatio;
17
- canvas = el;
18
- }
19
- const ctx = canvas.getContext("2d");
20
- if (!ctx) throw new Error("Failed to get 2d context");
21
- if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
22
- if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
23
- if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
24
- const measureCtx = createCanvasMeasureContext(ctx);
25
- return {
26
- width,
27
- height,
28
- pixelRatio,
29
- canvas,
30
- render(element) {
31
- const layoutTree = computeLayout(element, measureCtx, {
32
- minWidth: 0,
33
- maxWidth: width,
34
- minHeight: 0,
35
- maxHeight: height
36
- });
37
- renderNode(ctx, layoutTree);
38
- return layoutTree;
39
- },
40
- clear() {
41
- ctx.clearRect(0, 0, width, height);
42
- },
43
- getContext() {
44
- return ctx;
45
- },
46
- toDataURL(type, quality) {
47
- if ("toDataURL" in canvas && typeof canvas.toDataURL === "function") return canvas.toDataURL(type, quality);
48
- throw new Error("toDataURL not supported");
49
- },
50
- toBuffer(type = "image/png") {
51
- if ("toBuffer" in canvas && typeof canvas.toBuffer === "function") return canvas.toBuffer(type);
52
- throw new Error("toBuffer not supported in this environment");
53
- }
54
- };
55
- }
56
-
57
- //#endregion
58
- //#region src/components/Box.ts
59
- function Box(props) {
60
- return {
61
- type: "box",
62
- ...props
63
- };
64
- }
65
-
66
- //#endregion
67
- //#region src/components/CustomDraw.ts
68
- function CustomDraw(props) {
69
- return {
70
- type: "customdraw",
71
- ...props
72
- };
73
- }
74
-
75
- //#endregion
76
- //#region src/components/Image.ts
77
- function Image(props) {
78
- return {
79
- type: "image",
80
- ...props
81
- };
82
- }
83
-
84
- //#endregion
85
- //#region src/components/RichText.ts
86
- function RichText(props) {
87
- return {
88
- type: "richtext",
89
- ...props
90
- };
91
- }
92
-
93
- //#endregion
94
- //#region src/components/Stack.ts
95
- function Stack(props) {
96
- return {
97
- type: "stack",
98
- ...props
99
- };
100
- }
101
-
102
- //#endregion
103
- //#region src/components/Svg.ts
104
- function Svg(props) {
105
- return {
106
- type: "svg",
107
- ...props
108
- };
109
- }
110
- const svg = {
111
- rect: (props) => ({
112
- type: "rect",
113
- ...props
114
- }),
115
- circle: (props) => ({
116
- type: "circle",
117
- ...props
118
- }),
119
- ellipse: (props) => ({
120
- type: "ellipse",
121
- ...props
122
- }),
123
- line: (props) => ({
124
- type: "line",
125
- ...props
126
- }),
127
- polyline: (props) => ({
128
- type: "polyline",
129
- ...props
130
- }),
131
- polygon: (props) => ({
132
- type: "polygon",
133
- ...props
134
- }),
135
- path: (props) => ({
136
- type: "path",
137
- ...props
138
- }),
139
- text: (props) => ({
140
- type: "text",
141
- ...props
142
- }),
143
- g: (props) => ({
144
- type: "g",
145
- ...props
146
- })
147
- };
148
-
149
- //#endregion
150
- //#region src/components/Text.ts
151
- function Text(props) {
152
- return {
153
- type: "text",
154
- ...props
155
- };
156
- }
157
-
158
- //#endregion
159
- //#region src/components/Transform.ts
160
- function Transform(props) {
161
- return {
162
- type: "transform",
163
- ...props
164
- };
165
- }
166
-
167
- //#endregion
168
- //#region src/layout/utils/print.ts
169
- /**
170
- * 获取元素类型的显示名称
171
- */
172
- function getElementType(element) {
173
- switch (element.type) {
174
- case "box": return "Box";
175
- case "text": return `Text "${element.content.slice(0, 20)}${element.content.length > 20 ? "..." : ""}"`;
176
- case "stack": return "Stack";
177
- case "image": return "Image";
178
- case "svg": return "Svg";
179
- default: return element.type;
180
- }
181
- }
182
- /**
183
- * 递归打印布局树
184
- */
185
- function printLayoutToString(node, prefix = "", isLast = true, depth = 0) {
186
- const lines = [];
187
- const connector = isLast ? "└─ " : "├─ ";
188
- const type = getElementType(node.element);
189
- const { x, y, width, height } = node.layout;
190
- const childCount = node.children.length;
191
- lines.push(`${prefix}${connector}${type} @(${Math.round(x)},${Math.round(y)}) size:${Math.round(width)}x${Math.round(height)}`);
192
- if (node.element.type === "text" && node.lines) {
193
- const contentPrefix = prefix + (isLast ? " " : "│ ");
194
- for (let i = 0; i < node.lines.length; i++) {
195
- const lineText = node.lines[i];
196
- const isLastLine = i === node.lines.length - 1 && childCount === 0;
197
- lines.push(`${contentPrefix}${isLastLine ? "└─ " : "├─ "}${JSON.stringify(lineText)}`);
198
- }
199
- }
200
- for (let i = 0; i < node.children.length; i++) {
201
- const child = node.children[i];
202
- const isChildLast = i === node.children.length - 1;
203
- const childPrefix = prefix + (isLast ? " " : "│ ");
204
- lines.push(...printLayoutToString(child, childPrefix, isChildLast, depth + 1));
205
- }
206
- return lines;
207
- }
208
- /**
209
- * 打印 LayoutNode 树结构到控制台
210
- */
211
- function printLayout(node) {
212
- const lines = printLayoutToString(node, "", true);
213
- console.log(lines.join("\n"));
214
- }
215
- /**
216
- * 将 LayoutNode 转换为美观的字符串
217
- * @param node LayoutNode 根节点
218
- * @param indent 缩进字符串,默认为两个空格
219
- * @returns 格式化的字符串
220
- */
221
- function layoutToString(node, _indent = " ") {
222
- return printLayoutToString(node, "", true).join("\n");
223
- }
224
-
225
- //#endregion
226
- export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
package/node.cjs DELETED
@@ -1,50 +0,0 @@
1
- const require_render = require('./render.cjs');
2
- let _napi_rs_canvas = require("@napi-rs/canvas");
3
-
4
- //#region src/node.ts
5
- /**
6
- * 创建适用于 Node.js/Bun 环境的 Canvas
7
- *
8
- * 此函数需要 @napi-rs/canvas 作为依赖
9
- * 安装: bun add @napi-rs/canvas
10
- */
11
- function createNodeCanvas(options) {
12
- const { width, height, pixelRatio = 1 } = options;
13
- const canvas = (0, _napi_rs_canvas.createCanvas)(width * pixelRatio, height * pixelRatio);
14
- const ctx = canvas.getContext("2d");
15
- if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
16
- if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
17
- if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
18
- const measureCtx = require_render.createCanvasMeasureContext(ctx);
19
- return {
20
- width,
21
- height,
22
- pixelRatio,
23
- canvas,
24
- render(element) {
25
- const layoutTree = require_render.computeLayout(element, measureCtx, {
26
- minWidth: 0,
27
- maxWidth: width,
28
- minHeight: 0,
29
- maxHeight: height
30
- });
31
- require_render.renderNode(ctx, layoutTree);
32
- return layoutTree;
33
- },
34
- clear() {
35
- ctx.clearRect(0, 0, width, height);
36
- },
37
- getContext() {
38
- return ctx;
39
- },
40
- toDataURL(type, quality) {
41
- return canvas.toDataURL(type, quality);
42
- },
43
- toBuffer(type = "image/png") {
44
- return canvas.toBuffer(type);
45
- }
46
- };
47
- }
48
-
49
- //#endregion
50
- exports.createNodeCanvas = createNodeCanvas;
package/node.d.cts DELETED
@@ -1,12 +0,0 @@
1
- import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas.cjs";
2
-
3
- //#region src/node.d.ts
4
- /**
5
- * 创建适用于 Node.js/Bun 环境的 Canvas
6
- *
7
- * 此函数需要 @napi-rs/canvas 作为依赖
8
- * 安装: bun add @napi-rs/canvas
9
- */
10
- declare function createNodeCanvas(options: Omit<CanvasOptions, "canvas">): DrawCallCanvas;
11
- //#endregion
12
- export { createNodeCanvas };
package/node.d.mts DELETED
@@ -1,12 +0,0 @@
1
- import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas.mjs";
2
-
3
- //#region src/node.d.ts
4
- /**
5
- * 创建适用于 Node.js/Bun 环境的 Canvas
6
- *
7
- * 此函数需要 @napi-rs/canvas 作为依赖
8
- * 安装: bun add @napi-rs/canvas
9
- */
10
- declare function createNodeCanvas(options: Omit<CanvasOptions, "canvas">): DrawCallCanvas;
11
- //#endregion
12
- export { createNodeCanvas };
package/node.mjs DELETED
@@ -1,50 +0,0 @@
1
- import { n as computeLayout, r as createCanvasMeasureContext, t as renderNode } from "./render.mjs";
2
- import { createCanvas } from "@napi-rs/canvas";
3
-
4
- //#region src/node.ts
5
- /**
6
- * 创建适用于 Node.js/Bun 环境的 Canvas
7
- *
8
- * 此函数需要 @napi-rs/canvas 作为依赖
9
- * 安装: bun add @napi-rs/canvas
10
- */
11
- function createNodeCanvas(options) {
12
- const { width, height, pixelRatio = 1 } = options;
13
- const canvas = createCanvas(width * pixelRatio, height * pixelRatio);
14
- const ctx = canvas.getContext("2d");
15
- if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
16
- if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
17
- if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
18
- const measureCtx = createCanvasMeasureContext(ctx);
19
- return {
20
- width,
21
- height,
22
- pixelRatio,
23
- canvas,
24
- render(element) {
25
- const layoutTree = computeLayout(element, measureCtx, {
26
- minWidth: 0,
27
- maxWidth: width,
28
- minHeight: 0,
29
- maxHeight: height
30
- });
31
- renderNode(ctx, layoutTree);
32
- return layoutTree;
33
- },
34
- clear() {
35
- ctx.clearRect(0, 0, width, height);
36
- },
37
- getContext() {
38
- return ctx;
39
- },
40
- toDataURL(type, quality) {
41
- return canvas.toDataURL(type, quality);
42
- },
43
- toBuffer(type = "image/png") {
44
- return canvas.toBuffer(type);
45
- }
46
- };
47
- }
48
-
49
- //#endregion
50
- export { createNodeCanvas };