chat-layout 1.1.0-2 → 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";
@@ -131,18 +132,66 @@ if (context == null) {
 const ctx: C = context;
 ctx.scale(devicePixelRatio, devicePixelRatio);
 
-type ChatItem = {
+type ReplyPreview = {
+  sender: string;
+  content: string | InlineSpan<C>[];
+};
+
+type BaseChatItem = {
+  id: number;
   sender: string;
-  content: string;
-  reply?: {
-    sender: string;
-    content: string;
-  };
 };
 
+type MessageItem = BaseChatItem & {
+  kind: "message";
+  content: string | InlineSpan<C>[];
+  reply?: ReplyPreview;
+};
+
+type RevokedItem = BaseChatItem & {
+  kind: "revoked";
+  original: MessageItem;
+};
+
+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;
+
+function revokeMessage(item: MessageItem): RevokedItem {
+  return {
+    id: item.id,
+    sender: item.sender,
+    kind: "revoked",
+    original: item,
+  };
+}
 
-class HoverDetector extends Wrapper<C> {
+class ItemDetector extends Wrapper<C> {
   constructor(
     inner: Node<C>,
     readonly item: ChatItem,
@@ -150,21 +199,65 @@ class HoverDetector extends Wrapper<C> {
     super(inner);
   }
 
-  hittest(_ctx: Context<C>, _test: HitTest): boolean {
+  hittest(_ctx: Context<C>, test: HitTest): boolean {
     currentHover = this.item;
+    if (test.type === "click") {
+      const index = list.items.indexOf(this.item);
+      if (index < 0) {
+        return true;
+      }
+      const nextItem = this.item.kind === "revoked" ? this.item.original : revokeMessage(this.item);
+      currentHover = nextItem;
+      list.replace(index, nextItem, {
+        duration: REPLACE_ANIMATION_DURATION,
+      });
+    }
     return true;
   }
 }
 
 const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
+  if (item.kind === "revoked") {
+    return new ItemDetector(
+      new Place(
+        new PaddingBox(
+          new RoundedBox(
+            new Text(`${item.sender}已撤回一条消息`, {
+              lineHeight: 18,
+              font: "14px system-ui",
+              style: () => (currentHover?.id === item.id ? "#525252" : "#666"),
+              overflow: "ellipsis",
+            }),
+            {
+              top: 10,
+              bottom: 10,
+              left: 12,
+              right: 12,
+              radii: 999,
+              fill: () => (currentHover?.id === item.id ? "#d9d9d9" : "#ececec"),
+              stroke: () => (currentHover?.id === item.id ? "#bcbcbc" : "#d3d3d3"),
+            },
+          ),
+          {
+            top: 8,
+            bottom: 8,
+            left: 4,
+            right: 4,
+          },
+        ),
+        {
+          align: item.sender === "A" ? "end" : "start",
+        },
+      ),
+      item,
+    );
+  }
+
   const senderLine = new Flex<C>(
     [
-      new HoverDetector(
-        new Circle(15, {
-          fill: "blue",
-        }),
-        item,
-      ),
+      new Circle(15, {
+        fill: "blue",
+      }),
       new RoundedBox(
         new Text(item.sender, {
           lineHeight: 15,
@@ -177,7 +270,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
           left: 0,
           right: 0,
           radii: 2,
-          fill: () => (currentHover === item ? "red" : "transparent"),
+          fill: () => (currentHover?.id === item.id ? "red" : "transparent"),
         },
       ),
     ],
@@ -209,12 +302,12 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
             new Text(item.reply.sender, {
               lineHeight: 14,
               font: "11px system-ui",
-              style: () => (currentHover === item ? "#4d4d4d" : "#666"),
+              style: () => (currentHover?.id === item.id ? "#4d4d4d" : "#666"),
             }),
             new MultilineText(item.reply.content, {
               lineHeight: 16,
               font: "13px system-ui",
-              style: () => (currentHover === item ? "#222" : "#444"),
+              style: () => (currentHover?.id === item.id ? "#222" : "#444"),
               align: "start",
               overflow: "ellipsis",
               overflowWrap: "anywhere",
@@ -233,7 +326,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
           left: 8,
           right: 8,
           radii: 6,
-          fill: () => (currentHover === item ? "#c2c2c2" : "#e2e2e2"),
+          fill: () => (currentHover?.id === item.id ? "#c2c2c2" : "#e2e2e2"),
         },
       ),
       { alignSelf: "stretch" },
@@ -255,7 +348,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
     left: 10,
     right: 10,
     radii: 8,
-    fill: () => (currentHover === item ? "#aaa" : "#ccc"),
+    fill: () => (currentHover?.id === item.id ? "#aaa" : "#ccc"),
   });
 
   const body = new Flex<C>([senderLine, content], {
@@ -289,34 +382,45 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
     right: 4,
   });
 
-  return new Place(padded, {
-    align: item.sender === "A" ? "end" : "start",
-  });
+  return new ItemDetector(
+    new Place(padded, {
+      align: item.sender === "A" ? "end" : "start",
+    }),
+    item,
+  );
 });
 
 const list = new ListState<ChatItem>([
   {
+    id: 1,
+    kind: "message",
     sender: "A",
     content:
       "hello world chat layout message render bubble timeline virtualized canvas",
   },
   {
+    id: 2,
+    kind: "message",
     sender: "B",
-    content: "aaaa",
+    content: richTextMessage,
     reply: {
       sender: "A",
       content: "hello world chat layout message render",
     },
   },
-  { sender: "B", content: "aaaabbb" },
-  { sender: "B", content: "测试中文" },
+  { id: 3, kind: "message", sender: "B", content: "aaaabbb" },
+  { id: 4, kind: "message", sender: "B", content: "测试中文" },
   {
+    id: 5,
+    kind: "message",
     sender: "A",
     content:
       "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
   },
-  { sender: "B", content: "测试aa中文aaa" },
+  { id: 6, kind: "message", sender: "B", content: "测试aa中文aaa" },
   {
+    id: 7,
+    kind: "message",
     sender: "A",
     content: randomText(8),
     reply: {
@@ -326,20 +430,22 @@ const list = new ListState<ChatItem>([
     },
   },
   {
+    id: 8,
+    kind: "message",
     sender: "B",
     content: "这里是一条会展示回复预览省略效果的消息。",
     reply: {
       sender: "A",
-      content:
-        "这是一条非常长的回复预览，用来演示 MultilineText 在 chat example 里的末尾 ellipsis 能力。它应该被限制在两行之内，而不是把整个气泡一路撑到天花板。",
+      content: richReplyPreview,
     },
   },
-  { sender: "B", content: randomText(5) },
+  { id: 9, kind: "message", sender: "B", content: randomText(5) },
 ]);
 const renderer = new ChatRenderer(ctx, {
   renderItem,
   list,
 });
+let nextMessageId = list.items.length + 1;
 
 function drawFrame(): void {
   const feedback: RenderFeedback = {
@@ -383,6 +489,22 @@ canvas.addEventListener("pointermove", (e) => {
   }
 });
 
+canvas.addEventListener("pointerleave", () => {
+  currentHover = undefined;
+});
+
+canvas.addEventListener("click", (e) => {
+  const { top, left } = canvas.getBoundingClientRect();
+  const result = renderer.hittest({
+    x: e.clientX - left,
+    y: e.clientY - top,
+    type: "click",
+  });
+  if (!result) {
+    currentHover = undefined;
+  }
+});
+
 function randomText(words: number): string {
   const out: string[] = [];
   for (let i = 0; i < words; i += 1) {
@@ -393,6 +515,8 @@ function randomText(words: number): string {
 
 button("unshift", () => {
   list.unshift({
+    id: nextMessageId++,
+    kind: "message",
     sender: Math.random() < 0.5 ? "A" : "B",
     content: randomText(10 + Math.floor(200 * Math.random())),
   });
@@ -400,6 +524,8 @@ button("unshift", () => {
 
 button("push", () => {
   list.push({
+    id: nextMessageId++,
+    kind: "message",
     sender: Math.random() < 0.5 ? "A" : "B",
     content: randomText(10 + Math.floor(200 * Math.random())),
   });
@@ -420,3 +546,14 @@ button("jump latest (no anim)", () => {
     animated: false,
   });
 });
+
+button("revoke first", () => {
+  const item = list.items.find((entry): entry is MessageItem => entry.kind === "message");
+  if (item == null) {
+    return;
+  }
+  const index = list.items.indexOf(item);
+  list.replace(index, revokeMessage(item), {
+    duration: REPLACE_ANIMATION_DURATION,
+  });
+});

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;
@@ -448,13 +464,20 @@ declare class DebugRenderer<C extends CanvasRenderingContext2D> extends BaseRend
 /**
  * Mutable list state shared with virtualized renderers.
  */
+interface ReplaceListItemAnimationOptions {
+  /** Animation duration in milliseconds. */
+  duration?: number;
+}
 declare class ListState<T extends {}> {
+  #private;
   /** Pixel offset from the anchored item edge. */
   offset: number;
   /** Anchor item index, or `undefined` to use the renderer default. */
   position: number | undefined;
   /** Items currently managed by the renderer. */
-  items: T[];
+  get items(): T[];
+  /** Replaces the full item collection while preserving scroll state. */
+  set items(value: T[]);
   /**
    * @param items Initial list items.
    */
@@ -467,6 +490,10 @@ declare class ListState<T extends {}> {
   push(...items: T[]): void;
   /** Appends an array of items. */
   pushAll(items: T[]): void;
+  /**
+   * Replaces an existing item by index.
+   */
+  replace(index: number, item: T, animation?: ReplaceListItemAnimationOptions): void;
   /**
    * Sets the current anchor item and pixel offset.
    */
@@ -530,6 +557,10 @@ interface JumpToOptions {
   /** Called after the jump completes or finishes animating. */
   onComplete?: () => void;
 }
+type VirtualizedResolvedItem<C extends CanvasRenderingContext2D> = {
+  draw: (y: number) => boolean;
+  hittest: (test: HitTest, y: number) => boolean;
+};
 /**
  * Shared base class for virtualized list renderers.
  */
@@ -541,6 +572,10 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
   static readonly MIN_JUMP_DURATION = 160;
   static readonly MAX_JUMP_DURATION = 420;
   static readonly JUMP_DURATION_PER_ITEM = 28;
+  constructor(graphics: C, options: {
+    renderItem: (item: T) => Node<C>;
+    list: ListState<T>;
+  });
   /** Current anchor item index. */
   get position(): number | undefined;
   /** Updates the current anchor item index. */
@@ -569,23 +604,24 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
   jumpTo(index: number, options?: JumpToOptions): void;
   protected _resetRenderFeedback(feedback?: RenderFeedback): void;
   protected _accumulateRenderFeedback(feedback: RenderFeedback, idx: number, top: number, height: number): void;
-  protected _renderDrawList(list: VisibleWindow<Node<C>>["drawList"], shift: number, feedback?: RenderFeedback): boolean;
-  protected _renderVisibleWindow(window: VisibleWindow<Node<C>>, feedback?: RenderFeedback): boolean;
-  protected _hittestVisibleWindow(window: VisibleWindow<Node<C>>, test: {
-    x: number;
-    y: number;
-    type: "click" | "auxclick" | "hover";
-  }): boolean;
+  protected _renderDrawList(list: VisibleWindow<VirtualizedResolvedItem<C>>["drawList"], shift: number, feedback?: RenderFeedback): boolean;
+  protected _renderVisibleWindow(window: VisibleWindow<VirtualizedResolvedItem<C>>, feedback?: RenderFeedback): boolean;
+  protected _hittestVisibleWindow(window: VisibleWindow<VirtualizedResolvedItem<C>>, test: HitTest): boolean;
   protected _prepareRender(): boolean;
   protected _finishRender(requestRedraw: boolean): boolean;
   protected _clampItemIndex(index: number): number;
   protected _getItemHeight(index: number): number;
+  protected _resolveItem(item: T, index: number, now: number): {
+    value: VirtualizedResolvedItem<C>;
+    height: number;
+  };
   protected _getAnchorAtOffset(index: number, offset: number): number;
   protected abstract _normalizeListState(state: VisibleListState): NormalizedListState;
   protected abstract _readAnchor(state: NormalizedListState): number;
   protected abstract _applyAnchor(anchor: number): void;
   protected abstract _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
   protected abstract _getTargetAnchor(index: number, block: NonNullable<JumpToOptions["block"]>): number;
+  protected abstract _getAnimatedLayerOffset(slotHeight: number, nodeHeight: number): number;
 }
 //#endregion
 //#region src/renderer/virtualized/chat.d.ts
@@ -599,6 +635,7 @@ declare class ChatRenderer<C extends CanvasRenderingContext2D, T extends {}> ext
   protected _readAnchor(state: NormalizedListState): number;
   protected _applyAnchor(anchor: number): void;
   protected _getTargetAnchor(index: number, block: NonNullable<JumpToOptions["block"]>): number;
+  protected _getAnimatedLayerOffset(slotHeight: number, nodeHeight: number): number;
   render(feedback?: RenderFeedback): boolean;
   hittest(test: HitTest): boolean;
 }
@@ -614,9 +651,10 @@ declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}>
   protected _readAnchor(state: NormalizedListState): number;
   protected _applyAnchor(anchor: number): void;
   protected _getTargetAnchor(index: number, block: NonNullable<JumpToOptions["block"]>): number;
+  protected _getAnimatedLayerOffset(_slotHeight: number, _nodeHeight: number): number;
   render(feedback?: RenderFeedback): boolean;
   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, 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