@codehz/draw-call 0.1.1 → 0.2.0

package/examples/richtext.ts

@@ -0,0 +1,284 @@
+/**
+ * 示例：使用 draw-call 的 RichText 组件
+ * 运行: bun examples/richtext.ts
+ */
+import { Box, RichText, Text } 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: 400,
+  height: 820,
+  pixelRatio: 2,
+});
+
+// 绘制背景
+canvas.render(
+  Box({
+    width: "fill",
+    height: "fill",
+    background: "#f8f9fa",
+    padding: 20,
+    direction: "column",
+    gap: 20,
+    children: [
+      // 标题
+      Text({
+        content: "RichText 富文本演示",
+        font: { size: 20, weight: "bold", family: "unifont" },
+        color: "#333",
+      }),
+
+      // 基本用法
+      Box({
+        background: "#ffffff",
+        border: { radius: 8 },
+        padding: 12,
+        shadow: { offsetY: 2, blur: 8, color: "rgba(0,0,0,0.06)" },
+        direction: "column",
+        gap: 8,
+        children: [
+          Text({
+            content: "基本用法 - 多样式文本",
+            font: { size: 12, family: "unifont" },
+            color: "#666",
+          }),
+          RichText({
+            spans: [
+              { text: "Hello, ", color: "#333", font: { size: 14, family: "unifont" } },
+              { text: "World", color: "#ff6b6b", font: { size: 18, weight: "bold", family: "unifont" } },
+              { text: "!", color: "#333", font: { size: 14, family: "unifont" } },
+            ],
+          }),
+        ],
+      }),
+
+      // 渐变色文本
+      Box({
+        background: "#ffffff",
+        border: { radius: 8 },
+        padding: 12,
+        shadow: { offsetY: 2, blur: 8, color: "rgba(0,0,0,0.06)" },
+        direction: "column",
+        gap: 8,
+        children: [
+          Text({
+            content: "带背景色的文本",
+            font: { size: 12, family: "unifont" },
+            color: "#666",
+          }),
+          RichText({
+            spans: [
+              { text: "红色背景", background: "#ffe8e8", color: "#f5222d" },
+              { text: " " },
+              { text: "绿色背景", background: "#f6ffed", color: "#52c41a" },
+              { text: " " },
+              { text: "蓝色背景", background: "#e8f4ff", color: "#1890ff" },
+            ],
+          }),
+        ],
+      }),
+
+      // 下划线和删除线
+      Box({
+        background: "#ffffff",
+        border: { radius: 8 },
+        padding: 12,
+        shadow: { offsetY: 2, blur: 8, color: "rgba(0,0,0,0.06)" },
+        direction: "column",
+        gap: 8,
+        children: [
+          Text({
+            content: "文本装饰 - 下划线和删除线",
+            font: { size: 12, family: "unifont" },
+            color: "#666",
+          }),
+          RichText({
+            spans: [
+              { text: "下划线文本", underline: true, color: "#333", font: { size: 14, family: "unifont" } },
+              { text: " " },
+              { text: "删除线文本", strikethrough: true, color: "#333", font: { size: 14, family: "unifont" } },
+              { text: " " },
+              {
+                text: "组合效果",
+                underline: true,
+                strikethrough: true,
+                color: "#f5222d",
+                font: { size: 14, family: "unifont" },
+              },
+            ],
+          }),
+        ],
+      }),
+
+      // 自动换行
+      Box({
+        background: "#ffffff",
+        border: { radius: 8 },
+        padding: 12,
+        shadow: { offsetY: 2, blur: 8, color: "rgba(0,0,0,0.06)" },
+        direction: "column",
+        gap: 8,
+        children: [
+          Text({
+            content: "自动换行 - 长文本",
+            font: { size: 12, family: "unifont" },
+            color: "#666",
+          }),
+          RichText({
+            spans: [
+              {
+                text: "这是一个很长很长的富文本段落，它会自动换行以适应容器的宽度。",
+                color: "#333",
+                font: { size: 13, family: "unifont" },
+              },
+            ],
+          }),
+        ],
+      }),
+
+      // 混合样式换行
+      Box({
+        background: "#ffffff",
+        border: { radius: 8 },
+        padding: 12,
+        shadow: { offsetY: 2, blur: 8, color: "rgba(0,0,0,0.06)" },
+        direction: "column",
+        gap: 8,
+        children: [
+          Text({
+            content: "混合样式自动换行",
+            font: { size: 12, family: "unifont" },
+            color: "#666",
+          }),
+          RichText({
+            spans: [
+              { text: "draw-call ", color: "#333", font: { size: 13, family: "unifont" } },
+              { text: "是一个", color: "#666", font: { size: 13, family: "unifont" } },
+              { text: "声明式", color: "#1890ff", font: { size: 13, weight: "bold", family: "unifont" } },
+              { text: " Canvas 绘图库，支持", color: "#333", font: { size: 13, family: "unifont" } },
+              { text: "Flexbox 布局", color: "#52c41a", font: { size: 13, family: "unifont" }, underline: true },
+              { text: "和", color: "#333", font: { size: 13, family: "unifont" } },
+              { text: "富文本渲染", color: "#f5222d", font: { size: 13, weight: "bold", family: "unifont" } },
+              { text: "。", color: "#333", font: { size: 13, family: "unifont" } },
+            ],
+          }),
+        ],
+      }),
+
+      // 对齐方式
+      Box({
+        background: "#ffffff",
+        border: { radius: 8 },
+        padding: 12,
+        shadow: { offsetY: 2, blur: 8, color: "rgba(0,0,0,0.06)" },
+        direction: "column",
+        gap: 8,
+        children: [
+          Text({
+            content: "文本对齐方式",
+            font: { size: 12, family: "unifont" },
+            color: "#666",
+          }),
+          Box({
+            width: "fill",
+            background: "#f5f5f5",
+            border: { radius: 4 },
+            padding: 8,
+            direction: "column",
+            gap: 4,
+            children: [
+              Text({
+                content: "左对齐:",
+                font: { size: 11, family: "unifont" },
+                color: "#999",
+              }),
+              RichText({
+                align: "left",
+                spans: [{ text: "这是一段左对齐的富文本", color: "#333", font: { size: 12, family: "unifont" } }],
+              }),
+            ],
+          }),
+          Box({
+            width: "fill",
+            background: "#f5f5f5",
+            border: { radius: 4 },
+            padding: 8,
+            direction: "column",
+            gap: 4,
+            children: [
+              Text({
+                content: "居中对齐:",
+                font: { size: 11, family: "unifont" },
+                color: "#999",
+              }),
+              RichText({
+                align: "center",
+                width: "fill",
+                spans: [{ text: "这是一段居中对齐的富文本", color: "#333", font: { size: 12, family: "unifont" } }],
+              }),
+            ],
+          }),
+          Box({
+            width: "fill",
+            background: "#f5f5f5",
+            border: { radius: 4 },
+            padding: 8,
+            direction: "column",
+            gap: 4,
+            children: [
+              Text({
+                content: "右对齐:",
+                font: { size: 11, family: "unifont" },
+                color: "#999",
+              }),
+              RichText({
+                align: "right",
+                width: "fill",
+                spans: [{ text: "这是一段右对齐的富文本", color: "#333", font: { size: 12, family: "unifont" } }],
+              }),
+            ],
+          }),
+        ],
+      }),
+
+      // 彩色标签云
+      Box({
+        background: "#ffffff",
+        border: { radius: 8 },
+        padding: 12,
+        shadow: { offsetY: 2, blur: 8, color: "rgba(0,0,0,0.06)" },
+        direction: "column",
+        gap: 8,
+        children: [
+          Text({
+            content: "彩色标签展示",
+            font: { size: 12, family: "unifont" },
+            color: "#666",
+          }),
+          RichText({
+            spans: [
+              { text: "TypeScript", background: "#e8f4ff", color: "#1890ff", font: { size: 12, family: "unifont" } },
+              { text: " " },
+              { text: "Canvas", background: "#f6ffed", color: "#52c41a", font: { size: 12, family: "unifont" } },
+              { text: " " },
+              { text: "Flexbox", background: "#fff7e6", color: "#fa8c16", font: { size: 12, family: "unifont" } },
+              { text: " " },
+              { text: "声明式", background: "#ffe8e8", color: "#f5222d", font: { size: 12, family: "unifont" } },
+              { text: " " },
+              { text: "组件化", background: "#f0f0ff", color: "#2f54eb", font: { size: 12, family: "unifont" } },
+            ],
+          }),
+        ],
+      }),
+    ],
+  })
+);
+
+// 保存到文件
+const buffer = await canvas.toBuffer("image/png");
+await Bun.write("examples/richtext.png", buffer);
+console.log("RichText demo saved to examples/richtext.png");

package/index.cjs

@@ -1,4 +1,4 @@
-const require_engine = require('./engine-OyKoV7Gn.cjs');
+const require_render = require('./render.cjs');
 
 //#region src/canvas.ts
 /**
@@ -19,19 +19,20 @@ function createCanvas(options) {
 	const ctx = canvas.getContext("2d");
 	if (!ctx) throw new Error("Failed to get 2d context");
 	if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
-	const measureCtx = require_engine.createCanvasMeasureContext(ctx);
+	const measureCtx = require_render.createCanvasMeasureContext(ctx);
 	return {
 		width,
 		height,
 		pixelRatio,
+		canvas,
 		render(element) {
-			const layoutTree = require_engine.computeLayout(element, measureCtx, {
+			const layoutTree = require_render.computeLayout(element, measureCtx, {
 				minWidth: 0,
 				maxWidth: width,
 				minHeight: 0,
 				maxHeight: height
 			});
-			require_engine.renderNode(ctx, layoutTree);
+			require_render.renderNode(ctx, layoutTree);
 			return layoutTree;
 		},
 		clear() {
@@ -44,7 +45,7 @@ function createCanvas(options) {
 			if ("toDataURL" in canvas && typeof canvas.toDataURL === "function") return canvas.toDataURL(type, quality);
 			throw new Error("toDataURL not supported");
 		},
-		async toBuffer(type = "image/png") {
+		toBuffer(type = "image/png") {
 			if ("toBuffer" in canvas && typeof canvas.toBuffer === "function") return canvas.toBuffer(type);
 			throw new Error("toBuffer not supported in this environment");
 		}
@@ -60,6 +61,24 @@ function Box(props) {
 	};
 }
 
+//#endregion
+//#region src/components/Image.ts
+function Image(props) {
+	return {
+		type: "image",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/RichText.ts
+function RichText(props) {
+	return {
+		type: "richtext",
+		...props
+	};
+}
+
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -69,6 +88,53 @@ function Stack(props) {
 	};
 }
 
+//#endregion
+//#region src/components/Svg.ts
+function Svg(props) {
+	return {
+		type: "svg",
+		...props
+	};
+}
+const svg = {
+	rect: (props) => ({
+		type: "rect",
+		...props
+	}),
+	circle: (props) => ({
+		type: "circle",
+		...props
+	}),
+	ellipse: (props) => ({
+		type: "ellipse",
+		...props
+	}),
+	line: (props) => ({
+		type: "line",
+		...props
+	}),
+	polyline: (props) => ({
+		type: "polyline",
+		...props
+	}),
+	polygon: (props) => ({
+		type: "polygon",
+		...props
+	}),
+	path: (props) => ({
+		type: "path",
+		...props
+	}),
+	text: (props) => ({
+		type: "text",
+		...props
+	}),
+	g: (props) => ({
+		type: "g",
+		...props
+	})
+};
+
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -78,12 +144,76 @@ function Text(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.Image = Image;
+exports.RichText = RichText;
 exports.Stack = Stack;
+exports.Svg = Svg;
 exports.Text = Text;
-exports.computeLayout = require_engine.computeLayout;
+exports.computeLayout = require_render.computeLayout;
 exports.createCanvas = createCanvas;
-exports.createCanvasMeasureContext = require_engine.createCanvasMeasureContext;
-exports.linearGradient = require_engine.linearGradient;
-exports.radialGradient = require_engine.radialGradient;
+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,12 +1,61 @@
-import { A as Shadow, C as Bounds, D as GradientDescriptor, E as FontProps, F as radialGradient, M as Spacing, N as StrokeProps, O as LinearGradientDescriptor, P as linearGradient, S as Border, T as ColorStop, _ as AlignSelf, a as LayoutNode, b as JustifyContent, c as createCanvasMeasureContext, d as Element, f as StackElement, g as AlignItems, h as TextProps, i as createCanvas, j as Size, k as RadialGradientDescriptor, l as BoxElement, m as TextElement, n as DrawCallCanvas, o as computeLayout, p as StackProps, r as LayoutSize, s as MeasureContext, t as CanvasOptions, u as BoxProps, v as ContainerLayoutProps, w as Color, x as LayoutProps, y as FlexDirection } from "./canvas-CkpP3RNK.cjs";
+import { $ as linearGradient, A as SvgTransformProps, B as LayoutProps, C as SvgPathChild, D as SvgRectChild, E as SvgProps, F as ContainerLayoutProps, G as FontProps, H as Bounds, I as FlexDirection, J as RadialGradientDescriptor, K as GradientDescriptor, L as JustifyContent, M as TextProps, N as AlignItems, O as SvgStyleProps, P as AlignSelf, Q as StrokeProps, R as LayoutConstraints, S as SvgLineChild, T as SvgPolylineChild, U as Color, V as Border, W as ColorStop, X as Size, Y as Shadow, Z as Spacing, _ as SvgChild, a as BoxElement, b as SvgEllipseChild, c as ImageElement, d as RichTextProps, et as radialGradient, f as RichTextSpan, g as SvgAlign, h as StackProps, i as createCanvas, j as TextElement, k as SvgTextChild, l as ImageProps, m as StackElement, n as DrawCallCanvas, o as BoxProps, p as StackAlign, q as LinearGradientDescriptor, r as LayoutSize, s as Element, t as CanvasOptions, u as RichTextElement, v as SvgCircleChild, w as SvgPolygonChild, x as SvgGroupChild, y as SvgElement, z as LayoutNode } from "./canvas.cjs";
 
 //#region src/components/Box.d.ts
 declare function Box(props: BoxProps): BoxElement;
 //#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
+//#region src/components/Svg.d.ts
+declare function Svg(props: SvgProps): SvgElement;
+declare const svg: {
+  rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
+  circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
+  ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
+  line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
+  polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
+  polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
+  path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
+  text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
+  g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
+};
+//#endregion
 //#region src/components/Text.d.ts
 declare function Text(props: TextProps): TextElement;
 //#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, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, type Shadow, type Size, type Spacing, Stack, type StackElement, type StackProps, type StrokeProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient };
+//#region src/layout/utils/measure.d.ts
+interface MeasureTextResult {
+  width: number;
+  height: number;
+  offset: number;
+  ascent: number;
+  descent: number;
+}
+interface MeasureContext {
+  measureText(text: string, font: FontProps): MeasureTextResult;
+}
+declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
+//#endregion
+//#region src/layout/engine.d.ts
+declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+//#endregion
+//#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, 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 };

package/index.d.mts

@@ -1,12 +1,61 @@
-import { A as Shadow, C as Bounds, D as GradientDescriptor, E as FontProps, F as radialGradient, M as Spacing, N as StrokeProps, O as LinearGradientDescriptor, P as linearGradient, S as Border, T as ColorStop, _ as AlignSelf, a as LayoutNode, b as JustifyContent, c as createCanvasMeasureContext, d as Element, f as StackElement, g as AlignItems, h as TextProps, i as createCanvas, j as Size, k as RadialGradientDescriptor, l as BoxElement, m as TextElement, n as DrawCallCanvas, o as computeLayout, p as StackProps, r as LayoutSize, s as MeasureContext, t as CanvasOptions, u as BoxProps, v as ContainerLayoutProps, w as Color, x as LayoutProps, y as FlexDirection } from "./canvas-BYrCq8eS.mjs";
+import { $ as linearGradient, A as SvgTransformProps, B as LayoutProps, C as SvgPathChild, D as SvgRectChild, E as SvgProps, F as ContainerLayoutProps, G as FontProps, H as Bounds, I as FlexDirection, J as RadialGradientDescriptor, K as GradientDescriptor, L as JustifyContent, M as TextProps, N as AlignItems, O as SvgStyleProps, P as AlignSelf, Q as StrokeProps, R as LayoutConstraints, S as SvgLineChild, T as SvgPolylineChild, U as Color, V as Border, W as ColorStop, X as Size, Y as Shadow, Z as Spacing, _ as SvgChild, a as BoxElement, b as SvgEllipseChild, c as ImageElement, d as RichTextProps, et as radialGradient, f as RichTextSpan, g as SvgAlign, h as StackProps, i as createCanvas, j as TextElement, k as SvgTextChild, l as ImageProps, m as StackElement, n as DrawCallCanvas, o as BoxProps, p as StackAlign, q as LinearGradientDescriptor, r as LayoutSize, s as Element, t as CanvasOptions, u as RichTextElement, v as SvgCircleChild, w as SvgPolygonChild, x as SvgGroupChild, y as SvgElement, z as LayoutNode } from "./canvas.mjs";
 
 //#region src/components/Box.d.ts
 declare function Box(props: BoxProps): BoxElement;
 //#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
+//#region src/components/Svg.d.ts
+declare function Svg(props: SvgProps): SvgElement;
+declare const svg: {
+  rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
+  circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
+  ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
+  line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
+  polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
+  polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
+  path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
+  text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
+  g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
+};
+//#endregion
 //#region src/components/Text.d.ts
 declare function Text(props: TextProps): TextElement;
 //#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, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, type Shadow, type Size, type Spacing, Stack, type StackElement, type StackProps, type StrokeProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient };
+//#region src/layout/utils/measure.d.ts
+interface MeasureTextResult {
+  width: number;
+  height: number;
+  offset: number;
+  ascent: number;
+  descent: number;
+}
+interface MeasureContext {
+  measureText(text: string, font: FontProps): MeasureTextResult;
+}
+declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
+//#endregion
+//#region src/layout/engine.d.ts
+declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+//#endregion
+//#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, 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 };