@codehz/draw-call 0.5.2 → 0.6.0

package/README.md

@@ -244,7 +244,7 @@ Transform({
 
 ### CustomDraw
 
-自定义绘制组件，提供原生 Canvas 上下文进行自定义绘制。
+自定义绘制组件，提供受控的绘制上下文。原生 Canvas API 可通过 `ctx.canvas` 访问，`save`/`restore`/transform 由 `CustomDrawContext` 管理。
 
 ```typescript
 CustomDraw({
@@ -252,12 +252,12 @@ CustomDraw({
   height: 100,
   draw: (ctx, options) => {
     // 使用原生 Canvas API 进行绘制
-    ctx.fillStyle = "#667eea";
-    ctx.fillRect(10, 10, 180, 80);
-    ctx.fillStyle = "#ffffff";
-    ctx.font = "bold 16px sans-serif";
-    ctx.textAlign = "center";
-    ctx.fillText("Custom Draw", 100, 60);
+    ctx.canvas.fillStyle = "#667eea";
+    ctx.canvas.fillRect(10, 10, 180, 80);
+    ctx.canvas.fillStyle = "#ffffff";
+    ctx.canvas.font = "bold 16px sans-serif";
+    ctx.canvas.textAlign = "center";
+    ctx.canvas.fillText("Custom Draw", 100, 60);
   },
 });
 ```

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

@@ -1,5 +1,4 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/compat/index.ts
 const DOMMatrix = typeof window !== "undefined" ? window.DOMMatrix : void 0;
 const Path2D = typeof window !== "undefined" ? window.Path2D : void 0;
@@ -9,7 +8,6 @@ function createRawCanvas(width, height) {
 	canvas.height = height;
 	return canvas;
 }
-
 //#endregion
 //#region src/types/base.ts
 function linearGradient(angle, ...stops) {
@@ -80,7 +78,6 @@ function normalizeBorderRadius(value) {
 	];
 	return value;
 }
-
 //#endregion
 //#region src/layout/components/box.ts
 /**
@@ -193,7 +190,6 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/customDraw.ts
 /**
@@ -210,7 +206,6 @@ function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/image.ts
 /**
@@ -236,7 +231,6 @@ function measureImageSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/richtext.ts
 /**
@@ -404,7 +398,6 @@ function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle
 	}];
 	return lines;
 }
-
 //#endregion
 //#region src/layout/components/stack.ts
 /**
@@ -441,7 +434,6 @@ function measureStackSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/svg.ts
 /**
@@ -475,7 +467,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/render/utils/font.ts
 /**
@@ -486,23 +477,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) {
@@ -578,7 +588,6 @@ function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
 		offset
 	};
 }
-
 //#endregion
 //#region src/layout/components/text.ts
 /**
@@ -604,7 +613,6 @@ function measureTextSize(element, ctx, availableWidth) {
 		height: Math.max(height, lineHeightPx)
 	};
 }
-
 //#endregion
 //#region src/layout/components/transform.ts
 /**
@@ -615,7 +623,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
 /**
@@ -637,7 +644,6 @@ function measureIntrinsicSize(element, ctx, availableWidth) {
 		};
 	}
 }
-
 //#endregion
 //#region src/layout/utils/offset.ts
 /**
@@ -650,7 +656,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) {
@@ -665,7 +670,6 @@ function sizeNeedsParent(size) {
 	if (typeof size === "string" && size.endsWith("%")) return true;
 	return false;
 }
-
 //#endregion
 //#region src/layout/engine.ts
 /**
@@ -785,7 +789,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) {
@@ -1083,7 +1094,6 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
 	}
 	return node;
 }
-
 //#endregion
 //#region src/render/utils/colors.ts
 function isGradientDescriptor$1(color) {
@@ -1119,7 +1129,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) {
@@ -1141,7 +1150,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) {
@@ -1158,7 +1166,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) {
@@ -1187,125 +1194,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
 /**
@@ -1316,7 +1288,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();
@@ -1325,15 +1297,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) {
@@ -1419,7 +1390,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) {
@@ -1470,7 +1440,6 @@ function renderRichText(ctx, node) {
 		currentY += line.height;
 	}
 }
-
 //#endregion
 //#region src/render/components/svg.ts
 function isGradientDescriptor(color) {
@@ -1742,7 +1711,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) {
@@ -1777,7 +1745,6 @@ function renderText(ctx, node) {
 	}
 	if (element.shadow) clearShadow$1(ctx);
 }
-
 //#endregion
 //#region src/render/components/transform.ts
 /**
@@ -1853,7 +1820,6 @@ function renderTransform(ctx, node) {
 	renderNode(ctx, childNode);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/index.ts
 function renderNode(ctx, node) {
@@ -1893,7 +1859,6 @@ function renderNode(ctx, node) {
 			break;
 	}
 }
-
 //#endregion
 //#region src/canvas.ts
 /**
@@ -1963,7 +1928,6 @@ function createCanvas(options) {
 		}
 	};
 }
-
 //#endregion
 //#region src/components/Box.ts
 function Box(props) {
@@ -1972,7 +1936,6 @@ function Box(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/CustomDraw.ts
 function CustomDraw(props) {
@@ -1981,7 +1944,6 @@ function CustomDraw(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Image.ts
 function Image(props) {
@@ -1990,7 +1952,6 @@ function Image(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/RichText.ts
 function RichText(props) {
@@ -1999,7 +1960,6 @@ function RichText(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -2008,7 +1968,6 @@ function Stack(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Svg.ts
 function Svg(props) {
@@ -2055,7 +2014,6 @@ const svg = {
 		...props
 	})
 };
-
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -2064,7 +2022,6 @@ function Text(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Transform.ts
 function Transform(props) {
@@ -2073,7 +2030,6 @@ function Transform(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/layout/utils/print.ts
 /**
@@ -2133,7 +2089,6 @@ function printLayout(node) {
 function layoutToString(node, _indent = "  ") {
 	return printLayoutToString(node, "", true).join("\n");
 }
-
 //#endregion
 exports.Box = Box;
 exports.CustomDraw = CustomDraw;
@@ -2150,4 +2105,4 @@ exports.layoutToString = layoutToString;
 exports.linearGradient = linearGradient;
 exports.printLayout = printLayout;
 exports.radialGradient = radialGradient;
-exports.svg = svg;
+exports.svg = svg;

package/{node → dist/browser}/index.d.cts

@@ -1,4 +1,4 @@
-import { Canvas } from "@napi-rs/canvas";
+import { Canvas, DOMMatrix } from "@napi-rs/canvas";
 
 //#region src/types/base.d.ts
 type Size = number | `${number}%` | "auto" | "fill";
@@ -152,7 +152,19 @@ interface LayoutConstraints {
 //#endregion
 //#region src/types/components.d.ts
 type ElementType = "box" | "text" | "richtext" | "image" | "svg" | "stack" | "transform" | "customdraw";
-interface ProxiedCanvasContextOptions {
+interface CustomDrawContext {
+  readonly canvas: CanvasRenderingContext2D;
+  save(): void;
+  restore(): void;
+  getTransform(): DOMMatrix;
+  setTransform(transform?: DOMMatrix | [number, number, number, number, number, number]): void;
+  resetTransform(): void;
+  translate(x: number, y: number): void;
+  rotate(angle: number): void;
+  scale(x: number, y?: number): void;
+  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+}
+interface CustomDrawOptions {
   inner?: () => void;
   width: number;
   height: number;
@@ -357,7 +369,7 @@ interface TransformElement extends ElementBase, TransformProps {
   type: "transform";
 }
 interface CustomDrawProps extends LayoutProps {
-  draw: (ctx: CanvasRenderingContext2D, options: ProxiedCanvasContextOptions) => void;
+  draw: (ctx: CustomDrawContext, options: CustomDrawOptions) => void;
   children?: Element;
 }
 interface CustomDrawElement extends ElementBase, CustomDrawProps {
@@ -451,4 +463,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 LayoutElement, 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 };
+export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawContext, type CustomDrawElement, type CustomDrawOptions, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutElement, type LayoutNode, type LayoutProps, type LinearGradientDescriptor, type MeasureContext, 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 };