@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/dist-cjs/canvas/anchor-lifecycle.js

@@ -0,0 +1,148 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var anchor_lifecycle_exports = {};
+__export(anchor_lifecycle_exports, {
+  registerCommentAnchorLifecycle: () => registerCommentAnchorLifecycle
+});
+module.exports = __toCommonJS(anchor_lifecycle_exports);
+var import_utils = require("@tldraw/utils");
+var import_comment_mutations = require("./comment-mutations");
+var import_comment_store = require("./comment-store");
+var import_thread_state = require("./thread-state");
+const convertedByShapeCache = new import_utils.WeakCache();
+function isAnchoredToShape(thread, shapeId) {
+  const anchor = thread.anchor;
+  return anchor.type === "shape" && anchor.shapeId === shapeId;
+}
+function registerCommentAnchorLifecycle(editor) {
+  const pendingByShape = /* @__PURE__ */ new Map();
+  const convertedByShape = convertedByShapeCache.get(editor, () => /* @__PURE__ */ new Map());
+  function rehomeThread(thread, pageId, updates) {
+    updates.push({ ...thread, pageId });
+    for (const comment of (0, import_comment_store.getComments)(editor)) {
+      if (comment.threadId === thread.id) updates.push({ ...comment, pageId });
+    }
+  }
+  const disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      for (const thread of (0, import_comment_store.getCommentThreads)(editor)) {
+        if (!isAnchoredToShape(thread, shape.id)) continue;
+        let snapshot = pendingByShape.get(shape.id);
+        if (!snapshot) {
+          snapshot = /* @__PURE__ */ new Map();
+          pendingByShape.set(shape.id, snapshot);
+        }
+        let point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+        const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+        if (point && inset) {
+          const zoom = editor.getZoomLevel();
+          point = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom };
+        }
+        snapshot.set(thread.id, point);
+      }
+    }
+  );
+  const returnedShapeIds = /* @__PURE__ */ new Set();
+  const disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {
+    if (source === "remote") return;
+    if (pendingByShape.size === 0 && returnedShapeIds.size === 0) return;
+    const settled = [...pendingByShape.entries()];
+    pendingByShape.clear();
+    const returned = [...returnedShapeIds];
+    returnedShapeIds.clear();
+    const updates = [];
+    for (const [shapeId, threadPoints] of settled) {
+      if (editor.getShape(shapeId)) continue;
+      for (const [threadId, point] of threadPoints) {
+        if (!point) continue;
+        const thread = (0, import_comment_store.getCommentRecord)(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        if (!isAnchoredToShape(thread, shapeId)) continue;
+        let converted = convertedByShape.get(shapeId);
+        if (!converted) {
+          converted = [];
+          convertedByShape.set(shapeId, converted);
+        }
+        converted.push({ threadId, anchor: thread.anchor, point });
+        updates.push({ ...thread, anchor: { type: "point", x: point.x, y: point.y } });
+      }
+    }
+    for (const shapeId of returned) {
+      const shape = editor.getShape(shapeId);
+      if (!shape) continue;
+      const converted = convertedByShape.get(shapeId);
+      if (!converted) continue;
+      convertedByShape.delete(shapeId);
+      const pageId = editor.getAncestorPageId(shape);
+      for (const { threadId, anchor, point } of converted) {
+        const thread = (0, import_comment_store.getCommentRecord)(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        const current = thread.anchor;
+        if (current.type !== "point" || current.x !== point.x || current.y !== point.y) {
+          continue;
+        }
+        if (!pageId || thread.pageId === pageId) {
+          updates.push({ ...thread, anchor });
+        } else {
+          rehomeThread({ ...thread, anchor }, pageId, updates);
+        }
+      }
+    }
+    if (updates.length > 0) {
+      (0, import_comment_mutations.commitCommentMutation)(editor, ({ put }) => put(updates));
+    }
+  });
+  const disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      if (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id);
+    }
+  );
+  const disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(
+    "shape",
+    (prev, next, source) => {
+      if (source === "remote") return;
+      if (prev.parentId === next.parentId) return;
+      const pageId = editor.getAncestorPageId(next);
+      if (!pageId) return;
+      const movedIds = editor.getShapeAndDescendantIds([next.id]);
+      const updates = [];
+      for (const thread of (0, import_comment_store.getCommentThreads)(editor)) {
+        const anchor = thread.anchor;
+        if (anchor.type !== "shape") continue;
+        if (!movedIds.has(anchor.shapeId)) continue;
+        if (thread.pageId === pageId) continue;
+        rehomeThread(thread, pageId, updates);
+      }
+      if (updates.length > 0) {
+        (0, import_comment_mutations.commitCommentMutation)(editor, ({ put }) => put(updates));
+      }
+    }
+  );
+  return () => {
+    disposeBeforeDelete();
+    disposeOperationComplete();
+    disposeAfterCreate();
+    disposeAfterChange();
+  };
+}
+//# sourceMappingURL=anchor-lifecycle.js.map

package/dist-cjs/canvas/anchor-lifecycle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/anchor-lifecycle.ts"],
+  "sourcesContent": ["import { WeakCache } from '@tldraw/utils'\nimport { Editor, TLCommentAnchor, TLCommentThread, TLPageId, TLShapeId, VecLike } from 'tldraw'\nimport { commitCommentMutation } from './comment-mutations'\nimport { getCommentRecord, getComments, getCommentThreads, TLCommentRecord } from './comment-store'\nimport { anchorPagePoint, impreciseShapePinInset } from './thread-state'\n\ntype ShapeAnchor = Extract<TLCommentAnchor, { type: 'shape' }>\n\n/**\n * Threads converted to point anchors because their shape was deleted, kept so the anchor can be\n * restored if the shape comes back. Owned by the editor, not the registration closure: the\n * registering effect can re-run, and an undo can arrive long after the delete.\n */\nconst convertedByShapeCache = new WeakCache<\n\tEditor,\n\tMap<TLShapeId, { threadId: string; anchor: ShapeAnchor; point: VecLike }[]>\n>()\n\nfunction isAnchoredToShape(\n\tthread: TLCommentThread,\n\tshapeId: TLShapeId\n): thread is TLCommentThread & { anchor: ShapeAnchor } {\n\tconst anchor = thread.anchor\n\treturn anchor.type === 'shape' && anchor.shapeId === shapeId\n}\n\n/**\n * Keep shape-anchored threads alive across their shape's lifecycle:\n *\n * - When the shape is deleted, the thread converts to a `point` anchor where its pin last sat, so\n *   the conversation outlives the shape instead of becoming invisible.\n * - When the shape moves to another page, the thread follows: its `pageId` and each comment's\n *   denormalized `pageId` update, and the anchor keeps riding the shape.\n * - When a deleted shape comes back, the thread re-attaches \u2014 unless its pin was manually moved in\n *   the meantime, in which case the manual placement wins.\n *\n * A page move is `deleteShapes` + re-create with preserved ids inside one `editor.run`, but each\n * store write is its own operation, so \"this shape is being moved\" is never observable as a single\n * event. The handlers therefore cooperate across operations: `beforeDelete` snapshots where each\n * affected pin sits, the operation-complete pass converts threads whose shape is really gone, and\n * `afterCreate` plus that same pass restore the anchor once the store has settled. Undo/redo of a\n * move replays as a `parentId` update, so `afterChange` re-homes threads on cross-page reparents \u2014\n * including threads anchored to descendants, which move without change events of their own.\n *\n * Remote changes are ignored: the client that performed the operation runs this same maintenance\n * and syncs the result. Writes honour the {@link CommentingOptions.history} option.\n *\n * Registered by `CanvasComments` on mount; parts-built consumers can call this directly. Returns a\n * cleanup function that unregisters all handlers.\n *\n * @public\n */\nexport function registerCommentAnchorLifecycle(editor: Editor): () => void {\n\t// Pin positions snapshotted during the current operation: shape id -> (thread id -> pin page\n\t// point).\n\tconst pendingByShape = new Map<TLShapeId, Map<string, VecLike | null>>()\n\tconst convertedByShape = convertedByShapeCache.get(editor, () => new Map())\n\n\tfunction rehomeThread(thread: TLCommentThread, pageId: TLPageId, updates: TLCommentRecord[]) {\n\t\tupdates.push({ ...thread, pageId })\n\t\tfor (const comment of getComments(editor)) {\n\t\t\tif (comment.threadId === thread.id) updates.push({ ...comment, pageId })\n\t\t}\n\t}\n\n\tconst disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tif (!isAnchoredToShape(thread, shape.id)) continue\n\t\t\t\tlet snapshot = pendingByShape.get(shape.id)\n\t\t\t\tif (!snapshot) {\n\t\t\t\t\tsnapshot = new Map()\n\t\t\t\t\tpendingByShape.set(shape.id, snapshot)\n\t\t\t\t}\n\t\t\t\t// Snapshot where the pin is drawn, not just the anchor point: imprecise shape pins render inset\n\t\t\t\t// toward the shape's centre, so without baking the inset in at the current zoom the pin would jump.\n\t\t\t\tlet point = anchorPagePoint(editor, thread.anchor)\n\t\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\t\tif (point && inset) {\n\t\t\t\t\tconst zoom = editor.getZoomLevel()\n\t\t\t\t\tpoint = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom }\n\t\t\t\t}\n\t\t\t\tsnapshot.set(thread.id, point)\n\t\t\t}\n\t\t}\n\t)\n\n\t// Shape ids from `convertedByShape` re-created during the current operation. Settled at operation\n\t// complete rather than in `afterCreate`: creation order within an operation is arbitrary, so a shape\n\t// can appear before its parent and not resolve an ancestor page yet.\n\tconst returnedShapeIds = new Set<TLShapeId>()\n\n\tconst disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {\n\t\t// Only user-sourced handlers populate the maps and only local operations should settle\n\t\t// them; a remote operation completing leaves any (impossible-in-practice) leftovers for\n\t\t// the next local settle rather than judging them against remote state.\n\t\tif (source === 'remote') return\n\t\tif (pendingByShape.size === 0 && returnedShapeIds.size === 0) return\n\t\tconst settled = [...pendingByShape.entries()]\n\t\tpendingByShape.clear()\n\t\tconst returned = [...returnedShapeIds]\n\t\treturnedShapeIds.clear()\n\n\t\tconst updates: TLCommentRecord[] = []\n\t\tfor (const [shapeId, threadPoints] of settled) {\n\t\t\tif (editor.getShape(shapeId)) continue\n\t\t\tfor (const [threadId, point] of threadPoints) {\n\t\t\t\tif (!point) continue\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\tif (!isAnchoredToShape(thread, shapeId)) continue\n\t\t\t\tlet converted = convertedByShape.get(shapeId)\n\t\t\t\tif (!converted) {\n\t\t\t\t\tconverted = []\n\t\t\t\t\tconvertedByShape.set(shapeId, converted)\n\t\t\t\t}\n\t\t\t\tconverted.push({ threadId, anchor: thread.anchor, point })\n\t\t\t\tupdates.push({ ...thread, anchor: { type: 'point', x: point.x, y: point.y } })\n\t\t\t}\n\t\t}\n\n\t\tfor (const shapeId of returned) {\n\t\t\tconst shape = editor.getShape(shapeId)\n\t\t\tif (!shape) continue\n\t\t\tconst converted = convertedByShape.get(shapeId)\n\t\t\tif (!converted) continue\n\t\t\tconvertedByShape.delete(shapeId)\n\n\t\t\tconst pageId = editor.getAncestorPageId(shape)\n\t\t\tfor (const { threadId, anchor, point } of converted) {\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\t// Re-attach only threads still sitting exactly where the conversion left them \u2014 a\n\t\t\t\t// pin moved since then was placed deliberately, and that placement wins.\n\t\t\t\tconst current = thread.anchor\n\t\t\t\tif (current.type !== 'point' || current.x !== point.x || current.y !== point.y) {\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\tif (!pageId || thread.pageId === pageId) {\n\t\t\t\t\tupdates.push({ ...thread, anchor })\n\t\t\t\t} else {\n\t\t\t\t\trehomeThread({ ...thread, anchor }, pageId, updates)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (updates.length > 0) {\n\t\t\tcommitCommentMutation(editor, ({ put }) => put(updates))\n\t\t}\n\t})\n\n\tconst disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id)\n\t\t}\n\t)\n\n\tconst disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(\n\t\t'shape',\n\t\t(prev, next, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (prev.parentId === next.parentId) return\n\t\t\tconst pageId = editor.getAncestorPageId(next)\n\t\t\tif (!pageId) return\n\t\t\t// Descendants move with their parent without change events of their own.\n\t\t\tconst movedIds = editor.getShapeAndDescendantIds([next.id])\n\t\t\tconst updates: TLCommentRecord[] = []\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tconst anchor = thread.anchor\n\t\t\t\tif (anchor.type !== 'shape') continue\n\t\t\t\tif (!movedIds.has(anchor.shapeId)) continue\n\t\t\t\tif (thread.pageId === pageId) continue\n\t\t\t\trehomeThread(thread, pageId, updates)\n\t\t\t}\n\t\t\tif (updates.length > 0) {\n\t\t\t\tcommitCommentMutation(editor, ({ put }) => put(updates))\n\t\t\t}\n\t\t}\n\t)\n\n\treturn () => {\n\t\tdisposeBeforeDelete()\n\t\tdisposeOperationComplete()\n\t\tdisposeAfterCreate()\n\t\tdisposeAfterChange()\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/{ui/avatar.js → canvas/canvas-events.js}

@@ -16,28 +16,20 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var avatar_exports = {};
-__export(avatar_exports, {
-  Avatar: () => Avatar
+var canvas_events_exports = {};
+__export(canvas_events_exports, {
+  forwardPointerEventToCanvas: () => forwardPointerEventToCanvas,
+  isCanvasPanGesture: () => isCanvasPanGesture
 });
-module.exports = __toCommonJS(avatar_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_tldraw = require("tldraw");
-function initial(name) {
-  return ((0, import_tldraw.getFirstCharacter)(name.trim()) || "?").toUpperCase();
+module.exports = __toCommonJS(canvas_events_exports);
+function isCanvasPanGesture(editor, e) {
+  return e.button !== 0 || editor.inputs.keys.has("Space");
 }
-function Avatar({ name, color, image }) {
-  if (image) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "cmt-avatar cmt-avatar--image", src: image, alt: "", "aria-hidden": "true" });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: "cmt-avatar",
-      "aria-hidden": "true",
-      style: color ? { backgroundColor: color } : void 0,
-      children: initial(name)
-    }
-  );
+function forwardPointerEventToCanvas(container, e) {
+  const cvs = container.querySelector(".tl-canvas");
+  if (!cvs) return;
+  const newEvent = new PointerEvent(e.type, e.nativeEvent);
+  newEvent.isSpecialRedispatchedEvent = true;
+  cvs.dispatchEvent(newEvent);
 }
-//# sourceMappingURL=avatar.js.map
+//# sourceMappingURL=canvas-events.js.map

package/dist-cjs/canvas/canvas-events.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/canvas-events.ts"],
+  "sourcesContent": ["import { type PointerEvent as ReactPointerEvent } from 'react'\nimport { Editor } from 'tldraw'\n\n/** A pointer-down that belongs to the camera, not the comment UI: any non-primary button\n *  (middle/right-button pans), or a primary press with the spacebar pan key held. */\nexport function isCanvasPanGesture(editor: Editor, e: ReactPointerEvent) {\n\treturn e.button !== 0 || editor.inputs.keys.has('Space')\n}\n\n/** Hand a pointer event to the canvas beneath the comments layer, marked the same way the\n *  pass-through wheel/hover hooks mark their re-dispatched events. */\nexport function forwardPointerEventToCanvas(container: HTMLElement, e: ReactPointerEvent) {\n\tconst cvs = container.querySelector('.tl-canvas')\n\tif (!cvs) return\n\tconst newEvent = new PointerEvent(e.type, e.nativeEvent as any)\n\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\tcvs.dispatchEvent(newEvent)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,SAAS,mBAAmB,QAAgB,GAAsB;AACxE,SAAO,EAAE,WAAW,KAAK,OAAO,OAAO,KAAK,IAAI,OAAO;AACxD;AAIO,SAAS,4BAA4B,WAAwB,GAAsB;AACzF,QAAM,MAAM,UAAU,cAAc,YAAY;AAChD,MAAI,CAAC,IAAK;AACV,QAAM,WAAW,IAAI,aAAa,EAAE,MAAM,EAAE,WAAkB;AAC7D,EAAC,SAAiB,6BAA6B;AAChD,MAAI,cAAc,QAAQ;AAC3B;",
+  "names": []
+}

package/dist-cjs/canvas/cluster-badge.js

@@ -0,0 +1,121 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var cluster_badge_exports = {};
+__export(cluster_badge_exports, {
+  ClusterBadge: () => ClusterBadge
+});
+module.exports = __toCommonJS(cluster_badge_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+var import_count_badge = require("../ui/count-badge");
+var import_canvas_events = require("./canvas-events");
+var import_thread_preview = require("./thread-preview");
+var import_thread_state = require("./thread-state");
+const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
+  editor,
+  node,
+  onExpand,
+  onSelectThread,
+  threadsById,
+  ...props
+}) {
+  const container = (0, import_tldraw.useContainer)();
+  const msg = (0, import_tldraw.useTranslation)();
+  const badgeRef = (0, import_react.useRef)(null);
+  const { previewShown, previewHandlers } = (0, import_thread_preview.useMarkerPreview)(editor, `cluster:${node.id}`);
+  (0, import_tldraw.usePassThroughWheelEvents)(badgeRef);
+  const meanInset = (0, import_tldraw.useValue)(
+    "cluster badge inset",
+    () => {
+      let x = 0;
+      let y = 0;
+      for (const id of node.members) {
+        const thread = threadsById.get(id);
+        if (!thread) continue;
+        const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+        if (inset) {
+          x += inset.x;
+          y += inset.y;
+        }
+      }
+      return { x: x / node.count, y: y / node.count };
+    },
+    [editor, node, threadsById]
+  );
+  const point = (0, import_tldraw.useValue)(
+    "cluster badge point",
+    () => {
+      const pagePoint = editor.pageToViewport(node.centroid);
+      if (!(0, import_thread_state.isInInflatedViewport)(editor, pagePoint)) return null;
+      return { x: pagePoint.x + meanInset.x, y: pagePoint.y + meanInset.y };
+    },
+    [editor, node, meanInset]
+  );
+  const previewThreads = (0, import_react.useMemo)(() => {
+    if (!previewShown) return [];
+    const threads = [];
+    for (const id of node.members) {
+      const thread = threadsById.get(id);
+      if (thread) threads.push(thread);
+    }
+    return (0, import_thread_preview.sortThreadsForPreview)(threads);
+  }, [previewShown, node.members, threadsById]);
+  if (!point) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: badgeRef,
+        type: "button",
+        className: "tlui-cmt-button tlui-cmt-canvas-cluster",
+        style: { left: point.x, top: point.y },
+        "aria-label": msg("comments.cluster-label").replace("{count}", String(node.count)),
+        onPointerDown: (e) => {
+          if ((0, import_canvas_events.isCanvasPanGesture)(editor, e)) {
+            (0, import_canvas_events.forwardPointerEventToCanvas)(container, e);
+            return;
+          }
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          onExpand(node);
+        },
+        ...previewHandlers,
+        onFocus: previewHandlers.onPointerEnter,
+        onBlur: previewHandlers.onPointerLeave,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_count_badge.CountBadge, { count: node.count })
+      }
+    ),
+    previewShown && previewThreads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_thread_preview.ThreadPreview,
+      {
+        editor,
+        threads: previewThreads,
+        variant: "list",
+        point,
+        onSelectThread,
+        ...previewHandlers,
+        ...props
+      }
+    )
+  ] });
+});
+//# sourceMappingURL=cluster-badge.js.map

package/dist-cjs/canvas/cluster-badge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/cluster-badge.tsx"],
+  "sourcesContent": ["import { memo, useMemo, useRef } from 'react'\nimport {\n\tEditor,\n\tTLCommentThread,\n\tuseContainer,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport type { ClusterNode } from '../clustering/types'\nimport { CountBadge } from '../ui/count-badge'\nimport { forwardPointerEventToCanvas, isCanvasPanGesture } from './canvas-events'\nimport { type CommentingContext } from './context'\nimport { sortThreadsForPreview, ThreadPreview, useMarkerPreview } from './thread-preview'\nimport { impreciseShapePinInset, isInInflatedViewport } from './thread-state'\n\n/**\n * The count badge standing in for several threads folded together at the current zoom. Hovering it\n * previews its threads as a list; clicking zooms to the zoom level at which the cluster splits.\n *\n * Memoized: cluster nodes and thread records are identity-stable while unchanged, so pins and\n * badges skip re-rendering when the parent re-renders for reasons that don't concern them\n * (leaf recomputes during shape drags, partition changes elsewhere). Camera tracking still\n * works \u2014 each component subscribes to its own viewport position via signals, not via props.\n */\nexport const ClusterBadge = memo(function ClusterBadge({\n\teditor,\n\tnode,\n\tonExpand,\n\tonSelectThread,\n\tthreadsById,\n\t...props\n}: Pick<CommentingContext, 'currentUserId' | 'resolveAuthor'> & {\n\teditor: Editor\n\tnode: ClusterNode\n\tonExpand(node: ClusterNode): void\n\tonSelectThread(thread: TLCommentThread): void\n\tthreadsById: ReadonlyMap<string, TLCommentThread>\n}) {\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst badgeRef = useRef<HTMLButtonElement>(null)\n\tconst { previewShown, previewHandlers } = useMarkerPreview(editor, `cluster:${node.id}`)\n\t// Wheel pass-through sits on the badge (never scrollable), not the layer root \u2014 see the\n\t// note on the layer.\n\tusePassThroughWheelEvents(badgeRef)\n\t// The mean of the members' render offsets, in screen px. Imprecise members' pins draw tucked\n\t// into their shape (see impreciseShapePinInset), and the merge thresholds are priced at those\n\t// visual positions \u2014 so the badge draws at the centroid of the pins as drawn, which (screen\n\t// mapping being affine) is the anchor centroid plus this mean. Camera-independent: its own\n\t// computed so the per-frame point below only adds two numbers, and a cluster of precise\n\t// members tracks nothing and adds zero.\n\tconst meanInset = useValue(\n\t\t'cluster badge inset',\n\t\t() => {\n\t\t\tlet x = 0\n\t\t\tlet y = 0\n\t\t\tfor (const id of node.members) {\n\t\t\t\tconst thread = threadsById.get(id)\n\t\t\t\tif (!thread) continue\n\t\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\t\tif (inset) {\n\t\t\t\t\tx += inset.x\n\t\t\t\t\ty += inset.y\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { x: x / node.count, y: y / node.count }\n\t\t},\n\t\t[editor, node, threadsById]\n\t)\n\tconst point = useValue(\n\t\t'cluster badge point',\n\t\t() => {\n\t\t\tconst pagePoint = editor.pageToViewport(node.centroid)\n\t\t\tif (!isInInflatedViewport(editor, pagePoint)) return null\n\t\t\treturn { x: pagePoint.x + meanInset.x, y: pagePoint.y + meanInset.y }\n\t\t},\n\t\t[editor, node, meanInset]\n\t)\n\n\t// `node.members` is sorted by id (the clustering table's ordering); the preview wants them in\n\t// the order a reader would expect. Only computed while the preview is up.\n\tconst previewThreads = useMemo(() => {\n\t\tif (!previewShown) return []\n\t\tconst threads: TLCommentThread[] = []\n\t\tfor (const id of node.members) {\n\t\t\tconst thread = threadsById.get(id)\n\t\t\tif (thread) threads.push(thread)\n\t\t}\n\t\treturn sortThreadsForPreview(threads)\n\t}, [previewShown, node.members, threadsById])\n\n\tif (!point) return null\n\n\treturn (\n\t\t<>\n\t\t\t<button\n\t\t\t\tref={badgeRef}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-canvas-cluster\"\n\t\t\t\tstyle={{ left: point.x, top: point.y }}\n\t\t\t\taria-label={msg('comments.cluster-label').replace('{count}', String(node.count))}\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tif (isCanvasPanGesture(editor, e)) {\n\t\t\t\t\t\tforwardPointerEventToCanvas(container, e)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tonExpand(node)\n\t\t\t\t}}\n\t\t\t\t{...previewHandlers}\n\t\t\t\tonFocus={previewHandlers.onPointerEnter}\n\t\t\t\tonBlur={previewHandlers.onPointerLeave}\n\t\t\t>\n\t\t\t\t<CountBadge count={node.count} />\n\t\t\t</button>\n\t\t\t{previewShown && previewThreads.length > 0 && (\n\t\t\t\t<ThreadPreview\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tthreads={previewThreads}\n\t\t\t\t\tvariant=\"list\"\n\t\t\t\t\tpoint={point}\n\t\t\t\t\tonSelectThread={onSelectThread}\n\t\t\t\t\t{...previewHandlers}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FE;AA/FF,mBAAsC;AACtC,oBAOO;AAEP,yBAA2B;AAC3B,2BAAgE;AAEhE,4BAAuE;AACvE,0BAA6D;AAWtD,MAAM,mBAAe,mBAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAMG;AACF,QAAM,gBAAY,4BAAa;AAC/B,QAAM,UAAM,8BAAe;AAC3B,QAAM,eAAW,qBAA0B,IAAI;AAC/C,QAAM,EAAE,cAAc,gBAAgB,QAAI,wCAAiB,QAAQ,WAAW,KAAK,EAAE,EAAE;AAGvF,+CAA0B,QAAQ;AAOlC,QAAM,gBAAY;AAAA,IACjB;AAAA,IACA,MAAM;AACL,UAAI,IAAI;AACR,UAAI,IAAI;AACR,iBAAW,MAAM,KAAK,SAAS;AAC9B,cAAM,SAAS,YAAY,IAAI,EAAE;AACjC,YAAI,CAAC,OAAQ;AACb,cAAM,YAAQ,4CAAuB,QAAQ,OAAO,MAAM;AAC1D,YAAI,OAAO;AACV,eAAK,MAAM;AACX,eAAK,MAAM;AAAA,QACZ;AAAA,MACD;AACA,aAAO,EAAE,GAAG,IAAI,KAAK,OAAO,GAAG,IAAI,KAAK,MAAM;AAAA,IAC/C;AAAA,IACA,CAAC,QAAQ,MAAM,WAAW;AAAA,EAC3B;AACA,QAAM,YAAQ;AAAA,IACb;AAAA,IACA,MAAM;AACL,YAAM,YAAY,OAAO,eAAe,KAAK,QAAQ;AACrD,UAAI,KAAC,0CAAqB,QAAQ,SAAS,EAAG,QAAO;AACrD,aAAO,EAAE,GAAG,UAAU,IAAI,UAAU,GAAG,GAAG,UAAU,IAAI,UAAU,EAAE;AAAA,IACrE;AAAA,IACA,CAAC,QAAQ,MAAM,SAAS;AAAA,EACzB;AAIA,QAAM,qBAAiB,sBAAQ,MAAM;AACpC,QAAI,CAAC,aAAc,QAAO,CAAC;AAC3B,UAAM,UAA6B,CAAC;AACpC,eAAW,MAAM,KAAK,SAAS;AAC9B,YAAM,SAAS,YAAY,IAAI,EAAE;AACjC,UAAI,OAAQ,SAAQ,KAAK,MAAM;AAAA,IAChC;AACA,eAAO,6CAAsB,OAAO;AAAA,EACrC,GAAG,CAAC,cAAc,KAAK,SAAS,WAAW,CAAC;AAE5C,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,MAAM,GAAG,KAAK,MAAM,EAAE;AAAA,QACrC,cAAY,IAAI,wBAAwB,EAAE,QAAQ,WAAW,OAAO,KAAK,KAAK,CAAC;AAAA,QAC/E,eAAe,CAAC,MAAM;AACrB,kBAAI,yCAAmB,QAAQ,CAAC,GAAG;AAClC,kEAA4B,WAAW,CAAC;AACxC;AAAA,UACD;AACA,YAAE,gBAAgB;AAAA,QACnB;AAAA,QACA,SAAS,CAAC,MAAM;AACf,YAAE,gBAAgB;AAClB,mBAAS,IAAI;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QACJ,SAAS,gBAAgB;AAAA,QACzB,QAAQ,gBAAgB;AAAA,QAExB,sDAAC,iCAAW,OAAO,KAAK,OAAO;AAAA;AAAA,IAChC;AAAA,IACC,gBAAgB,eAAe,SAAS,KACxC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACL;AAAA,KAEF;AAEF,CAAC;",
+  "names": ["ClusterBadge"]
+}

package/dist-cjs/canvas/cluster-fade.js

@@ -0,0 +1,85 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var cluster_fade_exports = {};
+__export(cluster_fade_exports, {
+  clusterFadeClassName: () => clusterFadeClassName,
+  useFadeVisibleNodes: () => useFadeVisibleNodes
+});
+module.exports = __toCommonJS(cluster_fade_exports);
+var import_react = require("react");
+const CLUSTER_FADE_MS = 150;
+function useFadeVisibleNodes(nodes, resetKey) {
+  const resetKeyRef = (0, import_react.useRef)(resetKey);
+  const didReset = resetKeyRef.current !== resetKey;
+  if (didReset) {
+    resetKeyRef.current = resetKey;
+  }
+  const [fadeNodes, setFadeNodes] = (0, import_react.useState)(() => toPresentFadeNodes(nodes));
+  const renderedNodes = didReset ? toPresentFadeNodes(nodes) : fadeNodes;
+  (0, import_react.useEffect)(() => {
+    setFadeNodes(toPresentFadeNodes(nodes));
+  }, [resetKey]);
+  (0, import_react.useEffect)(() => {
+    if (didReset) return;
+    setFadeNodes((previous) => reconcileFadeNodes(previous, nodes));
+  }, [didReset, nodes]);
+  const hasEntering = renderedNodes.some((item) => item.phase === "entering");
+  (0, import_react.useEffect)(() => {
+    if (!hasEntering) return;
+    const frame = requestAnimationFrame(() => {
+      setFadeNodes(
+        (previous) => previous.map((item) => item.phase === "entering" ? { ...item, phase: "present" } : item)
+      );
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [hasEntering, renderedNodes]);
+  const hasExiting = renderedNodes.some((item) => item.phase === "exiting");
+  (0, import_react.useEffect)(() => {
+    if (!hasExiting) return;
+    const timeout = window.setTimeout(() => {
+      setFadeNodes((previous) => previous.filter((item) => item.phase !== "exiting"));
+    }, CLUSTER_FADE_MS);
+    return () => window.clearTimeout(timeout);
+  }, [hasExiting, renderedNodes]);
+  return renderedNodes;
+}
+function toPresentFadeNodes(nodes) {
+  return nodes.map((node) => ({ node, phase: "present" }));
+}
+function reconcileFadeNodes(previous, nextNodes) {
+  const previousById = new Map(previous.map((item) => [item.node.id, item]));
+  const nextIds = new Set(nextNodes.map((node) => node.id));
+  const next = [];
+  for (const node of nextNodes) {
+    const previousItem = previousById.get(node.id);
+    next.push({
+      node,
+      phase: previousItem && previousItem.phase !== "exiting" ? previousItem.phase : previousItem ? "present" : "entering"
+    });
+  }
+  for (const item of previous) {
+    if (nextIds.has(item.node.id)) continue;
+    next.push(item.phase === "exiting" ? item : { ...item, phase: "exiting" });
+  }
+  return next;
+}
+function clusterFadeClassName(phase) {
+  return `tlui-cmt-cluster-fade tlui-cmt-cluster-fade--${phase}`;
+}
+//# sourceMappingURL=cluster-fade.js.map

package/dist-cjs/canvas/cluster-fade.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/cluster-fade.ts"],
+  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport type { ClusterNode } from '../clustering/types'\n\nconst CLUSTER_FADE_MS = 150\n\nexport type ClusterFadePhase = 'entering' | 'present' | 'exiting'\n\nexport interface ClusterFadeNode {\n\tnode: ClusterNode\n\tphase: ClusterFadePhase\n}\n\n/**\n * Cross-fades the visible cluster nodes as the partition changes: a node that appears starts\n * `entering` and flips to `present` on the next frame, and one that leaves is kept as `exiting`\n * until the CSS transition has run. `resetKey` is compared by identity \u2014 a new cluster model\n * replaces the whole world, so its nodes snap to `present` instead of animating.\n */\nexport function useFadeVisibleNodes(\n\tnodes: readonly ClusterNode[],\n\tresetKey: object\n): ClusterFadeNode[] {\n\tconst resetKeyRef = useRef(resetKey)\n\tconst didReset = resetKeyRef.current !== resetKey\n\tif (didReset) {\n\t\tresetKeyRef.current = resetKey\n\t}\n\n\tconst [fadeNodes, setFadeNodes] = useState<ClusterFadeNode[]>(() => toPresentFadeNodes(nodes))\n\tconst renderedNodes = didReset ? toPresentFadeNodes(nodes) : fadeNodes\n\n\tuseEffect(() => {\n\t\tsetFadeNodes(toPresentFadeNodes(nodes))\n\t\t// Resets only on a new model (resetKey); node-list changes within the same model are\n\t\t// handled by the reconcile effect below, which fades entries in/out instead of snapping.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [resetKey])\n\n\tuseEffect(() => {\n\t\tif (didReset) return\n\t\tsetFadeNodes((previous) => reconcileFadeNodes(previous, nodes))\n\t}, [didReset, nodes])\n\n\tconst hasEntering = renderedNodes.some((item) => item.phase === 'entering')\n\tuseEffect(() => {\n\t\tif (!hasEntering) return\n\t\tconst frame = requestAnimationFrame(() => {\n\t\t\tsetFadeNodes((previous) =>\n\t\t\t\tprevious.map((item) => (item.phase === 'entering' ? { ...item, phase: 'present' } : item))\n\t\t\t)\n\t\t})\n\t\treturn () => cancelAnimationFrame(frame)\n\t}, [hasEntering, renderedNodes])\n\n\tconst hasExiting = renderedNodes.some((item) => item.phase === 'exiting')\n\tuseEffect(() => {\n\t\tif (!hasExiting) return\n\t\tconst timeout = window.setTimeout(() => {\n\t\t\tsetFadeNodes((previous) => previous.filter((item) => item.phase !== 'exiting'))\n\t\t}, CLUSTER_FADE_MS)\n\t\treturn () => window.clearTimeout(timeout)\n\t}, [hasExiting, renderedNodes])\n\n\treturn renderedNodes\n}\n\nfunction toPresentFadeNodes(nodes: readonly ClusterNode[]): ClusterFadeNode[] {\n\treturn nodes.map((node) => ({ node, phase: 'present' }))\n}\n\nfunction reconcileFadeNodes(\n\tprevious: readonly ClusterFadeNode[],\n\tnextNodes: readonly ClusterNode[]\n): ClusterFadeNode[] {\n\tconst previousById = new Map(previous.map((item) => [item.node.id, item]))\n\tconst nextIds = new Set(nextNodes.map((node) => node.id))\n\tconst next: ClusterFadeNode[] = []\n\n\tfor (const node of nextNodes) {\n\t\tconst previousItem = previousById.get(node.id)\n\t\tnext.push({\n\t\t\tnode,\n\t\t\tphase:\n\t\t\t\tpreviousItem && previousItem.phase !== 'exiting'\n\t\t\t\t\t? previousItem.phase\n\t\t\t\t\t: previousItem\n\t\t\t\t\t\t? 'present'\n\t\t\t\t\t\t: 'entering',\n\t\t})\n\t}\n\n\tfor (const item of previous) {\n\t\tif (nextIds.has(item.node.id)) continue\n\t\tnext.push(item.phase === 'exiting' ? item : { ...item, phase: 'exiting' })\n\t}\n\n\treturn next\n}\n\nexport function clusterFadeClassName(phase: ClusterFadePhase): string {\n\treturn `tlui-cmt-cluster-fade tlui-cmt-cluster-fade--${phase}`\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAG5C,MAAM,kBAAkB;AAejB,SAAS,oBACf,OACA,UACoB;AACpB,QAAM,kBAAc,qBAAO,QAAQ;AACnC,QAAM,WAAW,YAAY,YAAY;AACzC,MAAI,UAAU;AACb,gBAAY,UAAU;AAAA,EACvB;AAEA,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA4B,MAAM,mBAAmB,KAAK,CAAC;AAC7F,QAAM,gBAAgB,WAAW,mBAAmB,KAAK,IAAI;AAE7D,8BAAU,MAAM;AACf,iBAAa,mBAAmB,KAAK,CAAC;AAAA,EAIvC,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACf,QAAI,SAAU;AACd,iBAAa,CAAC,aAAa,mBAAmB,UAAU,KAAK,CAAC;AAAA,EAC/D,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,QAAM,cAAc,cAAc,KAAK,CAAC,SAAS,KAAK,UAAU,UAAU;AAC1E,8BAAU,MAAM;AACf,QAAI,CAAC,YAAa;AAClB,UAAM,QAAQ,sBAAsB,MAAM;AACzC;AAAA,QAAa,CAAC,aACb,SAAS,IAAI,CAAC,SAAU,KAAK,UAAU,aAAa,EAAE,GAAG,MAAM,OAAO,UAAU,IAAI,IAAK;AAAA,MAC1F;AAAA,IACD,CAAC;AACD,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACxC,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,QAAM,aAAa,cAAc,KAAK,CAAC,SAAS,KAAK,UAAU,SAAS;AACxE,8BAAU,MAAM;AACf,QAAI,CAAC,WAAY;AACjB,UAAM,UAAU,OAAO,WAAW,MAAM;AACvC,mBAAa,CAAC,aAAa,SAAS,OAAO,CAAC,SAAS,KAAK,UAAU,SAAS,CAAC;AAAA,IAC/E,GAAG,eAAe;AAClB,WAAO,MAAM,OAAO,aAAa,OAAO;AAAA,EACzC,GAAG,CAAC,YAAY,aAAa,CAAC;AAE9B,SAAO;AACR;AAEA,SAAS,mBAAmB,OAAkD;AAC7E,SAAO,MAAM,IAAI,CAAC,UAAU,EAAE,MAAM,OAAO,UAAU,EAAE;AACxD;AAEA,SAAS,mBACR,UACA,WACoB;AACpB,QAAM,eAAe,IAAI,IAAI,SAAS,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,CAAC;AACzE,QAAM,UAAU,IAAI,IAAI,UAAU,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC;AACxD,QAAM,OAA0B,CAAC;AAEjC,aAAW,QAAQ,WAAW;AAC7B,UAAM,eAAe,aAAa,IAAI,KAAK,EAAE;AAC7C,SAAK,KAAK;AAAA,MACT;AAAA,MACA,OACC,gBAAgB,aAAa,UAAU,YACpC,aAAa,QACb,eACC,YACA;AAAA,IACN,CAAC;AAAA,EACF;AAEA,aAAW,QAAQ,UAAU;AAC5B,QAAI,QAAQ,IAAI,KAAK,KAAK,EAAE,EAAG;AAC/B,SAAK,KAAK,KAAK,UAAU,YAAY,OAAO,EAAE,GAAG,MAAM,OAAO,UAAU,CAAC;AAAA,EAC1E;AAEA,SAAO;AACR;AAEO,SAAS,qBAAqB,OAAiC;AACrE,SAAO,gDAAgD,KAAK;AAC7D;",
+  "names": []
+}

package/dist-cjs/canvas/cluster-input.js

@@ -18,23 +18,73 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var cluster_input_exports = {};
 __export(cluster_input_exports, {
+  clusterInputEqual: () => clusterInputEqual,
+  clusterInputIdsEqual: () => clusterInputIdsEqual,
   collectClusterLeaves: () => collectClusterLeaves
 });
 module.exports = __toCommonJS(cluster_input_exports);
 var import_thread_state = require("./thread-state");
-function collectClusterLeaves(editor, threads, openThreadId, impreciseShapeAnchor) {
+function collectClusterLeaves(editor, threads, openThreadId) {
   const pageId = editor.getCurrentPageId();
   const leaves = [];
+  let screenOffsets;
   for (const thread of threads) {
     if (thread.id === openThreadId) continue;
     if (thread.pageId !== pageId) continue;
-    const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor, impreciseShapeAnchor);
+    const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
     if (!point) continue;
     leaves.push({
       id: thread.id,
       point: { x: point.x, y: point.y }
     });
+    const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+    if (inset) (screenOffsets ??= /* @__PURE__ */ new Map()).set(thread.id, inset);
   }
-  return leaves;
+  return { leaves, screenOffsets };
+}
+function clusterInputEqual(a, b) {
+  if (a === b) return true;
+  return clusterLeavesEqual(a.leaves, b.leaves) && screenOffsetsEqual(a.screenOffsets, b.screenOffsets);
+}
+function clusterInputIdsEqual(a, b) {
+  if (a === b) return true;
+  return clusterLeafIdsEqual(a.leaves, b.leaves) && screenOffsetIdsEqual(a.screenOffsets, b.screenOffsets);
+}
+function screenOffsetsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.size !== b.size) return false;
+  for (const [id, offset] of b) {
+    const prev = a.get(id);
+    if (!prev || prev.x !== offset.x || prev.y !== offset.y) return false;
+  }
+  return true;
+}
+function screenOffsetIdsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.size !== b.size) return false;
+  for (const id of b.keys()) {
+    if (!a.has(id)) return false;
+  }
+  return true;
+}
+function clusterLeavesEqual(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const la = a[i];
+    const lb = b[i];
+    if (la.id !== lb.id || la.point.x !== lb.point.x || la.point.y !== lb.point.y) return false;
+  }
+  return true;
+}
+function clusterLeafIdsEqual(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].id !== b[i].id) return false;
+  }
+  return true;
 }
 //# sourceMappingURL=cluster-input.js.map

package/dist-cjs/canvas/cluster-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/cluster-input.ts"],
-  "sourcesContent": ["import type { Editor, TLCommentThread } from 'tldraw'\nimport type { LeafInput } from '../clustering/types'\nimport { anchorPagePoint } from './thread-state'\n\n/** @public */\nexport function collectClusterLeaves(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[],\n\topenThreadId: string | null,\n\timpreciseShapeAnchor?: { x: number; y: number }\n): LeafInput[] {\n\tconst pageId = editor.getCurrentPageId()\n\tconst leaves: LeafInput[] = []\n\n\tfor (const thread of threads) {\n\t\tif (thread.id === openThreadId) continue\n\t\tif (thread.pageId !== pageId) continue\n\n\t\tconst point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)\n\t\tif (!point) continue\n\n\t\tleaves.push({\n\t\t\tid: thread.id,\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\treturn leaves\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAgC;AAGzB,SAAS,qBACf,QACA,SACA,cACA,sBACc;AACd,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAsB,CAAC;AAE7B,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,OAAO,aAAc;AAChC,QAAI,OAAO,WAAW,OAAQ;AAE9B,UAAM,YAAQ,qCAAgB,QAAQ,OAAO,QAAQ,oBAAoB;AACzE,QAAI,CAAC,MAAO;AAEZ,WAAO,KAAK;AAAA,MACX,IAAI,OAAO;AAAA,MACX,OAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAAA,IACjC,CAAC;AAAA,EACF;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import type { Editor, TLCommentThread, VecLike } from 'tldraw'\nimport type { LeafInput, LeafScreenOffsets } from '../clustering/types'\nimport { anchorPagePoint, impreciseShapePinInset } from './thread-state'\n\n/** The clustering input for the current page's pinned threads. @internal */\nexport interface ClusterInput {\n\t/** One leaf per pinned thread, at its anchor page point. */\n\tleaves: LeafInput[]\n\t/**\n\t * The render offsets of the imprecise pins among the leaves \u2014 those draw tucked into their\n\t * shape by a constant screen-px inset rather than on their anchor, and the clustering prices\n\t * their merges at the visual positions. Undefined when every pin renders on its anchor,\n\t * which guarantees a byte-identical offset-unaware clustering run.\n\t */\n\tscreenOffsets: LeafScreenOffsets | undefined\n}\n\n/** The cluster leaves for the threads pinned on the current page. @internal */\nexport function collectClusterLeaves(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[],\n\topenThreadId: string | null\n): ClusterInput {\n\tconst pageId = editor.getCurrentPageId()\n\tconst leaves: LeafInput[] = []\n\tlet screenOffsets: Map<string, VecLike> | undefined\n\n\tfor (const thread of threads) {\n\t\tif (thread.id === openThreadId) continue\n\t\tif (thread.pageId !== pageId) continue\n\n\t\tconst point = anchorPagePoint(editor, thread.anchor)\n\t\tif (!point) continue\n\n\t\tleaves.push({\n\t\t\tid: thread.id,\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\n\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\tif (inset) (screenOffsets ??= new Map()).set(thread.id, inset)\n\t}\n\n\treturn { leaves, screenOffsets }\n}\n\n/**\n * Value equality over everything `computeClusterTable` reads. Keeps the input's identity stable\n * across recomputes that changed nothing, so the O(N\u00B2) rebuild only runs when it has to.\n * @internal\n */\nexport function clusterInputEqual(a: ClusterInput, b: ClusterInput): boolean {\n\tif (a === b) return true\n\treturn (\n\t\tclusterLeavesEqual(a.leaves, b.leaves) && screenOffsetsEqual(a.screenOffsets, b.screenOffsets)\n\t)\n}\n\n/**\n * The same, ignoring everything positional \u2014 anchor points and offset vectors alike. The mid-drag\n * gate: a move defers, but a thread added, removed, or changed precision still rebuilds.\n * @internal\n */\nexport function clusterInputIdsEqual(a: ClusterInput, b: ClusterInput): boolean {\n\tif (a === b) return true\n\treturn (\n\t\tclusterLeafIdsEqual(a.leaves, b.leaves) &&\n\t\tscreenOffsetIdsEqual(a.screenOffsets, b.screenOffsets)\n\t)\n}\n\nfunction screenOffsetsEqual(a: LeafScreenOffsets | undefined, b: LeafScreenOffsets | undefined) {\n\tif (a === b) return true\n\tif (!a || !b) return false\n\tif (a.size !== b.size) return false\n\tfor (const [id, offset] of b) {\n\t\tconst prev = a.get(id)\n\t\tif (!prev || prev.x !== offset.x || prev.y !== offset.y) return false\n\t}\n\treturn true\n}\n\n/** Which leaves carry an offset, ignoring the vectors: a leaf gains or loses one by changing\n *  precision, which is a record change rather than a gesture. */\nfunction screenOffsetIdsEqual(a: LeafScreenOffsets | undefined, b: LeafScreenOffsets | undefined) {\n\tif (a === b) return true\n\tif (!a || !b) return false\n\tif (a.size !== b.size) return false\n\tfor (const id of b.keys()) {\n\t\tif (!a.has(id)) return false\n\t}\n\treturn true\n}\n\n/** Whether two leaf lists have the same threads at the same positions, in the same order. */\nfunction clusterLeavesEqual(a: readonly LeafInput[], b: readonly LeafInput[]): boolean {\n\tif (a === b) return true\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tconst la = a[i]\n\t\tconst lb = b[i]\n\t\tif (la.id !== lb.id || la.point.x !== lb.point.x || la.point.y !== lb.point.y) return false\n\t}\n\treturn true\n}\n\n/** Whether two leaf lists contain the same thread ids in the same order, ignoring positions. */\nfunction clusterLeafIdsEqual(a: readonly LeafInput[], b: readonly LeafInput[]): boolean {\n\tif (a === b) return true\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i].id !== b[i].id) return false\n\t}\n\treturn true\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAwD;AAgBjD,SAAS,qBACf,QACA,SACA,cACe;AACf,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAsB,CAAC;AAC7B,MAAI;AAEJ,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,OAAO,aAAc;AAChC,QAAI,OAAO,WAAW,OAAQ;AAE9B,UAAM,YAAQ,qCAAgB,QAAQ,OAAO,MAAM;AACnD,QAAI,CAAC,MAAO;AAEZ,WAAO,KAAK;AAAA,MACX,IAAI,OAAO;AAAA,MACX,OAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAAA,IACjC,CAAC;AAED,UAAM,YAAQ,4CAAuB,QAAQ,OAAO,MAAM;AAC1D,QAAI,MAAO,EAAC,kBAAkB,oBAAI,IAAI,GAAG,IAAI,OAAO,IAAI,KAAK;AAAA,EAC9D;AAEA,SAAO,EAAE,QAAQ,cAAc;AAChC;AAOO,SAAS,kBAAkB,GAAiB,GAA0B;AAC5E,MAAI,MAAM,EAAG,QAAO;AACpB,SACC,mBAAmB,EAAE,QAAQ,EAAE,MAAM,KAAK,mBAAmB,EAAE,eAAe,EAAE,aAAa;AAE/F;AAOO,SAAS,qBAAqB,GAAiB,GAA0B;AAC/E,MAAI,MAAM,EAAG,QAAO;AACpB,SACC,oBAAoB,EAAE,QAAQ,EAAE,MAAM,KACtC,qBAAqB,EAAE,eAAe,EAAE,aAAa;AAEvD;AAEA,SAAS,mBAAmB,GAAkC,GAAkC;AAC/F,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,MAAI,EAAE,SAAS,EAAE,KAAM,QAAO;AAC9B,aAAW,CAAC,IAAI,MAAM,KAAK,GAAG;AAC7B,UAAM,OAAO,EAAE,IAAI,EAAE;AACrB,QAAI,CAAC,QAAQ,KAAK,MAAM,OAAO,KAAK,KAAK,MAAM,OAAO,EAAG,QAAO;AAAA,EACjE;AACA,SAAO;AACR;AAIA,SAAS,qBAAqB,GAAkC,GAAkC;AACjG,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,MAAI,EAAE,SAAS,EAAE,KAAM,QAAO;AAC9B,aAAW,MAAM,EAAE,KAAK,GAAG;AAC1B,QAAI,CAAC,EAAE,IAAI,EAAE,EAAG,QAAO;AAAA,EACxB;AACA,SAAO;AACR;AAGA,SAAS,mBAAmB,GAAyB,GAAkC;AACtF,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;AAClC,UAAM,KAAK,EAAE,CAAC;AACd,UAAM,KAAK,EAAE,CAAC;AACd,QAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,MAAM,MAAM,GAAG,MAAM,EAAG,QAAO;AAAA,EACvF;AACA,SAAO;AACR;AAGA,SAAS,oBAAoB,GAAyB,GAAkC;AACvF,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;AAClC,QAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAAI,QAAO;AAAA,EACjC;AACA,SAAO;AACR;",
   "names": []
 }