@tldraw/editor 4.3.0 → 4.4.0-canary.0791272556f5

package/dist-cjs/lib/components/LiveCollaborators.js

@@ -28,6 +28,7 @@ var import_useEditor = require("../hooks/useEditor");
 var import_useEditorComponents = require("../hooks/useEditorComponents");
 var import_usePeerIds = require("../hooks/usePeerIds");
 var import_usePresence = require("../hooks/usePresence");
+var import_collaboratorState = require("../utils/collaboratorState");
 const LiveCollaborators = (0, import_state_react.track)(function Collaborators() {
   const peerIds = (0, import_usePeerIds.usePeerIds)();
   return peerIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollaboratorGuard, { collaboratorId: id }, id));
@@ -41,24 +42,8 @@ const CollaboratorGuard = (0, import_state_react.track)(function CollaboratorGua
   if (!(presence && presence.currentPageId === editor.getCurrentPageId())) {
     return null;
   }
-  switch (collaboratorState) {
-    case "inactive": {
-      const { followingUserId, highlightedUserIds } = editor.getInstanceState();
-      if (!(followingUserId === presence.userId || highlightedUserIds.includes(presence.userId))) {
-        return null;
-      }
-      break;
-    }
-    case "idle": {
-      const { highlightedUserIds } = editor.getInstanceState();
-      if (presence.followingUserId === editor.user.getId() && !(presence.chatMessage || highlightedUserIds.includes(presence.userId))) {
-        return null;
-      }
-      break;
-    }
-    case "active": {
-      break;
-    }
+  if (!(0, import_collaboratorState.shouldShowCollaborator)(editor, presence, collaboratorState)) {
+    return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collaborator, { latestPresence: presence });
 });
@@ -126,7 +111,13 @@ const Collaborator = (0, import_state_react.track)(function Collaborator2({
       },
       userId + "_scribble_" + scribble.id
     )) }) : null,
-    CollaboratorShapeIndicator && selectedShapeIds.filter((id) => !editor.isShapeHidden(id)).map((shapeId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CollaboratorShapeIndicator && selectedShapeIds.filter((id) => {
+      if (editor.isShapeHidden(id)) return false;
+      const shape = editor.getShape(id);
+      if (!shape) return false;
+      const util = editor.getShapeUtil(shape);
+      return util.useLegacyIndicator();
+    }).map((shapeId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CollaboratorShapeIndicator,
       {
         className: "tl-collaborator__shape-indicator",
@@ -139,17 +130,16 @@ const Collaborator = (0, import_state_react.track)(function Collaborator2({
     ))
   ] });
 });
-function getStateFromElapsedTime(editor, elapsed) {
-  return elapsed > editor.options.collaboratorInactiveTimeoutMs ? "inactive" : elapsed > editor.options.collaboratorIdleTimeoutMs ? "idle" : "active";
-}
 function useCollaboratorState(editor, latestPresence) {
   const rLastActivityTimestamp = (0, import_react.useRef)(latestPresence?.lastActivityTimestamp ?? -1);
   const [state, setState] = (0, import_react.useState)(
-    () => getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
+    () => (0, import_collaboratorState.getCollaboratorStateFromElapsedTime)(editor, Date.now() - rLastActivityTimestamp.current)
   );
   (0, import_react.useEffect)(() => {
     const interval = editor.timers.setInterval(() => {
-      setState(getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current));
+      setState(
+        (0, import_collaboratorState.getCollaboratorStateFromElapsedTime)(editor, Date.now() - rLastActivityTimestamp.current)
+      );
     }, editor.options.collaboratorCheckIntervalMs);
     return () => clearInterval(interval);
   }, [editor]);

package/dist-cjs/lib/components/LiveCollaborators.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/LiveCollaborators.tsx"],
-  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useEffect, useRef, useState } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { usePeerIds } from '../hooks/usePeerIds'\nimport { usePresence } from '../hooks/usePresence'\n\nexport const LiveCollaborators = track(function Collaborators() {\n\tconst peerIds = usePeerIds()\n\treturn peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)\n})\n\nconst CollaboratorGuard = track(function CollaboratorGuard({\n\tcollaboratorId,\n}: {\n\tcollaboratorId: string\n}) {\n\tconst editor = useEditor()\n\tconst presence = usePresence(collaboratorId)\n\tconst collaboratorState = useCollaboratorState(editor, presence)\n\n\tif (!(presence && presence.currentPageId === editor.getCurrentPageId())) {\n\t\t// No need to render if we don't have a presence or if they're on a different page\n\t\treturn null\n\t}\n\n\tswitch (collaboratorState) {\n\t\tcase 'inactive': {\n\t\t\tconst { followingUserId, highlightedUserIds } = editor.getInstanceState()\n\t\t\t// If they're inactive and unless we're following them or they're highlighted, hide them\n\t\t\tif (!(followingUserId === presence.userId || highlightedUserIds.includes(presence.userId))) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tbreak\n\t\t}\n\t\tcase 'idle': {\n\t\t\tconst { highlightedUserIds } = editor.getInstanceState()\n\t\t\t// If they're idle and following us and unless they have a chat message or are highlighted, hide them\n\t\t\tif (\n\t\t\t\tpresence.followingUserId === editor.user.getId() &&\n\t\t\t\t!(presence.chatMessage || highlightedUserIds.includes(presence.userId))\n\t\t\t) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tbreak\n\t\t}\n\t\tcase 'active': {\n\t\t\t// If they're active, show them\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn <Collaborator latestPresence={presence} />\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\n\tconst {\n\t\tCollaboratorBrush,\n\t\tCollaboratorScribble,\n\t\tCollaboratorCursor,\n\t\tCollaboratorHint,\n\t\tCollaboratorShapeIndicator,\n\t} = useEditorComponents()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tconst { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =\n\t\tlatestPresence\n\n\tif (!cursor) return null\n\n\t// Add a little padding to the top-left of the viewport\n\t// so that the cursor doesn't get cut off\n\tconst isCursorInViewport = !(\n\t\tcursor.x < viewportPageBounds.minX - 12 / zoomLevel ||\n\t\tcursor.y < viewportPageBounds.minY - 16 / zoomLevel ||\n\t\tcursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||\n\t\tcursor.y > viewportPageBounds.maxY - 16 / zoomLevel\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{brush && CollaboratorBrush ? (\n\t\t\t\t<CollaboratorBrush\n\t\t\t\t\tclassName=\"tl-collaborator__brush\"\n\t\t\t\t\tkey={userId + '_brush'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tbrush={brush}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\topacity={0.1}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{isCursorInViewport && CollaboratorCursor ? (\n\t\t\t\t<CollaboratorCursor\n\t\t\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\t\t\tkey={userId + '_cursor'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\t\t\tchatMessage={chatMessage ?? ''}\n\t\t\t\t/>\n\t\t\t) : CollaboratorHint ? (\n\t\t\t\t<CollaboratorHint\n\t\t\t\t\tclassName=\"tl-collaborator__cursor-hint\"\n\t\t\t\t\tkey={userId + '_cursor_hint'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tviewport={viewportPageBounds}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{CollaboratorScribble && scribbles.length ? (\n\t\t\t\t<>\n\t\t\t\t\t{scribbles.map((scribble) => (\n\t\t\t\t\t\t<CollaboratorScribble\n\t\t\t\t\t\t\tkey={userId + '_scribble_' + scribble.id}\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__scribble\"\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tscribble={scribble}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\topacity={scribble.color === 'laser' ? 0.5 : 0.1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t\t{CollaboratorShapeIndicator &&\n\t\t\t\tselectedShapeIds\n\t\t\t\t\t.filter((id) => !editor.isShapeHidden(id))\n\t\t\t\t\t.map((shapeId) => (\n\t\t\t\t\t\t<CollaboratorShapeIndicator\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__shape-indicator\"\n\t\t\t\t\t\t\tkey={userId + '_' + shapeId}\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\topacity={0.5}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t</>\n\t)\n})\n\nfunction getStateFromElapsedTime(editor: Editor, elapsed: number) {\n\treturn elapsed > editor.options.collaboratorInactiveTimeoutMs\n\t\t? 'inactive'\n\t\t: elapsed > editor.options.collaboratorIdleTimeoutMs\n\t\t\t? 'idle'\n\t\t\t: 'active'\n}\n\nfunction useCollaboratorState(editor: Editor, latestPresence: TLInstancePresence | null) {\n\tconst rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)\n\n\tconst [state, setState] = useState<'active' | 'idle' | 'inactive'>(() =>\n\t\tgetStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t)\n\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\tsetState(getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current))\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor])\n\n\tif (latestPresence) {\n\t\t// We can do this on every render, it's free and cheaper than an effect\n\t\t// remember, there can be lots and lots of cursors moving around all the time\n\t\trLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity\n\t}\n\n\treturn state\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAW4B;AAX5B,yBAAsB;AAEtB,mBAA4C;AAE5C,uBAA0B;AAC1B,iCAAoC;AACpC,wBAA2B;AAC3B,yBAA4B;AAErB,MAAM,wBAAoB,0BAAM,SAAS,gBAAgB;AAC/D,QAAM,cAAU,8BAAW;AAC3B,SAAO,QAAQ,IAAI,CAAC,OAAO,4CAAC,qBAA2B,gBAAgB,MAApB,EAAwB,CAAE;AAC9E,CAAC;AAED,MAAM,wBAAoB,0BAAM,SAASA,mBAAkB;AAAA,EAC1D;AACD,GAEG;AACF,QAAM,aAAS,4BAAU;AACzB,QAAM,eAAW,gCAAY,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,QAAQ,QAAQ;AAE/D,MAAI,EAAE,YAAY,SAAS,kBAAkB,OAAO,iBAAiB,IAAI;AAExE,WAAO;AAAA,EACR;AAEA,UAAQ,mBAAmB;AAAA,IAC1B,KAAK,YAAY;AAChB,YAAM,EAAE,iBAAiB,mBAAmB,IAAI,OAAO,iBAAiB;AAExE,UAAI,EAAE,oBAAoB,SAAS,UAAU,mBAAmB,SAAS,SAAS,MAAM,IAAI;AAC3F,eAAO;AAAA,MACR;AACA;AAAA,IACD;AAAA,IACA,KAAK,QAAQ;AACZ,YAAM,EAAE,mBAAmB,IAAI,OAAO,iBAAiB;AAEvD,UACC,SAAS,oBAAoB,OAAO,KAAK,MAAM,KAC/C,EAAE,SAAS,eAAe,mBAAmB,SAAS,SAAS,MAAM,IACpE;AACD,eAAO;AAAA,MACR;AACA;AAAA,IACD;AAAA,IACA,KAAK,UAAU;AAEd;AAAA,IACD;AAAA,EACD;AAEA,SAAO,4CAAC,gBAAa,gBAAgB,UAAU;AAChD,CAAC;AAED,MAAM,mBAAe,0BAAM,SAASC,cAAa;AAAA,EAChD;AACD,GAEG;AACF,QAAM,aAAS,4BAAU;AAEzB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,gDAAoB;AAExB,QAAM,YAAY,OAAO,aAAa;AACtC,QAAM,qBAAqB,OAAO,sBAAsB;AACxD,QAAM,EAAE,QAAQ,aAAa,OAAO,WAAW,kBAAkB,UAAU,QAAQ,MAAM,IACxF;AAED,MAAI,CAAC,OAAQ,QAAO;AAIpB,QAAM,qBAAqB,EAC1B,OAAO,IAAI,mBAAmB,OAAO,KAAK,aAC1C,OAAO,IAAI,mBAAmB,OAAO,KAAK,aAC1C,OAAO,IAAI,mBAAmB,OAAO,KAAK,aAC1C,OAAO,IAAI,mBAAmB,OAAO,KAAK;AAG3C,SACC,4EACE;AAAA,aAAS,oBACT;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QAEV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA;AAAA,MAJJ,SAAS;AAAA,IAKf,IACG;AAAA,IACH,sBAAsB,qBACtB;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QAEV;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,MAAM;AAAA,QACN,MAAM,aAAa,aAAa,WAAW;AAAA,QAC3C,aAAa,eAAe;AAAA;AAAA,MANvB,SAAS;AAAA,IAOf,IACG,mBACH;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QAEV;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,MAAM;AAAA,QACN,UAAU;AAAA;AAAA,MALL,SAAS;AAAA,IAMf,IACG;AAAA,IACH,wBAAwB,UAAU,SAClC,2EACE,oBAAU,IAAI,CAAC,aACf;AAAA,MAAC;AAAA;AAAA,QAEA,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,SAAS,SAAS,UAAU,UAAU,MAAM;AAAA;AAAA,MANvC,SAAS,eAAe,SAAS;AAAA,IAOvC,CACA,GACF,IACG;AAAA,IACH,8BACA,iBACE,OAAO,CAAC,OAAO,CAAC,OAAO,cAAc,EAAE,CAAC,EACxC,IAAI,CAAC,YACL;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QAEV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA;AAAA,MAJJ,SAAS,MAAM;AAAA,IAKrB,CACA;AAAA,KACJ;AAEF,CAAC;AAED,SAAS,wBAAwB,QAAgB,SAAiB;AACjE,SAAO,UAAU,OAAO,QAAQ,gCAC7B,aACA,UAAU,OAAO,QAAQ,4BACxB,SACA;AACL;AAEA,SAAS,qBAAqB,QAAgB,gBAA2C;AACxF,QAAM,6BAAyB,qBAAO,gBAAgB,yBAAyB,EAAE;AAEjF,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IAAyC,MAClE,wBAAwB,QAAQ,KAAK,IAAI,IAAI,uBAAuB,OAAO;AAAA,EAC5E;AAEA,8BAAU,MAAM;AACf,UAAM,WAAW,OAAO,OAAO,YAAY,MAAM;AAChD,eAAS,wBAAwB,QAAQ,KAAK,IAAI,IAAI,uBAAuB,OAAO,CAAC;AAAA,IACtF,GAAG,OAAO,QAAQ,2BAA2B;AAE7C,WAAO,MAAM,cAAc,QAAQ;AAAA,EACpC,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,gBAAgB;AAGnB,2BAAuB,UAAU,eAAe,yBAAyB;AAAA,EAC1E;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useEffect, useRef, useState } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { usePeerIds } from '../hooks/usePeerIds'\nimport { usePresence } from '../hooks/usePresence'\nimport {\n\tCollaboratorState,\n\tgetCollaboratorStateFromElapsedTime,\n\tshouldShowCollaborator,\n} from '../utils/collaboratorState'\n\nexport const LiveCollaborators = track(function Collaborators() {\n\tconst peerIds = usePeerIds()\n\treturn peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)\n})\n\nconst CollaboratorGuard = track(function CollaboratorGuard({\n\tcollaboratorId,\n}: {\n\tcollaboratorId: string\n}) {\n\tconst editor = useEditor()\n\tconst presence = usePresence(collaboratorId)\n\tconst collaboratorState = useCollaboratorState(editor, presence)\n\n\tif (!(presence && presence.currentPageId === editor.getCurrentPageId())) {\n\t\t// No need to render if we don't have a presence or if they're on a different page\n\t\treturn null\n\t}\n\n\tif (!shouldShowCollaborator(editor, presence, collaboratorState)) {\n\t\treturn null\n\t}\n\n\treturn <Collaborator latestPresence={presence} />\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\n\tconst {\n\t\tCollaboratorBrush,\n\t\tCollaboratorScribble,\n\t\tCollaboratorCursor,\n\t\tCollaboratorHint,\n\t\tCollaboratorShapeIndicator,\n\t} = useEditorComponents()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tconst { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =\n\t\tlatestPresence\n\n\tif (!cursor) return null\n\n\t// Add a little padding to the top-left of the viewport\n\t// so that the cursor doesn't get cut off\n\tconst isCursorInViewport = !(\n\t\tcursor.x < viewportPageBounds.minX - 12 / zoomLevel ||\n\t\tcursor.y < viewportPageBounds.minY - 16 / zoomLevel ||\n\t\tcursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||\n\t\tcursor.y > viewportPageBounds.maxY - 16 / zoomLevel\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{brush && CollaboratorBrush ? (\n\t\t\t\t<CollaboratorBrush\n\t\t\t\t\tclassName=\"tl-collaborator__brush\"\n\t\t\t\t\tkey={userId + '_brush'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tbrush={brush}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\topacity={0.1}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{isCursorInViewport && CollaboratorCursor ? (\n\t\t\t\t<CollaboratorCursor\n\t\t\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\t\t\tkey={userId + '_cursor'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\t\t\tchatMessage={chatMessage ?? ''}\n\t\t\t\t/>\n\t\t\t) : CollaboratorHint ? (\n\t\t\t\t<CollaboratorHint\n\t\t\t\t\tclassName=\"tl-collaborator__cursor-hint\"\n\t\t\t\t\tkey={userId + '_cursor_hint'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tviewport={viewportPageBounds}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{CollaboratorScribble && scribbles.length ? (\n\t\t\t\t<>\n\t\t\t\t\t{scribbles.map((scribble) => (\n\t\t\t\t\t\t<CollaboratorScribble\n\t\t\t\t\t\t\tkey={userId + '_scribble_' + scribble.id}\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__scribble\"\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tscribble={scribble}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\topacity={scribble.color === 'laser' ? 0.5 : 0.1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t\t{CollaboratorShapeIndicator &&\n\t\t\t\tselectedShapeIds\n\t\t\t\t\t.filter((id) => {\n\t\t\t\t\t\t// Skip hidden shapes\n\t\t\t\t\t\tif (editor.isShapeHidden(id)) return false\n\t\t\t\t\t\t// Only render SVG indicators for shapes that use legacy indicators\n\t\t\t\t\t\t// Canvas-based indicators are handled by CanvasShapeIndicators\n\t\t\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\t\t\tif (!shape) return false\n\t\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t\t\t})\n\t\t\t\t\t.map((shapeId) => (\n\t\t\t\t\t\t<CollaboratorShapeIndicator\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__shape-indicator\"\n\t\t\t\t\t\t\tkey={userId + '_' + shapeId}\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\topacity={0.5}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t</>\n\t)\n})\n\nfunction useCollaboratorState(\n\teditor: Editor,\n\tlatestPresence: TLInstancePresence | null\n): CollaboratorState {\n\tconst rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)\n\n\tconst [state, setState] = useState<CollaboratorState>(() =>\n\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t)\n\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\tsetState(\n\t\t\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t\t\t)\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor])\n\n\tif (latestPresence) {\n\t\t// We can do this on every render, it's free and cheaper than an effect\n\t\t// remember, there can be lots and lots of cursors moving around all the time\n\t\trLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity\n\t}\n\n\treturn state\n}\n"],
+  "mappings": "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",
   "names": ["CollaboratorGuard", "Collaborator"]
 }

package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js

@@ -0,0 +1,201 @@
+"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 CanvasShapeIndicators_exports = {};
+__export(CanvasShapeIndicators_exports, {
+  CanvasShapeIndicators: () => CanvasShapeIndicators
+});
+module.exports = __toCommonJS(CanvasShapeIndicators_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_state_react = require("@tldraw/state-react");
+var import_store = require("@tldraw/store");
+var import_utils = require("@tldraw/utils");
+var import_react = require("react");
+var import_useEditor = require("../../hooks/useEditor");
+var import_useIsDarkMode = require("../../hooks/useIsDarkMode");
+var import_usePeerIds = require("../../hooks/usePeerIds");
+const indicatorPathCache = (0, import_store.createComputedCache)(
+  "indicatorPath",
+  (editor, shape) => {
+    const util = editor.getShapeUtil(shape);
+    return util.getIndicatorPath(shape);
+  }
+);
+const getIndicatorPath = (editor, shape) => {
+  return indicatorPathCache.get(editor, shape.id);
+};
+function renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds) {
+  if (!renderingShapeIds.has(shapeId)) return false;
+  const shape = editor.getShape(shapeId);
+  if (!shape || shape.isLocked) return false;
+  const pageTransform = editor.getShapePageTransform(shape);
+  if (!pageTransform) return false;
+  const indicatorPath = getIndicatorPath(editor, shape);
+  if (!indicatorPath) return false;
+  ctx.save();
+  ctx.transform(
+    pageTransform.a,
+    pageTransform.b,
+    pageTransform.c,
+    pageTransform.d,
+    pageTransform.e,
+    pageTransform.f
+  );
+  renderIndicatorPath(ctx, indicatorPath);
+  ctx.restore();
+  return true;
+}
+function renderIndicatorPath(ctx, indicatorPath) {
+  if (indicatorPath instanceof Path2D) {
+    ctx.stroke(indicatorPath);
+  } else {
+    const { path, clipPath, additionalPaths } = indicatorPath;
+    if (clipPath) {
+      ctx.save();
+      ctx.clip(clipPath, "evenodd");
+      ctx.stroke(path);
+      ctx.restore();
+    } else {
+      ctx.stroke(path);
+    }
+    if (additionalPaths) {
+      for (const additionalPath of additionalPaths) {
+        ctx.stroke(additionalPath);
+      }
+    }
+  }
+}
+const CanvasShapeIndicators = (0, import_react.memo)(function CanvasShapeIndicators2() {
+  const editor = (0, import_useEditor.useEditor)();
+  const canvasRef = (0, import_react.useRef)(null);
+  const rSelectedColor = (0, import_react.useRef)(null);
+  const isDarkMode = (0, import_useIsDarkMode.useIsDarkMode)();
+  (0, import_react.useEffect)(() => {
+    const timer = editor.timers.setTimeout(() => {
+      rSelectedColor.current = null;
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [isDarkMode, editor]);
+  const activePeerIds$ = (0, import_usePeerIds.useActivePeerIds$)();
+  const $renderData = (0, import_state_react.useComputed)(
+    "indicator render data",
+    () => {
+      const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id));
+      const idsToDisplay = /* @__PURE__ */ new Set();
+      const instanceState = editor.getInstanceState();
+      const isChangingStyle = instanceState.isChangingStyle;
+      const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
+      const isInSelectState = editor.isInAny(
+        "select.brushing",
+        "select.scribble_brushing",
+        "select.pointing_shape",
+        "select.pointing_selection",
+        "select.pointing_handle"
+      );
+      if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
+        for (const id of editor.getSelectedShapeIds()) {
+          idsToDisplay.add(id);
+        }
+        if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
+          const hovered = editor.getHoveredShapeId();
+          if (hovered) idsToDisplay.add(hovered);
+        }
+      }
+      const hintingShapeIds = (0, import_utils.dedupe)(editor.getHintingShapeIds());
+      const collaboratorIndicators = [];
+      const currentPageId = editor.getCurrentPageId();
+      const activePeerIds = activePeerIds$.get();
+      const collaborators = editor.getCollaborators();
+      for (const peerId of activePeerIds.values()) {
+        const presence = collaborators.find((c) => c.userId === peerId);
+        if (!presence || presence.currentPageId !== currentPageId) continue;
+        const visibleShapeIds = presence.selectedShapeIds.filter(
+          (id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)
+        );
+        if (visibleShapeIds.length > 0) {
+          collaboratorIndicators.push({
+            color: presence.color,
+            shapeIds: visibleShapeIds
+          });
+        }
+      }
+      return {
+        idsToDisplay,
+        renderingShapeIds,
+        hintingShapeIds,
+        collaboratorIndicators
+      };
+    },
+    { isEqual: import_utils.isEqual },
+    [editor, activePeerIds$]
+  );
+  (0, import_state_react.useQuickReactor)(
+    "canvas indicators render",
+    () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } = $renderData.get();
+      const { w, h } = editor.getViewportScreenBounds();
+      const dpr = window.devicePixelRatio || 1;
+      const { x: cx, y: cy, z: zoom } = editor.getCamera();
+      const canvasWidth = Math.ceil(w * dpr);
+      const canvasHeight = Math.ceil(h * dpr);
+      if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        canvas.style.width = `${w}px`;
+        canvas.style.height = `${h}px`;
+      }
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(dpr, dpr);
+      ctx.scale(zoom, zoom);
+      ctx.translate(cx, cy);
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.lineWidth = 1.5 / zoom;
+      for (const collaborator of collaboratorIndicators) {
+        ctx.strokeStyle = collaborator.color;
+        ctx.globalAlpha = 0.7;
+        for (const shapeId of collaborator.shapeIds) {
+          renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds);
+        }
+      }
+      ctx.globalAlpha = 1;
+      if (!rSelectedColor.current) {
+        rSelectedColor.current = getComputedStyle(canvas).getPropertyValue("--tl-color-selected");
+      }
+      ctx.strokeStyle = rSelectedColor.current;
+      ctx.lineWidth = 1.5 / zoom;
+      for (const shapeId of idsToDisplay) {
+        renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds);
+      }
+      if (hintingShapeIds.length > 0) {
+        ctx.lineWidth = 2.5 / zoom;
+        for (const shapeId of hintingShapeIds) {
+          renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds);
+        }
+      }
+    },
+    [editor, $renderData]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { ref: canvasRef, className: "tl-canvas-indicators" });
+});
+//# sourceMappingURL=CanvasShapeIndicators.js.map

package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/components/default-components/CanvasShapeIndicators.tsx"],
+  "sourcesContent": ["import { useComputed, useQuickReactor } from '@tldraw/state-react'\nimport { createComputedCache } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, isEqual } from '@tldraw/utils'\nimport { memo, useEffect, useRef } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode'\nimport { useActivePeerIds$ } from '../../hooks/usePeerIds'\n\ninterface CollaboratorIndicatorData {\n\tcolor: string\n\tshapeIds: TLShapeId[]\n}\n\nconst indicatorPathCache = createComputedCache(\n\t'indicatorPath',\n\t(editor: Editor, shape: TLShape) => {\n\t\tconst util = editor.getShapeUtil(shape)\n\t\treturn util.getIndicatorPath(shape)\n\t}\n)\n\nconst getIndicatorPath = (editor: Editor, shape: TLShape) => {\n\treturn indicatorPathCache.get(editor, shape.id)\n}\n\nfunction renderShapeIndicator(\n\tctx: CanvasRenderingContext2D,\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\trenderingShapeIds: Set<TLShapeId>\n): boolean {\n\tif (!renderingShapeIds.has(shapeId)) return false\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape || shape.isLocked) return false\n\n\tconst pageTransform = editor.getShapePageTransform(shape)\n\tif (!pageTransform) return false\n\n\tconst indicatorPath = getIndicatorPath(editor, shape)\n\tif (!indicatorPath) return false\n\n\tctx.save()\n\tctx.transform(\n\t\tpageTransform.a,\n\t\tpageTransform.b,\n\t\tpageTransform.c,\n\t\tpageTransform.d,\n\t\tpageTransform.e,\n\t\tpageTransform.f\n\t)\n\trenderIndicatorPath(ctx, indicatorPath)\n\tctx.restore()\n\n\treturn true\n}\n\nfunction renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {\n\tif (indicatorPath instanceof Path2D) {\n\t\tctx.stroke(indicatorPath)\n\t} else {\n\t\tconst { path, clipPath, additionalPaths } = indicatorPath\n\n\t\tif (clipPath) {\n\t\t\tctx.save()\n\t\t\tctx.clip(clipPath, 'evenodd')\n\t\t\tctx.stroke(path)\n\t\t\tctx.restore()\n\t\t} else {\n\t\t\tctx.stroke(path)\n\t\t}\n\n\t\tif (additionalPaths) {\n\t\t\tfor (const additionalPath of additionalPaths) {\n\t\t\t\tctx.stroke(additionalPath)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal @react */\nexport const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {\n\tconst editor = useEditor()\n\tconst canvasRef = useRef<HTMLCanvasElement>(null)\n\n\t// Cache the selected color to avoid getComputedStyle on every render\n\tconst rSelectedColor = useRef<string | null>(null)\n\tconst isDarkMode = useIsDarkMode()\n\n\tuseEffect(() => {\n\t\tconst timer = editor.timers.setTimeout(() => {\n\t\t\trSelectedColor.current = null\n\t\t}, 0)\n\t\treturn () => clearTimeout(timer)\n\t}, [isDarkMode, editor])\n\n\t// Get active peer IDs (already handles time-based state transitions)\n\tconst activePeerIds$ = useActivePeerIds$()\n\n\tconst $renderData = useComputed(\n\t\t'indicator render data',\n\t\t() => {\n\t\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t\t// Compute ids to display for selected/hovered shapes\n\t\t\tconst idsToDisplay = new Set<TLShapeId>()\n\t\t\tconst instanceState = editor.getInstanceState()\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\t\tidsToDisplay.add(id)\n\t\t\t\t}\n\t\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\t\tif (hovered) idsToDisplay.add(hovered)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Compute hinting shape ids\n\t\t\tconst hintingShapeIds = dedupe(editor.getHintingShapeIds())\n\n\t\t\t// Compute collaborator indicators\n\t\t\tconst collaboratorIndicators: CollaboratorIndicatorData[] = []\n\t\t\tconst currentPageId = editor.getCurrentPageId()\n\t\t\tconst activePeerIds = activePeerIds$.get()\n\n\t\t\tconst collaborators = editor.getCollaborators()\n\t\t\tfor (const peerId of activePeerIds.values()) {\n\t\t\t\t// Skip collaborators on different pages\n\t\t\t\tconst presence = collaborators.find((c) => c.userId === peerId)\n\t\t\t\tif (!presence || presence.currentPageId !== currentPageId) continue\n\n\t\t\t\t// Filter to shapes that are visible and on the current rendering set\n\t\t\t\tconst visibleShapeIds = presence.selectedShapeIds.filter(\n\t\t\t\t\t(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)\n\t\t\t\t)\n\n\t\t\t\tif (visibleShapeIds.length > 0) {\n\t\t\t\t\tcollaboratorIndicators.push({\n\t\t\t\t\t\tcolor: presence.color,\n\t\t\t\t\t\tshapeIds: visibleShapeIds,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tidsToDisplay,\n\t\t\t\trenderingShapeIds,\n\t\t\t\thintingShapeIds,\n\t\t\t\tcollaboratorIndicators,\n\t\t\t}\n\t\t},\n\t\t{ isEqual: isEqual },\n\t\t[editor, activePeerIds$]\n\t)\n\n\tuseQuickReactor(\n\t\t'canvas indicators render',\n\t\t() => {\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tconst { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =\n\t\t\t\t$renderData.get()\n\n\t\t\tconst { w, h } = editor.getViewportScreenBounds()\n\t\t\tconst dpr = window.devicePixelRatio || 1\n\t\t\tconst { x: cx, y: cy, z: zoom } = editor.getCamera()\n\n\t\t\tconst canvasWidth = Math.ceil(w * dpr)\n\t\t\tconst canvasHeight = Math.ceil(h * dpr)\n\n\t\t\tif (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {\n\t\t\t\tcanvas.width = canvasWidth\n\t\t\t\tcanvas.height = canvasHeight\n\t\t\t\tcanvas.style.width = `${w}px`\n\t\t\t\tcanvas.style.height = `${h}px`\n\t\t\t}\n\n\t\t\tctx.resetTransform()\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height)\n\n\t\t\tctx.scale(dpr, dpr)\n\t\t\tctx.scale(zoom, zoom)\n\t\t\tctx.translate(cx, cy)\n\n\t\t\tctx.lineCap = 'round'\n\t\t\tctx.lineJoin = 'round'\n\n\t\t\t// Draw collaborator indicators first (underneath local indicators)\n\t\t\t// Use 0.5 opacity to match the original SVG-based collaborator indicators\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const collaborator of collaboratorIndicators) {\n\t\t\t\tctx.strokeStyle = collaborator.color\n\t\t\t\tctx.globalAlpha = 0.7\n\t\t\t\tfor (const shapeId of collaborator.shapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Reset alpha for local indicators\n\t\t\tctx.globalAlpha = 1.0\n\n\t\t\t// Use cached color, only call getComputedStyle when cache is empty\n\t\t\tif (!rSelectedColor.current) {\n\t\t\t\trSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')\n\t\t\t}\n\n\t\t\tctx.strokeStyle = rSelectedColor.current\n\n\t\t\t// Draw selected/hovered indicators (1.5px stroke)\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const shapeId of idsToDisplay) {\n\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t}\n\n\t\t\t// Draw hinted indicators with a thicker stroke (2.5px)\n\t\t\tif (hintingShapeIds.length > 0) {\n\t\t\t\tctx.lineWidth = 2.5 / zoom\n\t\t\t\tfor (const shapeId of hintingShapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, $renderData]\n\t)\n\n\treturn <canvas ref={canvasRef} className=\"tl-canvas-indicators\" />\n})\n"],
+  "mappings": "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",
+  "names": ["CanvasShapeIndicators"]
+}

package/dist-cjs/lib/components/default-components/DefaultCanvas.js

@@ -58,6 +58,7 @@ var import_GeometryDebuggingView = require("../GeometryDebuggingView");
 var import_LiveCollaborators = require("../LiveCollaborators");
 var import_MenuClickCapture = require("../MenuClickCapture");
 var import_Shape = require("../Shape");
+var import_CanvasShapeIndicators = require("./CanvasShapeIndicators");
 function DefaultCanvas({ className }) {
   const editor = (0, import_useEditor.useEditor)();
   const { SelectionBackground, Background, SvgDefs, ShapeIndicators } = (0, import_useEditorComponents.useEditorComponents)();
@@ -153,19 +154,22 @@ function DefaultCanvas({ className }) {
             SelectionBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionBackgroundWrapper, {}),
             hideShapes ? null : debugSvg ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapesWithSVGs, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapesToDisplay, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tl-overlays", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rHtmlLayer2, className: "tl-html-layer", children: [
-            debugGeometry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GeometryDebuggingView.GeometryDebuggingView, {}) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrushWrapper, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScribbleWrapper, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomBrushWrapper, {}),
-            ShapeIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeIndicators, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HintedShapeIndicator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SnapIndicatorWrapper, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionForegroundWrapper, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HandlesWrapper, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlaysWrapper, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveCollaborators.LiveCollaborators, {})
-          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tl-overlays", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CanvasShapeIndicators.CanvasShapeIndicators, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rHtmlLayer2, className: "tl-html-layer", children: [
+              debugGeometry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GeometryDebuggingView.GeometryDebuggingView, {}) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrushWrapper, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScribbleWrapper, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomBrushWrapper, {}),
+              ShapeIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeIndicators, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HintedShapeIndicator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SnapIndicatorWrapper, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionForegroundWrapper, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HandlesWrapper, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlaysWrapper, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveCollaborators.LiveCollaborators, {})
+            ] })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MovingCameraHitTestBlocker, {})
         ]
       }
@@ -337,8 +341,7 @@ function ReflowIfNeeded() {
     "reflow for culled shapes",
     () => {
       const culledShapes = editor.getCulledShapes();
-      if (culledShapesRef.current.size === culledShapes.size && [...culledShapes].every((id) => culledShapesRef.current.has(id)))
-        return;
+      if (culledShapesRef.current === culledShapes) return;
       culledShapesRef.current = culledShapes;
       const canvas = document.getElementsByClassName("tl-canvas");
       if (canvas.length === 0) return;
@@ -359,7 +362,18 @@ function ShapesToDisplay() {
 function HintedShapeIndicator() {
   const editor = (0, import_useEditor.useEditor)();
   const { ShapeIndicator } = (0, import_useEditorComponents.useEditorComponents)();
-  const ids = (0, import_state_react.useValue)("hinting shape ids", () => (0, import_utils.dedupe)(editor.getHintingShapeIds()), [editor]);
+  const ids = (0, import_state_react.useValue)(
+    "hinting shape ids without canvas indicator",
+    () => {
+      return (0, import_utils.dedupe)(editor.getHintingShapeIds()).filter((id) => {
+        const shape = editor.getShape(id);
+        if (!shape) return false;
+        const util = editor.getShapeUtil(shape);
+        return util.useLegacyIndicator();
+      });
+    },
+    [editor]
+  );
   if (!ids.length) return null;
   if (!ShapeIndicator) return null;
   return ids.map((id) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeIndicator, { className: "tl-user-indicator__hint", shapeId: id }, id + "_hinting"));

package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultCanvas.tsx"],
-  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLHandle, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, modulate, objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useHandleEvents } from '../../hooks/useHandleEvents'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { Box } from '../../primitives/Box'\nimport { Mat } from '../../primitives/Mat'\nimport { Vec } from '../../primitives/Vec'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { GeometryDebuggingView } from '../GeometryDebuggingView'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer2 = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tconst { x, y, z } = editor.getCamera()\n\n\t\t\t// This should only run once on first load\n\t\t\tif (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {\n\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\trMemoizedStuff.current.allowTextOutline = false\n\t\t\t}\n\n\t\t\t// And this should only run if we're not in Safari;\n\t\t\t// If we're below the lod distance for text shadows, turn them off\n\t\t\tif (\n\t\t\t\trMemoizedStuff.current.allowTextOutline &&\n\t\t\t\tz < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline\n\t\t\t) {\n\t\t\t\tconst lodDisableTextOutline = z < editor.options.textShadowLod\n\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t)\n\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t}\n\n\t\t\t// Because the html container has a width/height of 1px, we\n\t\t\t// need to create a small offset when zoomed to ensure that\n\t\t\t// the html container and svg container are lined up exactly.\n\t\t\tconst offset =\n\t\t\t\tz >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)\n\n\t\t\tconst transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(\n\t\t\t\tx + offset\n\t\t\t)}px,${toDomPrecision(y + offset)}px)`\n\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t\tsetStyleProperty(rHtmlLayer2.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\tconst debugSvg = useValue('debug_svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [\n\t\tdebugFlags,\n\t])\n\tconst isEditingAnything = useValue(\n\t\t'isEditingAnything',\n\t\t() => editor.getEditingShapeId() !== null,\n\t\t[editor]\n\t)\n\tconst isSelectingAnything = useValue(\n\t\t'isSelectingAnything',\n\t\t() => !!editor.getSelectedShapeIds().length,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-iseditinganything={isEditingAnything}\n\t\t\t\tdata-isselectinganything={isSelectingAnything}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t<CursorDef />\n\t\t\t\t\t\t<CollaboratorHintDef />\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<GridWrapper />\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"tl-overlays\">\n\t\t\t\t\t<div ref={rHtmlLayer2} className=\"tl-html-layer\">\n\t\t\t\t\t\t{debugGeometry ? <GeometryDebuggingView /> : null}\n\t\t\t\t\t\t<BrushWrapper />\n\t\t\t\t\t\t<ScribbleWrapper />\n\t\t\t\t\t\t<ZoomBrushWrapper />\n\t\t\t\t\t\t{ShapeIndicators && <ShapeIndicators />}\n\t\t\t\t\t\t<HintedShapeIndicator />\n\t\t\t\t\t\t<SnapIndicatorWrapper />\n\t\t\t\t\t\t<SelectionForegroundWrapper />\n\t\t\t\t\t\t<HandlesWrapper />\n\t\t\t\t\t\t<OverlaysWrapper />\n\t\t\t\t\t\t<LiveCollaborators />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t\t>\n\t\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t</div>\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn <InFrontOfTheCanvas />\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!(Grid && isGridMode)) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ScribbleWrapper() {\n\tconst editor = useEditor()\n\tconst scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { Scribble } = useEditorComponents()\n\n\tif (!(Scribble && scribbles.length)) return null\n\n\treturn scribbles.map((scribble) => (\n\t\t<Scribble key={scribble.id} className=\"tl-user-scribble\" scribble={scribble} zoom={zoomLevel} />\n\t))\n}\n\nfunction BrushWrapper() {\n\tconst editor = useEditor()\n\tconst brush = useValue('brush', () => editor.getInstanceState().brush, [editor])\n\tconst { Brush } = useEditorComponents()\n\n\tif (!(Brush && brush)) return null\n\n\treturn <Brush className=\"tl-user-brush\" brush={brush} />\n}\n\nfunction ZoomBrushWrapper() {\n\tconst editor = useEditor()\n\tconst zoomBrush = useValue('zoomBrush', () => editor.getInstanceState().zoomBrush, [editor])\n\tconst { ZoomBrush } = useEditorComponents()\n\n\tif (!(ZoomBrush && zoomBrush)) return null\n\n\treturn <ZoomBrush className=\"tl-user-brush tl-zoom-brush\" brush={zoomBrush} />\n}\n\nfunction SnapIndicatorWrapper() {\n\tconst editor = useEditor()\n\tconst lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { SnapIndicator } = useEditorComponents()\n\n\tif (!(SnapIndicator && lines.length > 0)) return null\n\n\treturn lines.map((line) => (\n\t\t<SnapIndicator key={line.id} className=\"tl-user-snapline\" line={line} zoom={zoomLevel} />\n\t))\n}\n\nfunction HandlesWrapper() {\n\tconst editor = useEditor()\n\n\t// We don't want this to update every time the shape changes\n\tconst shapeIdWithHandles = useValue(\n\t\t'handles shapeIdWithHandles',\n\t\t() => {\n\t\t\tconst { isReadonly, isChangingStyle } = editor.getInstanceState()\n\t\t\tif (isReadonly || isChangingStyle) return false\n\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\n\t\t\t// slightly redundant but saves us from updating the handles every time the shape changes\n\t\t\tconst handles = editor.getShapeHandles(onlySelectedShape)\n\t\t\tif (!handles) return false\n\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shapeIdWithHandles) return null\n\n\treturn <HandlesWrapperInner shapeId={shapeIdWithHandles} />\n}\n\nfunction HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {\n\tconst editor = useEditor()\n\tconst { Handles } = useEditorComponents()\n\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\n\tconst isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [\n\t\teditor,\n\t])\n\n\tconst transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [\n\t\teditor,\n\t\tshapeId,\n\t])\n\n\tconst handles = useValue(\n\t\t'handles',\n\t\t() => {\n\t\t\tconst handles = editor.getShapeHandles(shapeId)\n\t\t\tif (!handles) return null\n\n\t\t\tconst minDistBetweenVirtualHandlesAndRegularHandles =\n\t\t\t\t((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *\n\t\t\t\t2\n\n\t\t\treturn (\n\t\t\t\thandles\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(handle) =>\n\t\t\t\t\t\t\t// if the handle isn't a virtual handle, we'll display it\n\t\t\t\t\t\t\thandle.type !== 'virtual' ||\n\t\t\t\t\t\t\t// but for virtual handles, we'll only display them if they're far enough away from vertex handles\n\t\t\t\t\t\t\t!handles.some(\n\t\t\t\t\t\t\t\t(h) =>\n\t\t\t\t\t\t\t\t\t// skip the handle we're checking against\n\t\t\t\t\t\t\t\t\th !== handle &&\n\t\t\t\t\t\t\t\t\t// only check against vertex handles\n\t\t\t\t\t\t\t\t\th.type === 'vertex' &&\n\t\t\t\t\t\t\t\t\t// and check that their distance isn't below the minimum distance\n\t\t\t\t\t\t\t\t\tVec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t// We want vertex handles in front of all other handles\n\t\t\t\t\t.sort((a) => (a.type === 'vertex' ? 1 : -1))\n\t\t\t)\n\t\t},\n\t\t[editor, zoomLevel, isCoarse, shapeId]\n\t)\n\n\tconst isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])\n\n\tif (!Handles || !handles || !transform || isHidden) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<Handles>\n\t\t\t<g transform={Mat.toCssString(transform)}>\n\t\t\t\t{handles.map((handle) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HandleWrapper\n\t\t\t\t\t\t\tkey={handle.id}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\thandle={handle}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\tisCoarse={isCoarse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</g>\n\t\t</Handles>\n\t)\n}\n\nfunction HandleWrapper({\n\tshapeId,\n\thandle,\n\tzoom,\n\tisCoarse,\n}: {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n}) {\n\tconst events = useHandleEvents(shapeId, handle.id)\n\tconst { Handle } = useEditorComponents()\n\n\tif (!Handle) return null\n\n\treturn (\n\t\t<g\n\t\t\trole=\"button\"\n\t\t\t// TODO(mime): handle.label needs to be required in the future.\n\t\t\taria-label={handle.label || 'handle'}\n\t\t\ttransform={`translate(${handle.x}, ${handle.y})`}\n\t\t\t{...events}\n\t\t>\n\t\t\t<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />\n\t\t</g>\n\t)\n}\n\nfunction OverlaysWrapper() {\n\tconst { Overlays } = useEditorComponents()\n\tif (!Overlays) return null\n\treturn (\n\t\t<div className=\"tl-custom-overlays tl-overlays__item\">\n\t\t\t<Overlays />\n\t\t</div>\n\t)\n}\n\nfunction ShapesWithSVGs() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn renderingShapes.map((result) => (\n\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t<Shape {...result} />\n\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t</Fragment>\n\t))\n}\nfunction ReflowIfNeeded() {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (\n\t\t\t\tculledShapesRef.current.size === culledShapes.size &&\n\t\t\t\t[...culledShapes].every((id) => culledShapesRef.current.has(id))\n\t\t\t)\n\t\t\t\treturn\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = document.getElementsByClassName('tl-canvas')\n\t\t\tif (canvas.length === 0) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = (canvas[0] as HTMLDivElement).offsetHeight\n\t\t},\n\t\t[editor]\n\t)\n\treturn null\n}\n\nfunction ShapesToDisplay() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<>\n\t\t\t{renderingShapes.map((result) => (\n\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t))}\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</>\n\t)\n}\n\nfunction HintedShapeIndicator() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst ids = useValue('hinting shape ids', () => dedupe(editor.getHintingShapeIds()), [editor])\n\n\tif (!ids.length) return null\n\tif (!ShapeIndicator) return null\n\n\treturn ids.map((id) => (\n\t\t<ShapeIndicator className=\"tl-user-indicator__hint\" shapeId={id} key={id + '_hinting'} />\n\t))\n}\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n\nfunction CollaboratorHintDef() {\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\treturn <path id={cursorHintId} fill=\"currentColor\" d=\"M -2,-5 2,0 -2,5 Z\" />\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst isSingleFrame = editor.isShapeOfType(id, 'frame')\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionForegroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue(\n\t\t'selection rotation',\n\t\tfunction getSelectionRotation() {\n\t\t\treturn editor.getSelectionRotation()\n\t\t},\n\t\t[editor]\n\t)\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionForeground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionForeground) return null\n\treturn <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLHandle, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, modulate, objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useHandleEvents } from '../../hooks/useHandleEvents'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { Box } from '../../primitives/Box'\nimport { Mat } from '../../primitives/Mat'\nimport { Vec } from '../../primitives/Vec'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { GeometryDebuggingView } from '../GeometryDebuggingView'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\nimport { CanvasShapeIndicators } from './CanvasShapeIndicators'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer2 = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tconst { x, y, z } = editor.getCamera()\n\n\t\t\t// This should only run once on first load\n\t\t\tif (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {\n\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\trMemoizedStuff.current.allowTextOutline = false\n\t\t\t}\n\n\t\t\t// And this should only run if we're not in Safari;\n\t\t\t// If we're below the lod distance for text shadows, turn them off\n\t\t\tif (\n\t\t\t\trMemoizedStuff.current.allowTextOutline &&\n\t\t\t\tz < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline\n\t\t\t) {\n\t\t\t\tconst lodDisableTextOutline = z < editor.options.textShadowLod\n\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t)\n\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t}\n\n\t\t\t// Because the html container has a width/height of 1px, we\n\t\t\t// need to create a small offset when zoomed to ensure that\n\t\t\t// the html container and svg container are lined up exactly.\n\t\t\tconst offset =\n\t\t\t\tz >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)\n\n\t\t\tconst transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(\n\t\t\t\tx + offset\n\t\t\t)}px,${toDomPrecision(y + offset)}px)`\n\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t\tsetStyleProperty(rHtmlLayer2.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\tconst debugSvg = useValue('debug_svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [\n\t\tdebugFlags,\n\t])\n\tconst isEditingAnything = useValue(\n\t\t'isEditingAnything',\n\t\t() => editor.getEditingShapeId() !== null,\n\t\t[editor]\n\t)\n\tconst isSelectingAnything = useValue(\n\t\t'isSelectingAnything',\n\t\t() => !!editor.getSelectedShapeIds().length,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-iseditinganything={isEditingAnything}\n\t\t\t\tdata-isselectinganything={isSelectingAnything}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t<CursorDef />\n\t\t\t\t\t\t<CollaboratorHintDef />\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<GridWrapper />\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"tl-overlays\">\n\t\t\t\t\t<CanvasShapeIndicators />\n\t\t\t\t\t<div ref={rHtmlLayer2} className=\"tl-html-layer\">\n\t\t\t\t\t\t{debugGeometry ? <GeometryDebuggingView /> : null}\n\t\t\t\t\t\t<BrushWrapper />\n\t\t\t\t\t\t<ScribbleWrapper />\n\t\t\t\t\t\t<ZoomBrushWrapper />\n\t\t\t\t\t\t{ShapeIndicators && <ShapeIndicators />}\n\t\t\t\t\t\t<HintedShapeIndicator />\n\t\t\t\t\t\t<SnapIndicatorWrapper />\n\t\t\t\t\t\t<SelectionForegroundWrapper />\n\t\t\t\t\t\t<HandlesWrapper />\n\t\t\t\t\t\t<OverlaysWrapper />\n\t\t\t\t\t\t<LiveCollaborators />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t\t>\n\t\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t</div>\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn <InFrontOfTheCanvas />\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!(Grid && isGridMode)) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ScribbleWrapper() {\n\tconst editor = useEditor()\n\tconst scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { Scribble } = useEditorComponents()\n\n\tif (!(Scribble && scribbles.length)) return null\n\n\treturn scribbles.map((scribble) => (\n\t\t<Scribble key={scribble.id} className=\"tl-user-scribble\" scribble={scribble} zoom={zoomLevel} />\n\t))\n}\n\nfunction BrushWrapper() {\n\tconst editor = useEditor()\n\tconst brush = useValue('brush', () => editor.getInstanceState().brush, [editor])\n\tconst { Brush } = useEditorComponents()\n\n\tif (!(Brush && brush)) return null\n\n\treturn <Brush className=\"tl-user-brush\" brush={brush} />\n}\n\nfunction ZoomBrushWrapper() {\n\tconst editor = useEditor()\n\tconst zoomBrush = useValue('zoomBrush', () => editor.getInstanceState().zoomBrush, [editor])\n\tconst { ZoomBrush } = useEditorComponents()\n\n\tif (!(ZoomBrush && zoomBrush)) return null\n\n\treturn <ZoomBrush className=\"tl-user-brush tl-zoom-brush\" brush={zoomBrush} />\n}\n\nfunction SnapIndicatorWrapper() {\n\tconst editor = useEditor()\n\tconst lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { SnapIndicator } = useEditorComponents()\n\n\tif (!(SnapIndicator && lines.length > 0)) return null\n\n\treturn lines.map((line) => (\n\t\t<SnapIndicator key={line.id} className=\"tl-user-snapline\" line={line} zoom={zoomLevel} />\n\t))\n}\n\nfunction HandlesWrapper() {\n\tconst editor = useEditor()\n\n\t// We don't want this to update every time the shape changes\n\tconst shapeIdWithHandles = useValue(\n\t\t'handles shapeIdWithHandles',\n\t\t() => {\n\t\t\tconst { isReadonly, isChangingStyle } = editor.getInstanceState()\n\t\t\tif (isReadonly || isChangingStyle) return false\n\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\n\t\t\t// slightly redundant but saves us from updating the handles every time the shape changes\n\t\t\tconst handles = editor.getShapeHandles(onlySelectedShape)\n\t\t\tif (!handles) return false\n\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shapeIdWithHandles) return null\n\n\treturn <HandlesWrapperInner shapeId={shapeIdWithHandles} />\n}\n\nfunction HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {\n\tconst editor = useEditor()\n\tconst { Handles } = useEditorComponents()\n\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\n\tconst isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [\n\t\teditor,\n\t])\n\n\tconst transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [\n\t\teditor,\n\t\tshapeId,\n\t])\n\n\tconst handles = useValue(\n\t\t'handles',\n\t\t() => {\n\t\t\tconst handles = editor.getShapeHandles(shapeId)\n\t\t\tif (!handles) return null\n\n\t\t\tconst minDistBetweenVirtualHandlesAndRegularHandles =\n\t\t\t\t((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *\n\t\t\t\t2\n\n\t\t\treturn (\n\t\t\t\thandles\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(handle) =>\n\t\t\t\t\t\t\t// if the handle isn't a virtual handle, we'll display it\n\t\t\t\t\t\t\thandle.type !== 'virtual' ||\n\t\t\t\t\t\t\t// but for virtual handles, we'll only display them if they're far enough away from vertex handles\n\t\t\t\t\t\t\t!handles.some(\n\t\t\t\t\t\t\t\t(h) =>\n\t\t\t\t\t\t\t\t\t// skip the handle we're checking against\n\t\t\t\t\t\t\t\t\th !== handle &&\n\t\t\t\t\t\t\t\t\t// only check against vertex handles\n\t\t\t\t\t\t\t\t\th.type === 'vertex' &&\n\t\t\t\t\t\t\t\t\t// and check that their distance isn't below the minimum distance\n\t\t\t\t\t\t\t\t\tVec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t// We want vertex handles in front of all other handles\n\t\t\t\t\t.sort((a) => (a.type === 'vertex' ? 1 : -1))\n\t\t\t)\n\t\t},\n\t\t[editor, zoomLevel, isCoarse, shapeId]\n\t)\n\n\tconst isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])\n\n\tif (!Handles || !handles || !transform || isHidden) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<Handles>\n\t\t\t<g transform={Mat.toCssString(transform)}>\n\t\t\t\t{handles.map((handle) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HandleWrapper\n\t\t\t\t\t\t\tkey={handle.id}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\thandle={handle}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\tisCoarse={isCoarse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</g>\n\t\t</Handles>\n\t)\n}\n\nfunction HandleWrapper({\n\tshapeId,\n\thandle,\n\tzoom,\n\tisCoarse,\n}: {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n}) {\n\tconst events = useHandleEvents(shapeId, handle.id)\n\tconst { Handle } = useEditorComponents()\n\n\tif (!Handle) return null\n\n\treturn (\n\t\t<g\n\t\t\trole=\"button\"\n\t\t\t// TODO(mime): handle.label needs to be required in the future.\n\t\t\taria-label={handle.label || 'handle'}\n\t\t\ttransform={`translate(${handle.x}, ${handle.y})`}\n\t\t\t{...events}\n\t\t>\n\t\t\t<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />\n\t\t</g>\n\t)\n}\n\nfunction OverlaysWrapper() {\n\tconst { Overlays } = useEditorComponents()\n\tif (!Overlays) return null\n\treturn (\n\t\t<div className=\"tl-custom-overlays tl-overlays__item\">\n\t\t\t<Overlays />\n\t\t</div>\n\t)\n}\n\nfunction ShapesWithSVGs() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn renderingShapes.map((result) => (\n\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t<Shape {...result} />\n\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t</Fragment>\n\t))\n}\nfunction ReflowIfNeeded() {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (culledShapesRef.current === culledShapes) return\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = document.getElementsByClassName('tl-canvas')\n\t\t\tif (canvas.length === 0) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = (canvas[0] as HTMLDivElement).offsetHeight\n\t\t},\n\t\t[editor]\n\t)\n\treturn null\n}\n\nfunction ShapesToDisplay() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<>\n\t\t\t{renderingShapes.map((result) => (\n\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t))}\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</>\n\t)\n}\n\nfunction HintedShapeIndicator() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst ids = useValue(\n\t\t'hinting shape ids without canvas indicator',\n\t\t() => {\n\t\t\t// Filter to only shapes that use legacy SVG indicators\n\t\t\treturn dedupe(editor.getHintingShapeIds()).filter((id) => {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) return false\n\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!ids.length) return null\n\tif (!ShapeIndicator) return null\n\n\treturn ids.map((id) => (\n\t\t<ShapeIndicator className=\"tl-user-indicator__hint\" shapeId={id} key={id + '_hinting'} />\n\t))\n}\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n\nfunction CollaboratorHintDef() {\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\treturn <path id={cursorHintId} fill=\"currentColor\" d=\"M -2,-5 2,0 -2,5 Z\" />\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst isSingleFrame = editor.isShapeOfType(id, 'frame')\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionForegroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue(\n\t\t'selection rotation',\n\t\tfunction getSelectionRotation() {\n\t\t\treturn editor.getSelectionRotation()\n\t\t},\n\t\t[editor]\n\t)\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionForeground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionForeground) return null\n\treturn <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["import_utils", "classNames", "handles"]
 }

package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js

@@ -57,12 +57,14 @@ const InnerIndicator = (0, import_react.memo)(({ editor, id }) => {
   const shape = (0, import_state_react.useValue)("shape for indicator", () => editor.store.get(id), [editor, id]);
   const { ShapeIndicatorErrorFallback } = (0, import_useEditorComponents.useEditorComponents)();
   if (!shape || shape.isLocked) return null;
+  const util = editor.getShapeUtil(shape);
+  if (!util.useLegacyIndicator()) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ErrorBoundary.OptionalErrorBoundary,
     {
       fallback: ShapeIndicatorErrorFallback,
       onError: (error) => editor.annotateError(error, { origin: "react.shapeIndicator", willCrashApp: false }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EvenInnererIndicator, { shape, util: editor.getShapeUtil(shape) }, shape.id)
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EvenInnererIndicator, { shape, util }, shape.id)
     }
   );
 });