@codehz/draw-call 0.2.0 → 0.2.1

package/render.cjs

@@ -169,6 +169,23 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
 	};
 }
 
+//#endregion
+//#region src/layout/components/customDraw.ts
+/**
+* 测量 CustomDraw 元素的固有尺寸
+*/
+function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
+	if (typeof element.width === "number" && typeof element.height === "number") return {
+		width: element.width,
+		height: element.height
+	};
+	if (element.children && measureChild) return measureChild(element.children, ctx, availableWidth);
+	return {
+		width: 0,
+		height: 0
+	};
+}
+
 //#endregion
 //#region src/layout/components/image.ts
 /**
@@ -550,6 +567,17 @@ function measureTextSize(element, ctx, availableWidth) {
 	};
 }
 
+//#endregion
+//#region src/layout/components/transform.ts
+/**
+* 测量 Transform 元素的固有尺寸
+* Transform 不施加任何尺寸约束，直接透传子元素的测量结果
+* 变换（rotate, scale 等）仅在渲染时应用，不影响固有尺寸
+*/
+function measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize) {
+	return measureIntrinsicSize(element.children, ctx, availableWidth);
+}
+
 //#endregion
 //#region src/layout/components/index.ts
 /**
@@ -563,6 +591,8 @@ function measureIntrinsicSize(element, ctx, availableWidth) {
 		case "stack": return measureStackSize(element, ctx, availableWidth, measureIntrinsicSize);
 		case "image": return measureImageSize(element, ctx, availableWidth);
 		case "svg": return measureSvgSize(element, ctx, availableWidth);
+		case "transform": return measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize);
+		case "customdraw": return measureCustomDrawSize(element, ctx, availableWidth, measureIntrinsicSize);
 		default: return {
 			width: 0,
 			height: 0
@@ -920,6 +950,54 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 			}
 			if (isReverse) node.children.reverse();
 		}
+	} else if (element.type === "transform") {
+		const child = element.children;
+		if (child) {
+			const childMargin = normalizeSpacing(child.margin);
+			const childNode = computeLayout(child, ctx, {
+				minWidth: 0,
+				maxWidth: contentWidth,
+				minHeight: 0,
+				maxHeight: contentHeight
+			}, contentX, contentY);
+			node.children.push(childNode);
+			if (element.width === void 0) {
+				const childOuterWidth = childNode.layout.width + childMargin.left + childMargin.right;
+				const actualWidth = childOuterWidth + padding.left + padding.right;
+				node.layout.width = actualWidth;
+				node.layout.contentWidth = childOuterWidth;
+			}
+			if (element.height === void 0) {
+				const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
+				const actualHeight = childOuterHeight + padding.top + padding.bottom;
+				node.layout.height = actualHeight;
+				node.layout.contentHeight = childOuterHeight;
+			}
+		}
+	} else if (element.type === "customdraw") {
+		const child = element.children;
+		if (child) {
+			const childMargin = normalizeSpacing(child.margin);
+			const childNode = computeLayout(child, ctx, {
+				minWidth: 0,
+				maxWidth: contentWidth,
+				minHeight: 0,
+				maxHeight: contentHeight
+			}, contentX, contentY);
+			node.children.push(childNode);
+			if (element.width === void 0) {
+				const childOuterWidth = childNode.layout.width + childMargin.left + childMargin.right;
+				const actualWidth = childOuterWidth + padding.left + padding.right;
+				node.layout.width = actualWidth;
+				node.layout.contentWidth = childOuterWidth;
+			}
+			if (element.height === void 0) {
+				const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
+				const actualHeight = childOuterHeight + padding.top + padding.bottom;
+				node.layout.height = actualHeight;
+				node.layout.contentHeight = childOuterHeight;
+			}
+		}
 	}
 	return node;
 }
@@ -1028,6 +1106,163 @@ 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
+/**
+* ProxiedCanvasContext - Canvas 上下文代理类
+*
+* 该类提供对真实 CanvasRenderingContext2D 的代理，有以下功能：
+* 1. 管理 save/restore 的平衡（计数器）
+* 2. 追踪相对变换而不是绝对变换
+* 3. 在析构时自动恢复所有未恢复的状态
+* 4. 转发所有其他 Canvas API 调用
+*/
+var ProxiedCanvasContext = class {
+	/**
+	* 真实的 Canvas 上下文
+	*/
+	ctx;
+	/**
+	* 基础变换矩阵（初始化时设置，保持不变）
+	*/
+	baseTransform;
+	/**
+	* 相对变换矩阵（用户通过 setTransform 设置）
+	*/
+	relativeTransform;
+	/**
+	* save/restore 计数器
+	*/
+	saveCount = 0;
+	/**
+	* 构造函数
+	* @param ctx 真实的 CanvasRenderingContext2D
+	* @param baseTransform 初始的基础变换矩阵
+	*/
+	constructor(ctx, baseTransform) {
+		this.ctx = ctx;
+		this.baseTransform = baseTransform;
+		this.relativeTransform = new DOMMatrixCompat();
+	}
+	/**
+	* save() - 保存当前状态并增加计数
+	*/
+	save() {
+		this.saveCount++;
+		this.ctx.save();
+	}
+	/**
+	* restore() - 恢复上一个状态并减少计数
+	*/
+	restore() {
+		if (this.saveCount > 0) {
+			this.saveCount--;
+			this.ctx.restore();
+		}
+	}
+	/**
+	* setTransform() - 设置相对变换
+	*/
+	setTransform(...args) {
+		let matrix;
+		if (args.length === 1 && args[0] instanceof DOMMatrixCompat) matrix = args[0];
+		else if (args.length === 6) matrix = new DOMMatrixCompat([
+			args[0],
+			args[1],
+			args[2],
+			args[3],
+			args[4],
+			args[5]
+		]);
+		else return;
+		this.relativeTransform = matrix;
+		const actualTransform = this.baseTransform.multiply(matrix);
+		this.ctx.setTransform(actualTransform);
+	}
+	/**
+	* getTransform() - 返回相对变换（而不是绝对变换）
+	*/
+	getTransform() {
+		return this.relativeTransform;
+	}
+	/**
+	* 析构函数级的清理 - 自动恢复所有未恢复的 save
+	*/
+	destroy() {
+		while (this.saveCount > 0) {
+			console.log("destroy restore", this.saveCount);
+			this.saveCount--;
+			this.ctx.restore();
+		}
+	}
+};
+function createProxiedCanvasContext(ctx, baseTransform) {
+	const proxy = new ProxiedCanvasContext(ctx, baseTransform);
+	return new Proxy(proxy, {
+		get(target, prop, receiver) {
+			if (prop === "save" || prop === "restore" || prop === "setTransform" || prop === "getTransform" || prop === "destroy") return Reflect.get(target, prop, receiver).bind(proxy);
+			const ownValue = Reflect.get(target, prop, receiver);
+			if (ownValue !== void 0) return ownValue;
+			const contextValue = target.ctx[prop];
+			if (typeof contextValue === "function") return contextValue.bind(target.ctx);
+			return contextValue;
+		},
+		set(target, prop, value, _receiver) {
+			target.ctx[prop] = value;
+			return true;
+		},
+		has(target, prop) {
+			if (prop === "save" || prop === "restore" || prop === "setTransform" || prop === "getTransform" || prop === "destroy") return true;
+			return prop in target.ctx;
+		},
+		ownKeys(target) {
+			return Reflect.ownKeys(target.ctx);
+		},
+		getOwnPropertyDescriptor(target, prop) {
+			return Reflect.getOwnPropertyDescriptor(target.ctx, prop);
+		}
+	});
+}
+
+//#endregion
+//#region src/render/components/customDraw.ts
+/**
+* 渲染 CustomDraw 组件
+* 提供自定义绘制回调，用户可以直接访问 Canvas 上下文并绘制自定义内容
+*/
+function renderCustomDraw(ctx, node) {
+	const element = node.element;
+	ctx.save();
+	ctx.translate(node.layout.x, node.layout.y);
+	const proxyCtx = createProxiedCanvasContext(ctx, ctx.getTransform());
+	const inner = () => {
+		if (node.children && node.children.length > 0) {
+			ctx.save();
+			ctx.translate(-node.layout.x, -node.layout.y);
+			renderNode(ctx, node.children[0]);
+			ctx.restore();
+		}
+	};
+	element.draw(proxyCtx, {
+		inner,
+		width: node.layout.contentWidth,
+		height: node.layout.contentHeight
+	});
+	proxyCtx.destroy();
+	ctx.restore();
+}
+
 //#endregion
 //#region src/render/components/image.ts
 function renderImage(ctx, node) {
@@ -1165,17 +1400,6 @@ function renderRichText(ctx, node) {
 	}
 }
 
-//#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/compat/Path2D.ts
 const Path2DCompat = (() => {
@@ -1251,8 +1475,14 @@ function applyTransform(base, transform) {
 	}
 	if (transform.scale !== void 0) if (typeof transform.scale === "number") result = result.scale(transform.scale);
 	else result = result.scale(transform.scale[0], transform.scale[1]);
-	if (transform.skewX !== void 0) result = result.skewX(transform.skewX);
-	if (transform.skewY !== void 0) result = result.skewY(transform.skewY);
+	if (transform.skewX !== void 0) {
+		const degrees = transform.skewX * 180 / Math.PI;
+		result = result.skewX(degrees);
+	}
+	if (transform.skewY !== void 0) {
+		const degrees = transform.skewY * 180 / Math.PI;
+		result = result.skewY(degrees);
+	}
 	return result;
 }
 function applyStroke(ctx, stroke, bounds) {
@@ -1488,6 +1718,82 @@ function renderText(ctx, node) {
 	if (element.shadow) clearShadow$1(ctx);
 }
 
+//#endregion
+//#region src/render/components/transform.ts
+/**
+* 解析 Transform 值为 DOMMatrix
+* 支持三种格式：
+* - 数组: [a, b, c, d, e, f]
+* - DOMMatrix2DInit 对象: { a, b, c, d, e, f, ... }
+* - 简易对象: { translate, rotate, scale, skewX, skewY }
+*/
+function parseTransformValue(transform) {
+	if (transform === void 0) return new DOMMatrixCompat();
+	if (Array.isArray(transform)) return new DOMMatrixCompat(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([
+			init.a ?? 1,
+			init.b ?? 0,
+			init.c ?? 0,
+			init.d ?? 1,
+			init.e ?? 0,
+			init.f ?? 0
+		]);
+	}
+	const simpleObj = transform;
+	let result = new DOMMatrixCompat();
+	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 {
+		const [angle, cx, cy] = simpleObj.rotate;
+		result = result.translate(cx, cy).rotate(angle).translate(-cx, -cy);
+	}
+	if (simpleObj.scale !== void 0) if (typeof simpleObj.scale === "number") result = result.scale(simpleObj.scale);
+	else result = result.scale(simpleObj.scale[0], simpleObj.scale[1]);
+	if (simpleObj.skewX !== void 0) result = result.skewX(simpleObj.skewX);
+	if (simpleObj.skewY !== void 0) result = result.skewY(simpleObj.skewY);
+	return result;
+}
+/**
+* 根据 transformOrigin 属性和子元素尺寸计算实际变换原点坐标
+*/
+function resolveTransformOrigin(origin, childLayout) {
+	if (origin === void 0) return [0, 0];
+	const [xVal, yVal] = origin;
+	const sizes = [childLayout.width, childLayout.height];
+	const values = [xVal, yVal];
+	const result = [0, 0];
+	for (let i = 0; i < 2; i++) {
+		const val = values[i];
+		if (typeof val === "string") if (val.endsWith("%")) result[i] = parseFloat(val) / 100 * sizes[i];
+		else result[i] = parseFloat(val);
+		else result[i] = val;
+	}
+	return result;
+}
+/**
+* 渲染 Transform 组件及其子元素
+*/
+function renderTransform(ctx, node) {
+	const element = node.element;
+	const { children } = node;
+	if (!children || children.length === 0) return;
+	const childNode = children[0];
+	const [relativeOx, relativeOy] = resolveTransformOrigin(element.transformOrigin, childNode.layout);
+	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);
+	ctx.save();
+	const composedTransform = ctx.getTransform().multiply(finalMatrix);
+	ctx.setTransform(composedTransform);
+	renderNode(ctx, childNode);
+	ctx.restore();
+}
+
 //#endregion
 //#region src/render/index.ts
 function renderNode(ctx, node) {
@@ -1519,6 +1825,12 @@ function renderNode(ctx, node) {
 		case "svg":
 			renderSvg(ctx, node);
 			break;
+		case "transform":
+			renderTransform(ctx, node);
+			break;
+		case "customdraw":
+			renderCustomDraw(ctx, node);
+			break;
 	}
 }