@codehz/draw-call 0.5.0 → 0.5.2

package/browser/index.js

@@ -81,6 +81,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,
@@ -90,7 +103,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,
@@ -159,7 +172,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;
@@ -393,6 +406,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) {
@@ -401,7 +427,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);
@@ -640,18 +666,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;
@@ -659,7 +746,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,
@@ -672,14 +759,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;
@@ -689,17 +776,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];
@@ -711,19 +798,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;
@@ -736,19 +823,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,
@@ -758,10 +847,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({
@@ -802,14 +891,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);
 					}
 				}
 			}
@@ -860,17 +950,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;
@@ -879,26 +970,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;
-						}
+						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;
 					}
-					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 childNode = computeLayout(info.element, ctx, {
+					const childNode = computeLayoutImpl(info.element, ctx, {
 						minWidth,
 						maxWidth,
 						minHeight,
@@ -921,12 +1015,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;
@@ -935,7 +1029,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);
@@ -944,13 +1038,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;
@@ -960,48 +1054,24 @@ 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;
+	} 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) {
+			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;
@@ -2011,10 +2081,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";
 	}
 }
 /**