@codehz/draw-call 0.1.2 → 0.2.0

package/render.cjs

@@ -195,6 +195,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
 /**
@@ -272,10 +440,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
 		};
 	} };
 }
@@ -387,6 +558,7 @@ 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);
@@ -482,6 +654,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") {
@@ -925,6 +1114,57 @@ 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) {
+	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/DOMMatrix.ts
 const DOMMatrixCompat = (() => {
@@ -1270,6 +1510,9 @@ function renderNode(ctx, node) {
 		case "text":
 			renderText(ctx, node);
 			break;
+		case "richtext":
+			renderRichText(ctx, node);
+			break;
 		case "image":
 			renderImage(ctx, node);
 			break;

package/render.mjs

@@ -200,6 +200,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 +445,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
 		};
 	} };
 }
@@ -392,6 +563,7 @@ 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);
@@ -487,6 +659,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") {
@@ -930,6 +1119,57 @@ 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) {
+	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/DOMMatrix.ts
 const DOMMatrixCompat = (() => {
@@ -1275,6 +1515,9 @@ function renderNode(ctx, node) {
 		case "text":
 			renderText(ctx, node);
 			break;
+		case "richtext":
+			renderRichText(ctx, node);
+			break;
 		case "image":
 			renderImage(ctx, node);
 			break;