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

package/dist-cjs/canvas/thread-state.js

@@ -18,64 +18,125 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var thread_state_exports = {};
 __export(thread_state_exports, {
-  DEFAULT_IMPRECISE_SHAPE_ANCHOR: () => DEFAULT_IMPRECISE_SHAPE_ANCHOR,
+  IMPRECISE_PIN_INSET_PX: () => IMPRECISE_PIN_INSET_PX,
   REGION_PIN_CORNER: () => REGION_PIN_CORNER,
   anchorPagePoint: () => anchorPagePoint,
+  commentCenterScreenOffset: () => commentCenterScreenOffset,
+  commentTargetShapeAt: () => commentTargetShapeAt,
   focusThread: () => focusThread,
+  impreciseShapePinInset: () => impreciseShapePinInset,
+  isBoxInInflatedViewport: () => isBoxInInflatedViewport,
+  isInInflatedViewport: () => isInInflatedViewport,
+  regionAnchorPinCorner: () => regionAnchorPinCorner,
   regionPinPoint: () => regionPinPoint,
   shapeAnchorAt: () => shapeAnchorAt
 });
 module.exports = __toCommonJS(thread_state_exports);
-var import_region_options = require("./region-options");
+var import_tldraw = require("tldraw");
+var import_options = require("./options");
 var import_state = require("./state");
-const DEFAULT_IMPRECISE_SHAPE_ANCHOR = { x: 1, y: 0 };
+var import_thread_view = require("./thread-view");
+const IMPRECISE_PIN_INSET_PX = 20;
+const MARKER_CULL_MARGIN_PX = 120;
+function isInInflatedViewport(editor, point) {
+  const viewport = editor.getViewportScreenBounds();
+  const margin = MARKER_CULL_MARGIN_PX;
+  return point.x >= -margin && point.y >= -margin && point.x <= viewport.w + margin && point.y <= viewport.h + margin;
+}
+function isBoxInInflatedViewport(editor, box) {
+  const viewport = editor.getViewportScreenBounds();
+  const margin = MARKER_CULL_MARGIN_PX;
+  const min = editor.pageToViewport({ x: box.x, y: box.y });
+  const max = editor.pageToViewport({ x: box.x + box.w, y: box.y + box.h });
+  return max.x >= -margin && max.y >= -margin && min.x <= viewport.w + margin && min.y <= viewport.h + margin;
+}
+function impreciseShapePinInset(editor, anchor) {
+  if (anchor.type !== "shape" || anchor.isPrecise) return null;
+  const spot = (0, import_options.getCommentingOptions)(editor).impreciseShapeAnchor;
+  const inset = {
+    x: Math.sign(0.5 - spot.x) * IMPRECISE_PIN_INSET_PX,
+    y: Math.sign(0.5 - spot.y) * IMPRECISE_PIN_INSET_PX
+  };
+  const rotation = editor.getShapePageTransform(anchor.shapeId)?.rotation() ?? 0;
+  return rotation === 0 ? inset : import_tldraw.Vec.Rot(inset, rotation);
+}
 const REGION_PIN_CORNER = { x: 1, y: 1 };
+function regionAnchorPinCorner(anchor) {
+  if (anchor.pinX !== void 0 && anchor.pinY !== void 0) {
+    return { x: anchor.pinX, y: anchor.pinY };
+  }
+  return REGION_PIN_CORNER;
+}
 function regionPinPoint(region, corner = REGION_PIN_CORNER) {
   return {
     x: region.x + corner.x * region.w,
     y: region.y + corner.y * region.h
   };
 }
-function anchorPagePoint(editor, anchor, impreciseShapeAnchor = DEFAULT_IMPRECISE_SHAPE_ANCHOR) {
+function anchorPagePoint(editor, anchor) {
   switch (anchor.type) {
     case "shape": {
-      const bounds = editor.getShapePageBounds(anchor.shapeId);
-      if (!bounds) return null;
-      const { x, y } = anchor.isPrecise ? anchor : impreciseShapeAnchor;
-      return { x: bounds.minX + x * bounds.w, y: bounds.minY + y * bounds.h };
-    }
-    case "text-range": {
-      const bounds = editor.getShapePageBounds(anchor.shapeId);
-      if (!bounds) return null;
-      return { x: bounds.maxX, y: bounds.minY };
+      const shape = editor.getShape(anchor.shapeId);
+      if (!shape) return null;
+      const transform = editor.getShapePageTransform(shape);
+      if (!transform) return null;
+      const { point, size } = editor.getShapeGeometry(shape).bounds;
+      const spot = anchor.isPrecise ? anchor : (0, import_options.getCommentingOptions)(editor).impreciseShapeAnchor;
+      return import_tldraw.Mat.applyToPoint(transform, import_tldraw.Vec.Add(point, import_tldraw.Vec.MulV(spot, size)));
     }
     case "point":
       return { x: anchor.x, y: anchor.y };
     case "region":
-      return regionPinPoint(anchor, (0, import_region_options.getRegionCommentOptions)(editor).pinCorner);
+      return regionPinPoint(anchor, regionAnchorPinCorner(anchor));
     case "page":
       return null;
   }
 }
+function commentTargetShapeAt(editor, page) {
+  return editor.getShapeAtPoint(page, {
+    hitInside: true,
+    hitFrameInside: true,
+    margin: editor.getHitTestMargin()
+  });
+}
 function shapeAnchorAt(editor, shapeId, page, precise) {
-  const bounds = editor.getShapePageBounds(shapeId);
-  if (!bounds || bounds.w === 0 || bounds.h === 0) {
+  const shape = editor.getShape(shapeId);
+  const bounds = shape && editor.getShapeGeometry(shape).bounds;
+  if (!shape || !bounds || bounds.w === 0 || bounds.h === 0) {
     return { type: "shape", shapeId, x: 0.5, y: 0.5, isPrecise: precise };
   }
+  const local = editor.getPointInShapeSpace(shape, page);
   return {
     type: "shape",
     shapeId,
-    x: (page.x - bounds.minX) / bounds.w,
-    y: (page.y - bounds.minY) / bounds.h,
+    x: (local.x - bounds.minX) / bounds.w,
+    y: (local.y - bounds.minY) / bounds.h,
     isPrecise: precise
   };
 }
-function focusThread(editor, thread, impreciseShapeAnchor) {
+function focusThread(editor, thread) {
   if (thread.pageId !== editor.getCurrentPageId()) {
     editor.setCurrentPage(thread.pageId);
   }
   import_state.openThreadId.set(editor, thread.id);
-  const point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
-  if (point) editor.centerOnPoint(point, { animation: { duration: 200 } });
+  const point = anchorPagePoint(editor, thread.anchor);
+  if (!point) return;
+  const offset = commentCenterScreenOffset(editor) / editor.getZoomLevel();
+  editor.centerOnPoint({ x: point.x + offset, y: point.y }, { animation: { duration: 200 } });
+}
+const CENTER_MARGIN_PX = 8;
+const THREAD_UI_EXTENT_PX = import_thread_view.POPOVER_OFFSET.thread.x + 300;
+function commentCenterScreenOffset(editor) {
+  if (!import_state.commentsSidebarOpen.get(editor)) return 0;
+  const sidebar = editor.getContainer().querySelector(".tlui-cmt-canvas-sidebar");
+  if (!sidebar) return 0;
+  const viewport = editor.getViewportScreenBounds();
+  const sidebarLeft = sidebar.getBoundingClientRect().left - viewport.x;
+  if (sidebarLeft >= viewport.w) return 0;
+  const pinX = Math.max(
+    Math.min(sidebarLeft / 2, sidebarLeft - CENTER_MARGIN_PX - THREAD_UI_EXTENT_PX),
+    CENTER_MARGIN_PX
+  );
+  return viewport.w / 2 - pinX;
 }
 //# sourceMappingURL=thread-state.js.map

package/dist-cjs/canvas/thread-state.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/thread-state.ts"],
-  "sourcesContent": ["import { BoxModel, Editor, TLCommentAnchor, TLCommentThread, TLShapeId, VecLike } from 'tldraw'\nimport { getRegionCommentOptions } from './region-options'\nimport { openThreadId } from './state'\n\n/** Where an imprecise shape comment sits by default: the shape's top-right corner. Overridable. @public */\nexport const DEFAULT_IMPRECISE_SHAPE_ANCHOR = { x: 1, y: 0 }\n\n/** The default corner a region's pin and composer sit on, as a normalized 0\u20131 offset (bottom-right).\n *  Overridable per editor via region options; pin position, composer placement, region move, and\n *  which corner has no resize handle all derive from the chosen corner. */\nexport const REGION_PIN_CORNER: VecLike = { x: 1, y: 1 }\n\n/** The page point of a region's pin corner. */\nexport function regionPinPoint(region: BoxModel, corner: VecLike = REGION_PIN_CORNER): VecLike {\n\treturn {\n\t\tx: region.x + corner.x * region.w,\n\t\ty: region.y + corner.y * region.h,\n\t}\n}\n\n/**\n * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. For imprecise\n * shape anchors the pin uses `impreciseShapeAnchor` (a normalized 0\u20131 spot, top-right by default)\n * rather than the stored `x`/`y`.\n * @public\n */\nexport function anchorPagePoint(\n\teditor: Editor,\n\tanchor: TLCommentAnchor,\n\timpreciseShapeAnchor: { x: number; y: number } = DEFAULT_IMPRECISE_SHAPE_ANCHOR\n): { x: number; y: number } | null {\n\tswitch (anchor.type) {\n\t\tcase 'shape': {\n\t\t\tconst bounds = editor.getShapePageBounds(anchor.shapeId as TLShapeId)\n\t\t\tif (!bounds) return null\n\t\t\t// Precise pins sit at their stored x/y; imprecise ones at the consumer's default spot.\n\t\t\tconst { x, y } = anchor.isPrecise ? anchor : impreciseShapeAnchor\n\t\t\treturn { x: bounds.minX + x * bounds.w, y: bounds.minY + y * bounds.h }\n\t\t}\n\t\tcase 'text-range': {\n\t\t\tconst bounds = editor.getShapePageBounds(anchor.shapeId as TLShapeId)\n\t\t\tif (!bounds) return null\n\t\t\treturn { x: bounds.maxX, y: bounds.minY }\n\t\t}\n\t\tcase 'point':\n\t\t\treturn { x: anchor.x, y: anchor.y }\n\t\tcase 'region':\n\t\t\treturn regionPinPoint(anchor, getRegionCommentOptions(editor).pinCorner)\n\t\tcase 'page':\n\t\t\treturn null\n\t}\n}\n\n/**\n * A shape anchor for a page point. `x`/`y` are the point's normalized (0\u20131) offset within the\n * shape's page bounds, remembered either way. When `precise` (Alt held) the pin sits at exactly\n * `x`/`y`; otherwise it sits at the consumer's imprecise default (top-right out of the box).\n * @public\n */\nexport function shapeAnchorAt(\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\tpage: { x: number; y: number },\n\tprecise: boolean\n): TLCommentAnchor {\n\tconst bounds = editor.getShapePageBounds(shapeId)\n\tif (!bounds || bounds.w === 0 || bounds.h === 0) {\n\t\treturn { type: 'shape', shapeId, x: 0.5, y: 0.5, isPrecise: precise }\n\t}\n\treturn {\n\t\ttype: 'shape',\n\t\tshapeId,\n\t\tx: (page.x - bounds.minX) / bounds.w,\n\t\ty: (page.y - bounds.minY) / bounds.h,\n\t\tisPrecise: precise,\n\t}\n}\n\n/** Open a thread and bring it into view \u2014 switch to its page if needed, then center its pin. @public */\nexport function focusThread(\n\teditor: Editor,\n\tthread: TLCommentThread,\n\timpreciseShapeAnchor?: { x: number; y: number }\n): void {\n\tif (thread.pageId !== editor.getCurrentPageId()) {\n\t\teditor.setCurrentPage(thread.pageId as any)\n\t}\n\topenThreadId.set(editor, thread.id)\n\tconst point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)\n\tif (point) editor.centerOnPoint(point, { animation: { duration: 200 } })\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAAwC;AACxC,mBAA6B;AAGtB,MAAM,iCAAiC,EAAE,GAAG,GAAG,GAAG,EAAE;AAKpD,MAAM,oBAA6B,EAAE,GAAG,GAAG,GAAG,EAAE;AAGhD,SAAS,eAAe,QAAkB,SAAkB,mBAA4B;AAC9F,SAAO;AAAA,IACN,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO;AAAA,IAChC,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO;AAAA,EACjC;AACD;AAQO,SAAS,gBACf,QACA,QACA,uBAAiD,gCACf;AAClC,UAAQ,OAAO,MAAM;AAAA,IACpB,KAAK,SAAS;AACb,YAAM,SAAS,OAAO,mBAAmB,OAAO,OAAoB;AACpE,UAAI,CAAC,OAAQ,QAAO;AAEpB,YAAM,EAAE,GAAG,EAAE,IAAI,OAAO,YAAY,SAAS;AAC7C,aAAO,EAAE,GAAG,OAAO,OAAO,IAAI,OAAO,GAAG,GAAG,OAAO,OAAO,IAAI,OAAO,EAAE;AAAA,IACvE;AAAA,IACA,KAAK,cAAc;AAClB,YAAM,SAAS,OAAO,mBAAmB,OAAO,OAAoB;AACpE,UAAI,CAAC,OAAQ,QAAO;AACpB,aAAO,EAAE,GAAG,OAAO,MAAM,GAAG,OAAO,KAAK;AAAA,IACzC;AAAA,IACA,KAAK;AACJ,aAAO,EAAE,GAAG,OAAO,GAAG,GAAG,OAAO,EAAE;AAAA,IACnC,KAAK;AACJ,aAAO,eAAe,YAAQ,+CAAwB,MAAM,EAAE,SAAS;AAAA,IACxE,KAAK;AACJ,aAAO;AAAA,EACT;AACD;AAQO,SAAS,cACf,QACA,SACA,MACA,SACkB;AAClB,QAAM,SAAS,OAAO,mBAAmB,OAAO;AAChD,MAAI,CAAC,UAAU,OAAO,MAAM,KAAK,OAAO,MAAM,GAAG;AAChD,WAAO,EAAE,MAAM,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK,WAAW,QAAQ;AAAA,EACrE;AACA,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA,IAAI,KAAK,IAAI,OAAO,QAAQ,OAAO;AAAA,IACnC,IAAI,KAAK,IAAI,OAAO,QAAQ,OAAO;AAAA,IACnC,WAAW;AAAA,EACZ;AACD;AAGO,SAAS,YACf,QACA,QACA,sBACO;AACP,MAAI,OAAO,WAAW,OAAO,iBAAiB,GAAG;AAChD,WAAO,eAAe,OAAO,MAAa;AAAA,EAC3C;AACA,4BAAa,IAAI,QAAQ,OAAO,EAAE;AAClC,QAAM,QAAQ,gBAAgB,QAAQ,OAAO,QAAQ,oBAAoB;AACzE,MAAI,MAAO,QAAO,cAAc,OAAO,EAAE,WAAW,EAAE,UAAU,IAAI,EAAE,CAAC;AACxE;",
+  "sourcesContent": ["import {\n\tBoxModel,\n\tEditor,\n\tMat,\n\tTLCommentAnchor,\n\tTLCommentThread,\n\tTLShape,\n\tTLShapeId,\n\tVec,\n\tVecLike,\n} from 'tldraw'\nimport { getCommentingOptions } from './options'\nimport { commentsSidebarOpen, openThreadId } from './state'\nimport { POPOVER_OFFSET } from './thread-view'\n\n/** How far an imprecise shape pin steps inside the shape from its anchor spot, in screen px \u2014\n *  most of the marker sits within the shape, with a small overhang past the corner. */\nexport const IMPRECISE_PIN_INSET_PX = 20\n\n/** Screen-pixel margin by which the viewport is inflated when culling canvas markers (thread pins\n *  and cluster badges), so a marker just off-screen is already mounted when a pan brings it in. */\nconst MARKER_CULL_MARGIN_PX = 120\n\n/**\n * Whether a viewport-space point sits within the viewport inflated by\n * {@link MARKER_CULL_MARGIN_PX}. The cull test for screen-fixed markers: off-screen markers\n * return null from their position signal and unmount instead of tracking every camera frame.\n * @internal\n */\nexport function isInInflatedViewport(editor: Editor, point: VecLike): boolean {\n\tconst viewport = editor.getViewportScreenBounds()\n\tconst margin = MARKER_CULL_MARGIN_PX\n\treturn (\n\t\tpoint.x >= -margin &&\n\t\tpoint.y >= -margin &&\n\t\tpoint.x <= viewport.w + margin &&\n\t\tpoint.y <= viewport.h + margin\n\t)\n}\n\n/**\n * Whether any part of a page-space box overlaps the viewport inflated by\n * {@link MARKER_CULL_MARGIN_PX}. The cull test for region-anchored threads, whose dashed box can\n * be on screen while the pin corner itself is not.\n * @internal\n */\nexport function isBoxInInflatedViewport(editor: Editor, box: BoxModel): boolean {\n\tconst viewport = editor.getViewportScreenBounds()\n\tconst margin = MARKER_CULL_MARGIN_PX\n\t// Zoom is positive, so the page box's corners keep their order through the transform.\n\tconst min = editor.pageToViewport({ x: box.x, y: box.y })\n\tconst max = editor.pageToViewport({ x: box.x + box.w, y: box.y + box.h })\n\treturn (\n\t\tmax.x >= -margin &&\n\t\tmax.y >= -margin &&\n\t\tmin.x <= viewport.w + margin &&\n\t\tmin.y <= viewport.h + margin\n\t)\n}\n\n/** Imprecise shape pins tuck inside the shape rather than hanging off its edge: the marker\n *  extends up-right of its anchor point, so step it toward the shape's centre. Screen px \u2014 the\n *  pin is screen-fixed while the shape scales with zoom. Null for anchors that need no inset. */\nexport function impreciseShapePinInset(\n\teditor: Editor,\n\tanchor: TLCommentThread['anchor']\n): { x: number; y: number } | null {\n\tif (anchor.type !== 'shape' || anchor.isPrecise) return null\n\tconst spot = getCommentingOptions(editor).impreciseShapeAnchor\n\tconst inset = {\n\t\tx: Math.sign(0.5 - spot.x) * IMPRECISE_PIN_INSET_PX,\n\t\ty: Math.sign(0.5 - spot.y) * IMPRECISE_PIN_INSET_PX,\n\t}\n\t// The spot is a corner of the shape's own bounds, so which way \"toward the centre\" points turns\n\t// with the shape: without this a rotated shape's pin would step out of the shape, not into it.\n\tconst rotation = editor.getShapePageTransform(anchor.shapeId as TLShapeId)?.rotation() ?? 0\n\treturn rotation === 0 ? inset : Vec.Rot(inset, rotation)\n}\n\n/** The corner a region's pin and composer sit on, as a normalized 0\u20131 offset (bottom-right). Pin\n *  position, composer placement, region move, and which corner has no resize handle all derive\n *  from it. */\nexport const REGION_PIN_CORNER: VecLike = { x: 1, y: 1 }\n\n/** A region anchor's pin corner: the corner its creating drag released on, when recorded, else\n *  {@link REGION_PIN_CORNER}. @internal */\nexport function regionAnchorPinCorner(\n\tanchor: Extract<TLCommentAnchor, { type: 'region' }>\n): VecLike {\n\tif (anchor.pinX !== undefined && anchor.pinY !== undefined) {\n\t\treturn { x: anchor.pinX, y: anchor.pinY }\n\t}\n\treturn REGION_PIN_CORNER\n}\n\n/** The page point of a region's pin corner. */\nexport function regionPinPoint(region: BoxModel, corner: VecLike = REGION_PIN_CORNER): VecLike {\n\treturn {\n\t\tx: region.x + corner.x * region.w,\n\t\ty: region.y + corner.y * region.h,\n\t}\n}\n\n/**\n * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. Imprecise shape\n * anchors use {@link CommentingOptions.impreciseShapeAnchor} rather than the stored `x`/`y`.\n *\n * A shape anchor's `x`/`y` are normalized within the shape's bounds and resolved through its page\n * transform, so the pin rides rotation instead of being left behind in the bounding box.\n * @public\n */\nexport function anchorPagePoint(\n\teditor: Editor,\n\tanchor: TLCommentAnchor\n): { x: number; y: number } | null {\n\tswitch (anchor.type) {\n\t\tcase 'shape': {\n\t\t\tconst shape = editor.getShape(anchor.shapeId as TLShapeId)\n\t\t\tif (!shape) return null\n\t\t\tconst transform = editor.getShapePageTransform(shape)\n\t\t\tif (!transform) return null\n\t\t\tconst { point, size } = editor.getShapeGeometry(shape).bounds\n\t\t\t// Precise pins sit at their stored x/y; imprecise ones at the editor's configured spot.\n\t\t\tconst spot = anchor.isPrecise ? anchor : getCommentingOptions(editor).impreciseShapeAnchor\n\t\t\treturn Mat.applyToPoint(transform, Vec.Add(point, Vec.MulV(spot, size)))\n\t\t}\n\t\tcase 'point':\n\t\t\treturn { x: anchor.x, y: anchor.y }\n\t\tcase 'region':\n\t\t\treturn regionPinPoint(anchor, regionAnchorPinCorner(anchor))\n\t\tcase 'page':\n\t\t\treturn null\n\t}\n}\n\n/**\n * The shape a comment placed at a page point should anchor to, or undefined for empty canvas.\n *\n * Uses the editor's hit-test margin, the same slack select and hover use \u2014 without it, open-path\n * shapes (arrows, lines, draw strokes) are unhittable in practice.\n *\n * `hitFrameInside` lets a click inside a frame's body anchor to the frame, which it otherwise\n * wouldn't (the select-tool convention hits only the edge/label). A child shape under the pointer\n * still wins, so only a frame's empty interior anchors the frame.\n *\n * @internal\n */\nexport function commentTargetShapeAt(editor: Editor, page: VecLike): TLShape | undefined {\n\treturn editor.getShapeAtPoint(page, {\n\t\thitInside: true,\n\t\thitFrameInside: true,\n\t\tmargin: editor.getHitTestMargin(),\n\t})\n}\n\n/**\n * A shape anchor for a page point. `x`/`y` are the point's normalized (0\u20131) offset within the\n * shape's own bounds, taken in the shape's own space, so a pin on a rotated shape records the spot\n * it was dropped on. Remembered either way: when `precise` the pin sits at exactly `x`/`y`,\n * otherwise at the consumer's imprecise default.\n * @public\n */\nexport function shapeAnchorAt(\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\tpage: { x: number; y: number },\n\tprecise: boolean\n): TLCommentAnchor {\n\tconst shape = editor.getShape(shapeId)\n\tconst bounds = shape && editor.getShapeGeometry(shape).bounds\n\tif (!shape || !bounds || bounds.w === 0 || bounds.h === 0) {\n\t\treturn { type: 'shape', shapeId, x: 0.5, y: 0.5, isPrecise: precise }\n\t}\n\tconst local = editor.getPointInShapeSpace(shape, page)\n\treturn {\n\t\ttype: 'shape',\n\t\tshapeId,\n\t\tx: (local.x - bounds.minX) / bounds.w,\n\t\ty: (local.y - bounds.minY) / bounds.h,\n\t\tisPrecise: precise,\n\t}\n}\n\n/** Open a thread and bring it into view \u2014 switch to its page if needed, then center its pin. @public */\nexport function focusThread(editor: Editor, thread: TLCommentThread): void {\n\tif (thread.pageId !== editor.getCurrentPageId()) {\n\t\teditor.setCurrentPage(thread.pageId as any)\n\t}\n\topenThreadId.set(editor, thread.id)\n\tconst point = anchorPagePoint(editor, thread.anchor)\n\tif (!point) return\n\tconst offset = commentCenterScreenOffset(editor) / editor.getZoomLevel()\n\teditor.centerOnPoint({ x: point.x + offset, y: point.y }, { animation: { duration: 200 } })\n}\n\n/** The left inset a nudged pin never crosses, and the gap kept between thread UI and sidebar. */\nconst CENTER_MARGIN_PX = 8\n\n/** How far the open thread UI reaches right of its pin, in screen px: the popover's offset plus\n *  the thread panel's fixed width (300px, `.tlui-cmt-thread`). */\nconst THREAD_UI_EXTENT_PX = POPOVER_OFFSET.thread.x + 300\n\n/**\n * How far right of a centered-on pin the true viewport center should sit, in screen px. While the\n * comments sidebar covers the viewport's right edge, dead-centering a pin would put its thread\n * popover under the sidebar \u2014 so centering aims at the middle of the uncovered area instead, never\n * past the viewport's left edge. Zero when the sidebar is closed or not on screen.\n * @internal\n */\nexport function commentCenterScreenOffset(editor: Editor): number {\n\tif (!commentsSidebarOpen.get(editor)) return 0\n\tconst sidebar = editor.getContainer().querySelector('.tlui-cmt-canvas-sidebar')\n\tif (!sidebar) return 0\n\tconst viewport = editor.getViewportScreenBounds()\n\t// Viewport screen bounds are the container's client rect, so this is container-local.\n\tconst sidebarLeft = sidebar.getBoundingClientRect().left - viewport.x\n\tif (sidebarLeft >= viewport.w) return 0\n\t// Aim the pin at the middle of the uncovered area, nudged left until the thread UI clears the\n\t// sidebar \u2014 but never past the left edge (the edge wins when there's no room for both).\n\tconst pinX = Math.max(\n\t\tMath.min(sidebarLeft / 2, sidebarLeft - CENTER_MARGIN_PX - THREAD_UI_EXTENT_PX),\n\t\tCENTER_MARGIN_PX\n\t)\n\treturn viewport.w / 2 - pinX\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/canvas/thread-view.js

@@ -0,0 +1,450 @@
+"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 thread_view_exports = {};
+__export(thread_view_exports, {
+  POPOVER_OFFSET: () => POPOVER_OFFSET,
+  ThreadPopover: () => ThreadPopover,
+  ThreadView: () => ThreadView,
+  absoluteThreadLink: () => absoluteThreadLink,
+  toCardProps: () => toCardProps,
+  useResolveName: () => useResolveName
+});
+module.exports = __toCommonJS(thread_view_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+var import_comment_card = require("../ui/comment-card");
+var import_comment_composer = require("../ui/comment-composer");
+var import_comment_extensions = require("../ui/comment-extensions");
+var import_comment_thread = require("../ui/comment-thread");
+var import_comment_body = require("./comment-body");
+var import_comment_drafts = require("./comment-drafts");
+var import_comment_mutations = require("./comment-mutations");
+var import_comment_reactions = require("./comment-reactions");
+var import_comment_render = require("./comment-render");
+var import_hooks = require("./hooks");
+var import_mobile_placement = require("./mobile-placement");
+var import_options = require("./options");
+var import_state = require("./state");
+const stop = (e) => e.stopPropagation();
+function useResolveName(resolveAuthor) {
+  return (0, import_react.useCallback)((id) => resolveAuthor(id)?.name, [resolveAuthor]);
+}
+const LINK_COPIED_MS = 2e3;
+function absoluteThreadLink(href, base = window.location.href) {
+  try {
+    return new URL(href, base).toString();
+  } catch {
+    return href;
+  }
+}
+function useCopyLink(href) {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!copied) return;
+    const timeout = window.setTimeout(() => setCopied(false), LINK_COPIED_MS);
+    return () => window.clearTimeout(timeout);
+  }, [copied]);
+  const copy = (0, import_react.useCallback)(() => {
+    if (href === void 0) return;
+    navigator.clipboard?.writeText(absoluteThreadLink(href)).then(
+      () => setCopied(true),
+      () => setCopied(false)
+    );
+  }, [href]);
+  return [copied, copy];
+}
+function toCardProps(comment, props, components, resolveName) {
+  const Body = components.CommentBody;
+  const body = Body ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Body, { comment }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_body.CommentBody, { richText: comment.body, resolveName });
+  return {
+    author: props.resolveAuthor(comment.authorId) ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR,
+    body,
+    date: new Date(comment.createdAt).toISOString(),
+    you: comment.authorId === props.currentUserId,
+    edited: comment.editedAt != null
+  };
+}
+const PIN_SIZE = 28;
+const MARKER_SIZE = PIN_SIZE;
+const CARD_TOP_Y = -28;
+const PREVIEW_GAP = 6;
+const POPOVER_OFFSET = {
+  thread: { x: PIN_SIZE + PREVIEW_GAP, y: CARD_TOP_Y - PIN_SIZE / 2 },
+  list: { x: MARKER_SIZE + PREVIEW_GAP, y: CARD_TOP_Y - MARKER_SIZE / 2 }
+};
+function ThreadPopover({
+  base,
+  children
+}) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_tldraw.usePassThroughWheelEvents)(ref);
+  const isMobile = (0, import_mobile_placement.useIsMobileCommenting)();
+  const placed = (0, import_mobile_placement.useMobilePlacement)(ref, base, isMobile);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.EditorPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: "tlui-cmt-canvas-popover",
+      style: { left: placed.left, top: placed.top },
+      onPointerDown: stop,
+      onContextMenu: stop,
+      children
+    }
+  ) });
+}
+const ThreadView = (0, import_react.memo)(function ThreadView2({
+  editor,
+  thread,
+  ...props
+}) {
+  const {
+    currentUserId,
+    resolveAuthor,
+    onPostComment,
+    isCommentUnread,
+    onCommentsRead,
+    getMentionSuggestions,
+    renderMentionSuggestion,
+    getThreadHref
+  } = props;
+  const options = (0, import_options.useCommentingOptions)();
+  const comments = (0, import_hooks.useThreadComments)(editor, thread.id);
+  const msg = (0, import_tldraw.useTranslation)();
+  const resolveName = useResolveName(resolveAuthor);
+  const cards = (0, import_react.useMemo)(
+    () => comments.map(
+      (c) => toCardProps(c, { currentUserId, resolveAuthor }, options.components, resolveName)
+    ),
+    [comments, currentUserId, resolveAuthor, options.components, resolveName]
+  );
+  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
+  const canComment = (0, import_options.useCanComment)(currentUserId);
+  const commentPermissions = (0, import_tldraw.useValue)(
+    "comment permissions",
+    () => new Map(
+      comments.map((comment) => [
+        comment.id,
+        {
+          edit: (0, import_options.getCanModifyComment)(editor, currentUserId, { action: "edit-comment", comment }),
+          delete: (0, import_options.getCanModifyComment)(editor, currentUserId, {
+            action: "delete-comment",
+            comment
+          })
+        }
+      ])
+    ),
+    [editor, currentUserId, comments]
+  );
+  const canModifyThread = (0, import_options.useCanModifyComment)(currentUserId, { action: "delete-thread", thread });
+  const canDeleteThread = canComment && canModifyThread;
+  const ComposerFallback = options.components.ComposerFallback;
+  const [reply, setReply] = (0, import_react.useState)(
+    () => (0, import_comment_drafts.getCommentDraft)((0, import_comment_drafts.replyDraftSlot)(thread.id)) ?? import_comment_extensions.EMPTY_COMMENT
+  );
+  const [editingId, setEditingId] = (0, import_react.useState)(null);
+  const [editText, setEditText] = (0, import_react.useState)(import_comment_extensions.EMPTY_COMMENT);
+  const canReply = canComment && !thread.resolved;
+  const container = (0, import_tldraw.useContainer)();
+  const editReturnFocus = (0, import_react.useRef)(null);
+  const [focusReply, setFocusReply] = (0, import_react.useState)(false);
+  const tabTaken = (0, import_react.useRef)(false);
+  const swallowTabUp = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!canReply) {
+      setFocusReply(false);
+      tabTaken.current = false;
+      return;
+    }
+    const doc = container.ownerDocument;
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab" || e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.defaultPrevented || tabTaken.current) return;
+      if (e.target !== container && e.target !== doc.body) return;
+      tabTaken.current = true;
+      swallowTabUp.current = true;
+      setFocusReply(true);
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const onKeyUp = (e) => {
+      if (e.key !== "Tab" || !swallowTabUp.current) return;
+      swallowTabUp.current = false;
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    doc.addEventListener("keydown", onKeyDown, true);
+    doc.addEventListener("keyup", onKeyUp, true);
+    return () => {
+      doc.removeEventListener("keydown", onKeyDown, true);
+      doc.removeEventListener("keyup", onKeyUp, true);
+    };
+  }, [canReply, container]);
+  (0, import_react.useEffect)(() => {
+    if (editingId !== null) return;
+    const resolve = editReturnFocus.current;
+    editReturnFocus.current = null;
+    resolve?.()?.focus();
+  }, [editingId]);
+  (0, import_react.useEffect)(() => {
+    if (!isCommentUnread || !onCommentsRead) return;
+    const unreadIds = comments.filter((comment) => isCommentUnread(comment.id)).map((c) => c.id);
+    if (unreadIds.length > 0) {
+      onCommentsRead(unreadIds);
+    }
+  }, [comments, isCommentUnread, onCommentsRead]);
+  const postReply = () => {
+    if ((0, import_comment_extensions.isCommentEmpty)(reply) || !currentUserId) return;
+    const comment = (0, import_comment_mutations.commitCommentMutation)(editor, ({ put }) => {
+      const comment2 = (0, import_tldraw.createComment)({
+        threadId: thread.id,
+        pageId: thread.pageId,
+        authorId: currentUserId,
+        body: reply
+      });
+      put([comment2]);
+      return comment2;
+    });
+    setReply(import_comment_extensions.EMPTY_COMMENT);
+    (0, import_comment_drafts.clearCommentDraft)((0, import_comment_drafts.replyDraftSlot)(thread.id));
+    onPostComment?.(comment);
+  };
+  const toggleResolve = () => {
+    if (!currentUserId) return;
+    if (thread.resolved) (0, import_comment_mutations.reopenThread)(editor, thread);
+    else (0, import_comment_mutations.resolveThread)(editor, thread, currentUserId);
+  };
+  const removeThread = () => {
+    (0, import_comment_mutations.deleteThread)(editor, thread);
+  };
+  const ThreadActions = options.components.ThreadActions;
+  const threadHref = getThreadHref?.(thread.id);
+  const [linkCopied, copyThreadLink] = useCopyLink(threadHref);
+  const startEdit = (comment, { fromMoreMenu = false } = {}) => {
+    const active = container.ownerDocument.activeElement;
+    editReturnFocus.current = fromMoreMenu ? () => container.querySelector(`[data-cmt-more-for="${comment.id}"]`) : active instanceof HTMLElement && active !== container && active !== document.body ? () => active.isConnected ? active : null : null;
+    setEditingId(comment.id);
+    setEditText(comment.body);
+  };
+  const saveEdit = () => {
+    const comment = comments.find((c) => c.id === editingId);
+    if (!comment || (0, import_comment_extensions.isCommentEmpty)(editText)) return;
+    (0, import_comment_mutations.editComment)(editor, comment, editText);
+    setEditingId(null);
+  };
+  const renderComment = (card, index) => {
+    const comment = comments[index];
+    const permissions = commentPermissions.get(comment.id);
+    if (editingId === comment.id) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "tlui-cmt-editing",
+          onKeyDown: (e) => {
+            if (e.key === "Escape") {
+              setEditingId(null);
+              e.stopPropagation();
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_comment_composer.CommentComposer,
+            {
+              author: card.author,
+              placeholder: msg("comments.edit-placeholder"),
+              value: editText,
+              onChange: setEditText,
+              onSubmit: saveEdit,
+              sendLabel: msg("comments.save"),
+              disabled: (0, import_comment_extensions.isCommentEmpty)(editText),
+              getMentionSuggestions,
+              renderMentionSuggestion,
+              autoFocus: true
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_comment_card.CommentCard,
+      {
+        ...card,
+        footer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_comment_reactions.CommentReactions,
+          {
+            comment,
+            currentUserId: canComment ? currentUserId : null,
+            resolveName
+          }
+        ),
+        actions: canComment && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          (permissions?.edit || permissions?.delete) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuRoot, { id: `comment-actions-${comment.id}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_tldraw.TldrawUiButton,
+              {
+                type: "icon",
+                tooltip: msg("comments.more-options"),
+                title: msg("comments.more-options"),
+                className: "tlui-cmt-thread__action",
+                "data-cmt-more-for": comment.id,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_tldraw.TldrawUiIcon,
+                  {
+                    icon: "dots-vertical",
+                    label: msg("comments.more-options"),
+                    small: true
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_tldraw.TldrawUiDropdownMenuContent,
+              {
+                className: "tlui-cmt-menu",
+                side: "bottom",
+                align: "start",
+                alignOffset: 0,
+                sideOffset: 4,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuGroup, { children: [
+                  permissions?.edit && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "tlui-cmt-menu-item",
+                      onClick: () => startEdit(comment, { fromMoreMenu: true }),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg("comments.edit") })
+                    }
+                  ) }),
+                  permissions?.delete && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "tlui-cmt-menu-item tlui-cmt-menu-item--danger",
+                      onClick: () => (0, import_comment_mutations.deleteComment)(editor, comment),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg("action.delete") })
+                    }
+                  ) })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_reactions.CommentReactionPicker, { comment, currentUserId })
+        ] })
+      }
+    );
+  };
+  const resolveLabel = msg(thread.resolved ? "comments.reopen" : "comments.resolve");
+  const headerActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    ThreadActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadActions, { thread, comments }),
+    (threadHref !== void 0 || canDeleteThread) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuRoot, { id: `comment-thread-actions-${thread.id}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tldraw.TldrawUiButton,
+        {
+          type: "icon",
+          tooltip: msg("comments.more-options"),
+          title: msg("comments.more-options"),
+          className: "tlui-cmt-thread__action",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "dots-vertical", label: msg("comments.more-options"), small: true })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tldraw.TldrawUiDropdownMenuContent,
+        {
+          className: "tlui-cmt-menu",
+          side: "bottom",
+          align: "start",
+          alignOffset: 0,
+          sideOffset: 4,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuGroup, { children: [
+            threadHref !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuItem, { noClose: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "tlui-cmt-menu-item", onClick: copyThreadLink, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg(linkCopied ? "comments.link-copied" : "comments.copy-link") }) }) }),
+            canDeleteThread && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "tlui-cmt-menu-item tlui-cmt-menu-item--danger",
+                onClick: removeThread,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg("comments.delete") })
+              }
+            ) })
+          ] })
+        }
+      )
+    ] }),
+    canComment && currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tldraw.TldrawUiButton,
+      {
+        type: "icon",
+        tooltip: resolveLabel,
+        title: resolveLabel,
+        className: "tlui-cmt-thread__action",
+        onClick: toggleResolve,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "check", label: resolveLabel, small: true })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tldraw.TldrawUiButton,
+      {
+        type: "icon",
+        tooltip: msg("comments.dismiss"),
+        title: msg("comments.dismiss"),
+        className: "tlui-cmt-thread__action",
+        onClick: () => import_state.openThreadId.set(editor, null),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "cross-2", label: msg("comments.dismiss"), small: true })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_comment_thread.CommentThread,
+    {
+      header: msg("comments.thread-title"),
+      headerActions,
+      renderComment,
+      comments: cards,
+      resolvedBanner: thread.resolved ? msg("comments.resolved-by").replace(
+        "{name}",
+        resolveAuthor(thread.resolved.by)?.name ?? import_comment_render.UNKNOWN_AUTHOR
+      ) : void 0,
+      composer: canReply ? {
+        author: me ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR,
+        placeholder: msg("comments.reply-placeholder"),
+        sendLabel: msg("comments.send"),
+        value: reply,
+        onChange: (value) => {
+          setReply(value);
+          (0, import_comment_drafts.saveCommentDraft)((0, import_comment_drafts.replyDraftSlot)(thread.id), value);
+        },
+        onSubmit: postReply,
+        // Up in the empty reply box edits the comment directly above it, chat-style —
+        // only when you're allowed to edit it (the same gate as the Edit link).
+        onArrowUpWhenEmpty: () => {
+          const last = comments[comments.length - 1];
+          if (last && commentPermissions.get(last.id)?.edit) startEdit(last);
+        },
+        // No user, no author for the record — dead send button.
+        disabled: (0, import_comment_extensions.isCommentEmpty)(reply) || !currentUserId,
+        getMentionSuggestions,
+        renderMentionSuggestion,
+        // Reuses the composer's own focus path, so the caret lands at the end of a
+        // restored draft rather than in front of it.
+        autoFocus: focusReply
+      } : void 0,
+      footer: !canComment && !thread.resolved && ComposerFallback ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposerFallback, { context: "thread" }) : void 0
+    }
+  );
+});
+//# sourceMappingURL=thread-view.js.map