chat-layout 1.2.0-2 → 1.2.0-4

package/README.md

@@ -28,10 +28,11 @@ const bubble = new RoundedBox(
 );
 
 const body = new ShrinkWrap(
-  new Flex(
-    [senderLine, bubble],
-    { direction: "column", gap: 4, alignItems: item.sender === "A" ? "end" : "start" },
-  ),
+  new Flex([senderLine, bubble], {
+    direction: "column",
+    gap: 4,
+    alignItems: item.sender === "A" ? "end" : "start",
+  }),
 );
 
 const row = new Flex(
@@ -74,17 +75,20 @@ See [example/chat.ts](./example/chat.ts) for a full chat example.
 Single-line `Text` can ellipsize at the start, end, or middle when a finite width constraint is present:
 
 ```ts
-const title = new Text([
-  { text: "Extremely long " },
-  { text: "thread title", font: "700 16px system-ui", color: "#0f766e" },
-  { text: " that should not blow out the row" },
-], {
-  lineHeight: 20,
-  font: "16px system-ui",
-  color: "#111",
-  overflow: "ellipsis",
-  ellipsisPosition: "middle",
-});
+const title = new Text(
+  [
+    { text: "Extremely long " },
+    { text: "thread title", font: "700 16px system-ui", color: "#0f766e" },
+    { text: " that should not blow out the row" },
+  ],
+  {
+    lineHeight: 20,
+    font: "16px system-ui",
+    color: "#111",
+    overflow: "ellipsis",
+    ellipsisPosition: "middle",
+  },
+);
 ```
 
 Multi-line `MultilineText` can cap the visible line count and convert the last visible line to an end ellipsis:
@@ -119,9 +123,9 @@ const justified = new MultilineText(paragraph, {
   font: "16px system-ui",
   color: "#111",
   align: "start",
-  justify: true,               // or "inter-word" | "inter-character"
-  justifyLastLine: false,       // default: last line uses normal alignment
-  justifyGapThreshold: 2.0,    // max gap ratio before fallback
+  justify: true, // or "inter-word" | "inter-character"
+  justifyLastLine: false, // default: last line uses normal alignment
+  justifyGapThreshold: 2.0, // max gap ratio before fallback
 });
 ```
 

package/example/chat.ts

@@ -195,7 +195,11 @@ const richTextMessage: InlineSpan<C>[] = [
   { text: "、" },
   { text: "粗体", font: "700 16px system-ui", color: "#b91c1c" },
   { text: "，以及 " },
-  { text: "inline code", font: "15px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
+  {
+    text: "inline code",
+    font: "15px ui-monospace, SFMono-Regular, Consolas, monospace",
+    color: "#7c3aed",
+  },
   { text: " 这样的片段混排。" },
 ];
 
@@ -205,7 +209,11 @@ const richReplyPreview: InlineSpan<C>[] = [
   { text: "，比如 " },
   { text: "关键词高亮", color: "#2563eb" },
   { text: " 和 " },
-  { text: "code()", font: "12px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
+  {
+    text: "code()",
+    font: "12px ui-monospace, SFMono-Regular, Consolas, monospace",
+    color: "#7c3aed",
+  },
   {
     text: "，超长内容仍然会按原来的两行省略规则收起，不需要额外处理。",
   },
@@ -234,13 +242,22 @@ class ItemDetector extends Wrapper<C> {
   hittest(_ctx: Context<C>, test: HitTest): boolean {
     currentHover = this.item;
     if (test.type === "click") {
-      const index = list.items.indexOf(this.item);
-      if (index < 0) {
+      if (!list.items.includes(this.item)) {
         return true;
       }
-      const nextItem = this.item.kind === "revoked" ? this.item.original : revokeMessage(this.item);
+      const nextItem =
+        this.item.kind === "revoked"
+          ? this.item.original
+          : revokeMessage(this.item);
       currentHover = nextItem;
-      list.replace(index, nextItem, {
+      list.update(this.item, nextItem, {
+        duration: REPLACE_ANIMATION_DURATION,
+      });
+    } else if (test.type === "auxclick") {
+      if (!list.items.includes(this.item)) {
+        return true;
+      }
+      list.delete(this.item, {
         duration: REPLACE_ANIMATION_DURATION,
       });
     }
@@ -266,8 +283,10 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
               left: 12,
               right: 12,
               radii: 999,
-              fill: () => (currentHover?.id === item.id ? "#d9d9d9" : "#ececec"),
-              stroke: () => (currentHover?.id === item.id ? "#bcbcbc" : "#d3d3d3"),
+              fill: () =>
+                currentHover?.id === item.id ? "#d9d9d9" : "#ececec",
+              stroke: () =>
+                currentHover?.id === item.id ? "#bcbcbc" : "#d3d3d3",
             },
           ),
           {
@@ -543,6 +562,19 @@ canvas.addEventListener("click", (e) => {
   }
 });
 
+canvas.addEventListener("contextmenu", (e) => {
+  e.preventDefault();
+  const { top, left } = canvas.getBoundingClientRect();
+  const result = renderer.hittest({
+    x: e.clientX - left,
+    y: e.clientY - top,
+    type: "auxclick",
+  });
+  if (!result) {
+    currentHover = undefined;
+  }
+});
+
 function randomEnglishText(words: number): string {
   const out: string[] = [];
   for (let i = 0; i < words; i += 1) {
@@ -632,12 +664,13 @@ button("jump latest (no anim)", () => {
 });
 
 button("revoke first", () => {
-  const item = list.items.find((entry): entry is MessageItem => entry.kind === "message");
+  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), {
+  list.update(item, revokeMessage(item), {
     duration: REPLACE_ANIMATION_DURATION,
   });
 });

package/example/test.ts

@@ -47,8 +47,10 @@ class RoundedBox extends PaddingBox<C> {
     // Reuse the current layout constraints so the background matches wrapped text.
     const { width, height } = ctx.measureNode(this, ctx.constraints);
     ctx.with((g) => {
-      const fill = this.fill == null ? undefined : ctx.resolveDynValue(this.fill);
-      const stroke = this.stroke == null ? undefined : ctx.resolveDynValue(this.stroke);
+      const fill =
+        this.fill == null ? undefined : ctx.resolveDynValue(this.fill);
+      const stroke =
+        this.stroke == null ? undefined : ctx.resolveDynValue(this.stroke);
       g.beginPath();
       g.roundRect(x, y, width, height, this.radii);
       if (fill != null) {

package/index.d.mts

@@ -509,7 +509,11 @@ declare class DebugRenderer<C extends CanvasRenderingContext2D> extends BaseRend
 /**
  * Mutable list state shared with virtualized renderers.
  */
-interface ReplaceListItemAnimationOptions {
+interface UpdateListItemAnimationOptions {
+  /** Animation duration in milliseconds. */
+  duration?: number;
+}
+interface DeleteListItemAnimationOptions {
   /** Animation duration in milliseconds. */
   duration?: number;
 }
@@ -536,9 +540,17 @@ declare class ListState<T extends {}> {
   /** Appends an array of items. */
   pushAll(items: T[]): void;
   /**
-   * Replaces an existing item by index.
+   * Updates an existing item by object identity.
+   */
+  update(targetItem: T, nextItem: T, animation?: UpdateListItemAnimationOptions): void;
+  /**
+   * Starts deleting an existing item by object identity.
    */
-  replace(index: number, item: T, animation?: ReplaceListItemAnimationOptions): void;
+  delete(item: T, animation?: DeleteListItemAnimationOptions): void;
+  /**
+   * Finalizes a pending delete by removing the item from the list.
+   */
+  finalizeDelete(item: T): void;
   /**
    * Sets the current anchor item and pixel offset.
    */
@@ -570,6 +582,13 @@ declare function memoRenderItemBy<C extends CanvasRenderingContext2D, T, K>(keyO
   resetKey: (key: K) => boolean;
 };
 //#endregion
+//#region src/renderer/virtualized/base-types.d.ts
+/** Per-item draw/hittest callbacks produced by the resolver. */
+type VirtualizedResolvedItem = {
+  draw: (y: number) => boolean;
+  hittest: (test: HitTest, y: number) => boolean;
+};
+//#endregion
 //#region src/renderer/virtualized/solver.d.ts
 interface VisibleListState {
   position?: number;
@@ -589,6 +608,10 @@ interface VisibleWindow<T> {
   drawList: VisibleWindowEntry<T>[];
   shift: number;
 }
+interface VisibleWindowResult<T> {
+  normalizedState: NormalizedListState;
+  window: VisibleWindow<T>;
+}
 //#endregion
 //#region src/renderer/virtualized/base.d.ts
 /**
@@ -604,10 +627,6 @@ 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.
  */
@@ -636,9 +655,9 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
   /** Replaces the current item collection. */
   set items(value: T[]);
   /** Renders the current visible window. */
-  abstract render(feedback?: RenderFeedback): boolean;
+  render(feedback?: RenderFeedback): boolean;
   /** Hit-tests the current visible window. */
-  abstract hittest(test: {
+  hittest(test: {
     x: number;
     y: number;
     type: "click" | "auxclick" | "hover";
@@ -651,19 +670,26 @@ 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<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 _renderDrawList(list: VisibleWindow<VirtualizedResolvedItem>["drawList"], shift: number, feedback?: RenderFeedback): boolean;
+  protected _renderVisibleWindow(window: VisibleWindow<VirtualizedResolvedItem>, feedback?: RenderFeedback): boolean;
+  protected _readVisibleRange(top: number, height: number): {
+    top: number;
+    bottom: number;
+  } | undefined;
+  protected _pruneReplacementAnimations(_window: VisibleWindow<unknown>): boolean;
+  protected _hittestVisibleWindow(window: VisibleWindow<VirtualizedResolvedItem>, test: HitTest): boolean;
+  protected _captureVisibleItemSnapshot(window: VisibleWindow<unknown>): void;
+  protected _prepareRender(now: number): 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>;
+  protected _resolveItem(item: T, _index: number, now: number): {
+    value: VirtualizedResolvedItem;
     height: number;
   };
   protected _getAnchorAtOffset(index: number, offset: number): number;
   protected abstract _normalizeListState(state: VisibleListState): NormalizedListState;
+  protected abstract _resolveVisibleWindow(now: number): VisibleWindowResult<VirtualizedResolvedItem>;
   protected abstract _readAnchor(state: NormalizedListState): number;
   protected abstract _applyAnchor(anchor: number): void;
   protected abstract _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
@@ -676,15 +702,13 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
  * Virtualized renderer anchored to the bottom, suitable for chat-style UIs.
  */
 declare class ChatRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
-  #private;
+  protected _resolveVisibleWindow(now: number): VisibleWindowResult<VirtualizedResolvedItem>;
   protected _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
   protected _normalizeListState(state: VisibleListState): NormalizedListState;
   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
 //#region src/renderer/virtualized/timeline.d.ts
@@ -692,16 +716,14 @@ declare class ChatRenderer<C extends CanvasRenderingContext2D, T extends {}> ext
  * Virtualized renderer anchored to the top, suitable for timeline-style UIs.
  */
 declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
-  #private;
+  protected _resolveVisibleWindow(now: number): VisibleWindowResult<VirtualizedResolvedItem>;
   protected _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
   protected _normalizeListState(state: VisibleListState): NormalizedListState;
   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, InlineSpan, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ReplaceListItemAnimationOptions, ShrinkWrap, Text, TextAlign, TextEllipsisPosition, TextJustifyMode, TextJustifyOptions, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DeleteListItemAnimationOptions, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ShrinkWrap, Text, TextAlign, TextEllipsisPosition, TextJustifyMode, TextJustifyOptions, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, UpdateListItemAnimationOptions, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 //# sourceMappingURL=index.d.mts.map