@tsdraw/react 0.6.0 → 0.6.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DEFAULT_COLORS, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, isSelectTool } from '@tsdraw/core';
 import { IconPointer, IconPencil, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
@@ -363,11 +363,15 @@ function createSessionId() {
 }
 function getOrCreateSessionId() {
   if (typeof window === "undefined") return createSessionId();
-  const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
-  if (existing) return existing;
-  const newId = createSessionId();
-  window.sessionStorage.setItem(SESSION_STORAGE_KEY, newId);
-  return newId;
+  try {
+    const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (existing) return existing;
+    const newId = createSessionId();
+    window.sessionStorage.setItem(SESSION_STORAGE_KEY, newId);
+    return newId;
+  } catch {
+    return createSessionId();
+  }
 }
 
 // src/canvas/useTsdrawCanvasController.ts
@@ -386,6 +390,7 @@ function resolveDrawColor(colorStyle, theme) {
 function useTsdrawCanvasController(options = {}) {
   const stylePanelToolIds = options.stylePanelToolIds ?? ["pen"];
   const stylePanelToolIdsRef = useRef(stylePanelToolIds);
+  const onMountRef = useRef(options.onMount);
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
   const editorRef = useRef(null);
@@ -438,6 +443,9 @@ function useTsdrawCanvasController(options = {}) {
   useEffect(() => {
     stylePanelToolIdsRef.current = stylePanelToolIds;
   }, [stylePanelToolIds]);
+  useEffect(() => {
+    onMountRef.current = options.onMount;
+  }, [options.onMount]);
   useEffect(() => {
     selectedShapeIdsRef.current = selectedShapeIds;
   }, [selectedShapeIds]);
@@ -608,6 +616,7 @@ function useTsdrawCanvasController(options = {}) {
         history: editor.getHistorySnapshot(),
         sessionId
       });
+      if (disposed) return;
       persistenceChannel?.postMessage({
         type: "tsdraw:persisted",
         senderSessionId: sessionId
@@ -710,7 +719,7 @@ function useTsdrawCanvasController(options = {}) {
           additive: first.shiftKey,
           initialSelection: [...selectedShapeIdsRef.current]
         };
-        setSelectionBrush({ left: e.offsetX, top: e.offsetY, width: 0, height: 0 });
+        setSelectionBrush(toScreenRect(editor, { minX: x, minY: y, maxX: x, maxY: y }));
         if (!e.shiftKey) {
           setSelectedShapeIds([]);
           selectedShapeIdsRef.current = [];
@@ -867,6 +876,35 @@ function useTsdrawCanvasController(options = {}) {
       }
       editor.endHistoryEntry();
     };
+    const handlePointerCancel = () => {
+      if (!isPointerActiveRef.current) return;
+      isPointerActiveRef.current = false;
+      lastPointerClientRef.current = null;
+      editor.input.pointerUp();
+      if (currentToolRef.current === "select") {
+        const drag = selectDragRef.current;
+        if (drag.mode === "rotate") setIsRotatingSelection(false);
+        if (drag.mode === "resize") setIsResizingSelection(false);
+        if (drag.mode === "move") setIsMovingSelection(false);
+        if (drag.mode === "marquee") setSelectionBrush(null);
+        if (drag.mode !== "none") {
+          selectDragRef.current.mode = "none";
+          render();
+          refreshSelectionBounds(editor);
+        }
+        editor.endHistoryEntry();
+      } else {
+        editor.tools.pointerUp();
+        render();
+        refreshSelectionBounds(editor);
+        editor.endHistoryEntry();
+      }
+      if (pendingRemoteDocumentRef.current) {
+        const pending = pendingRemoteDocumentRef.current;
+        pendingRemoteDocumentRef.current = null;
+        applyRemoteDocumentSnapshot(pending);
+      }
+    };
     const handleKeyDown = (e) => {
       const isMetaPressed = e.metaKey || e.ctrlKey;
       const loweredKey = e.key.toLowerCase();
@@ -913,22 +951,42 @@ function useTsdrawCanvasController(options = {}) {
         }
         editor.loadHistorySnapshot(loaded.history);
         syncHistoryState();
+        if (disposed) return;
         persistenceActive = true;
-        persistenceChannel = new BroadcastChannel(`tsdraw:persistence:${persistenceKey}`);
-        persistenceChannel.onmessage = async (event) => {
-          const data = event.data;
-          if (data?.type !== "tsdraw:persisted" || data.senderSessionId === sessionId) return;
-          if (!persistenceDb || disposed) return;
-          const nextLoaded = await persistenceDb.load(sessionId);
-          if (nextLoaded.records.length > 0) {
-            const nextDocument = { records: nextLoaded.records };
-            if (isPointerActiveRef.current) {
-              pendingRemoteDocumentRef.current = nextDocument;
+        if (typeof BroadcastChannel !== "undefined") {
+          persistenceChannel = new BroadcastChannel(`tsdraw:persistence:${persistenceKey}`);
+          let isLoadingRemote = false;
+          let pendingRemoteLoad = false;
+          persistenceChannel.onmessage = () => {
+            if (disposed) return;
+            if (isLoadingRemote) {
+              pendingRemoteLoad = true;
               return;
             }
-            applyRemoteDocumentSnapshot(nextDocument);
-          }
-        };
+            isLoadingRemote = true;
+            const processLoad = async () => {
+              try {
+                do {
+                  pendingRemoteLoad = false;
+                  if (!persistenceDb || disposed) return;
+                  const nextLoaded = await persistenceDb.load(sessionId);
+                  if (disposed) return;
+                  if (nextLoaded.records.length > 0) {
+                    const nextDocument = { records: nextLoaded.records };
+                    if (isPointerActiveRef.current) {
+                      pendingRemoteDocumentRef.current = nextDocument;
+                      return;
+                    }
+                    applyRemoteDocumentSnapshot(nextDocument);
+                  }
+                } while (pendingRemoteLoad && !disposed);
+              } finally {
+                isLoadingRemote = false;
+              }
+            };
+            void processLoad();
+          };
+        }
       } finally {
         if (!disposed) {
           setIsPersistenceReady(true);
@@ -950,12 +1008,13 @@ function useTsdrawCanvasController(options = {}) {
     canvas.addEventListener("pointerdown", handlePointerDown);
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
     void initializePersistence().catch((error) => {
       console.error("failed to initialize tsdraw persistence", error);
     });
-    disposeMount = options.onMount?.({
+    disposeMount = onMountRef.current?.({
       editor,
       container,
       canvas,
@@ -1004,6 +1063,7 @@ function useTsdrawCanvasController(options = {}) {
       canvas.removeEventListener("pointerdown", handlePointerDown);
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerCancel);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       isPointerActiveRef.current = false;
@@ -1015,7 +1075,6 @@ function useTsdrawCanvasController(options = {}) {
   }, [
     getPagePointFromClient,
     options.initialTool,
-    options.onMount,
     options.persistenceKey,
     options.toolDefinitions,
     refreshSelectionBounds,
@@ -1135,6 +1194,8 @@ function useTsdrawCanvasController(options = {}) {
   };
 }
 var DEFAULT_TOOLBAR_PARTS = [["undo", "redo"], ["select", "hand", "pen", "eraser"]];
+var EMPTY_CUSTOM_TOOLS = [];
+var EMPTY_CUSTOM_ELEMENTS = [];
 var DEFAULT_TOOL_LABELS = {
   select: "Select",
   pen: "Pen",
@@ -1180,14 +1241,14 @@ function resolvePlacementStyle(placement, fallbackAnchor, fallbackOffsetX, fallb
     if (offsetY) transforms.push(`translateY(${offsetY}px)`);
   }
   if (transforms.length > 0) result.transform = transforms.join(" ");
-  return { ...result, ...placement?.style ?? {} };
+  return placement?.style ? { ...result, ...placement.style } : result;
 }
 function Tsdraw(props) {
   const [systemTheme, setSystemTheme] = useState(() => {
     if (typeof window === "undefined") return "light";
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   });
-  const customTools = props.customTools ?? [];
+  const customTools = props.customTools ?? EMPTY_CUSTOM_TOOLS;
   const toolbarPartIds = props.uiOptions?.toolbar?.parts ?? DEFAULT_TOOLBAR_PARTS;
   const customToolMap = useMemo(
     () => new Map(customTools.map((customTool) => [customTool.id, customTool])),
@@ -1294,7 +1355,16 @@ function Tsdraw(props) {
     }
   );
   const overlayNode = props.uiOptions?.overlays?.renderToolOverlay?.({ defaultOverlay: defaultToolOverlay, overlayState: toolOverlay, currentTool }) ?? defaultToolOverlay;
-  const customElements = props.uiOptions?.customElements ?? [];
+  const customElements = props.uiOptions?.customElements ?? EMPTY_CUSTOM_ELEMENTS;
+  const onColorSelect = useCallback((color) => {
+    applyDrawStyle({ color });
+  }, [applyDrawStyle]);
+  const onDashSelect = useCallback((dash) => {
+    applyDrawStyle({ dash });
+  }, [applyDrawStyle]);
+  const onSizeSelect = useCallback((size) => {
+    applyDrawStyle({ size });
+  }, [applyDrawStyle]);
   const toolbarParts = useMemo(
     () => toolbarPartIds.map((toolbarPart, partIndex) => {
       const items = toolbarPart.map((item) => {
@@ -1389,9 +1459,9 @@ function Tsdraw(props) {
             drawColor,
             drawDash,
             drawSize,
-            onColorSelect: (color) => applyDrawStyle({ color }),
-            onDashSelect: (dash) => applyDrawStyle({ dash }),
-            onSizeSelect: (size) => applyDrawStyle({ size })
+            onColorSelect,
+            onDashSelect,
+            onSizeSelect
           }
         ),
         customElements.map((customElement) => /* @__PURE__ */ jsx(