chat-layout 1.1.0-3 → 1.1.0-4

package/example/chat.ts

@@ -13,6 +13,7 @@ import {
   type Context,
   type DynValue,
   type HitTest,
+  type InlineSpan,
   type Node,
   type RenderFeedback,
 } from "chat-layout";
@@ -133,7 +134,7 @@ ctx.scale(devicePixelRatio, devicePixelRatio);
 
 type ReplyPreview = {
   sender: string;
-  content: string;
+  content: string | InlineSpan<C>[];
 };
 
 type BaseChatItem = {
@@ -143,7 +144,7 @@ type BaseChatItem = {
 
 type MessageItem = BaseChatItem & {
   kind: "message";
-  content: string;
+  content: string | InlineSpan<C>[];
   reply?: ReplyPreview;
 };
 
@@ -154,6 +155,30 @@ type RevokedItem = BaseChatItem & {
 
 type ChatItem = MessageItem | RevokedItem;
 
+const richTextMessage: InlineSpan<C>[] = [
+  { text: "现在这个 chat example 可以直接展示 " },
+  { text: "rich text", font: "700 16px system-ui", style: "#0f766e" },
+  { text: " 了，支持 " },
+  { text: "颜色", style: "#2563eb" },
+  { text: "、" },
+  { text: "粗体", font: "700 16px system-ui", style: "#b91c1c" },
+  { text: "，以及 " },
+  { text: "inline code", font: "15px ui-monospace, SFMono-Regular, Consolas, monospace", style: "#7c3aed" },
+  { text: " 这样的片段混排。" },
+];
+
+const richReplyPreview: InlineSpan<C>[] = [
+  { text: "回复预览里也能用 " },
+  { text: "rich text", font: "700 13px system-ui", style: "#0f766e" },
+  { text: "，比如 " },
+  { text: "关键词高亮", style: "#2563eb" },
+  { text: " 和 " },
+  { text: "code()", font: "12px ui-monospace, SFMono-Regular, Consolas, monospace", style: "#7c3aed" },
+  {
+    text: "，超长内容仍然会按原来的两行省略规则收起，不需要额外处理。",
+  },
+];
+
 let currentHover: ChatItem | undefined;
 const REPLACE_ANIMATION_DURATION = 320;
 
@@ -377,7 +402,7 @@ const list = new ListState<ChatItem>([
     id: 2,
     kind: "message",
     sender: "B",
-    content: "aaaa",
+    content: richTextMessage,
     reply: {
       sender: "A",
       content: "hello world chat layout message render",
@@ -411,8 +436,7 @@ const list = new ListState<ChatItem>([
     content: "这里是一条会展示回复预览省略效果的消息。",
     reply: {
       sender: "A",
-      content:
-        "这是一条非常长的回复预览，用来演示 MultilineText 在 chat example 里的末尾 ellipsis 能力。它应该被限制在两行之内，而不是把整个气泡一路撑到天花板。",
+      content: richReplyPreview,
     },
   },
   { id: 9, kind: "message", sender: "B", content: randomText(5) },

package/index.d.mts

@@ -81,6 +81,21 @@ interface TextStyleOptions<C extends CanvasRenderingContext2D> {
   /** Default: break-word; use anywhere when min-content should honor grapheme break opportunities. */
   overflowWrap?: TextOverflowWrapMode;
 }
+/**
+ * A span-like inline text fragment used by rich multi-line text.
+ */
+interface InlineSpan<C extends CanvasRenderingContext2D> {
+  /** Source text contained in this inline fragment. */
+  text: string;
+  /** Canvas font string override for this fragment. Falls back to the node-level font. */
+  font?: string;
+  /** Fill style override for this fragment. Falls back to the node-level style. */
+  style?: DynValue<C, string>;
+  /** Optional break hint forwarded to pretext rich-inline layout. */
+  break?: "normal" | "never";
+  /** Optional extra occupied width forwarded to pretext rich-inline layout. */
+  extraWidth?: number;
+}
 /**
  * Options for multi-line text nodes.
  */
@@ -352,15 +367,16 @@ declare class Place<C extends CanvasRenderingContext2D> extends Wrapper<C> {
 //#region src/nodes/text.d.ts
 /**
  * Draws wrapped text using the configured line height and alignment.
+ * Accepts either a plain string or an array of `InlineSpan` items for mixed inline styles.
  */
 declare class MultilineText<C extends CanvasRenderingContext2D> implements Node<C> {
-  readonly text: string;
+  readonly text: string | InlineSpan<C>[];
   readonly options: MultilineTextOptions<C>;
   /**
-   * @param text Source text to measure and draw.
+   * @param text Source text to measure and draw. Pass an `InlineSpan[]` for mixed inline styles.
    * @param options Text layout and drawing options.
    */
-  constructor(text: string, options: MultilineTextOptions<C>);
+  constructor(text: string | InlineSpan<C>[], options: MultilineTextOptions<C>);
   measure(ctx: Context<C>): Box;
   measureMinContent(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;
@@ -640,5 +656,5 @@ declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}>
   hittest(test: HitTest): boolean;
 }
 //#endregion
-export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ReplaceListItemAnimationOptions, Text, TextAlign, TextEllipsisPosition, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ReplaceListItemAnimationOptions, Text, TextAlign, TextEllipsisPosition, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 //# sourceMappingURL=index.d.mts.map

package/index.mjs

@@ -1,4 +1,5 @@
 import { layoutNextLine, layoutWithLines, measureLineStats, measureNaturalWidth, prepareWithSegments } from "@chenglou/pretext";
+import { materializeRichInlineLineRange, measureRichInlineStats, prepareRichInline, walkRichInlineLineRanges } from "@chenglou/pretext/rich-inline";
 //#region src/internal/node-registry.ts
 const registry = /* @__PURE__ */ new WeakMap();
 const revisions = /* @__PURE__ */ new WeakMap();
@@ -1218,6 +1219,221 @@ function layoutTextWithOverflow(ctx, text, maxWidth, options = {}) {
 		overflowed: true
 	};
 }
+const RICH_PREPARED_CACHE_CAPACITY = 256;
+const richPreparedCache = /* @__PURE__ */ new Map();
+function getRichPreparedCacheKey(spans, defaultFont) {
+	return spans.map((s) => `${s.font ?? defaultFont}\u0000${s.text}\u0000${s.break ?? ""}\u0000${s.extraWidth ?? 0}`).join("
");
+}
+function readRichPrepared(spans, defaultFont) {
+	const key = getRichPreparedCacheKey(spans, defaultFont);
+	const cached = readLruValue(richPreparedCache, key);
+	if (cached != null) return cached;
+	return writeLruValue(richPreparedCache, key, prepareRichInline(spans.map((s) => ({
+		text: s.text,
+		font: s.font ?? defaultFont,
+		break: s.break,
+		extraWidth: s.extraWidth
+	}))), RICH_PREPARED_CACHE_CAPACITY);
+}
+function materializeRichLine(ctx, spans, defaultFont, defaultStyle, lineRange, overflowed) {
+	const richLine = materializeRichInlineLineRange(readRichPrepared(spans, defaultFont), lineRange);
+	const fragments = richLine.fragments.map((frag) => {
+		const span = spans[frag.itemIndex];
+		const fragFont = span?.font ?? defaultFont;
+		const fragStyle = span?.style ?? defaultStyle;
+		const prevFont = ctx.graphics.font;
+		ctx.graphics.font = fragFont;
+		const shift = measureFontShift(ctx);
+		ctx.graphics.font = prevFont;
+		return {
+			itemIndex: frag.itemIndex,
+			text: frag.text,
+			font: fragFont,
+			style: fragStyle,
+			gapBefore: frag.gapBefore,
+			occupiedWidth: frag.occupiedWidth,
+			shift
+		};
+	});
+	return {
+		width: richLine.width,
+		fragments,
+		overflowed
+	};
+}
+function measureRichText(ctx, spans, maxWidth, defaultFont) {
+	if (spans.length === 0) return {
+		width: 0,
+		lineCount: 0
+	};
+	const { maxLineWidth: width, lineCount } = measureRichInlineStats(readRichPrepared(spans, defaultFont), maxWidth);
+	return {
+		width,
+		lineCount
+	};
+}
+function measureRichTextIntrinsic(ctx, spans, defaultFont) {
+	if (spans.length === 0) return {
+		width: 0,
+		lineCount: 0
+	};
+	const { maxLineWidth: width, lineCount } = measureRichInlineStats(readRichPrepared(spans, defaultFont), INTRINSIC_MAX_WIDTH);
+	return {
+		width,
+		lineCount
+	};
+}
+function measureRichTextMinContent(ctx, spans, defaultFont, overflowWrap = "break-word") {
+	if (spans.length === 0) return {
+		width: 0,
+		lineCount: 0
+	};
+	let maxWidth = 0;
+	for (const span of spans) {
+		if (span.text.trim().length === 0) continue;
+		const font = span.font ?? defaultFont;
+		const spanMin = measurePreparedMinContentWidth(readPreparedText(span.text, font, "normal", "normal"), overflowWrap) + (span.extraWidth ?? 0);
+		if (spanMin > maxWidth) maxWidth = spanMin;
+	}
+	if (maxWidth === 0) return {
+		width: 0,
+		lineCount: 0
+	};
+	const { lineCount } = measureRichInlineStats(readRichPrepared(spans, defaultFont), Math.max(maxWidth, MIN_CONTENT_WIDTH_EPSILON));
+	return {
+		width: maxWidth,
+		lineCount
+	};
+}
+function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultStyle) {
+	if (spans.length === 0) return {
+		width: 0,
+		lines: [],
+		overflowed: false
+	};
+	const prepared = readRichPrepared(spans, defaultFont);
+	const lineRanges = [];
+	walkRichInlineLineRanges(prepared, maxWidth, (line) => lineRanges.push(line));
+	if (lineRanges.length === 0) return {
+		width: 0,
+		lines: [],
+		overflowed: false
+	};
+	const lines = lineRanges.map((lr) => materializeRichLine(ctx, spans, defaultFont, defaultStyle, lr, false));
+	return {
+		width: lines.reduce((max, line) => Math.max(max, line.width), 0),
+		lines,
+		overflowed: false
+	};
+}
+function layoutRichTextIntrinsic(ctx, spans, defaultFont, defaultStyle) {
+	return layoutRichText(ctx, spans, INTRINSIC_MAX_WIDTH, defaultFont, defaultStyle);
+}
+function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultStyle, maxLines, overflow = "clip") {
+	if (spans.length === 0) return {
+		width: 0,
+		lines: [],
+		overflowed: false
+	};
+	const normalizedMaxLines = normalizeMaxLines(maxLines);
+	const layout = layoutRichText(ctx, spans, maxWidth, defaultFont, defaultStyle);
+	if (normalizedMaxLines == null || layout.lines.length <= normalizedMaxLines) return layout;
+	const visibleLines = layout.lines.slice(0, normalizedMaxLines);
+	if (overflow !== "ellipsis") return {
+		width: visibleLines.reduce((max, line) => Math.max(max, line.width), 0),
+		lines: visibleLines,
+		overflowed: true
+	};
+	const lastLine = visibleLines[visibleLines.length - 1];
+	if (lastLine == null || lastLine.fragments.length === 0) return {
+		width: visibleLines.slice(0, -1).reduce((max, line) => Math.max(max, line.width), 0),
+		lines: visibleLines.slice(0, -1),
+		overflowed: true
+	};
+	const lastFrag = lastLine.fragments[lastLine.fragments.length - 1];
+	const prevFont1 = ctx.graphics.font;
+	ctx.graphics.font = lastFrag.font;
+	const ellipsisWidth = measureEllipsisWidth(ctx);
+	ctx.graphics.font = prevFont1;
+	if (maxWidth <= 0 || ellipsisWidth > maxWidth) {
+		const truncatedLine = {
+			width: 0,
+			fragments: [],
+			overflowed: true
+		};
+		return {
+			width: visibleLines.slice(0, -1).reduce((max, line) => Math.max(max, line.width), 0),
+			lines: [...visibleLines.slice(0, -1), truncatedLine],
+			overflowed: true
+		};
+	}
+	const budget = maxWidth - ellipsisWidth;
+	const resultFragments = [];
+	let usedWidth = 0;
+	let ellipsisFont = lastFrag.font;
+	let ellipsisStyle = lastFrag.style;
+	let truncated = false;
+	for (let fi = 0; fi < lastLine.fragments.length; fi++) {
+		const frag = lastLine.fragments[fi];
+		const neededGap = fi === 0 ? 0 : frag.gapBefore;
+		const fragTotal = neededGap + frag.occupiedWidth;
+		if (usedWidth + fragTotal <= budget) {
+			resultFragments.push({
+				...frag,
+				gapBefore: fi === 0 ? 0 : frag.gapBefore
+			});
+			usedWidth += fragTotal;
+		} else {
+			ellipsisFont = frag.font;
+			ellipsisStyle = frag.style;
+			const remaining = budget - usedWidth - neededGap;
+			if (remaining > 0 && frag.text.length > 0) {
+				const units = getPreparedUnits(readPreparedText(frag.text, frag.font, "normal", "normal"));
+				let charWidth = 0;
+				let charText = "";
+				for (const unit of units) {
+					if (charWidth + unit.width > remaining) break;
+					charWidth += unit.width;
+					charText += unit.text;
+				}
+				if (charText.length > 0) {
+					resultFragments.push({
+						...frag,
+						text: charText,
+						occupiedWidth: charWidth,
+						gapBefore: fi === 0 ? 0 : frag.gapBefore
+					});
+					usedWidth += neededGap + charWidth;
+				}
+			}
+			truncated = true;
+			break;
+		}
+	}
+	const prevFont2 = ctx.graphics.font;
+	ctx.graphics.font = ellipsisFont;
+	const ellipsisShift = measureFontShift(ctx);
+	ctx.graphics.font = prevFont2;
+	resultFragments.push({
+		itemIndex: -1,
+		text: ELLIPSIS_GLYPH,
+		font: ellipsisFont,
+		style: ellipsisStyle,
+		gapBefore: 0,
+		occupiedWidth: ellipsisWidth,
+		shift: ellipsisShift
+	});
+	const lastLineResult = {
+		width: usedWidth + ellipsisWidth,
+		fragments: resultFragments,
+		overflowed: truncated || layout.lines.length > normalizedMaxLines
+	};
+	return {
+		width: [...visibleLines.slice(0, -1), lastLineResult].reduce((max, line) => Math.max(max, line.width), 0),
+		lines: [...visibleLines.slice(0, -1), lastLineResult],
+		overflowed: true
+	};
+}
 //#endregion
 //#region src/nodes/text.ts
 function resolvePhysicalTextAlign(options) {
@@ -1250,12 +1466,21 @@ function getSingleLineLayoutKey(maxWidth) {
 function getMultiLineMeasureLayoutKey(maxWidth) {
 	return maxWidth == null ? "multi:measure:intrinsic" : `multi:measure:${maxWidth}`;
 }
+function getRichMultiLineMeasureLayoutKey(maxWidth) {
+	return maxWidth == null ? "rich:measure:intrinsic" : `rich:measure:${maxWidth}`;
+}
 function getMultiLineDrawLayoutKey(maxWidth) {
 	return maxWidth == null ? "multi:draw:intrinsic" : `multi:draw:${maxWidth}`;
 }
+function getRichMultiLineDrawLayoutKey(maxWidth) {
+	return maxWidth == null ? "rich:draw:intrinsic" : `rich:draw:${maxWidth}`;
+}
 function getMultiLineOverflowLayoutKey(maxWidth) {
 	return maxWidth == null ? "multi:overflow:intrinsic" : `multi:overflow:${maxWidth}`;
 }
+function getRichMultiLineOverflowLayoutKey(maxWidth) {
+	return maxWidth == null ? "rich:overflow:intrinsic" : `rich:overflow:${maxWidth}`;
+}
 function shouldUseMultilineOverflowLayout(options) {
 	return options.maxLines != null;
 }
@@ -1265,6 +1490,9 @@ function getSingleLineMinContentLayoutKey() {
 function getMultiLineMinContentLayoutKey() {
 	return "multi:min-content";
 }
+function getRichMultiLineMinContentLayoutKey() {
+	return "rich:min-content";
+}
 function getSingleLineLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
 	return readCachedTextLayout(node, ctx, getSingleLineLayoutKey(maxWidth), () => maxWidth == null ? layoutFirstLineIntrinsic(ctx, text, options.whiteSpace, options.wordBreak) : options.overflow === "ellipsis" ? layoutEllipsizedFirstLine(ctx, text, maxWidth, options.ellipsisPosition ?? "end", options.whiteSpace, options.wordBreak) : layoutFirstLine(ctx, text, maxWidth, options.whiteSpace, options.wordBreak));
@@ -1308,12 +1536,36 @@ function getSingleLineMinContentLayout(node, ctx, text, options) {
 function getMultiLineMinContentLayout(node, ctx, text, whiteSpace, wordBreak, overflowWrap) {
 	return readCachedTextLayout(node, ctx, getMultiLineMinContentLayoutKey(), () => measureTextMinContent(ctx, text, whiteSpace, wordBreak, overflowWrap));
 }
+function getRichMultiLineMeasureLayout(node, ctx, spans, options) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) {
+		const layout = getRichMultiLineOverflowLayout(node, ctx, spans, options);
+		return {
+			width: layout.width,
+			lineCount: layout.lines.length
+		};
+	}
+	return readCachedTextLayout(node, ctx, getRichMultiLineMeasureLayoutKey(maxWidth), () => maxWidth == null ? measureRichTextIntrinsic(ctx, spans, options.font) : measureRichText(ctx, spans, maxWidth, options.font));
+}
+function getRichMultiLineOverflowLayout(node, ctx, spans, options) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	return readCachedTextLayout(node, ctx, getRichMultiLineOverflowLayoutKey(maxWidth), () => layoutRichTextWithOverflow(ctx, spans, maxWidth ?? 0, options.font, options.style, options.maxLines, options.overflow));
+}
+function getRichMultiLineDrawLayout(node, ctx, spans, options) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) return getRichMultiLineOverflowLayout(node, ctx, spans, options);
+	return readCachedTextLayout(node, ctx, getRichMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutRichTextIntrinsic(ctx, spans, options.font, options.style) : layoutRichText(ctx, spans, maxWidth, options.font, options.style));
+}
+function getRichMultiLineMinContentLayout(node, ctx, spans, options) {
+	return readCachedTextLayout(node, ctx, getRichMultiLineMinContentLayoutKey(), () => measureRichTextMinContent(ctx, spans, options.font, options.overflowWrap));
+}
 /**
 * Draws wrapped text using the configured line height and alignment.
+* Accepts either a plain string or an array of `InlineSpan` items for mixed inline styles.
 */
 var MultilineText = class {
 	/**
-	* @param text Source text to measure and draw.
+	* @param text Source text to measure and draw. Pass an `InlineSpan[]` for mixed inline styles.
 	* @param options Text layout and drawing options.
 	*/
 	constructor(text, options) {
@@ -1321,6 +1573,14 @@ var MultilineText = class {
 		this.options = options;
 	}
 	measure(ctx) {
+		if (typeof this.text !== "string") {
+			const spans = this.text;
+			const { width, lineCount } = getRichMultiLineMeasureLayout(this, ctx, spans, this.options);
+			return {
+				width,
+				height: lineCount * this.options.lineHeight
+			};
+		}
 		return ctx.with((g) => {
 			g.font = this.options.font;
 			const { width, lineCount } = getMultiLineMeasureLayout(this, ctx, this.text, this.options);
@@ -1331,6 +1591,14 @@ var MultilineText = class {
 		});
 	}
 	measureMinContent(ctx) {
+		if (typeof this.text !== "string") {
+			const spans = this.text;
+			const { width, lineCount } = getRichMultiLineMinContentLayout(this, ctx, spans, this.options);
+			return {
+				width,
+				height: lineCount * this.options.lineHeight
+			};
+		}
 		return ctx.with((g) => {
 			g.font = this.options.font;
 			const { width, lineCount } = getMultiLineMinContentLayout(this, ctx, this.text, this.options.whiteSpace, this.options.wordBreak, this.options.overflowWrap);
@@ -1341,6 +1609,30 @@ var MultilineText = class {
 		});
 	}
 	draw(ctx, x, y) {
+		if (typeof this.text !== "string") {
+			const spans = this.text;
+			const { width, lines } = getRichMultiLineDrawLayout(this, ctx, spans, this.options);
+			const align = resolvePhysicalTextAlign(this.options);
+			const startX = align === "right" ? x + width : align === "center" ? x + width / 2 : x;
+			for (const line of lines) {
+				let cursorX = startX;
+				for (let fi = 0; fi < line.fragments.length; fi++) {
+					const frag = line.fragments[fi];
+					cursorX += frag.gapBefore;
+					ctx.with((g) => {
+						g.font = frag.font;
+						g.fillStyle = ctx.resolveDynValue(frag.style ?? this.options.style);
+						if (align === "right") g.textAlign = "right";
+						else if (align === "center") g.textAlign = "center";
+						else g.textAlign = "left";
+						g.fillText(frag.text, cursorX, y + (this.options.lineHeight + frag.shift) / 2);
+					});
+					cursorX += frag.occupiedWidth;
+				}
+				y += this.options.lineHeight;
+			}
+			return false;
+		}
 		return ctx.with((g) => {
 			g.font = this.options.font;
 			g.fillStyle = ctx.resolveDynValue(this.options.style);