chat-layout 1.1.0-4 → 1.1.0-5

package/README.md

@@ -20,7 +20,7 @@ const bubble = new RoundedBox(
   new MultilineText(item.content, {
     lineHeight: 20,
     font: "16px system-ui",
-    style: "black",
+    color: "black",
     align: "start",
   }),
   { top: 6, bottom: 6, left: 10, right: 10, radii: 8, fill: "#ccc" },
@@ -64,7 +64,7 @@ Single-line `Text` can ellipsize at the start, end, or middle when a finite widt
 const title = new Text("Extremely long thread title that should not blow out the row", {
   lineHeight: 20,
   font: "16px system-ui",
-  style: "#111",
+  color: "#111",
   overflow: "ellipsis",
   ellipsisPosition: "middle",
 });
@@ -76,7 +76,7 @@ Multi-line `MultilineText` can cap the visible line count and convert the last v
 const preview = new MultilineText(reply.content, {
   lineHeight: 16,
   font: "13px system-ui",
-  style: "#444",
+  color: "#444",
   align: "start",
   overflowWrap: "anywhere",
   overflow: "ellipsis",

package/example/chat.ts

@@ -157,23 +157,23 @@ type ChatItem = MessageItem | RevokedItem;
 
 const richTextMessage: InlineSpan<C>[] = [
   { text: "现在这个 chat example 可以直接展示 " },
-  { text: "rich text", font: "700 16px system-ui", style: "#0f766e" },
+  { text: "rich text", font: "700 16px system-ui", color: "#0f766e" },
   { text: " 了，支持 " },
-  { text: "颜色", style: "#2563eb" },
+  { text: "颜色", color: "#2563eb" },
   { text: "、" },
-  { text: "粗体", font: "700 16px system-ui", style: "#b91c1c" },
+  { text: "粗体", font: "700 16px system-ui", color: "#b91c1c" },
   { text: "，以及 " },
-  { text: "inline code", font: "15px ui-monospace, SFMono-Regular, Consolas, monospace", style: "#7c3aed" },
+  { text: "inline code", font: "15px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
   { text: " 这样的片段混排。" },
 ];
 
 const richReplyPreview: InlineSpan<C>[] = [
   { text: "回复预览里也能用 " },
-  { text: "rich text", font: "700 13px system-ui", style: "#0f766e" },
+  { text: "rich text", font: "700 13px system-ui", color: "#0f766e" },
   { text: "，比如 " },
-  { text: "关键词高亮", style: "#2563eb" },
+  { text: "关键词高亮", color: "#2563eb" },
   { text: " 和 " },
-  { text: "code()", font: "12px ui-monospace, SFMono-Regular, Consolas, monospace", style: "#7c3aed" },
+  { text: "code()", font: "12px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
   {
     text: "，超长内容仍然会按原来的两行省略规则收起，不需要额外处理。",
   },
@@ -225,7 +225,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
             new Text(`${item.sender}已撤回一条消息`, {
               lineHeight: 18,
               font: "14px system-ui",
-              style: () => (currentHover?.id === item.id ? "#525252" : "#666"),
+              color: () => (currentHover?.id === item.id ? "#525252" : "#666"),
               overflow: "ellipsis",
             }),
             {
@@ -262,7 +262,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
         new Text(item.sender, {
           lineHeight: 15,
           font: "12px system-ui",
-          style: "black",
+          color: "black",
         }),
         {
           top: 0,
@@ -286,7 +286,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
     new MultilineText(item.content, {
       lineHeight: 20,
       font: "16px system-ui",
-      style: "black",
+      color: "black",
       align: "start",
       overflowWrap: "anywhere",
     }),
@@ -302,12 +302,12 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
             new Text(item.reply.sender, {
               lineHeight: 14,
               font: "11px system-ui",
-              style: () => (currentHover?.id === item.id ? "#4d4d4d" : "#666"),
+              color: () => (currentHover?.id === item.id ? "#4d4d4d" : "#666"),
             }),
             new MultilineText(item.reply.content, {
               lineHeight: 16,
               font: "13px system-ui",
-              style: () => (currentHover?.id === item.id ? "#222" : "#444"),
+              color: () => (currentHover?.id === item.id ? "#222" : "#444"),
               align: "start",
               overflow: "ellipsis",
               overflowWrap: "anywhere",

package/example/test.ts

@@ -98,7 +98,7 @@ const node = new RoundedBox(
           lineHeight: 20,
           font: "400 16px monospace",
           align: "center",
-          style: "black",
+          color: "black",
         }),
         { align: "center" },
       ),
@@ -108,10 +108,10 @@ const node = new RoundedBox(
             [
               new ClickDetect(
                 new RoundedBox(
-                  new Text("测试3".repeat(2), {
+                  new Text("测试 3".repeat(2), {
                     lineHeight: 20,
                     font: "400 16px monospace",
-                    style: () => color,
+                    color: () => color,
                   }),
                   {
                     left: 14,
@@ -128,7 +128,7 @@ const node = new RoundedBox(
                   lineHeight: 16,
                   font: "400 12px monospace",
                   align: "center",
-                  style: "black",
+                  color: "black",
                 }),
                 {
                   left: 10,
@@ -163,7 +163,7 @@ const node = new RoundedBox(
             lineHeight: 20,
             font: "400 16px monospace",
             physicalAlign: "right",
-            style: "black",
+            color: "black",
           }),
           {
             left: 10,

package/index.d.mts

@@ -72,8 +72,8 @@ interface TextStyleOptions<C extends CanvasRenderingContext2D> {
   lineHeight: number;
   /** Canvas font string used for measurement and drawing. */
   font: string;
-  /** Fill style or resolver used when drawing the text. */
-  style: DynValue<C, string>;
+  /** Color or resolver used when drawing the text. */
+  color: DynValue<C, string>;
   /** Default: normal; matches pretext and CSS-style collapsible whitespace behavior. */
   whiteSpace?: TextWhiteSpaceMode;
   /** Default: normal; use keep-all to match pretext's CJK-friendly line breaking mode. */
@@ -89,8 +89,8 @@ interface InlineSpan<C extends CanvasRenderingContext2D> {
   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>;
+  /** Color override for this fragment. Falls back to the node-level color. */
+  color?: 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. */

package/index.mjs

@@ -1235,12 +1235,12 @@ function readRichPrepared(spans, defaultFont) {
 		extraWidth: s.extraWidth
 	}))), RICH_PREPARED_CACHE_CAPACITY);
 }
-function materializeRichLine(ctx, spans, defaultFont, defaultStyle, lineRange, overflowed) {
+function materializeRichLine(ctx, spans, defaultFont, defaultColor, 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 fragColor = span?.color ?? defaultColor;
 		const prevFont = ctx.graphics.font;
 		ctx.graphics.font = fragFont;
 		const shift = measureFontShift(ctx);
@@ -1249,7 +1249,7 @@ function materializeRichLine(ctx, spans, defaultFont, defaultStyle, lineRange, o
 			itemIndex: frag.itemIndex,
 			text: frag.text,
 			font: fragFont,
-			style: fragStyle,
+			color: fragColor,
 			gapBefore: frag.gapBefore,
 			occupiedWidth: frag.occupiedWidth,
 			shift
@@ -1305,7 +1305,7 @@ function measureRichTextMinContent(ctx, spans, defaultFont, overflowWrap = "brea
 		lineCount
 	};
 }
-function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultStyle) {
+function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultColor) {
 	if (spans.length === 0) return {
 		width: 0,
 		lines: [],
@@ -1319,24 +1319,24 @@ function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultStyle) {
 		lines: [],
 		overflowed: false
 	};
-	const lines = lineRanges.map((lr) => materializeRichLine(ctx, spans, defaultFont, defaultStyle, lr, false));
+	const lines = lineRanges.map((lr) => materializeRichLine(ctx, spans, defaultFont, defaultColor, 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 layoutRichTextIntrinsic(ctx, spans, defaultFont, defaultColor) {
+	return layoutRichText(ctx, spans, INTRINSIC_MAX_WIDTH, defaultFont, defaultColor);
 }
-function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultStyle, maxLines, overflow = "clip") {
+function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultColor, 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);
+	const layout = layoutRichText(ctx, spans, maxWidth, defaultFont, defaultColor);
 	if (normalizedMaxLines == null || layout.lines.length <= normalizedMaxLines) return layout;
 	const visibleLines = layout.lines.slice(0, normalizedMaxLines);
 	if (overflow !== "ellipsis") return {
@@ -1371,7 +1371,7 @@ function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultSt
 	const resultFragments = [];
 	let usedWidth = 0;
 	let ellipsisFont = lastFrag.font;
-	let ellipsisStyle = lastFrag.style;
+	let ellipsisColor = lastFrag.color;
 	let truncated = false;
 	for (let fi = 0; fi < lastLine.fragments.length; fi++) {
 		const frag = lastLine.fragments[fi];
@@ -1385,7 +1385,7 @@ function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultSt
 			usedWidth += fragTotal;
 		} else {
 			ellipsisFont = frag.font;
-			ellipsisStyle = frag.style;
+			ellipsisColor = frag.color;
 			const remaining = budget - usedWidth - neededGap;
 			if (remaining > 0 && frag.text.length > 0) {
 				const units = getPreparedUnits(readPreparedText(frag.text, frag.font, "normal", "normal"));
@@ -1418,7 +1418,7 @@ function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultSt
 		itemIndex: -1,
 		text: ELLIPSIS_GLYPH,
 		font: ellipsisFont,
-		style: ellipsisStyle,
+		color: ellipsisColor,
 		gapBefore: 0,
 		occupiedWidth: ellipsisWidth,
 		shift: ellipsisShift
@@ -1549,12 +1549,12 @@ function getRichMultiLineMeasureLayout(node, ctx, spans, options) {
 }
 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));
+	return readCachedTextLayout(node, ctx, getRichMultiLineOverflowLayoutKey(maxWidth), () => layoutRichTextWithOverflow(ctx, spans, maxWidth ?? 0, options.font, options.color, 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));
+	return readCachedTextLayout(node, ctx, getRichMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutRichTextIntrinsic(ctx, spans, options.font, options.color) : layoutRichText(ctx, spans, maxWidth, options.font, options.color));
 }
 function getRichMultiLineMinContentLayout(node, ctx, spans, options) {
 	return readCachedTextLayout(node, ctx, getRichMultiLineMinContentLayoutKey(), () => measureRichTextMinContent(ctx, spans, options.font, options.overflowWrap));
@@ -1621,7 +1621,7 @@ var MultilineText = class {
 					cursorX += frag.gapBefore;
 					ctx.with((g) => {
 						g.font = frag.font;
-						g.fillStyle = ctx.resolveDynValue(frag.style ?? this.options.style);
+						g.fillStyle = ctx.resolveDynValue(frag.color ?? this.options.color);
 						if (align === "right") g.textAlign = "right";
 						else if (align === "center") g.textAlign = "center";
 						else g.textAlign = "left";
@@ -1635,7 +1635,7 @@ var MultilineText = class {
 		}
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			g.fillStyle = ctx.resolveDynValue(this.options.style);
+			g.fillStyle = ctx.resolveDynValue(this.options.color);
 			const { width, lines } = getMultiLineDrawLayout(this, ctx, this.text, this.options);
 			switch (resolvePhysicalTextAlign(this.options)) {
 				case "left":
@@ -1703,7 +1703,7 @@ var Text = class {
 	draw(ctx, x, y) {
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			g.fillStyle = ctx.resolveDynValue(this.options.style);
+			g.fillStyle = ctx.resolveDynValue(this.options.color);
 			const { text, shift } = getSingleLineLayout(this, ctx, this.text, this.options);
 			g.fillText(text, x, y + (this.options.lineHeight + shift) / 2);
 			return false;