@codehz/draw-call 0.1.2 → 0.2.1

package/index.mjs

@@ -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) {
@@ -136,4 +154,71 @@ function Text(props) {
 }
 
 //#endregion
-export { Box, Image, Stack, Svg, Text, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient, svg };
+//#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
+export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };

package/node.cjs

@@ -8,7 +8,7 @@ let _napi_rs_canvas = require("@napi-rs/canvas");
 * 此函数需要 @napi-rs/canvas 作为依赖
 * 安装: bun add @napi-rs/canvas
 */
-function createCanvas(options) {
+function createNodeCanvas(options) {
 	const { width, height, pixelRatio = 1 } = options;
 	const canvas = (0, _napi_rs_canvas.createCanvas)(width * pixelRatio, height * pixelRatio);
 	const ctx = canvas.getContext("2d");
@@ -45,4 +45,4 @@ function createCanvas(options) {
 }
 
 //#endregion
-exports.createCanvas = createCanvas;
+exports.createNodeCanvas = createNodeCanvas;

package/node.d.cts

@@ -7,6 +7,6 @@ import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas.cjs";
  * 此函数需要 @napi-rs/canvas 作为依赖
  * 安装: bun add @napi-rs/canvas
  */
-declare function createCanvas(options: Omit<CanvasOptions, "canvas">): DrawCallCanvas;
+declare function createNodeCanvas(options: Omit<CanvasOptions, "canvas">): DrawCallCanvas;
 //#endregion
-export { createCanvas };
+export { createNodeCanvas };

package/node.d.mts

@@ -7,6 +7,6 @@ import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas.mjs";
  * 此函数需要 @napi-rs/canvas 作为依赖
  * 安装: bun add @napi-rs/canvas
  */
-declare function createCanvas(options: Omit<CanvasOptions, "canvas">): DrawCallCanvas;
+declare function createNodeCanvas(options: Omit<CanvasOptions, "canvas">): DrawCallCanvas;
 //#endregion
-export { createCanvas };
+export { createNodeCanvas };

package/node.mjs

@@ -1,5 +1,5 @@
 import { n as computeLayout, r as createCanvasMeasureContext, t as renderNode } from "./render.mjs";
-import { createCanvas as createCanvas$1 } from "@napi-rs/canvas";
+import { createCanvas } from "@napi-rs/canvas";
 
 //#region src/node.ts
 /**
@@ -8,9 +8,9 @@ import { createCanvas as createCanvas$1 } from "@napi-rs/canvas";
 * 此函数需要 @napi-rs/canvas 作为依赖
 * 安装: bun add @napi-rs/canvas
 */
-function createCanvas(options) {
+function createNodeCanvas(options) {
 	const { width, height, pixelRatio = 1 } = options;
-	const canvas = createCanvas$1(width * pixelRatio, height * pixelRatio);
+	const canvas = createCanvas(width * pixelRatio, height * pixelRatio);
 	const ctx = canvas.getContext("2d");
 	if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
 	const measureCtx = createCanvasMeasureContext(ctx);
@@ -45,4 +45,4 @@ function createCanvas(options) {
 }
 
 //#endregion
-export { createCanvas };
+export { createNodeCanvas };

package/package.json

@@ -25,7 +25,7 @@
   "optionalDependencies": {
     "@napi-rs/canvas": "^0.1.88"
   },
-  "version": "0.1.2",
+  "version": "0.2.1",
   "main": "./index.cjs",
   "types": "./index.d.cts",
   "exports": {