@codehz/draw-call 0.2.2 → 0.4.1

package/{canvas.d.cts → browser/index.d.cts}

@@ -398,4 +398,55 @@ interface DrawCallCanvas {
  */
 declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
 //#endregion
-export { GradientDescriptor as $, SvgRectChild as A, ContainerLayoutProps as B, SvgEllipseChild as C, SvgPolygonChild as D, SvgPathChild as E, TextProps as F, LayoutProps as G, JustifyContent as H, TransformElement as I, Border as J, MeasureContext as K, TransformProps as L, SvgTextChild as M, SvgTransformProps as N, SvgPolylineChild as O, TextElement as P, FontProps as Q, AlignItems as R, SvgElement as S, SvgLineChild as T, LayoutConstraints as U, FlexDirection as V, LayoutNode as W, Color as X, Bounds as Y, ColorStop as Z, StackElement as _, BoxElement as a, StrokeProps as at, SvgChild as b, CustomDrawProps as c, ImageProps as d, LinearGradientDescriptor as et, ProxiedCanvasContextOptions as f, StackAlign as g, RichTextSpan as h, createCanvas as i, Spacing as it, SvgStyleProps as j, SvgProps as k, Element as l, RichTextProps as m, DrawCallCanvas as n, Shadow as nt, BoxProps as o, linearGradient as ot, RichTextElement as p, createCanvasMeasureContext as q, LayoutSize as r, Size as rt, CustomDrawElement as s, radialGradient as st, CanvasOptions as t, RadialGradientDescriptor as tt, ImageElement as u, StackProps as v, SvgGroupChild as w, SvgCircleChild as x, SvgAlign as y, AlignSelf as z };
+//#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
+//#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
+//#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
+//#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/{canvas.d.mts → browser/index.d.ts}

@@ -398,4 +398,55 @@ interface DrawCallCanvas {
  */
 declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
 //#endregion
-export { GradientDescriptor as $, SvgRectChild as A, ContainerLayoutProps as B, SvgEllipseChild as C, SvgPolygonChild as D, SvgPathChild as E, TextProps as F, LayoutProps as G, JustifyContent as H, TransformElement as I, Border as J, MeasureContext as K, TransformProps as L, SvgTextChild as M, SvgTransformProps as N, SvgPolylineChild as O, TextElement as P, FontProps as Q, AlignItems as R, SvgElement as S, SvgLineChild as T, LayoutConstraints as U, FlexDirection as V, LayoutNode as W, Color as X, Bounds as Y, ColorStop as Z, StackElement as _, BoxElement as a, StrokeProps as at, SvgChild as b, CustomDrawProps as c, ImageProps as d, LinearGradientDescriptor as et, ProxiedCanvasContextOptions as f, StackAlign as g, RichTextSpan as h, createCanvas as i, Spacing as it, SvgStyleProps as j, SvgProps as k, Element as l, RichTextProps as m, DrawCallCanvas as n, Shadow as nt, BoxProps as o, linearGradient as ot, RichTextElement as p, createCanvasMeasureContext as q, LayoutSize as r, Size as rt, CustomDrawElement as s, radialGradient as st, CanvasOptions as t, RadialGradientDescriptor as tt, ImageElement as u, StackProps as v, SvgGroupChild as w, SvgCircleChild as x, SvgAlign as y, AlignSelf as z };
+//#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
+//#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
+//#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
+//#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/{render.cjs → browser/index.js}

@@ -1,4 +1,14 @@
+//#region src/compat/index.ts
+const DOMMatrix = window.DOMMatrix;
+const Path2D = window.Path2D;
+function createRawCanvas(width, height) {
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	return canvas;
+}
 
+//#endregion
 //#region src/types/base.ts
 function linearGradient(angle, ...stops) {
 	return {
@@ -1106,17 +1116,6 @@ function renderBox(ctx, node) {
 	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
 }
 
-//#endregion
-//#region src/compat/DOMMatrix.ts
-const DOMMatrixCompat = (() => {
-	if (typeof DOMMatrix !== "undefined") return DOMMatrix;
-	try {
-		return require("@napi-rs/canvas").DOMMatrix;
-	} catch {
-		throw new Error("DOMMatrix is not available. In Node.js, install @napi-rs/canvas.");
-	}
-})();
-
 //#endregion
 //#region src/render/components/ProxiedCanvasContext.ts
 /**
@@ -1153,7 +1152,7 @@ var ProxiedCanvasContext = class {
 	constructor(ctx, baseTransform) {
 		this.ctx = ctx;
 		this.baseTransform = baseTransform;
-		this.relativeTransform = new DOMMatrixCompat();
+		this.relativeTransform = new DOMMatrix();
 	}
 	/**
 	* save() - 保存当前状态并增加计数
@@ -1176,8 +1175,8 @@ var ProxiedCanvasContext = class {
 	*/
 	setTransform(...args) {
 		let matrix;
-		if (args.length === 1 && args[0] instanceof DOMMatrixCompat) matrix = args[0];
-		else if (args.length === 6) matrix = new DOMMatrixCompat([
+		if (args.length === 1 && args[0] instanceof DOMMatrix) matrix = args[0];
+		else if (args.length === 6) matrix = new DOMMatrix([
 			args[0],
 			args[1],
 			args[2],
@@ -1400,17 +1399,6 @@ function renderRichText(ctx, node) {
 	}
 }
 
-//#endregion
-//#region src/compat/Path2D.ts
-const Path2DCompat = (() => {
-	if (typeof Path2D !== "undefined") return Path2D;
-	try {
-		return require("@napi-rs/canvas").Path2D;
-	} catch {
-		throw new Error("Path2D is not available. In Node.js, install @napi-rs/canvas.");
-	}
-})();
-
 //#endregion
 //#region src/render/components/svg.ts
 function isGradientDescriptor(color) {
@@ -1448,7 +1436,7 @@ function resolveColor(ctx, color, x, y, width, height) {
 }
 function applyTransform(base, transform) {
 	if (!transform) return base;
-	let result = new DOMMatrixCompat([
+	let result = new DOMMatrix([
 		base.a,
 		base.b,
 		base.c,
@@ -1458,7 +1446,7 @@ function applyTransform(base, transform) {
 	]);
 	if (transform.matrix) {
 		const [a, b, c, d, e, f] = transform.matrix;
-		result = result.multiply(new DOMMatrixCompat([
+		result = result.multiply(new DOMMatrix([
 			a,
 			b,
 			c,
@@ -1547,7 +1535,7 @@ function renderSvgPolygon(ctx, polygon, bounds) {
 	applyFillAndStroke(ctx, polygon, bounds);
 }
 function renderSvgPath(ctx, path, bounds) {
-	const path2d = new Path2DCompat(path.d);
+	const path2d = new Path2D(path.d);
 	if (path.fill && path.fill !== "none") {
 		ctx.fillStyle = resolveColor(ctx, path.fill, bounds.x, bounds.y, bounds.width, bounds.height);
 		ctx.fill(path2d);
@@ -1629,7 +1617,7 @@ function calculateViewBoxTransform(x, y, width, height, viewBox, preserveAspectR
 	const scaleY = height / vbHeight;
 	const align = preserveAspectRatio?.align ?? "xMidYMid";
 	const meetOrSlice = preserveAspectRatio?.meetOrSlice ?? "meet";
-	if (align === "none") return new DOMMatrixCompat().translate(x, y).scale(scaleX, scaleY).translate(-vbX, -vbY);
+	if (align === "none") return new DOMMatrix().translate(x, y).scale(scaleX, scaleY).translate(-vbX, -vbY);
 	const scale = meetOrSlice === "meet" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
 	const scaledWidth = vbWidth * scale;
 	const scaledHeight = vbHeight * scale;
@@ -1639,7 +1627,7 @@ function calculateViewBoxTransform(x, y, width, height, viewBox, preserveAspectR
 	else if (align.includes("xMax")) translateX += width - scaledWidth;
 	if (align.includes("YMid")) translateY += (height - scaledHeight) / 2;
 	else if (align.includes("YMax")) translateY += height - scaledHeight;
-	return new DOMMatrixCompat().translate(translateX, translateY).scale(scale, scale).translate(-vbX, -vbY);
+	return new DOMMatrix().translate(translateX, translateY).scale(scale, scale).translate(-vbX, -vbY);
 }
 function applyShadow(ctx, shadow) {
 	ctx.shadowOffsetX = shadow.offsetX ?? 0;
@@ -1728,13 +1716,13 @@ function renderText(ctx, node) {
 * - 简易对象: { translate, rotate, scale, skewX, skewY }
 */
 function parseTransformValue(transform) {
-	if (transform === void 0) return new DOMMatrixCompat();
-	if (Array.isArray(transform)) return new DOMMatrixCompat(transform);
+	if (transform === void 0) return new DOMMatrix();
+	if (Array.isArray(transform)) return new DOMMatrix(transform);
 	const hasDOMMatrixInit = "a" in transform || "b" in transform || "c" in transform || "d" in transform || "e" in transform || "f" in transform;
 	const hasSimpleTransform = "translate" in transform || "rotate" in transform || "scale" in transform || "skewX" in transform || "skewY" in transform;
 	if (hasDOMMatrixInit && !hasSimpleTransform) {
 		const init = transform;
-		return new DOMMatrixCompat([
+		return new DOMMatrix([
 			init.a ?? 1,
 			init.b ?? 0,
 			init.c ?? 0,
@@ -1744,7 +1732,7 @@ function parseTransformValue(transform) {
 		]);
 	}
 	const simpleObj = transform;
-	let result = new DOMMatrixCompat();
+	let result = new DOMMatrix();
 	if (simpleObj.translate) result = result.translate(simpleObj.translate[0], simpleObj.translate[1]);
 	if (simpleObj.rotate !== void 0) if (typeof simpleObj.rotate === "number") result = result.rotate(simpleObj.rotate);
 	else {
@@ -1786,7 +1774,7 @@ function renderTransform(ctx, node) {
 	const ox = childNode.layout.x + relativeOx;
 	const oy = childNode.layout.y + relativeOy;
 	const targetMatrix = parseTransformValue(element.transform);
-	const finalMatrix = new DOMMatrixCompat().translate(ox, oy).multiply(targetMatrix).translate(-ox, -oy);
+	const finalMatrix = new DOMMatrix().translate(ox, oy).multiply(targetMatrix).translate(-ox, -oy);
 	ctx.save();
 	const composedTransform = ctx.getTransform().multiply(finalMatrix);
 	ctx.setTransform(composedTransform);
@@ -1835,33 +1823,220 @@ function renderNode(ctx, node) {
 }
 
 //#endregion
-Object.defineProperty(exports, 'computeLayout', {
-  enumerable: true,
-  get: function () {
-    return computeLayout;
-  }
-});
-Object.defineProperty(exports, 'createCanvasMeasureContext', {
-  enumerable: true,
-  get: function () {
-    return createCanvasMeasureContext;
-  }
-});
-Object.defineProperty(exports, 'linearGradient', {
-  enumerable: true,
-  get: function () {
-    return linearGradient;
-  }
-});
-Object.defineProperty(exports, 'radialGradient', {
-  enumerable: true,
-  get: function () {
-    return radialGradient;
-  }
-});
-Object.defineProperty(exports, 'renderNode', {
-  enumerable: true,
-  get: function () {
-    return renderNode;
-  }
-});
+//#region src/canvas.ts
+/**
+* 创建适用于浏览器环境的 Canvas
+*
+* 在浏览器环境中使用，支持传入已有的 canvas 实例
+*/
+function createCanvas(options) {
+	const { width, height, pixelRatio = 1 } = options;
+	const canvas = options.canvas ?? createRawCanvas(width * pixelRatio, height * pixelRatio);
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Failed to get 2d context");
+	if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
+	if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
+	if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
+	const measureCtx = createCanvasMeasureContext(ctx);
+	return {
+		width,
+		height,
+		pixelRatio,
+		canvas,
+		render(element) {
+			const layoutTree = computeLayout(element, measureCtx, {
+				minWidth: 0,
+				maxWidth: width,
+				minHeight: 0,
+				maxHeight: height
+			});
+			renderNode(ctx, layoutTree);
+			return layoutTree;
+		},
+		clear() {
+			ctx.clearRect(0, 0, width, height);
+		},
+		getContext() {
+			return ctx;
+		},
+		toDataURL(type, quality) {
+			if ("toDataURL" in canvas && typeof canvas.toDataURL === "function") return canvas.toDataURL(type, quality);
+			throw new Error("toDataURL not supported");
+		},
+		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");
+		}
+	};
+}
+
+//#endregion
+//#region src/components/Box.ts
+function Box(props) {
+	return {
+		type: "box",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/CustomDraw.ts
+function CustomDraw(props) {
+	return {
+		type: "customdraw",
+		...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) {
+	return {
+		type: "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) {
+	return {
+		type: "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
+export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };

package/examples/card.ts

@@ -2,14 +2,13 @@
  * 示例：使用 draw-call 绘制一个卡片
  * 运行: bun examples/card.ts
  */
-import { Box, linearGradient, printLayout, Svg, svg, Text } from "@codehz/draw-call";
-import { createNodeCanvas } from "@codehz/draw-call/node";
+import { Box, createCanvas, linearGradient, printLayout, Svg, svg, Text } from "@codehz/draw-call";
 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({
+const canvas = createCanvas({
   width: 400,
   height: 320,
   pixelRatio: 2,

package/examples/customdraw-basic.ts

@@ -3,14 +3,13 @@
  * 展示如何使用 CustomDraw 进行简单的自定义绘制
  * 运行: bun examples/customdraw-basic.ts
  */
-import { Box, CustomDraw, printLayout, Text } from "@codehz/draw-call";
-import { createNodeCanvas } from "@codehz/draw-call/node";
+import { Box, createCanvas, CustomDraw, printLayout, Text } from "@codehz/draw-call";
 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({
+const canvas = createCanvas({
   width: 600,
   height: 1000,
   pixelRatio: 2,

package/examples/customdraw.ts

@@ -3,14 +3,13 @@
  * 展示直接调用 Canvas API、Transform 管理和子元素渲染功能
  * 运行: bun examples/customdraw.ts
  */
-import { Box, CustomDraw, printLayout, Text } from "@codehz/draw-call";
-import { createNodeCanvas } from "@codehz/draw-call/node";
+import { Box, createCanvas, CustomDraw, printLayout, Text } from "@codehz/draw-call";
 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({
+const canvas = createCanvas({
   width: 800,
   height: 1000,
   pixelRatio: 2,

package/examples/richtext.ts

@@ -2,14 +2,13 @@
  * 示例：使用 draw-call 的 RichText 组件
  * 运行: bun examples/richtext.ts
  */
-import { Box, RichText, Text } from "@codehz/draw-call";
-import { createNodeCanvas } from "@codehz/draw-call/node";
+import { Box, createCanvas, RichText, Text } from "@codehz/draw-call";
 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({
+const canvas = createCanvas({
   width: 400,
   height: 820,
   pixelRatio: 2,

package/examples/transform.ts

@@ -3,14 +3,13 @@
  * 展示移动（translate）、旋转（rotate）、放大（scale）等变换效果
  * 运行: bun examples/transform.ts
  */
-import { Box, Text, Transform, printLayout } from "@codehz/draw-call";
-import { createNodeCanvas } from "@codehz/draw-call/node";
+import { Box, createCanvas, printLayout, Text, Transform } from "@codehz/draw-call";
 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({
+const canvas = createCanvas({
   width: 800,
   height: 1000,
   pixelRatio: 2,