@codehz/draw-call 0.1.2 → 0.2.1

package/render.mjs

@@ -174,6 +174,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
 /**
@@ -200,6 +217,174 @@ function measureImageSize(element, _ctx, _availableWidth) {
 	};
 }
 
+//#endregion
+//#region src/layout/components/richtext.ts
+/**
+* 合并 span 样式和元素级别样式
+* 优先级：span 样式 > 元素样式 > 默认值
+* font 属性进行深度合并，允许 span 部分覆盖 element 的 font
+*/
+function mergeSpanStyle(span, elementStyle) {
+	return {
+		font: {
+			...elementStyle.font || {},
+			...span.font || {}
+		},
+		color: span.color ?? elementStyle.color,
+		background: span.background ?? elementStyle.background,
+		underline: span.underline ?? elementStyle.underline ?? false,
+		strikethrough: span.strikethrough ?? elementStyle.strikethrough ?? false
+	};
+}
+/**
+* 测量富文本元素的固有尺寸
+*/
+function measureRichTextSize(element, ctx, availableWidth) {
+	const lineHeight = element.lineHeight ?? 1.2;
+	const elementStyle = {
+		font: element.font,
+		color: element.color,
+		background: element.background,
+		underline: element.underline,
+		strikethrough: element.strikethrough
+	};
+	const richLines = wrapRichText(ctx, element.spans, availableWidth, lineHeight, elementStyle);
+	let maxWidth = 0;
+	let totalHeight = 0;
+	for (const line of richLines) {
+		maxWidth = Math.max(maxWidth, line.width);
+		totalHeight += line.height;
+	}
+	return {
+		width: maxWidth,
+		height: totalHeight
+	};
+}
+/**
+* 将富文本内容拆分为行
+*/
+function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle = {}) {
+	const lines = [];
+	let currentSegments = [];
+	let currentLineWidth = 0;
+	const pushLine = () => {
+		if (currentSegments.length === 0) return;
+		let maxTopDist = 0;
+		let maxBottomDist = 0;
+		let maxLineHeight = 0;
+		for (const seg of currentSegments) {
+			const topDist = seg.ascent - seg.offset;
+			const bottomDist = seg.descent + seg.offset;
+			maxTopDist = Math.max(maxTopDist, topDist);
+			maxBottomDist = Math.max(maxBottomDist, bottomDist);
+			maxLineHeight = Math.max(maxLineHeight, seg.height);
+		}
+		const contentHeight = maxTopDist + maxBottomDist;
+		const finalHeight = Math.max(contentHeight, maxLineHeight);
+		const extra = (finalHeight - contentHeight) / 2;
+		lines.push({
+			segments: [...currentSegments],
+			width: currentLineWidth,
+			height: finalHeight,
+			baseline: maxTopDist + extra
+		});
+		currentSegments = [];
+		currentLineWidth = 0;
+	};
+	for (const span of spans) {
+		const mergedStyle = mergeSpanStyle(span, elementStyle);
+		const font = mergedStyle.font;
+		const lh = (font.size ?? 16) * lineHeightScale;
+		const words = span.text.split(/(\s+)/);
+		for (const word of words) {
+			if (word === "") continue;
+			if (/^\s+$/.test(word)) {
+				const metrics = ctx.measureText(word, font);
+				const wordWidth = metrics.width;
+				if (maxWidth > 0 && currentLineWidth + wordWidth > maxWidth && currentSegments.length > 0) pushLine();
+				currentSegments.push({
+					text: word,
+					font: mergedStyle.font,
+					color: mergedStyle.color,
+					background: mergedStyle.background,
+					underline: mergedStyle.underline,
+					strikethrough: mergedStyle.strikethrough,
+					width: wordWidth,
+					height: lh,
+					ascent: metrics.ascent,
+					descent: metrics.descent,
+					offset: metrics.offset
+				});
+				currentLineWidth += wordWidth;
+			} else {
+				const metrics = ctx.measureText(word, font);
+				const wordWidth = metrics.width;
+				if (maxWidth <= 0 || currentLineWidth + wordWidth <= maxWidth) {
+					currentSegments.push({
+						text: word,
+						font: mergedStyle.font,
+						color: mergedStyle.color,
+						background: mergedStyle.background,
+						underline: mergedStyle.underline,
+						strikethrough: mergedStyle.strikethrough,
+						width: wordWidth,
+						height: lh,
+						ascent: metrics.ascent,
+						descent: metrics.descent,
+						offset: metrics.offset
+					});
+					currentLineWidth += wordWidth;
+				} else {
+					if (currentSegments.length > 0) pushLine();
+					const remainingWidth = maxWidth;
+					let currentPos = 0;
+					while (currentPos < word.length) {
+						let bestLen = 0;
+						for (let len = word.length - currentPos; len > 0; len--) {
+							const substr = word.substring(currentPos, currentPos + len);
+							const m = ctx.measureText(substr, font);
+							if (currentLineWidth + m.width <= remainingWidth) {
+								bestLen = len;
+								if (len < word.length - currentPos) break;
+							}
+						}
+						if (bestLen === 0) {
+							if (currentSegments.length > 0) pushLine();
+							bestLen = 1;
+						}
+						const substr = word.substring(currentPos, currentPos + bestLen);
+						const m = ctx.measureText(substr, font);
+						currentSegments.push({
+							text: substr,
+							font: mergedStyle.font,
+							color: mergedStyle.color,
+							background: mergedStyle.background,
+							underline: mergedStyle.underline,
+							strikethrough: mergedStyle.strikethrough,
+							width: m.width,
+							height: lh,
+							ascent: m.ascent,
+							descent: m.descent,
+							offset: m.offset
+						});
+						currentLineWidth += m.width;
+						currentPos += bestLen;
+						if (currentPos < word.length && currentLineWidth >= remainingWidth) pushLine();
+					}
+				}
+			}
+		}
+	}
+	pushLine();
+	if (lines.length === 0) return [{
+		segments: [],
+		width: 0,
+		height: 0,
+		baseline: 0
+	}];
+	return lines;
+}
+
 //#endregion
 //#region src/layout/components/stack.ts
 /**
@@ -277,10 +462,13 @@ function createCanvasMeasureContext(ctx) {
 		ctx.textBaseline = "middle";
 		const metrics = ctx.measureText(text);
 		const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+		const fontSize = font.size || 16;
 		return {
 			width: metrics.width,
-			height: height || font.size || 16,
-			offset: (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2
+			height: height || fontSize,
+			offset: (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2,
+			ascent: metrics.actualBoundingBoxAscent,
+			descent: metrics.actualBoundingBoxDescent
 		};
 	} };
 }
@@ -384,6 +572,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
 /**
@@ -392,10 +591,13 @@ function measureTextSize(element, ctx, availableWidth) {
 function measureIntrinsicSize(element, ctx, availableWidth) {
 	switch (element.type) {
 		case "text": return measureTextSize(element, ctx, availableWidth);
+		case "richtext": return measureRichTextSize(element, ctx, availableWidth);
 		case "box": return measureBoxSize(element, ctx, availableWidth, measureIntrinsicSize);
 		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
@@ -487,6 +689,23 @@ function computeLayout(element, ctx, constraints, x = 0, y = 0) {
 			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) {
+				const lastLine = lines[lines.length - 1];
+				if (lastLine.segments.length > 0) {
+					const lastSeg = lastLine.segments[lastLine.segments.length - 1];
+					lastSeg.text += "...";
+					lastSeg.width = ctx.measureText(lastSeg.text, lastSeg.font ?? {}).width;
+					lastLine.width = lastLine.segments.reduce((sum, s) => sum + s.width, 0);
+				}
+			}
+		}
+		node.richLines = lines;
+	}
 	if (element.type === "box" || element.type === "stack") {
 		const children = element.children ?? [];
 		if (element.type === "stack") {
@@ -736,6 +955,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;
 }
@@ -844,6 +1111,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) {
@@ -931,15 +1355,55 @@ function renderImage(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.");
+//#region src/render/components/richtext.ts
+function renderRichText(ctx, node) {
+	const element = node.element;
+	const { contentX, contentY, contentWidth, contentHeight } = node.layout;
+	const lines = node.richLines ?? [];
+	if (lines.length === 0) return;
+	const totalTextHeight = lines.reduce((sum, line) => sum + line.height, 0);
+	let verticalOffset = 0;
+	if (element.verticalAlign === "middle") verticalOffset = (contentHeight - totalTextHeight) / 2;
+	else if (element.verticalAlign === "bottom") verticalOffset = contentHeight - totalTextHeight;
+	let currentY = contentY + verticalOffset;
+	for (const line of lines) {
+		let lineX = contentX;
+		if (element.align === "center") lineX = contentX + (contentWidth - line.width) / 2;
+		else if (element.align === "right") lineX = contentX + (contentWidth - line.width);
+		const baselineY = currentY + line.baseline;
+		for (const seg of line.segments) {
+			ctx.save();
+			ctx.font = buildFontString(seg.font ?? {});
+			if (seg.background) {
+				ctx.fillStyle = resolveColor$1(ctx, seg.background, lineX, currentY, seg.width, line.height);
+				ctx.fillRect(lineX, currentY, seg.width, line.height);
+			}
+			ctx.fillStyle = seg.color ? resolveColor$1(ctx, seg.color, lineX, currentY, seg.width, line.height) : "#000";
+			ctx.textBaseline = "middle";
+			ctx.fillText(seg.text, lineX, baselineY - seg.offset);
+			if (seg.underline) {
+				ctx.beginPath();
+				ctx.strokeStyle = ctx.fillStyle;
+				ctx.lineWidth = 1;
+				ctx.moveTo(lineX, currentY + seg.height);
+				ctx.lineTo(lineX + seg.width, currentY + seg.height);
+				ctx.stroke();
+			}
+			if (seg.strikethrough) {
+				ctx.beginPath();
+				ctx.strokeStyle = ctx.fillStyle;
+				ctx.lineWidth = 1;
+				const strikeY = currentY + seg.height / 2 + seg.offset;
+				ctx.moveTo(lineX, strikeY);
+				ctx.lineTo(lineX + seg.width, strikeY);
+				ctx.stroke();
+			}
+			ctx.restore();
+			lineX += seg.width;
+		}
+		currentY += line.height;
 	}
-})();
+}
 
 //#endregion
 //#region src/compat/Path2D.ts
@@ -1016,8 +1480,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) {
@@ -1253,6 +1723,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) {
@@ -1275,12 +1821,21 @@ function renderNode(ctx, node) {
 		case "text":
 			renderText(ctx, node);
 			break;
+		case "richtext":
+			renderRichText(ctx, node);
+			break;
 		case "image":
 			renderImage(ctx, node);
 			break;
 		case "svg":
 			renderSvg(ctx, node);
 			break;
+		case "transform":
+			renderTransform(ctx, node);
+			break;
+		case "customdraw":
+			renderCustomDraw(ctx, node);
+			break;
 	}
 }