@codehz/draw-call 0.1.2 → 0.2.1

package/examples/transform.ts

@@ -0,0 +1,437 @@
+/**
+ * 示例：演示 Transform 组件的基础属性
+ * 展示移动（translate）、旋转（rotate）、放大（scale）等变换效果
+ * 运行: bun examples/transform.ts
+ */
+import { Box, Text, Transform, printLayout } from "@codehz/draw-call";
+import { createNodeCanvas } from "@codehz/draw-call/node";
+import { GlobalFonts } from "@napi-rs/canvas";
+import { fileURLToPath } from "bun";
+
+GlobalFonts.registerFromPath(fileURLToPath(import.meta.resolve("@fontpkg/unifont/unifont-15.0.01.ttf")), "unifont");
+
+const canvas = createNodeCanvas({
+  width: 800,
+  height: 1000,
+  pixelRatio: 2,
+});
+
+// 创建一个简单的演示盒子
+function DemoBox(label: string, transform?: any) {
+  return Transform({
+    transform,
+    transformOrigin: ["50%", "50%"],
+    children: Box({
+      width: 80,
+      height: 80,
+      background: "#667eea",
+      border: { radius: 8 },
+      justify: "center",
+      align: "center",
+      children: [
+        Text({
+          content: label,
+          font: { size: 12, weight: "bold", family: "unifont" },
+          color: "#ffffff",
+        }),
+      ],
+    }),
+  });
+}
+
+const layout = canvas.render(
+  Box({
+    width: "fill",
+    height: "fill",
+    background: "#f5f7fa",
+    padding: 20,
+    direction: "column",
+    gap: 20,
+    children: [
+      // 标题
+      Text({
+        content: "Transform 变换演示",
+        font: { size: 28, weight: "bold", family: "unifont" },
+        color: "#333333",
+      }),
+
+      // 第一行：平移演示
+      Box({
+        direction: "column",
+        gap: 10,
+        children: [
+          Text({
+            content: "1. 平移 (Translate)",
+            font: { size: 16, weight: "bold", family: "unifont" },
+            color: "#666666",
+          }),
+          Box({
+            background: "#ffffff",
+            border: { radius: 8 },
+            padding: 20,
+            direction: "row",
+            gap: 30,
+            align: "center",
+            children: [
+              // 没有变换
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("原始"),
+                  Text({
+                    content: "原始位置",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 向右平移 30 像素
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("右移30", {
+                    translate: [30, 0],
+                  }),
+                  Text({
+                    content: "translateX(30)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 向下平移 20 像素
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("下移20", {
+                    translate: [0, 20],
+                  }),
+                  Text({
+                    content: "translateY(20)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 同时平移
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("对角", {
+                    translate: [25, 15],
+                  }),
+                  Text({
+                    content: "translate(25, 15)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+
+      // 第二行：缩放演示
+      Box({
+        direction: "column",
+        gap: 10,
+        children: [
+          Text({
+            content: "2. 缩放 (Scale)",
+            font: { size: 16, weight: "bold", family: "unifont" },
+            color: "#666666",
+          }),
+          Box({
+            background: "#ffffff",
+            border: { radius: 8 },
+            padding: 20,
+            direction: "row",
+            gap: 30,
+            align: "center",
+            children: [
+              // 原始
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("1.0"),
+                  Text({
+                    content: "scale(1.0)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 放大 1.5 倍
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("1.5倍", {
+                    scale: 1.5,
+                  }),
+                  Text({
+                    content: "scale(1.5)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 缩小到 0.7 倍
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("0.7倍", {
+                    scale: 0.7,
+                  }),
+                  Text({
+                    content: "scale(0.7)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 非均匀缩放
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("非均匀", {
+                    scale: [1.3, 0.8],
+                  }),
+                  Text({
+                    content: "scale(1.3, 0.8)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+
+      // 第三行：旋转演示
+      Box({
+        direction: "column",
+        gap: 10,
+        children: [
+          Text({
+            content: "3. 旋转 (Rotate)",
+            font: { size: 16, weight: "bold", family: "unifont" },
+            color: "#666666",
+          }),
+          Box({
+            background: "#ffffff",
+            border: { radius: 8 },
+            padding: 20,
+            direction: "row",
+            gap: 30,
+            align: "center",
+            children: [
+              // 原始
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("0°"),
+                  Text({
+                    content: "rotate(0°)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 顺时针 45 度
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("45°", {
+                    rotate: 45, // 45度
+                  }),
+                  Text({
+                    content: "rotate(45°)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 旋转 90 度
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("90°", {
+                    rotate: 90, // 90度
+                  }),
+                  Text({
+                    content: "rotate(90°)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 旋转 -30 度
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("-30°", {
+                    rotate: -30, // -30度
+                  }),
+                  Text({
+                    content: "rotate(-30°)",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+
+      // 第四行：组合变换演示
+      Box({
+        direction: "column",
+        gap: 10,
+        children: [
+          Text({
+            content: "4. 组合变换",
+            font: { size: 16, weight: "bold", family: "unifont" },
+            color: "#666666",
+          }),
+          Box({
+            background: "#ffffff",
+            border: { radius: 8 },
+            padding: 20,
+            direction: "row",
+            gap: 30,
+            align: "center",
+            children: [
+              // 平移 + 旋转
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("移+转", {
+                    translate: [20, 10],
+                    rotate: 30, // 30度
+                  }),
+                  Text({
+                    content: "移动 + 旋转",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 缩放 + 旋转
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("缩+转", {
+                    scale: 1.2,
+                    rotate: -22.5, // -22.5度
+                  }),
+                  Text({
+                    content: "缩放 + 旋转",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 三个变换组合
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  DemoBox("全部", {
+                    translate: [15, 10],
+                    scale: 1.1,
+                    rotate: 45, // 45度
+                  }),
+                  Text({
+                    content: "移动 + 缩放 + 旋转",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+              // 使用 transformOrigin 改变变换中心
+              Box({
+                direction: "column",
+                gap: 8,
+                align: "center",
+                children: [
+                  Transform({
+                    transformOrigin: ["100%", "100%"],
+                    transform: {
+                      rotate: 45, // 45度
+                      scale: 1.2,
+                    },
+                    children: Box({
+                      width: 80,
+                      height: 80,
+                      background: "#764ba2",
+                      border: { radius: 8 },
+                      justify: "center",
+                      align: "center",
+                      children: [
+                        Text({
+                          content: "变换原点",
+                          font: {
+                            size: 12,
+                            weight: "bold",
+                            family: "unifont",
+                          },
+                          color: "#ffffff",
+                        }),
+                      ],
+                    }),
+                  }),
+                  Text({
+                    content: "自定义原点",
+                    font: { size: 12, family: "unifont" },
+                    color: "#999999",
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  })
+);
+
+// 保存文件
+const buffer = await canvas.toBuffer("image/png");
+await Bun.write("examples/transform.png", buffer);
+console.log("Transform demo saved to examples/transform.png");
+
+// 打印布局树
+console.log("\n=== Layout Tree ===");
+printLayout(layout);

package/index.cjs

@@ -61,6 +61,15 @@ function Box(props) {
 	};
 }
 
+//#endregion
+//#region src/components/CustomDraw.ts
+function CustomDraw(props) {
+	return {
+		type: "customdraw",
+		...props
+	};
+}
+
 //#endregion
 //#region src/components/Image.ts
 function Image(props) {
@@ -70,6 +79,15 @@ function Image(props) {
 	};
 }
 
+//#endregion
+//#region src/components/RichText.ts
+function RichText(props) {
+	return {
+		type: "richtext",
+		...props
+	};
+}
+
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -135,15 +153,87 @@ function Text(props) {
 	};
 }
 
+//#endregion
+//#region src/components/Transform.ts
+function Transform(props) {
+	return {
+		type: "transform",
+		...props
+	};
+}
+
+//#endregion
+//#region src/layout/utils/print.ts
+/**
+* 获取元素类型的显示名称
+*/
+function getElementType(element) {
+	switch (element.type) {
+		case "box": return "Box";
+		case "text": return `Text "${element.content.slice(0, 20)}${element.content.length > 20 ? "..." : ""}"`;
+		case "stack": return "Stack";
+		case "image": return "Image";
+		case "svg": return "Svg";
+		default: return element.type;
+	}
+}
+/**
+* 递归打印布局树
+*/
+function printLayoutToString(node, prefix = "", isLast = true, depth = 0) {
+	const lines = [];
+	const connector = isLast ? "└─ " : "├─ ";
+	const type = getElementType(node.element);
+	const { x, y, width, height } = node.layout;
+	const childCount = node.children.length;
+	lines.push(`${prefix}${connector}${type} @(${Math.round(x)},${Math.round(y)}) size:${Math.round(width)}x${Math.round(height)}`);
+	if (node.element.type === "text" && node.lines) {
+		const contentPrefix = prefix + (isLast ? "    " : "│   ");
+		for (let i = 0; i < node.lines.length; i++) {
+			const lineText = node.lines[i];
+			const isLastLine = i === node.lines.length - 1 && childCount === 0;
+			lines.push(`${contentPrefix}${isLastLine ? "└─ " : "├─ "}${JSON.stringify(lineText)}`);
+		}
+	}
+	for (let i = 0; i < node.children.length; i++) {
+		const child = node.children[i];
+		const isChildLast = i === node.children.length - 1;
+		const childPrefix = prefix + (isLast ? "    " : "│   ");
+		lines.push(...printLayoutToString(child, childPrefix, isChildLast, depth + 1));
+	}
+	return lines;
+}
+/**
+* 打印 LayoutNode 树结构到控制台
+*/
+function printLayout(node) {
+	const lines = printLayoutToString(node, "", true);
+	console.log(lines.join("\n"));
+}
+/**
+* 将 LayoutNode 转换为美观的字符串
+* @param node LayoutNode 根节点
+* @param indent 缩进字符串，默认为两个空格
+* @returns 格式化的字符串
+*/
+function layoutToString(node, _indent = "  ") {
+	return printLayoutToString(node, "", true).join("\n");
+}
+
 //#endregion
 exports.Box = Box;
+exports.CustomDraw = CustomDraw;
 exports.Image = Image;
+exports.RichText = RichText;
 exports.Stack = Stack;
 exports.Svg = Svg;
 exports.Text = Text;
+exports.Transform = Transform;
 exports.computeLayout = require_render.computeLayout;
 exports.createCanvas = createCanvas;
 exports.createCanvasMeasureContext = require_render.createCanvasMeasureContext;
+exports.layoutToString = layoutToString;
 exports.linearGradient = require_render.linearGradient;
+exports.printLayout = printLayout;
 exports.radialGradient = require_render.radialGradient;
 exports.svg = svg;

package/index.d.cts

@@ -1,11 +1,17 @@
-import { A as AlignItems, B as Color, C as SvgProps, D as SvgTransformProps, E as SvgTextChild, F as LayoutConstraints, G as RadialGradientDescriptor, H as FontProps, I as LayoutNode, J as Spacing, K as Shadow, L as LayoutProps, M as ContainerLayoutProps, N as FlexDirection, O as TextElement, P as JustifyContent, R as Border, S as SvgPolylineChild, T as SvgStyleProps, U as GradientDescriptor, V as ColorStop, W as LinearGradientDescriptor, X as linearGradient, Y as StrokeProps, Z as radialGradient, _ as SvgEllipseChild, a as BoxElement, b as SvgPathChild, c as ImageElement, d as StackElement, f as StackProps, g as SvgElement, h as SvgCircleChild, i as createCanvas, j as AlignSelf, k as TextProps, l as ImageProps, m as SvgChild, n as DrawCallCanvas, o as BoxProps, p as SvgAlign, q as Size, r as LayoutSize, s as Element, t as CanvasOptions, u as StackAlign, v as SvgGroupChild, w as SvgRectChild, x as SvgPolygonChild, y as SvgLineChild, z as Bounds } from "./canvas.cjs";
+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";
 
 //#region src/components/Box.d.ts
 declare function Box(props: BoxProps): BoxElement;
 //#endregion
+//#region src/components/CustomDraw.d.ts
+declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
+//#endregion
 //#region src/components/Image.d.ts
 declare function Image(props: ImageProps): ImageElement;
 //#endregion
+//#region src/components/RichText.d.ts
+declare function RichText(props: RichTextProps): RichTextElement;
+//#endregion
 //#region src/components/Stack.d.ts
 declare function Stack(props: StackProps): StackElement;
 //#endregion
@@ -26,17 +32,23 @@ declare const svg: {
 //#region src/components/Text.d.ts
 declare function Text(props: TextProps): TextElement;
 //#endregion
-//#region src/layout/utils/measure.d.ts
-interface MeasureContext {
-  measureText(text: string, font: FontProps): {
-    width: number;
-    height: number;
-    offset: number;
-  };
-}
-declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
+//#region src/components/Transform.d.ts
+declare function Transform(props: TransformProps): TransformElement;
 //#endregion
 //#region src/layout/engine.d.ts
 declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
 //#endregion
-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, 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, linearGradient, radialGradient, svg };
+//#region src/layout/utils/print.d.ts
+/**
+ * 打印 LayoutNode 树结构到控制台
+ */
+declare function printLayout(node: LayoutNode): void;
+/**
+ * 将 LayoutNode 转换为美观的字符串
+ * @param node LayoutNode 根节点
+ * @param indent 缩进字符串，默认为两个空格
+ * @returns 格式化的字符串
+ */
+declare function layoutToString(node: LayoutNode, _indent?: string): string;
+//#endregion
+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

@@ -1,11 +1,17 @@
-import { A as AlignItems, B as Color, C as SvgProps, D as SvgTransformProps, E as SvgTextChild, F as LayoutConstraints, G as RadialGradientDescriptor, H as FontProps, I as LayoutNode, J as Spacing, K as Shadow, L as LayoutProps, M as ContainerLayoutProps, N as FlexDirection, O as TextElement, P as JustifyContent, R as Border, S as SvgPolylineChild, T as SvgStyleProps, U as GradientDescriptor, V as ColorStop, W as LinearGradientDescriptor, X as linearGradient, Y as StrokeProps, Z as radialGradient, _ as SvgEllipseChild, a as BoxElement, b as SvgPathChild, c as ImageElement, d as StackElement, f as StackProps, g as SvgElement, h as SvgCircleChild, i as createCanvas, j as AlignSelf, k as TextProps, l as ImageProps, m as SvgChild, n as DrawCallCanvas, o as BoxProps, p as SvgAlign, q as Size, r as LayoutSize, s as Element, t as CanvasOptions, u as StackAlign, v as SvgGroupChild, w as SvgRectChild, x as SvgPolygonChild, y as SvgLineChild, z as Bounds } from "./canvas.mjs";
+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";
 
 //#region src/components/Box.d.ts
 declare function Box(props: BoxProps): BoxElement;
 //#endregion
+//#region src/components/CustomDraw.d.ts
+declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
+//#endregion
 //#region src/components/Image.d.ts
 declare function Image(props: ImageProps): ImageElement;
 //#endregion
+//#region src/components/RichText.d.ts
+declare function RichText(props: RichTextProps): RichTextElement;
+//#endregion
 //#region src/components/Stack.d.ts
 declare function Stack(props: StackProps): StackElement;
 //#endregion
@@ -26,17 +32,23 @@ declare const svg: {
 //#region src/components/Text.d.ts
 declare function Text(props: TextProps): TextElement;
 //#endregion
-//#region src/layout/utils/measure.d.ts
-interface MeasureContext {
-  measureText(text: string, font: FontProps): {
-    width: number;
-    height: number;
-    offset: number;
-  };
-}
-declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
+//#region src/components/Transform.d.ts
+declare function Transform(props: TransformProps): TransformElement;
 //#endregion
 //#region src/layout/engine.d.ts
 declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
 //#endregion
-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, 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, linearGradient, radialGradient, svg };
+//#region src/layout/utils/print.d.ts
+/**
+ * 打印 LayoutNode 树结构到控制台
+ */
+declare function printLayout(node: LayoutNode): void;
+/**
+ * 将 LayoutNode 转换为美观的字符串
+ * @param node LayoutNode 根节点
+ * @param indent 缩进字符串，默认为两个空格
+ * @returns 格式化的字符串
+ */
+declare function layoutToString(node: LayoutNode, _indent?: string): string;
+//#endregion
+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 };