@codehz/draw-call 0.4.5 → 0.5.1

package/browser/index.cjs

@@ -82,6 +82,19 @@ function normalizeBorderRadius(value) {
 
 //#endregion
 //#region src/layout/components/box.ts
+/**
+* 安全获取元素的 margin
+* Transform 元素没有 margin，返回默认 spacing
+*/
+function getElementMargin$2(element) {
+	if (element.type === "transform") return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	return normalizeSpacing(element.margin);
+}
 function calcEffectiveSize(element, padding, availableWidth) {
 	return {
 		width: typeof element.width === "number" ? element.width - padding.left - padding.right : availableWidth > 0 ? availableWidth : 0,
@@ -91,7 +104,7 @@ function calcEffectiveSize(element, padding, availableWidth) {
 function collectChildSizes(children, ctx, availableWidth, padding, measureChild) {
 	const childSizes = [];
 	for (const child of children) {
-		const childMargin = normalizeSpacing(child.margin);
+		const childMargin = getElementMargin$2(child);
 		const childSize = measureChild(child, ctx, availableWidth - padding.left - padding.right - childMargin.left - childMargin.right);
 		childSizes.push({
 			width: childSize.width,
@@ -160,7 +173,7 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
 		contentHeight = wrapped.height;
 	} else for (let i = 0; i < children.length; i++) {
 		const child = children[i];
-		const childMargin = normalizeSpacing(child.margin);
+		const childMargin = getElementMargin$2(child);
 		const childSize = measureChild(child, ctx, availableWidth - padding.left - padding.right - childMargin.left - childMargin.right);
 		if (isRow) {
 			contentWidth += childSize.width + childMargin.left + childMargin.right;
@@ -394,6 +407,19 @@ function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle
 //#endregion
 //#region src/layout/components/stack.ts
 /**
+* 安全获取元素的 margin
+* Transform 元素没有 margin，返回默认 spacing
+*/
+function getElementMargin$1(element) {
+	if (element.type === "transform") return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	return normalizeSpacing(element.margin);
+}
+/**
 * 测量 Stack 元素的固有尺寸
 */
 function measureStackSize(element, ctx, availableWidth, measureChild) {
@@ -402,7 +428,7 @@ function measureStackSize(element, ctx, availableWidth, measureChild) {
 	let contentHeight = 0;
 	const children = element.children ?? [];
 	for (const child of children) {
-		const childMargin = normalizeSpacing(child.margin);
+		const childMargin = getElementMargin$1(child);
 		const childSize = measureChild(child, ctx, availableWidth - padding.left - padding.right - childMargin.left - childMargin.right);
 		contentWidth = Math.max(contentWidth, childSize.width + childMargin.left + childMargin.right);
 		contentHeight = Math.max(contentHeight, childSize.height + childMargin.top + childMargin.bottom);
@@ -641,18 +667,79 @@ function sizeNeedsParent(size) {
 
 //#endregion
 //#region src/layout/engine.ts
+/**
+* 类型守卫：检查 Element 是否为 LayoutElement（非 Transform）
+* 由于 Transform 元素在 computeLayoutImpl 开始时被处理，
+* 此时只应处理 LayoutElement
+*/
+function assertLayoutElement(element) {
+	if (element.type === "transform") throw new Error("Transform elements should be handled at entry point");
+}
+/**
+* 安全获取元素的 margin
+* Transform 元素没有 margin，返回默认 spacing
+*/
+function getElementMargin(element) {
+	if (element.type === "transform") return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	return normalizeSpacing(element.margin);
+}
+/**
+* 安全获取元素的布局属性（width, height, flex等）
+* Transform 元素这些属性为 undefined
+*/
+function getElementLayoutProps(element) {
+	if (element.type === "transform") return {
+		width: void 0,
+		height: void 0,
+		flex: void 0,
+		minWidth: void 0,
+		maxWidth: void 0,
+		minHeight: void 0,
+		maxHeight: void 0,
+		alignSelf: void 0
+	};
+	const le = element;
+	return {
+		width: le.width,
+		height: le.height,
+		flex: le.flex,
+		minWidth: le.minWidth,
+		maxWidth: le.maxWidth,
+		minHeight: le.minHeight,
+		maxHeight: le.maxHeight,
+		alignSelf: le.alignSelf
+	};
+}
+/**
+* 布局计算主函数
+* 内部使用 Element 类型以支持 Transform，外部通过 LayoutElement 约束类型
+*/
 function computeLayout(element, ctx, constraints, x = 0, y = 0) {
-	const margin = normalizeSpacing(element.margin);
-	const padding = normalizeSpacing("padding" in element ? element.padding : void 0);
+	return computeLayoutImpl(element, ctx, constraints, x, y);
+}
+/**
+* 内部实现函数，处理所有元素类型包括 Transform
+*/
+function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
+	if (element.type === "transform") return computeLayoutImpl(element.children, ctx, constraints, x, y);
+	assertLayoutElement(element);
+	const layoutElement = element;
+	const margin = normalizeSpacing(layoutElement.margin);
+	const padding = normalizeSpacing("padding" in layoutElement ? layoutElement.padding : void 0);
 	const availableWidth = constraints.maxWidth - margin.left - margin.right;
 	const availableHeight = constraints.maxHeight - margin.top - margin.bottom;
-	const intrinsic = measureIntrinsicSize(element, ctx, availableWidth);
-	let width = constraints.minWidth === constraints.maxWidth && constraints.minWidth > 0 ? constraints.maxWidth - margin.left - margin.right : resolveSize(element.width, availableWidth, intrinsic.width);
-	let height = constraints.minHeight === constraints.maxHeight && constraints.minHeight > 0 ? constraints.maxHeight - margin.top - margin.bottom : resolveSize(element.height, availableHeight, intrinsic.height);
-	if (element.minWidth !== void 0) width = Math.max(width, element.minWidth);
-	if (element.maxWidth !== void 0) width = Math.min(width, element.maxWidth);
-	if (element.minHeight !== void 0) height = Math.max(height, element.minHeight);
-	if (element.maxHeight !== void 0) height = Math.min(height, element.maxHeight);
+	const intrinsic = measureIntrinsicSize(layoutElement, ctx, availableWidth);
+	let width = constraints.minWidth === constraints.maxWidth && constraints.minWidth > 0 ? constraints.maxWidth - margin.left - margin.right : resolveSize(layoutElement.width, availableWidth, intrinsic.width);
+	let height = constraints.minHeight === constraints.maxHeight && constraints.minHeight > 0 ? constraints.maxHeight - margin.top - margin.bottom : resolveSize(layoutElement.height, availableHeight, intrinsic.height);
+	if (layoutElement.minWidth !== void 0) width = Math.max(width, layoutElement.minWidth);
+	if (layoutElement.maxWidth !== void 0) width = Math.min(width, layoutElement.maxWidth);
+	if (layoutElement.minHeight !== void 0) height = Math.max(height, layoutElement.minHeight);
+	if (layoutElement.maxHeight !== void 0) height = Math.min(height, layoutElement.maxHeight);
 	const actualX = x + margin.left;
 	const actualY = y + margin.top;
 	const contentX = actualX + padding.left;
@@ -660,7 +747,7 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 	const contentWidth = width - padding.left - padding.right;
 	const contentHeight = height - padding.top - padding.bottom;
 	const node = {
-		element,
+		element: layoutElement,
 		layout: {
 			x: actualX,
 			y: actualY,
@@ -673,14 +760,14 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 		},
 		children: []
 	};
-	if (element.type === "text") {
-		const font = element.font ?? {};
-		if (element.wrap && contentWidth > 0) {
-			let { lines, offsets } = wrapText(ctx, element.content, contentWidth, font);
-			if (element.maxLines && lines.length > element.maxLines) {
-				lines = lines.slice(0, element.maxLines);
-				offsets = offsets.slice(0, element.maxLines);
-				if (element.ellipsis && lines.length > 0) {
+	if (layoutElement.type === "text") {
+		const font = layoutElement.font ?? {};
+		if (layoutElement.wrap && contentWidth > 0) {
+			let { lines, offsets } = wrapText(ctx, layoutElement.content, contentWidth, font);
+			if (layoutElement.maxLines && lines.length > layoutElement.maxLines) {
+				lines = lines.slice(0, layoutElement.maxLines);
+				offsets = offsets.slice(0, layoutElement.maxLines);
+				if (layoutElement.ellipsis && lines.length > 0) {
 					const lastIdx = lines.length - 1;
 					const truncated = truncateText(ctx, lines[lastIdx], contentWidth, font);
 					lines[lastIdx] = truncated.text;
@@ -690,17 +777,17 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 			node.lines = lines;
 			node.lineOffsets = offsets;
 		} else {
-			const { text, offset } = truncateText(ctx, element.content, contentWidth > 0 && element.ellipsis ? contentWidth : Infinity, font);
+			const { text, offset } = truncateText(ctx, layoutElement.content, contentWidth > 0 && layoutElement.ellipsis ? contentWidth : Infinity, font);
 			node.lines = [text];
 			node.lineOffsets = [offset];
 		}
 	}
-	if (element.type === "richtext") {
-		const lineHeight = element.lineHeight ?? 1.2;
-		let lines = wrapRichText(ctx, element.spans, contentWidth, lineHeight);
-		if (element.maxLines && lines.length > element.maxLines) {
-			lines = lines.slice(0, element.maxLines);
-			if (element.ellipsis && lines.length > 0) {
+	if (layoutElement.type === "richtext") {
+		const lineHeight = layoutElement.lineHeight ?? 1.2;
+		let lines = wrapRichText(ctx, layoutElement.spans, contentWidth, lineHeight);
+		if (layoutElement.maxLines && lines.length > layoutElement.maxLines) {
+			lines = lines.slice(0, layoutElement.maxLines);
+			if (layoutElement.ellipsis && lines.length > 0) {
 				const lastLine = lines[lines.length - 1];
 				if (lastLine.segments.length > 0) {
 					const lastSeg = lastLine.segments[lastLine.segments.length - 1];
@@ -712,19 +799,19 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 		}
 		node.richLines = lines;
 	}
-	if (element.type === "box" || element.type === "stack") {
-		const children = element.children ?? [];
-		if (element.type === "stack") {
-			const stackAlign = element.align ?? "start";
-			const stackJustify = element.justify ?? "start";
+	if (layoutElement.type === "box" || layoutElement.type === "stack") {
+		const children = layoutElement.children ?? [];
+		if (layoutElement.type === "stack") {
+			const stackAlign = layoutElement.align ?? "start";
+			const stackJustify = layoutElement.justify ?? "start";
 			for (const child of children) {
-				const childNode = computeLayout(child, ctx, {
+				const childNode = computeLayoutImpl(child, ctx, {
 					minWidth: 0,
 					maxWidth: contentWidth,
 					minHeight: 0,
 					maxHeight: contentHeight
 				}, contentX, contentY);
-				const childMargin = normalizeSpacing(child.margin);
+				const childMargin = getElementMargin(child);
 				const childOuterWidth = childNode.layout.width + childMargin.left + childMargin.right;
 				const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
 				let offsetX = 0;
@@ -737,19 +824,21 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 				node.children.push(childNode);
 			}
 		} else {
-			const direction = element.direction ?? "row";
-			const justify = element.justify ?? "start";
-			const align = element.align ?? "stretch";
-			const gap = element.gap ?? 0;
-			const wrap = element.wrap ?? false;
+			const boxElement = layoutElement;
+			const direction = boxElement.direction ?? "row";
+			const justify = boxElement.justify ?? "start";
+			const align = boxElement.align ?? "stretch";
+			const gap = boxElement.gap ?? 0;
+			const wrap = boxElement.wrap ?? false;
 			const isRow = direction === "row" || direction === "row-reverse";
 			const isReverse = direction === "row-reverse" || direction === "column-reverse";
 			const getContentMainSize = () => isRow ? contentWidth : contentHeight;
 			const getContentCrossSize = () => isRow ? contentHeight : contentWidth;
 			const childInfos = [];
 			for (const child of children) {
-				const childMargin = normalizeSpacing(child.margin);
-				const childFlex = child.flex ?? 0;
+				const childMargin = getElementMargin(child);
+				const childProps = getElementLayoutProps(child);
+				const childFlex = childProps.flex ?? 0;
 				if (childFlex > 0) childInfos.push({
 					element: child,
 					width: 0,
@@ -759,10 +848,10 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 				});
 				else {
 					const size = measureIntrinsicSize(child, ctx, contentWidth - childMargin.left - childMargin.right);
-					const shouldStretchWidth = !isRow && child.width === void 0 && align === "stretch";
-					const shouldStretchHeight = isRow && child.height === void 0 && align === "stretch";
-					let w = sizeNeedsParent(child.width) ? resolveSize(child.width, contentWidth - childMargin.left - childMargin.right, size.width) : resolveSize(child.width, 0, size.width);
-					let h = sizeNeedsParent(child.height) ? resolveSize(child.height, contentHeight - childMargin.top - childMargin.bottom, size.height) : resolveSize(child.height, 0, size.height);
+					const shouldStretchWidth = !isRow && childProps.width === void 0 && align === "stretch";
+					const shouldStretchHeight = isRow && childProps.height === void 0 && align === "stretch";
+					let w = sizeNeedsParent(childProps.width) ? resolveSize(childProps.width, contentWidth - childMargin.left - childMargin.right, size.width) : resolveSize(childProps.width, 0, size.width);
+					let h = sizeNeedsParent(childProps.height) ? resolveSize(childProps.height, contentHeight - childMargin.top - childMargin.bottom, size.height) : resolveSize(childProps.height, 0, size.height);
 					if (shouldStretchWidth && !wrap) w = contentWidth - childMargin.left - childMargin.right;
 					if (shouldStretchHeight && !wrap) h = contentHeight - childMargin.top - childMargin.bottom;
 					childInfos.push({
@@ -803,14 +892,15 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 				const availableForFlex = Math.max(0, mainAxisSize - totalFixed - totalGap);
 				for (const info of lineInfos) if (info.flex > 0) {
 					const flexSize = totalFlex > 0 ? availableForFlex * info.flex / totalFlex : 0;
+					const childProps = getElementLayoutProps(info.element);
 					if (isRow) {
 						info.width = flexSize;
 						const size = measureIntrinsicSize(info.element, ctx, flexSize);
-						info.height = sizeNeedsParent(info.element.height) ? resolveSize(info.element.height, contentHeight - info.margin.top - info.margin.bottom, size.height) : resolveSize(info.element.height, 0, size.height);
+						info.height = sizeNeedsParent(childProps.height) ? resolveSize(childProps.height, contentHeight - info.margin.top - info.margin.bottom, size.height) : resolveSize(childProps.height, 0, size.height);
 					} else {
 						info.height = flexSize;
 						const size = measureIntrinsicSize(info.element, ctx, contentWidth - info.margin.left - info.margin.right);
-						info.width = sizeNeedsParent(info.element.width) ? resolveSize(info.element.width, contentWidth - info.margin.left - info.margin.right, size.width) : resolveSize(info.element.width, 0, size.width);
+						info.width = sizeNeedsParent(childProps.width) ? resolveSize(childProps.width, contentWidth - info.margin.left - info.margin.right, size.width) : resolveSize(childProps.width, 0, size.width);
 					}
 				}
 			}
@@ -861,17 +951,18 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 				const orderedInfos = isReverse ? [...lineInfos].reverse() : lineInfos;
 				for (let i = 0; i < orderedInfos.length; i++) {
 					const info = orderedInfos[i];
+					const childProps = getElementLayoutProps(info.element);
 					const crossAxisSize = wrap ? lineCrossSize : getContentCrossSize();
 					const childCrossSize = isRow ? info.height + info.margin.top + info.margin.bottom : info.width + info.margin.left + info.margin.right;
 					let itemCrossOffset = 0;
-					const effectiveAlign = info.element.alignSelf ?? align;
+					const effectiveAlign = childProps.alignSelf ?? align;
 					if (effectiveAlign === "start") itemCrossOffset = 0;
 					else if (effectiveAlign === "end") itemCrossOffset = crossAxisSize - childCrossSize;
 					else if (effectiveAlign === "center") itemCrossOffset = (crossAxisSize - childCrossSize) / 2;
 					else if (effectiveAlign === "stretch") {
 						itemCrossOffset = 0;
-						if (isRow && info.element.height === void 0) info.height = crossAxisSize - info.margin.top - info.margin.bottom;
-						else if (!isRow && info.element.width === void 0) info.width = crossAxisSize - info.margin.left - info.margin.right;
+						if (isRow && childProps.height === void 0) info.height = crossAxisSize - info.margin.top - info.margin.bottom;
+						else if (!isRow && childProps.width === void 0) info.width = crossAxisSize - info.margin.left - info.margin.right;
 					}
 					const childX = isRow ? contentX + mainOffset + info.margin.left : contentX + crossOffset + itemCrossOffset + info.margin.left;
 					const childY = isRow ? contentY + crossOffset + itemCrossOffset + info.margin.top : contentY + mainOffset + info.margin.top;
@@ -880,26 +971,29 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 					let minHeight = 0;
 					let maxHeight = info.height;
 					let shouldStretchCross = false;
-					if (info.flex > 0) if (isRow) {
-						minWidth = maxWidth = info.width;
-						if (info.element.height === void 0 && align === "stretch") {
-							minHeight = info.height;
-							maxHeight = element.height !== void 0 ? info.height : Infinity;
-							shouldStretchCross = true;
+					if (info.flex > 0) {
+						const childProps = getElementLayoutProps(info.element);
+						if (isRow) {
+							minWidth = maxWidth = info.width;
+							if (childProps.height === void 0 && align === "stretch") {
+								minHeight = info.height;
+								maxHeight = boxElement.height !== void 0 ? info.height : Infinity;
+								shouldStretchCross = true;
+							}
+						} else {
+							minHeight = maxHeight = info.height;
+							if (childProps.width === void 0 && align === "stretch") {
+								minWidth = info.width;
+								maxWidth = boxElement.width !== void 0 ? info.width : Infinity;
+								shouldStretchCross = true;
+							}
 						}
 					} else {
-						minHeight = maxHeight = info.height;
-						if (info.element.width === void 0 && align === "stretch") {
-							minWidth = info.width;
-							maxWidth = element.width !== void 0 ? info.width : Infinity;
-							shouldStretchCross = true;
-						}
-					}
-					else {
-						if (!isRow && info.element.width === void 0 && align === "stretch") minWidth = maxWidth = crossAxisSize - info.margin.left - info.margin.right;
-						if (isRow && info.element.height === void 0 && align === "stretch") minHeight = maxHeight = crossAxisSize - info.margin.top - info.margin.bottom;
+						const childProps = getElementLayoutProps(info.element);
+						if (!isRow && childProps.width === void 0 && align === "stretch") minWidth = maxWidth = crossAxisSize - info.margin.left - info.margin.right;
+						if (isRow && childProps.height === void 0 && align === "stretch") minHeight = maxHeight = crossAxisSize - info.margin.top - info.margin.bottom;
 					}
-					const childNode = computeLayout(info.element, ctx, {
+					const childNode = computeLayoutImpl(info.element, ctx, {
 						minWidth,
 						maxWidth,
 						minHeight,
@@ -922,12 +1016,12 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 				crossOffset += lineCrossSize;
 				if (lineIndex < lines.length - 1) crossOffset += gap;
 			}
-			if (wrap && element.height === void 0 && isRow) {
+			if (wrap && boxElement.height === void 0 && isRow) {
 				const actualContentHeight = crossOffset;
 				const actualHeight = actualContentHeight + padding.top + padding.bottom;
 				node.layout.height = actualHeight;
 				node.layout.contentHeight = actualContentHeight;
-			} else if (wrap && element.width === void 0 && !isRow) {
+			} else if (wrap && boxElement.width === void 0 && !isRow) {
 				const actualContentWidth = crossOffset;
 				const actualWidth = actualContentWidth + padding.left + padding.right;
 				node.layout.width = actualWidth;
@@ -936,7 +1030,7 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 			if (!wrap) {
 				let maxChildCrossSize = 0;
 				for (const childNode of node.children) {
-					const childMargin = normalizeSpacing(childNode.element.margin);
+					const childMargin = getElementMargin(childNode.element);
 					if (isRow) {
 						const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
 						maxChildCrossSize = Math.max(maxChildCrossSize, childOuterHeight);
@@ -945,13 +1039,13 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 						maxChildCrossSize = Math.max(maxChildCrossSize, childOuterWidth);
 					}
 				}
-				if (isRow && element.height === void 0) {
+				if (isRow && boxElement.height === void 0) {
 					const actualHeight = maxChildCrossSize + padding.top + padding.bottom;
 					if (actualHeight > node.layout.height) {
 						node.layout.height = actualHeight;
 						node.layout.contentHeight = maxChildCrossSize;
 					}
-				} else if (!isRow && element.width === void 0) {
+				} else if (!isRow && boxElement.width === void 0) {
 					const actualWidth = maxChildCrossSize + padding.left + padding.right;
 					if (actualWidth > node.layout.width) {
 						node.layout.width = actualWidth;
@@ -961,48 +1055,24 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 			}
 			if (isReverse) node.children.reverse();
 		}
-	} else if (element.type === "transform") {
-		const child = element.children;
+	} else if (layoutElement.type === "customdraw") {
+		const child = layoutElement.children;
 		if (child) {
 			const childMargin = normalizeSpacing(child.margin);
-			const childNode = computeLayout(child, ctx, {
+			const childNode = computeLayoutImpl(child, ctx, {
 				minWidth: 0,
 				maxWidth: contentWidth,
 				minHeight: 0,
 				maxHeight: contentHeight
 			}, contentX, contentY);
 			node.children.push(childNode);
-			if (element.width === void 0) {
+			if (layoutElement.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) {
+			if (layoutElement.height === void 0) {
 				const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
 				const actualHeight = childOuterHeight + padding.top + padding.bottom;
 				node.layout.height = actualHeight;
@@ -1833,8 +1903,17 @@ function renderNode(ctx, node) {
 function createCanvas(options) {
 	const { width, height, pixelRatio = 1 } = options;
 	const canvas = options.canvas ?? createRawCanvas(width * pixelRatio, height * pixelRatio);
+	if (options.canvas) {
+		canvas.width = width * pixelRatio;
+		canvas.height = height * pixelRatio;
+		if ("style" in canvas && options.updateStyles !== false) {
+			canvas.style.width = `${width}px`;
+			canvas.style.height = `${height}px`;
+		}
+	}
 	const ctx = canvas.getContext("2d");
 	if (!ctx) throw new Error("Failed to get 2d context");
+	ctx.resetTransform();
 	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);
@@ -1857,7 +1936,7 @@ function createCanvas(options) {
 				if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
 					canvas.width = contentWidth * pixelRatio;
 					canvas.height = contentHeight * pixelRatio;
-					if ("style" in canvas) {
+					if ("style" in canvas && options.updateStyles !== false) {
 						canvas.style.width = `${contentWidth}px`;
 						canvas.style.height = `${contentHeight}px`;
 					}
@@ -2003,10 +2082,12 @@ function getElementType(element) {
 	switch (element.type) {
 		case "box": return "Box";
 		case "text": return `Text "${element.content.slice(0, 20)}${element.content.length > 20 ? "..." : ""}"`;
+		case "richtext": return "RichText";
 		case "stack": return "Stack";
 		case "image": return "Image";
 		case "svg": return "Svg";
-		default: return element.type;
+		case "transform": return "Transform";
+		case "customdraw": return "CustomDraw";
 	}
 }
 /**

package/browser/index.d.cts

@@ -363,7 +363,8 @@ interface CustomDrawProps extends LayoutProps {
 interface CustomDrawElement extends ElementBase, CustomDrawProps {
   type: "customdraw";
 }
-type Element = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | TransformElement | CustomDrawElement;
+type LayoutElement = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | CustomDrawElement;
+type Element = LayoutElement | TransformElement;
 //#endregion
 //#region node_modules/@napi-rs/canvas/index.d.ts
 interface CanvasRenderingContext2D$1 extends CanvasCompositing, CanvasDrawPath, CanvasFillStrokeStyles, CanvasFilters, CanvasImageData, CanvasImageSmoothing, CanvasPath, CanvasPathDrawingStyles, CanvasRect, CanvasSettings, CanvasShadowStyles, CanvasState, CanvasText, CanvasTextDrawingStyles, CanvasTransform, CanvasPDFAnnotations {}
@@ -916,20 +917,17 @@ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas =
   pixelRatio?: number;
   /** 根据内容调整画布大小 */
   fitContent?: boolean;
+  updateStyles?: boolean;
   imageSmoothingEnabled?: boolean;
   imageSmoothingQuality?: "low" | "medium" | "high";
   canvas?: T;
 }
-interface LayoutSize {
-  width: number;
-  height: number;
-}
-interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
+interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
   readonly width: number;
   readonly height: number;
   readonly pixelRatio: number;
   readonly canvas: T;
-  render(element: Element): LayoutNode;
+  render(element: LayoutElement): LayoutNode;
   clear(): void;
   getContext(): CanvasRenderingContext2D;
   toDataURL(type?: string, quality?: number): string;
@@ -978,7 +976,11 @@ declare function Text(props: TextProps): TextElement;
 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;
+/**
+ * 布局计算主函数
+ * 内部使用 Element 类型以支持 Transform，外部通过 LayoutElement 约束类型
+ */
+declare function computeLayout(element: LayoutElement, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
 //#endregion
 //#region src/layout/utils/print.d.ts
 /**
@@ -993,4 +995,4 @@ declare function printLayout(node: LayoutNode): void;
  */
 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 };
+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 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/browser/index.d.ts

@@ -363,7 +363,8 @@ interface CustomDrawProps extends LayoutProps {
 interface CustomDrawElement extends ElementBase, CustomDrawProps {
   type: "customdraw";
 }
-type Element = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | TransformElement | CustomDrawElement;
+type LayoutElement = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | CustomDrawElement;
+type Element = LayoutElement | TransformElement;
 //#endregion
 //#region node_modules/@napi-rs/canvas/index.d.ts
 interface CanvasRenderingContext2D$1 extends CanvasCompositing, CanvasDrawPath, CanvasFillStrokeStyles, CanvasFilters, CanvasImageData, CanvasImageSmoothing, CanvasPath, CanvasPathDrawingStyles, CanvasRect, CanvasSettings, CanvasShadowStyles, CanvasState, CanvasText, CanvasTextDrawingStyles, CanvasTransform, CanvasPDFAnnotations {}
@@ -916,20 +917,17 @@ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas =
   pixelRatio?: number;
   /** 根据内容调整画布大小 */
   fitContent?: boolean;
+  updateStyles?: boolean;
   imageSmoothingEnabled?: boolean;
   imageSmoothingQuality?: "low" | "medium" | "high";
   canvas?: T;
 }
-interface LayoutSize {
-  width: number;
-  height: number;
-}
-interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
+interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
   readonly width: number;
   readonly height: number;
   readonly pixelRatio: number;
   readonly canvas: T;
-  render(element: Element): LayoutNode;
+  render(element: LayoutElement): LayoutNode;
   clear(): void;
   getContext(): CanvasRenderingContext2D;
   toDataURL(type?: string, quality?: number): string;
@@ -978,7 +976,11 @@ declare function Text(props: TextProps): TextElement;
 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;
+/**
+ * 布局计算主函数
+ * 内部使用 Element 类型以支持 Transform，外部通过 LayoutElement 约束类型
+ */
+declare function computeLayout(element: LayoutElement, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
 //#endregion
 //#region src/layout/utils/print.d.ts
 /**
@@ -993,4 +995,4 @@ declare function printLayout(node: LayoutNode): void;
  */
 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 };
+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 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 };