@codehz/draw-call 0.2.1 → 0.4.0

package/{render.mjs → node/index.mjs}

@@ -1,7 +1,9 @@
-import { createRequire } from "node:module";
+import { DOMMatrix, Path2D, createCanvas as createCanvas$1 } from "@napi-rs/canvas";
 
-//#region rolldown:runtime
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
+//#region src/compat/index.ts
+function createRawCanvas(width, height) {
+	return createCanvas$1(width, height);
+}
 
 //#endregion
 //#region src/types/base.ts
@@ -1111,17 +1113,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
 /**
@@ -1158,7 +1149,7 @@ var ProxiedCanvasContext = class {
 	constructor(ctx, baseTransform) {
 		this.ctx = ctx;
 		this.baseTransform = baseTransform;
-		this.relativeTransform = new DOMMatrixCompat();
+		this.relativeTransform = new DOMMatrix();
 	}
 	/**
 	* save() - 保存当前状态并增加计数
@@ -1181,8 +1172,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],
@@ -1405,17 +1396,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) {
@@ -1453,7 +1433,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,
@@ -1463,7 +1443,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,
@@ -1552,7 +1532,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);
@@ -1634,7 +1614,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;
@@ -1644,7 +1624,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;
@@ -1733,13 +1713,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,
@@ -1749,7 +1729,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 {
@@ -1791,7 +1771,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);
@@ -1840,4 +1820,220 @@ function renderNode(ctx, node) {
 }
 
 //#endregion
-export { radialGradient as a, linearGradient as i, computeLayout as n, createCanvasMeasureContext as r, renderNode as t };
+//#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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codehz/draw-call",
-  "module": "./index.mjs",
+  "module": "./node/index.mjs",
   "type": "module",
   "repository": {
     "type": "git",
@@ -25,32 +25,33 @@
   "optionalDependencies": {
     "@napi-rs/canvas": "^0.1.88"
   },
-  "version": "0.2.1",
-  "main": "./index.cjs",
-  "types": "./index.d.cts",
+  "version": "0.4.0",
+  "main": "./node/index.cjs",
+  "types": "./node/index.d.cts",
   "exports": {
     ".": {
-      "require": {
-        "types": "./index.d.cts",
-        "import": "./index.cjs",
-        "default": "./index.cjs"
+      "browser": {
+        "types": "./browser/index.d.mts",
+        "import": "./browser/index.mjs",
+        "require": "./browser/index.cjs",
+        "default": "./browser/index.mjs"
       },
-      "import": {
-        "types": "./index.d.mts",
-        "import": "./index.mjs",
-        "default": "./index.mjs"
-      }
-    },
-    "./node": {
-      "require": {
-        "types": "./node.d.cts",
-        "import": "./node.cjs",
-        "default": "./node.cjs"
+      "node": {
+        "types": "./node/index.d.mts",
+        "import": "./node/index.mjs",
+        "require": "./node/index.cjs",
+        "default": "./node/index.mjs"
+      },
+      "bun": {
+        "types": "./node/index.d.mts",
+        "import": "./node/index.mjs",
+        "default": "./node/index.mjs"
       },
-      "import": {
-        "types": "./node.d.mts",
-        "import": "./node.mjs",
-        "default": "./node.mjs"
+      "default": {
+        "types": "./node/index.d.mts",
+        "import": "./node/index.mjs",
+        "require": "./node/index.cjs",
+        "default": "./node/index.mjs"
       }
     }
   }

package/index.cjs

@@ -1,239 +0,0 @@
-const require_render = require('./render.cjs');
-
-//#region src/canvas.ts
-/**
-* 创建适用于浏览器环境的 Canvas
-*
-* 在浏览器环境中使用，支持传入已有的 canvas 实例
-*/
-function createCanvas(options) {
-	const { width, height, pixelRatio = 1 } = options;
-	let canvas;
-	if (options.canvas) canvas = options.canvas;
-	else {
-		const el = document.createElement("canvas");
-		el.width = width * pixelRatio;
-		el.height = height * pixelRatio;
-		canvas = el;
-	}
-	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_render.createCanvasMeasureContext(ctx);
-	return {
-		width,
-		height,
-		pixelRatio,
-		canvas,
-		render(element) {
-			const layoutTree = require_render.computeLayout(element, measureCtx, {
-				minWidth: 0,
-				maxWidth: width,
-				minHeight: 0,
-				maxHeight: height
-			});
-			require_render.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
-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;