@codehz/draw-call 0.1.1 → 0.2.0

package/index.mjs

@@ -1,4 +1,4 @@
-import { a as radialGradient, i as linearGradient, n as computeLayout, r as createCanvasMeasureContext, t as renderNode } from "./engine-C88lMGbX.mjs";
+import { a as radialGradient, i as linearGradient, n as computeLayout, r as createCanvasMeasureContext, t as renderNode } from "./render.mjs";
 
 //#region src/canvas.ts
 /**
@@ -24,6 +24,7 @@ function createCanvas(options) {
 		width,
 		height,
 		pixelRatio,
+		canvas,
 		render(element) {
 			const layoutTree = computeLayout(element, measureCtx, {
 				minWidth: 0,
@@ -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) {
@@ -79,4 +145,62 @@ function Text(props) {
 }
 
 //#endregion
-export { Box, Stack, Text, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient };
+//#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, Image, RichText, Stack, Svg, Text, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };

package/node.cjs

@@ -1,4 +1,4 @@
-const require_engine = require('./engine-OyKoV7Gn.cjs');
+const require_render = require('./render.cjs');
 let _napi_rs_canvas = require("@napi-rs/canvas");
 
 //#region src/node.ts
@@ -8,24 +8,25 @@ 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");
 	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() {
@@ -37,11 +38,11 @@ function createCanvas(options) {
 		toDataURL(type, quality) {
 			return canvas.toDataURL(type, quality);
 		},
-		async toBuffer(type = "image/png") {
+		toBuffer(type = "image/png") {
 			return canvas.toBuffer(type);
 		}
 	};
 }
 
 //#endregion
-exports.createCanvas = createCanvas;
+exports.createNodeCanvas = createNodeCanvas;

package/node.d.cts

@@ -1,4 +1,4 @@
-import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas-CkpP3RNK.cjs";
+import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas.cjs";
 
 //#region src/node.d.ts
 /**
@@ -7,6 +7,6 @@ import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas-CkpP3RNK.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

@@ -1,4 +1,4 @@
-import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas-BYrCq8eS.mjs";
+import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas.mjs";
 
 //#region src/node.d.ts
 /**
@@ -7,6 +7,6 @@ import { n as DrawCallCanvas, t as CanvasOptions } from "./canvas-BYrCq8eS.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 "./engine-C88lMGbX.mjs";
-import { createCanvas as createCanvas$1 } from "@napi-rs/canvas";
+import { n as computeLayout, r as createCanvasMeasureContext, t as renderNode } from "./render.mjs";
+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);
@@ -18,6 +18,7 @@ function createCanvas(options) {
 		width,
 		height,
 		pixelRatio,
+		canvas,
 		render(element) {
 			const layoutTree = computeLayout(element, measureCtx, {
 				minWidth: 0,
@@ -37,11 +38,11 @@ function createCanvas(options) {
 		toDataURL(type, quality) {
 			return canvas.toDataURL(type, quality);
 		},
-		async toBuffer(type = "image/png") {
+		toBuffer(type = "image/png") {
 			return canvas.toBuffer(type);
 		}
 	};
 }
 
 //#endregion
-export { createCanvas };
+export { createNodeCanvas };

package/package.json

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