@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.1

package/dist-esm/lib/components/MenuClickCapture.mjs

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useValue } from "@tldraw/state-react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { useCanvasEvents } from "../hooks/useCanvasEvents.mjs";
 import { useEditor } from "../hooks/useEditor.mjs";
 import { Vec } from "../primitives/Vec.mjs";
+import { releasePointerCapture, setPointerCapture } from "../utils/dom.mjs";
 import { getPointerInfo } from "../utils/getPointerInfo.mjs";
 function MenuClickCapture() {
   const editor = useEditor();
@@ -14,81 +16,125 @@ function MenuClickCapture() {
   const rPointerState = useRef({
     isDown: false,
     isDragging: false,
+    button: 0,
     start: new Vec()
   });
+  const rCancelContextMenuSwallow = useRef(null);
+  useEffect(
+    () => () => {
+      rCancelContextMenuSwallow.current?.();
+      rCancelContextMenuSwallow.current = null;
+    },
+    []
+  );
+  const swallowNextNativeContextMenu = useCallback(() => {
+    rCancelContextMenuSwallow.current?.();
+    const doc = editor.getContainerDocument();
+    const onContextMenu = (event) => {
+      if (!event.isTrusted) return;
+      rCancelContextMenuSwallow.current?.();
+      rCancelContextMenuSwallow.current = null;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+    const cancel = () => doc.removeEventListener("contextmenu", onContextMenu, true);
+    rCancelContextMenuSwallow.current = cancel;
+    doc.addEventListener("contextmenu", onContextMenu, true);
+    doc.defaultView?.setTimeout(() => {
+      if (rCancelContextMenuSwallow.current === cancel) {
+        cancel();
+        rCancelContextMenuSwallow.current = null;
+      }
+    }, 0);
+  }, [editor]);
   const handlePointerDown = useCallback(
     (e) => {
-      if (e.button === 0) {
-        setIsPointing(true);
-        rPointerState.current = {
-          isDown: true,
-          isDragging: false,
-          start: new Vec(e.clientX, e.clientY)
-        };
-        rDidAPointerDownAndDragWhileMenuWasOpen.current = false;
-      }
+      if (e.button !== 0 && e.button !== 2) return;
+      flushSync(() => setIsPointing(true));
+      setPointerCapture(e.currentTarget, e);
+      rPointerState.current = {
+        isDown: true,
+        isDragging: false,
+        button: e.button,
+        start: new Vec(e.clientX, e.clientY)
+      };
       if (e.button === 2) {
-        const ownerDocument = editor.getContainerDocument();
-        ownerDocument.addEventListener(
-          "contextmenu",
-          (event) => {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-          },
-          { capture: true, once: true }
-        );
+        if (!editor.options.rightClickPanning) {
+          swallowNextNativeContextMenu();
+          editor.menus.clearOpenMenus();
+          return;
+        }
+        const canvas = editor.getContainer().querySelector(".tl-canvas") ?? e.currentTarget;
+        canvasEvents.onPointerDown?.({ ...e, currentTarget: canvas });
+        swallowNextNativeContextMenu();
+        return;
       }
       editor.menus.clearOpenMenus();
     },
-    [editor]
+    [canvasEvents, editor, swallowNextNativeContextMenu]
   );
-  const rDidAPointerDownAndDragWhileMenuWasOpen = useRef(false);
   const handlePointerMove = useCallback(
     (e) => {
-      if (!rPointerState.current.isDown) return;
-      const { x, y } = rPointerState.current.start;
-      if (!rDidAPointerDownAndDragWhileMenuWasOpen.current) {
-        if (
-          // We're pointing, but are we dragging?
-          Vec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) > editor.options.dragDistanceSquared
-        ) {
-          rDidAPointerDownAndDragWhileMenuWasOpen.current = true;
-          rPointerState.current = {
-            ...rPointerState.current,
-            isDown: true,
-            isDragging: true
-          };
-          canvasEvents.onPointerDown?.({
-            ...e,
-            clientX: x,
-            clientY: y,
-            button: 0
-          });
+      const state = rPointerState.current;
+      if (!state.isDown) return;
+      if (state.button !== 2 && !state.isDragging) {
+        if (Vec.Dist2(state.start, new Vec(e.clientX, e.clientY)) <= editor.options.dragDistanceSquared) {
+          return;
         }
-      }
-      if (rDidAPointerDownAndDragWhileMenuWasOpen.current) {
+        state.isDragging = true;
         editor.dispatch({
           type: "pointer",
           target: "canvas",
-          name: "pointer_move",
-          ...getPointerInfo(editor, e)
+          name: "pointer_down",
+          ...getPointerInfo(editor, { ...e, clientX: state.start.x, clientY: state.start.y })
         });
       }
+      editor.dispatch({
+        type: "pointer",
+        target: "canvas",
+        name: "pointer_move",
+        ...getPointerInfo(editor, e)
+      });
     },
-    [canvasEvents, editor]
+    [editor]
   );
   const handlePointerUp = useCallback(
     (e) => {
-      canvasEvents.onPointerUp?.(e);
+      const isStaticRightClick = e.button === 2 && !rPointerState.current.isDragging;
+      editor.dispatch({
+        type: "pointer",
+        target: "canvas",
+        name: "pointer_up",
+        ...getPointerInfo(editor, e)
+      });
+      if (isStaticRightClick && editor.options.rightClickPanning) {
+        const canvas = editor.getContainer().querySelector(".tl-canvas");
+        const trigger = canvas?.parentElement ?? e.currentTarget;
+        editor.timers.requestAnimationFrame(() => {
+          trigger.dispatchEvent(
+            new PointerEvent("contextmenu", {
+              bubbles: true,
+              clientX: e.clientX,
+              clientY: e.clientY,
+              button: 2,
+              buttons: 0,
+              pointerId: e.pointerId,
+              pointerType: e.pointerType,
+              isPrimary: e.isPrimary
+            })
+          );
+        });
+      }
+      releasePointerCapture(e.currentTarget, e);
       setIsPointing(false);
       rPointerState.current = {
         isDown: false,
         isDragging: false,
+        button: 0,
         start: new Vec(e.clientX, e.clientY)
       };
-      rDidAPointerDownAndDragWhileMenuWasOpen.current = false;
     },
-    [canvasEvents]
+    [editor]
   );
   return showElement && /* @__PURE__ */ jsx(
     "div",

package/dist-esm/lib/components/MenuClickCapture.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/MenuClickCapture.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { PointerEvent, useCallback, useRef, useState } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { Vec } from '../primitives/Vec'\nimport { getPointerInfo } from '../utils/getPointerInfo'\n\n/**\n * When a menu is open, this component prevents the user from interacting with the canvas.\n *\n * @public @react\n */\nexport function MenuClickCapture() {\n\tconst editor = useEditor()\n\n\t// Whether any menus are open\n\tconst isMenuOpen = useValue('is menu open', () => editor.menus.hasAnyOpenMenus(), [editor])\n\n\t// Whether we're pointing or not\u2014keep this component visible if we're pointing\n\tconst [isPointing, setIsPointing] = useState(false)\n\n\tconst showElement = isMenuOpen || isPointing\n\n\t// Get the same events that we use on the canvas\n\tconst canvasEvents = useCanvasEvents()\n\n\t// Keep track of the pointer state\n\tconst rPointerState = useRef({\n\t\tisDown: false,\n\t\tisDragging: false,\n\t\tstart: new Vec(),\n\t})\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tif (e.button === 0) {\n\t\t\t\tsetIsPointing(true)\n\t\t\t\trPointerState.current = {\n\t\t\t\t\tisDown: true,\n\t\t\t\t\tisDragging: false,\n\t\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t\t}\n\t\t\t\trDidAPointerDownAndDragWhileMenuWasOpen.current = false\n\t\t\t}\n\t\t\tif (e.button === 2) {\n\t\t\t\t// Swallow the contextmenu event that follows this right-click pointerdown.\n\t\t\t\t// clearOpenMenus() below triggers a synchronous render that unmounts this\n\t\t\t\t// component, so our React onContextMenu handler won't be around to catch it.\n\t\t\t\t// Without this, the contextmenu event reaches the Radix Trigger and briefly\n\t\t\t\t// opens a new context menu (which then immediately dismisses \u2014 causing a flash).\n\t\t\t\tconst ownerDocument = editor.getContainerDocument()\n\t\t\t\townerDocument.addEventListener(\n\t\t\t\t\t'contextmenu',\n\t\t\t\t\t(event) => {\n\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\tevent.stopImmediatePropagation()\n\t\t\t\t\t},\n\t\t\t\t\t{ capture: true, once: true }\n\t\t\t\t)\n\t\t\t}\n\t\t\teditor.menus.clearOpenMenus()\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst rDidAPointerDownAndDragWhileMenuWasOpen = useRef(false)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\t// Do nothing unless we're pointing\n\t\t\tif (!rPointerState.current.isDown) return\n\n\t\t\t// call the onPointerDown with the original pointer position\n\t\t\tconst { x, y } = rPointerState.current.start\n\n\t\t\tif (!rDidAPointerDownAndDragWhileMenuWasOpen.current) {\n\t\t\t\tif (\n\t\t\t\t\t// We're pointing, but are we dragging?\n\t\t\t\t\tVec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >\n\t\t\t\t\teditor.options.dragDistanceSquared\n\t\t\t\t) {\n\t\t\t\t\trDidAPointerDownAndDragWhileMenuWasOpen.current = true\n\t\t\t\t\t// Wehaddaeventitsadrag\n\t\t\t\t\trPointerState.current = {\n\t\t\t\t\t\t...rPointerState.current,\n\t\t\t\t\t\tisDown: true,\n\t\t\t\t\t\tisDragging: true,\n\t\t\t\t\t}\n\t\t\t\t\tcanvasEvents.onPointerDown?.({\n\t\t\t\t\t\t...e,\n\t\t\t\t\t\tclientX: x,\n\t\t\t\t\t\tclientY: y,\n\t\t\t\t\t\tbutton: 0,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (rDidAPointerDownAndDragWhileMenuWasOpen.current) {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\t[canvasEvents, editor]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\t// Run the pointer up\n\t\t\tcanvasEvents.onPointerUp?.(e)\n\t\t\t// Then turn off pointing\n\t\t\tsetIsPointing(false)\n\t\t\t// Reset the pointer state\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: false,\n\t\t\t\tisDragging: false,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\t\t\trDidAPointerDownAndDragWhileMenuWasOpen.current = false\n\t\t},\n\t\t[canvasEvents]\n\t)\n\n\treturn (\n\t\tshowElement && (\n\t\t\t<div\n\t\t\t\tclassName=\"tlui-menu-click-capture\"\n\t\t\t\tdata-testid=\"menu-click-capture.content\"\n\t\t\t\t{...canvasEvents}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\tonContextMenu={(e) => {\n\t\t\t\t\te.preventDefault()\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { type PointerEvent, useCallback, useEffect, useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { Vec } from '../primitives/Vec'\nimport { releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\n\n/**\n * When a menu is open, this component prevents the user from interacting with the canvas.\n *\n * @public @react\n */\nexport function MenuClickCapture() {\n\tconst editor = useEditor()\n\n\tconst isMenuOpen = useValue('is menu open', () => editor.menus.hasAnyOpenMenus(), [editor])\n\n\t// Keep this component mounted while the pointer is down so pointerup/move still\n\t// land here after a synchronous clearOpenMenus() flips isMenuOpen to false.\n\tconst [isPointing, setIsPointing] = useState(false)\n\tconst showElement = isMenuOpen || isPointing\n\n\tconst canvasEvents = useCanvasEvents()\n\n\tconst rPointerState = useRef({\n\t\tisDown: false,\n\t\tisDragging: false,\n\t\tbutton: 0,\n\t\tstart: new Vec(),\n\t})\n\n\t// Swallow the native contextmenu that follows a right-click pointerdown. Without\n\t// this, Radix's trigger catches the native event and opens a menu at the pointer-\n\t// DOWN position \u2014 then our own synthetic contextmenu (fired on pointerup) opens it\n\t// again at the release position, producing a visible flash.\n\tconst rCancelContextMenuSwallow = useRef<null | (() => void)>(null)\n\tuseEffect(\n\t\t() => () => {\n\t\t\trCancelContextMenuSwallow.current?.()\n\t\t\trCancelContextMenuSwallow.current = null\n\t\t},\n\t\t[]\n\t)\n\tconst swallowNextNativeContextMenu = useCallback(() => {\n\t\trCancelContextMenuSwallow.current?.()\n\t\tconst doc = editor.getContainerDocument()\n\t\tconst onContextMenu = (event: MouseEvent) => {\n\t\t\t// Skip our own synthetic contextmenu \u2014 only swallow the real browser one\n\t\t\tif (!event.isTrusted) return\n\t\t\trCancelContextMenuSwallow.current?.()\n\t\t\trCancelContextMenuSwallow.current = null\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopImmediatePropagation()\n\t\t}\n\t\tconst cancel = () => doc.removeEventListener('contextmenu', onContextMenu, true)\n\t\trCancelContextMenuSwallow.current = cancel\n\t\tdoc.addEventListener('contextmenu', onContextMenu, true)\n\t\t// Drop the listener on the next tick if it never fires (e.g. pointer moved off-screen)\n\t\tdoc.defaultView?.setTimeout(() => {\n\t\t\tif (rCancelContextMenuSwallow.current === cancel) {\n\t\t\t\tcancel()\n\t\t\t\trCancelContextMenuSwallow.current = null\n\t\t\t}\n\t\t}, 0)\n\t}, [editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tif (e.button !== 0 && e.button !== 2) return\n\n\t\t\tflushSync(() => setIsPointing(true))\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: true,\n\t\t\t\tisDragging: false,\n\t\t\t\tbutton: e.button,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\n\t\t\tif (e.button === 2) {\n\t\t\t\tif (!editor.options.rightClickPanning) {\n\t\t\t\t\t// Right-click panning off: close the open menu and swallow the native\n\t\t\t\t\t// contextmenu that would otherwise briefly open a new one (causing a flash).\n\t\t\t\t\tswallowNextNativeContextMenu()\n\t\t\t\t\teditor.menus.clearOpenMenus()\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\t// Forward right-click pointerdown through the canvas's own handler so\n\t\t\t\t// pointer capture is also set on the canvas (load-bearing: without this\n\t\t\t\t// the context menu briefly flashes closed during consecutive right-clicks).\n\t\t\t\t// We don't clearOpenMenus() \u2014 Radix's DismissableLayer closes the menu\n\t\t\t\t// via outside-click detection, keeping its internal state in sync.\n\t\t\t\tconst canvas =\n\t\t\t\t\teditor.getContainer().querySelector<HTMLDivElement>('.tl-canvas') ?? e.currentTarget\n\t\t\t\tcanvasEvents.onPointerDown?.({ ...e, currentTarget: canvas })\n\t\t\t\tswallowNextNativeContextMenu()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\teditor.menus.clearOpenMenus()\n\t\t},\n\t\t[canvasEvents, editor, swallowNextNativeContextMenu]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst state = rPointerState.current\n\t\t\tif (!state.isDown) return\n\n\t\t\t// Left-click: wait for the drag threshold before forwarding anything, then\n\t\t\t// replay pointerdown at the original start so the editor records the\n\t\t\t// correct drag origin. Right-click forwards moves immediately (pointerdown\n\t\t\t// was already dispatched in handlePointerDown).\n\t\t\tif (state.button !== 2 && !state.isDragging) {\n\t\t\t\tif (\n\t\t\t\t\tVec.Dist2(state.start, new Vec(e.clientX, e.clientY)) <=\n\t\t\t\t\teditor.options.dragDistanceSquared\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tstate.isDragging = true\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t...getPointerInfo(editor, { ...e, clientX: state.start.x, clientY: state.start.y }),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst isStaticRightClick = e.button === 2 && !rPointerState.current.isDragging\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\n\t\t\tif (isStaticRightClick && editor.options.rightClickPanning) {\n\t\t\t\t// Dispatch contextmenu on the canvas's parent (Radix's trigger) so the\n\t\t\t\t// menu opens at the release position. Bypassing the canvas avoids its\n\t\t\t\t// own onContextMenu handler, which preventDefaults non-synthesized events.\n\t\t\t\tconst canvas = editor.getContainer().querySelector<HTMLDivElement>('.tl-canvas')\n\t\t\t\tconst trigger = canvas?.parentElement ?? e.currentTarget\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\ttrigger.dispatchEvent(\n\t\t\t\t\t\tnew PointerEvent('contextmenu', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tclientX: e.clientX,\n\t\t\t\t\t\t\tclientY: e.clientY,\n\t\t\t\t\t\t\tbutton: 2,\n\t\t\t\t\t\t\tbuttons: 0,\n\t\t\t\t\t\t\tpointerId: e.pointerId,\n\t\t\t\t\t\t\tpointerType: e.pointerType,\n\t\t\t\t\t\t\tisPrimary: e.isPrimary,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tsetIsPointing(false)\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: false,\n\t\t\t\tisDragging: false,\n\t\t\t\tbutton: 0,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\tshowElement && (\n\t\t\t<div\n\t\t\t\tclassName=\"tlui-menu-click-capture\"\n\t\t\t\tdata-testid=\"menu-click-capture.content\"\n\t\t\t\t{...canvasEvents}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\tonContextMenu={(e) => {\n\t\t\t\t\te.preventDefault()\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/components/default-components/CanvasOverlays.mjs

@@ -0,0 +1,160 @@
+import { jsx } from "react/jsx-runtime";
+import { EffectScheduler, computed } from "@tldraw/state";
+import { memo, useEffect, useRef } from "react";
+import { useEditor } from "../../hooks/useEditor.mjs";
+import { Group2d } from "../../primitives/geometry/Group2d.mjs";
+import { debugFlags } from "../../utils/debug-flags.mjs";
+const CanvasOverlays = memo(function CanvasOverlays2() {
+  const editor = useEditor();
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const renderInputs$ = computed(
+      "canvas overlays render inputs",
+      () => {
+        const instance = editor.getInstanceState();
+        const camera = editor.getCamera();
+        return {
+          dpr: instance.devicePixelRatio,
+          w: instance.screenBounds.w,
+          h: instance.screenBounds.h,
+          cx: camera.x,
+          cy: camera.y,
+          zoom: camera.z
+        };
+      },
+      {
+        isEqual: (a, b) => a.dpr === b.dpr && a.w === b.w && a.h === b.h && a.cx === b.cx && a.cy === b.cy && a.zoom === b.zoom
+      }
+    );
+    const scheduler = new EffectScheduler("canvas overlays render", () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { dpr, w, h, cx, cy, zoom } = renderInputs$.get();
+      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.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const s = dpr * zoom;
+      ctx.setTransform(s, 0, 0, s, s * cx, s * cy);
+      for (const { util, overlays } of editor.overlays.getActiveOverlayEntries()) {
+        ctx.save();
+        util.render(ctx, overlays);
+        ctx.restore();
+      }
+      if (debugFlags.debugGeometry.get()) {
+        const currentPagePoint = editor.inputs.getCurrentPagePoint();
+        const renderingShapes = editor.getRenderingShapes();
+        for (const result of renderingShapes) {
+          const shape = editor.getShape(result.id);
+          if (!shape || shape.type === "group") continue;
+          const geometry = editor.getShapeGeometry(shape);
+          const pageTransform = editor.getShapePageTransform(shape);
+          if (!pageTransform) continue;
+          ctx.save();
+          const m = pageTransform;
+          ctx.transform(m.a, m.b, m.c, m.d, m.e, m.f);
+          ctx.strokeStyle = geometry.debugColor ?? "red";
+          ctx.lineWidth = 2 / zoom;
+          ctx.fillStyle = "none";
+          drawGeometryStroke(ctx, geometry);
+          const { vertices } = geometry;
+          for (let i = 0; i < vertices.length; i++) {
+            const v = vertices[i];
+            const hue = vertices.length > 1 ? 120 + (200 - 120) * i / (vertices.length - 1) : 160;
+            ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
+            ctx.strokeStyle = "black";
+            ctx.lineWidth = 1 / zoom;
+            ctx.beginPath();
+            ctx.arc(v.x, v.y, 2 / zoom, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+          }
+          const pointInShapeSpace = editor.getPointInShapeSpace(shape, currentPagePoint);
+          const dist = Math.abs(geometry.distanceToPoint(pointInShapeSpace, true)) * zoom;
+          if (dist < 150) {
+            const nearestPoint = geometry.nearestPoint(pointInShapeSpace);
+            const hitInside = geometry.distanceToPoint(pointInShapeSpace, true) < 0;
+            ctx.strokeStyle = hitInside ? "goldenrod" : "dodgerblue";
+            ctx.lineWidth = 2 / zoom;
+            ctx.globalAlpha = 1 - dist / 150;
+            ctx.beginPath();
+            ctx.moveTo(nearestPoint.x, nearestPoint.y);
+            ctx.lineTo(pointInShapeSpace.x, pointInShapeSpace.y);
+            ctx.stroke();
+            ctx.globalAlpha = 1;
+          }
+          ctx.restore();
+        }
+        ctx.save();
+        ctx.strokeStyle = "magenta";
+        ctx.fillStyle = "rgba(255, 0, 255, 0.1)";
+        ctx.lineWidth = 1 / zoom;
+        for (const { overlays } of editor.overlays.getActiveOverlayEntries()) {
+          for (const overlay of overlays) {
+            const geometry = editor.overlays.getOverlayGeometry(overlay);
+            if (!geometry) continue;
+            const vertices = geometry.vertices;
+            if (vertices.length < 2) continue;
+            ctx.beginPath();
+            ctx.moveTo(vertices[0].x, vertices[0].y);
+            for (let i = 1; i < vertices.length; i++) {
+              ctx.lineTo(vertices[i].x, vertices[i].y);
+            }
+            if (geometry.isClosed) {
+              ctx.closePath();
+              ctx.fill();
+            }
+            ctx.stroke();
+            for (const v of vertices) {
+              ctx.beginPath();
+              ctx.arc(v.x, v.y, 2 / zoom, 0, Math.PI * 2);
+              ctx.fill();
+            }
+          }
+        }
+        ctx.restore();
+      }
+    });
+    scheduler.attach();
+    scheduler.execute();
+    return () => scheduler.detach();
+  }, [editor]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "tl-canvas-overlays" });
+});
+function drawGeometryStroke(ctx, geometry) {
+  if (geometry instanceof Group2d) {
+    const prevStroke = ctx.strokeStyle;
+    for (const child of geometry.children) {
+      if (child.debugColor) ctx.strokeStyle = child.debugColor;
+      drawGeometryStroke(ctx, child);
+      ctx.strokeStyle = prevStroke;
+    }
+    for (const child of geometry.ignoredChildren) {
+      if (child.debugColor) ctx.strokeStyle = child.debugColor;
+      drawGeometryStroke(ctx, child);
+      ctx.strokeStyle = prevStroke;
+    }
+    return;
+  }
+  const vertices = geometry.vertices;
+  if (vertices.length < 2) return;
+  ctx.beginPath();
+  ctx.moveTo(vertices[0].x, vertices[0].y);
+  for (let i = 1; i < vertices.length; i++) {
+    ctx.lineTo(vertices[i].x, vertices[i].y);
+  }
+  if (geometry.isClosed) ctx.closePath();
+  ctx.stroke();
+}
+export {
+  CanvasOverlays
+};
+//# sourceMappingURL=CanvasOverlays.mjs.map

package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/components/default-components/CanvasOverlays.tsx"],
+  "sourcesContent": ["import { EffectScheduler, computed } from '@tldraw/state'\nimport { memo, useEffect, useRef } from 'react'\nimport { useEditor } from '../../hooks/useEditor'\nimport { Geometry2d } from '../../primitives/geometry/Geometry2d'\nimport { Group2d } from '../../primitives/geometry/Group2d'\nimport { debugFlags } from '../../utils/debug-flags'\n\ninterface RenderInputs {\n\tdpr: number\n\tw: number\n\th: number\n\tcx: number\n\tcy: number\n\tzoom: number\n}\n\n/** @internal @react */\nexport const CanvasOverlays = memo(function CanvasOverlays() {\n\tconst editor = useEditor()\n\tconst canvasRef = useRef<HTMLCanvasElement>(null)\n\n\tuseEffect(() => {\n\t\t// Bundle the primitive scalars the renderer needs into one computed so the\n\t\t// effect only refires on actual visual change. Reading the whole instance\n\t\t// state directly would otherwise wake the renderer on every cursor move,\n\t\t// brush update, etc.\n\n\t\tconst renderInputs$ = computed<RenderInputs>(\n\t\t\t'canvas overlays render inputs',\n\t\t\t() => {\n\t\t\t\tconst instance = editor.getInstanceState()\n\t\t\t\tconst camera = editor.getCamera()\n\t\t\t\treturn {\n\t\t\t\t\tdpr: instance.devicePixelRatio,\n\t\t\t\t\tw: instance.screenBounds.w,\n\t\t\t\t\th: instance.screenBounds.h,\n\t\t\t\t\tcx: camera.x,\n\t\t\t\t\tcy: camera.y,\n\t\t\t\t\tzoom: camera.z,\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\tisEqual: (a, b) =>\n\t\t\t\t\ta.dpr === b.dpr &&\n\t\t\t\t\ta.w === b.w &&\n\t\t\t\t\ta.h === b.h &&\n\t\t\t\t\ta.cx === b.cx &&\n\t\t\t\t\ta.cy === b.cy &&\n\t\t\t\t\ta.zoom === b.zoom,\n\t\t\t}\n\t\t)\n\n\t\tconst scheduler = new EffectScheduler('canvas overlays render', () => {\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 { dpr, w, h, cx, cy, zoom } = renderInputs$.get()\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.setTransform(1, 0, 0, 1, 0, 0)\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height)\n\n\t\t\t// One setTransform = DPR scale * zoom scale * camera translate, into page space.\n\t\t\tconst s = dpr * zoom\n\t\t\tctx.setTransform(s, 0, 0, s, s * cx, s * cy)\n\n\t\t\t// Render all active overlay utils in zIndex order (low to high).\n\t\t\tfor (const { util, overlays } of editor.overlays.getActiveOverlayEntries()) {\n\t\t\t\tctx.save()\n\t\t\t\tutil.render(ctx, overlays)\n\t\t\t\tctx.restore()\n\t\t\t}\n\n\t\t\t// Debug: draw all geometry\n\t\t\tif (debugFlags.debugGeometry.get()) {\n\t\t\t\tconst currentPagePoint = editor.inputs.getCurrentPagePoint()\n\n\t\t\t\t// Shape geometries\n\t\t\t\tconst renderingShapes = editor.getRenderingShapes()\n\t\t\t\tfor (const result of renderingShapes) {\n\t\t\t\t\tconst shape = editor.getShape(result.id)\n\t\t\t\t\tif (!shape || shape.type === 'group') continue\n\n\t\t\t\t\tconst geometry = editor.getShapeGeometry(shape)\n\t\t\t\t\tconst pageTransform = editor.getShapePageTransform(shape)\n\t\t\t\t\tif (!pageTransform) continue\n\n\t\t\t\t\tctx.save()\n\t\t\t\t\tconst m = pageTransform\n\t\t\t\t\tctx.transform(m.a, m.b, m.c, m.d, m.e, m.f)\n\n\t\t\t\t\t// Outline\n\t\t\t\t\tctx.strokeStyle = geometry.debugColor ?? 'red'\n\t\t\t\t\tctx.lineWidth = 2 / zoom\n\t\t\t\t\tctx.fillStyle = 'none'\n\t\t\t\t\tdrawGeometryStroke(ctx, geometry)\n\n\t\t\t\t\t// Vertices\n\t\t\t\t\tconst { vertices } = geometry\n\t\t\t\t\tfor (let i = 0; i < vertices.length; i++) {\n\t\t\t\t\t\tconst v = vertices[i]\n\t\t\t\t\t\tconst hue = vertices.length > 1 ? 120 + ((200 - 120) * i) / (vertices.length - 1) : 160\n\t\t\t\t\t\tctx.fillStyle = `hsl(${hue}, 100%, 50%)`\n\t\t\t\t\t\tctx.strokeStyle = 'black'\n\t\t\t\t\t\tctx.lineWidth = 1 / zoom\n\t\t\t\t\t\tctx.beginPath()\n\t\t\t\t\t\tctx.arc(v.x, v.y, 2 / zoom, 0, Math.PI * 2)\n\t\t\t\t\t\tctx.fill()\n\t\t\t\t\t\tctx.stroke()\n\t\t\t\t\t}\n\n\t\t\t\t\t// Nearest point line\n\t\t\t\t\tconst pointInShapeSpace = editor.getPointInShapeSpace(shape, currentPagePoint)\n\t\t\t\t\tconst dist = Math.abs(geometry.distanceToPoint(pointInShapeSpace, true)) * zoom\n\t\t\t\t\tif (dist < 150) {\n\t\t\t\t\t\tconst nearestPoint = geometry.nearestPoint(pointInShapeSpace)\n\t\t\t\t\t\tconst hitInside = geometry.distanceToPoint(pointInShapeSpace, true) < 0\n\t\t\t\t\t\tctx.strokeStyle = hitInside ? 'goldenrod' : 'dodgerblue'\n\t\t\t\t\t\tctx.lineWidth = 2 / zoom\n\t\t\t\t\t\tctx.globalAlpha = 1 - dist / 150\n\t\t\t\t\t\tctx.beginPath()\n\t\t\t\t\t\tctx.moveTo(nearestPoint.x, nearestPoint.y)\n\t\t\t\t\t\tctx.lineTo(pointInShapeSpace.x, pointInShapeSpace.y)\n\t\t\t\t\t\tctx.stroke()\n\t\t\t\t\t\tctx.globalAlpha = 1\n\t\t\t\t\t}\n\n\t\t\t\t\tctx.restore()\n\t\t\t\t}\n\n\t\t\t\t// Overlay hit-test geometries\n\t\t\t\tctx.save()\n\t\t\t\tctx.strokeStyle = 'magenta'\n\t\t\t\tctx.fillStyle = 'rgba(255, 0, 255, 0.1)'\n\t\t\t\tctx.lineWidth = 1 / zoom\n\t\t\t\tfor (const { overlays } of editor.overlays.getActiveOverlayEntries()) {\n\t\t\t\t\tfor (const overlay of overlays) {\n\t\t\t\t\t\tconst geometry = editor.overlays.getOverlayGeometry(overlay)\n\t\t\t\t\t\tif (!geometry) continue\n\t\t\t\t\t\tconst vertices = geometry.vertices\n\t\t\t\t\t\tif (vertices.length < 2) continue\n\t\t\t\t\t\tctx.beginPath()\n\t\t\t\t\t\tctx.moveTo(vertices[0].x, vertices[0].y)\n\t\t\t\t\t\tfor (let i = 1; i < vertices.length; i++) {\n\t\t\t\t\t\t\tctx.lineTo(vertices[i].x, vertices[i].y)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (geometry.isClosed) {\n\t\t\t\t\t\t\tctx.closePath()\n\t\t\t\t\t\t\tctx.fill()\n\t\t\t\t\t\t}\n\t\t\t\t\t\tctx.stroke()\n\t\t\t\t\t\tfor (const v of vertices) {\n\t\t\t\t\t\t\tctx.beginPath()\n\t\t\t\t\t\t\tctx.arc(v.x, v.y, 2 / zoom, 0, Math.PI * 2)\n\t\t\t\t\t\t\tctx.fill()\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tctx.restore()\n\t\t\t}\n\t\t})\n\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\t\treturn () => scheduler.detach()\n\t}, [editor])\n\n\treturn <canvas ref={canvasRef} className=\"tl-canvas-overlays\" />\n})\n\nfunction drawGeometryStroke(ctx: CanvasRenderingContext2D, geometry: Geometry2d) {\n\tif (geometry instanceof Group2d) {\n\t\tconst prevStroke = ctx.strokeStyle\n\t\tfor (const child of geometry.children) {\n\t\t\tif (child.debugColor) ctx.strokeStyle = child.debugColor\n\t\t\tdrawGeometryStroke(ctx, child)\n\t\t\tctx.strokeStyle = prevStroke\n\t\t}\n\t\tfor (const child of geometry.ignoredChildren) {\n\t\t\tif (child.debugColor) ctx.strokeStyle = child.debugColor\n\t\t\tdrawGeometryStroke(ctx, child)\n\t\t\tctx.strokeStyle = prevStroke\n\t\t}\n\t\treturn\n\t}\n\n\tconst vertices = geometry.vertices\n\tif (vertices.length < 2) return\n\tctx.beginPath()\n\tctx.moveTo(vertices[0].x, vertices[0].y)\n\tfor (let i = 1; i < vertices.length; i++) {\n\t\tctx.lineTo(vertices[i].x, vertices[i].y)\n\t}\n\tif (geometry.isClosed) ctx.closePath()\n\tctx.stroke()\n}\n"],
+  "mappings": "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",
+  "names": ["CanvasOverlays"]
+}