@codehz/draw-call 0.5.2 → 0.6.0

package/{browser → dist/browser}/index.js

@@ -7,7 +7,6 @@ function createRawCanvas(width, height) {
 	canvas.height = height;
 	return canvas;
 }
-
 //#endregion
 //#region src/types/base.ts
 function linearGradient(angle, ...stops) {
@@ -78,7 +77,6 @@ function normalizeBorderRadius(value) {
 	];
 	return value;
 }
-
 //#endregion
 //#region src/layout/components/box.ts
 /**
@@ -191,7 +189,6 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/customDraw.ts
 /**
@@ -208,7 +205,6 @@ function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/image.ts
 /**
@@ -234,7 +230,6 @@ function measureImageSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/richtext.ts
 /**
@@ -402,7 +397,6 @@ function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle
 	}];
 	return lines;
 }
-
 //#endregion
 //#region src/layout/components/stack.ts
 /**
@@ -439,7 +433,6 @@ function measureStackSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/svg.ts
 /**
@@ -473,7 +466,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/render/utils/font.ts
 /**
@@ -484,23 +476,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) {
@@ -576,7 +587,6 @@ function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
 		offset
 	};
 }
-
 //#endregion
 //#region src/layout/components/text.ts
 /**
@@ -602,7 +612,6 @@ function measureTextSize(element, ctx, availableWidth) {
 		height: Math.max(height, lineHeightPx)
 	};
 }
-
 //#endregion
 //#region src/layout/components/transform.ts
 /**
@@ -613,7 +622,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
 /**
@@ -635,7 +643,6 @@ function measureIntrinsicSize(element, ctx, availableWidth) {
 		};
 	}
 }
-
 //#endregion
 //#region src/layout/utils/offset.ts
 /**
@@ -648,7 +655,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) {
@@ -663,7 +669,6 @@ function sizeNeedsParent(size) {
 	if (typeof size === "string" && size.endsWith("%")) return true;
 	return false;
 }
-
 //#endregion
 //#region src/layout/engine.ts
 /**
@@ -783,7 +788,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) {
@@ -1081,7 +1093,6 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
 	}
 	return node;
 }
-
 //#endregion
 //#region src/render/utils/colors.ts
 function isGradientDescriptor$1(color) {
@@ -1117,7 +1128,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) {
@@ -1139,7 +1149,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) {
@@ -1156,7 +1165,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) {
@@ -1185,125 +1193,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 DOMMatrix([
+		matrix.a,
+		matrix.b,
+		matrix.c,
+		matrix.d,
+		matrix.e,
+		matrix.f
+	]);
+}
+function toRelativeMatrix(transform) {
+	if (transform === void 0) return new DOMMatrix();
+	if (transform instanceof DOMMatrix) return cloneMatrix(transform);
+	return new 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 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 DOMMatrix();
+		this.canvas.restore();
+		this.applyRelativeTransform();
 	}
-	/**
-	* setTransform() - 设置相对变换
-	*/
-	setTransform(...args) {
-		let matrix;
-		if (args.length === 1 && args[0] instanceof DOMMatrix) matrix = args[0];
-		else if (args.length === 6) matrix = new 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 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 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
 /**
@@ -1314,7 +1287,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();
@@ -1323,15 +1296,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) {
@@ -1417,7 +1389,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) {
@@ -1468,7 +1439,6 @@ function renderRichText(ctx, node) {
 		currentY += line.height;
 	}
 }
-
 //#endregion
 //#region src/render/components/svg.ts
 function isGradientDescriptor(color) {
@@ -1740,7 +1710,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) {
@@ -1775,7 +1744,6 @@ function renderText(ctx, node) {
 	}
 	if (element.shadow) clearShadow$1(ctx);
 }
-
 //#endregion
 //#region src/render/components/transform.ts
 /**
@@ -1851,7 +1819,6 @@ function renderTransform(ctx, node) {
 	renderNode(ctx, childNode);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/index.ts
 function renderNode(ctx, node) {
@@ -1891,7 +1858,6 @@ function renderNode(ctx, node) {
 			break;
 	}
 }
-
 //#endregion
 //#region src/canvas.ts
 /**
@@ -1961,7 +1927,6 @@ function createCanvas(options) {
 		}
 	};
 }
-
 //#endregion
 //#region src/components/Box.ts
 function Box(props) {
@@ -1970,7 +1935,6 @@ function Box(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/CustomDraw.ts
 function CustomDraw(props) {
@@ -1979,7 +1943,6 @@ function CustomDraw(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Image.ts
 function Image(props) {
@@ -1988,7 +1951,6 @@ function Image(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/RichText.ts
 function RichText(props) {
@@ -1997,7 +1959,6 @@ function RichText(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -2006,7 +1967,6 @@ function Stack(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Svg.ts
 function Svg(props) {
@@ -2053,7 +2013,6 @@ const svg = {
 		...props
 	})
 };
-
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -2062,7 +2021,6 @@ function Text(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Transform.ts
 function Transform(props) {
@@ -2071,7 +2029,6 @@ function Transform(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/layout/utils/print.ts
 /**
@@ -2131,6 +2088,5 @@ function printLayout(node) {
 function layoutToString(node, _indent = "  ") {
 	return printLayoutToString(node, "", true).join("\n");
 }
-
 //#endregion
-export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
+export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };