@codehz/draw-call 0.5.2 → 0.6.0

package/{node → dist/node}/index.cjs

@@ -1,11 +1,9 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _napi_rs_canvas = require("@napi-rs/canvas");
-
 //#region src/compat/index.ts
 function createRawCanvas(width, height) {
 	return (0, _napi_rs_canvas.createCanvas)(width, height);
 }
-
 //#endregion
 //#region src/types/base.ts
 function linearGradient(angle, ...stops) {
@@ -76,7 +74,6 @@ function normalizeBorderRadius(value) {
 	];
 	return value;
 }
-
 //#endregion
 //#region src/layout/components/box.ts
 /**
@@ -189,7 +186,6 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/customDraw.ts
 /**
@@ -206,7 +202,6 @@ function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/image.ts
 /**
@@ -232,7 +227,6 @@ function measureImageSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/richtext.ts
 /**
@@ -400,7 +394,6 @@ function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle
 	}];
 	return lines;
 }
-
 //#endregion
 //#region src/layout/components/stack.ts
 /**
@@ -437,7 +430,6 @@ function measureStackSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/svg.ts
 /**
@@ -471,7 +463,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/render/utils/font.ts
 /**
@@ -482,23 +473,42 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 function buildFontString(font) {
 	return `${font.style ?? "normal"} ${font.weight ?? "normal"} ${font.size ?? 16}px ${font.family ?? "sans-serif"}`;
 }
-
 //#endregion
 //#region src/layout/utils/measure.ts
+const MEASURE_CACHE_LIMIT = 256;
 function createCanvasMeasureContext(ctx) {
+	const cache = /* @__PURE__ */ new Map();
+	let lastFontString = null;
 	return { measureText(text, font) {
-		ctx.font = buildFontString(font);
-		ctx.textBaseline = "middle";
+		const fontString = buildFontString(font);
+		const key = fontString + "\0" + text;
+		const hit = cache.get(key);
+		if (hit !== void 0) {
+			cache.delete(key);
+			cache.set(key, hit);
+			return hit;
+		}
+		if (fontString !== lastFontString) {
+			ctx.font = fontString;
+			ctx.textBaseline = "middle";
+			lastFontString = fontString;
+		}
 		const metrics = ctx.measureText(text);
 		const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
 		const fontSize = font.size || 16;
-		return {
+		const result = {
 			width: metrics.width,
 			height: height || fontSize,
 			offset: (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2,
 			ascent: metrics.actualBoundingBoxAscent,
 			descent: metrics.actualBoundingBoxDescent
 		};
+		if (cache.size >= MEASURE_CACHE_LIMIT) {
+			const oldest = cache.keys().next().value;
+			if (oldest !== void 0) cache.delete(oldest);
+		}
+		cache.set(key, result);
+		return result;
 	} };
 }
 function wrapText(ctx, text, maxWidth, font) {
@@ -574,7 +584,6 @@ function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
 		offset
 	};
 }
-
 //#endregion
 //#region src/layout/components/text.ts
 /**
@@ -600,7 +609,6 @@ function measureTextSize(element, ctx, availableWidth) {
 		height: Math.max(height, lineHeightPx)
 	};
 }
-
 //#endregion
 //#region src/layout/components/transform.ts
 /**
@@ -611,7 +619,6 @@ function measureTextSize(element, ctx, availableWidth) {
 function measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize) {
 	return measureIntrinsicSize(element.children, ctx, availableWidth);
 }
-
 //#endregion
 //#region src/layout/components/index.ts
 /**
@@ -633,7 +640,6 @@ function measureIntrinsicSize(element, ctx, availableWidth) {
 		};
 	}
 }
-
 //#endregion
 //#region src/layout/utils/offset.ts
 /**
@@ -646,7 +652,6 @@ function applyOffset(node, dx, dy) {
 	node.layout.contentY += dy;
 	for (const child of node.children) applyOffset(child, dx, dy);
 }
-
 //#endregion
 //#region src/types/layout.ts
 function resolveSize(size, available, auto) {
@@ -661,7 +666,6 @@ function sizeNeedsParent(size) {
 	if (typeof size === "string" && size.endsWith("%")) return true;
 	return false;
 }
-
 //#endregion
 //#region src/layout/engine.ts
 /**
@@ -781,7 +785,14 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
 	}
 	if (layoutElement.type === "richtext") {
 		const lineHeight = layoutElement.lineHeight ?? 1.2;
-		let lines = wrapRichText(ctx, layoutElement.spans, contentWidth, lineHeight);
+		const elementStyle = {
+			font: layoutElement.font,
+			color: layoutElement.color,
+			background: layoutElement.background,
+			underline: layoutElement.underline,
+			strikethrough: layoutElement.strikethrough
+		};
+		let lines = wrapRichText(ctx, layoutElement.spans, contentWidth, lineHeight, elementStyle);
 		if (layoutElement.maxLines && lines.length > layoutElement.maxLines) {
 			lines = lines.slice(0, layoutElement.maxLines);
 			if (layoutElement.ellipsis && lines.length > 0) {
@@ -1079,7 +1090,6 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
 	}
 	return node;
 }
-
 //#endregion
 //#region src/render/utils/colors.ts
 function isGradientDescriptor$1(color) {
@@ -1115,7 +1125,6 @@ function resolveColor$1(ctx, color, x, y, width, height) {
 	if (isGradientDescriptor$1(color)) return resolveGradient$1(ctx, color, x, y, width, height);
 	return color;
 }
-
 //#endregion
 //#region src/render/utils/shadows.ts
 function applyShadow$1(ctx, shadow) {
@@ -1137,7 +1146,6 @@ function clearShadow$1(ctx) {
 	ctx.shadowBlur = 0;
 	ctx.shadowColor = "transparent";
 }
-
 //#endregion
 //#region src/render/utils/shapes.ts
 function roundRectPath(ctx, x, y, width, height, radius) {
@@ -1154,7 +1162,6 @@ function roundRectPath(ctx, x, y, width, height, radius) {
 	ctx.quadraticCurveTo(x, y, x + tl, y);
 	ctx.closePath();
 }
-
 //#endregion
 //#region src/render/components/box.ts
 function renderBox(ctx, node) {
@@ -1183,125 +1190,90 @@ function renderBox(ctx, node) {
 	}
 	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
 }
-
 //#endregion
-//#region src/render/components/ProxiedCanvasContext.ts
-/**
-* ProxiedCanvasContext - Canvas 上下文代理类
-*
-* 该类提供对真实 CanvasRenderingContext2D 的代理，有以下功能：
-* 1. 管理 save/restore 的平衡（计数器）
-* 2. 追踪相对变换而不是绝对变换
-* 3. 在析构时自动恢复所有未恢复的状态
-* 4. 转发所有其他 Canvas API 调用
-*/
-var ProxiedCanvasContext = class {
-	/**
-	* 真实的 Canvas 上下文
-	*/
-	ctx;
-	/**
-	* 基础变换矩阵（初始化时设置，保持不变）
-	*/
+//#region src/render/components/CustomDrawContext.ts
+function cloneMatrix(matrix) {
+	return new _napi_rs_canvas.DOMMatrix([
+		matrix.a,
+		matrix.b,
+		matrix.c,
+		matrix.d,
+		matrix.e,
+		matrix.f
+	]);
+}
+function toRelativeMatrix(transform) {
+	if (transform === void 0) return new _napi_rs_canvas.DOMMatrix();
+	if (transform instanceof _napi_rs_canvas.DOMMatrix) return cloneMatrix(transform);
+	return new _napi_rs_canvas.DOMMatrix(transform);
+}
+var ManagedCustomDrawContext = class {
+	canvas;
 	baseTransform;
-	/**
-	* 相对变换矩阵（用户通过 setTransform 设置）
-	*/
 	relativeTransform;
-	/**
-	* save/restore 计数器
-	*/
+	transformStack = [];
 	saveCount = 0;
-	/**
-	* 构造函数
-	* @param ctx 真实的 CanvasRenderingContext2D
-	* @param baseTransform 初始的基础变换矩阵
-	*/
-	constructor(ctx, baseTransform) {
-		this.ctx = ctx;
-		this.baseTransform = baseTransform;
+	constructor(canvas, baseTransform) {
+		this.canvas = canvas;
+		this.baseTransform = cloneMatrix(baseTransform);
 		this.relativeTransform = new _napi_rs_canvas.DOMMatrix();
 	}
-	/**
-	* save() - 保存当前状态并增加计数
-	*/
 	save() {
 		this.saveCount++;
-		this.ctx.save();
+		this.transformStack.push(cloneMatrix(this.relativeTransform));
+		this.canvas.save();
 	}
-	/**
-	* restore() - 恢复上一个状态并减少计数
-	*/
 	restore() {
-		if (this.saveCount > 0) {
-			this.saveCount--;
-			this.ctx.restore();
-		}
+		if (this.saveCount === 0) return;
+		this.saveCount--;
+		this.relativeTransform = this.transformStack.pop() ?? new _napi_rs_canvas.DOMMatrix();
+		this.canvas.restore();
+		this.applyRelativeTransform();
 	}
-	/**
-	* setTransform() - 设置相对变换
-	*/
-	setTransform(...args) {
-		let matrix;
-		if (args.length === 1 && args[0] instanceof _napi_rs_canvas.DOMMatrix) matrix = args[0];
-		else if (args.length === 6) matrix = new _napi_rs_canvas.DOMMatrix([
-			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;
+		return cloneMatrix(this.relativeTransform);
+	}
+	setTransform(transform) {
+		this.relativeTransform = toRelativeMatrix(transform);
+		this.applyRelativeTransform();
+	}
+	resetTransform() {
+		this.relativeTransform = new _napi_rs_canvas.DOMMatrix();
+		this.applyRelativeTransform();
+	}
+	translate(x, y) {
+		this.relativeTransform = this.relativeTransform.translate(x, y);
+		this.applyRelativeTransform();
+	}
+	rotate(angle) {
+		this.relativeTransform = this.relativeTransform.rotate(angle * 180 / Math.PI);
+		this.applyRelativeTransform();
+	}
+	scale(x, y) {
+		this.relativeTransform = this.relativeTransform.scale(x, y ?? x);
+		this.applyRelativeTransform();
+	}
+	transform(a, b, c, d, e, f) {
+		this.relativeTransform = this.relativeTransform.multiply(new _napi_rs_canvas.DOMMatrix([
+			a,
+			b,
+			c,
+			d,
+			e,
+			f
+		]));
+		this.applyRelativeTransform();
 	}
-	/**
-	* 析构函数级的清理 - 自动恢复所有未恢复的 save
-	*/
 	destroy() {
-		while (this.saveCount > 0) {
-			console.log("destroy restore", this.saveCount);
-			this.saveCount--;
-			this.ctx.restore();
-		}
+		while (this.saveCount > 0) this.restore();
+	}
+	applyRelativeTransform() {
+		this.canvas.setTransform(this.baseTransform.multiply(this.relativeTransform));
 	}
 };
-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);
-		}
-	});
+function createCustomDrawContext(canvas, baseTransform) {
+	return new ManagedCustomDrawContext(canvas, baseTransform);
 }
-
 //#endregion
 //#region src/render/components/customDraw.ts
 /**
@@ -1312,7 +1284,7 @@ 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 customCtx = createCustomDrawContext(ctx, ctx.getTransform());
 	const inner = () => {
 		if (node.children && node.children.length > 0) {
 			ctx.save();
@@ -1321,15 +1293,14 @@ function renderCustomDraw(ctx, node) {
 			ctx.restore();
 		}
 	};
-	element.draw(proxyCtx, {
+	element.draw(customCtx, {
 		inner,
 		width: node.layout.contentWidth,
 		height: node.layout.contentHeight
 	});
-	proxyCtx.destroy();
+	customCtx.destroy();
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/components/image.ts
 function renderImage(ctx, node) {
@@ -1415,7 +1386,6 @@ function renderImage(ctx, node) {
 	}
 	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
 }
-
 //#endregion
 //#region src/render/components/richtext.ts
 function renderRichText(ctx, node) {
@@ -1466,7 +1436,6 @@ function renderRichText(ctx, node) {
 		currentY += line.height;
 	}
 }
-
 //#endregion
 //#region src/render/components/svg.ts
 function isGradientDescriptor(color) {
@@ -1738,7 +1707,6 @@ function renderSvg(ctx, node) {
 	for (const child of element.children) renderSvgChild(ctx, child, transform, bounds, baseTransform);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/components/text.ts
 function renderText(ctx, node) {
@@ -1773,7 +1741,6 @@ function renderText(ctx, node) {
 	}
 	if (element.shadow) clearShadow$1(ctx);
 }
-
 //#endregion
 //#region src/render/components/transform.ts
 /**
@@ -1849,7 +1816,6 @@ function renderTransform(ctx, node) {
 	renderNode(ctx, childNode);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/index.ts
 function renderNode(ctx, node) {
@@ -1889,7 +1855,6 @@ function renderNode(ctx, node) {
 			break;
 	}
 }
-
 //#endregion
 //#region src/canvas.ts
 /**
@@ -1959,7 +1924,6 @@ function createCanvas(options) {
 		}
 	};
 }
-
 //#endregion
 //#region src/components/Box.ts
 function Box(props) {
@@ -1968,7 +1932,6 @@ function Box(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/CustomDraw.ts
 function CustomDraw(props) {
@@ -1977,7 +1940,6 @@ function CustomDraw(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Image.ts
 function Image(props) {
@@ -1986,7 +1948,6 @@ function Image(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/RichText.ts
 function RichText(props) {
@@ -1995,7 +1956,6 @@ function RichText(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -2004,7 +1964,6 @@ function Stack(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Svg.ts
 function Svg(props) {
@@ -2051,7 +2010,6 @@ const svg = {
 		...props
 	})
 };
-
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -2060,7 +2018,6 @@ function Text(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Transform.ts
 function Transform(props) {
@@ -2069,7 +2026,6 @@ function Transform(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/layout/utils/print.ts
 /**
@@ -2129,7 +2085,6 @@ function printLayout(node) {
 function layoutToString(node, _indent = "  ") {
 	return printLayoutToString(node, "", true).join("\n");
 }
-
 //#endregion
 exports.Box = Box;
 exports.CustomDraw = CustomDraw;
@@ -2146,4 +2101,4 @@ exports.layoutToString = layoutToString;
 exports.linearGradient = linearGradient;
 exports.printLayout = printLayout;
 exports.radialGradient = radialGradient;
-exports.svg = svg;
+exports.svg = svg;