@tsdraw/react 0.4.0 → 0.5.1

package/dist/index.cjs

@@ -197,10 +197,10 @@ function ToolOverlay({
   ) });
 }
 function getDefaultToolbarIcon(toolId, isActive) {
-  if (toolId === "select") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPointer, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
-  if (toolId === "pen") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPencil, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
-  if (toolId === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEraser, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
-  if (toolId === "hand") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHandStop, { size: 18, stroke: isActive ? 1 : 1.8, fill: isActive ? "currentColor" : "none", style: isActive ? { stroke: "#000000" } : void 0 });
+  if (toolId === "select") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPointer, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "pen") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPencil, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEraser, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "hand") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHandStop, { size: 16, stroke: isActive ? 1 : 1.8, fill: isActive ? "currentColor" : "none", style: isActive ? { stroke: "#000000" } : void 0 });
   return null;
 }
 function Toolbar({ items, currentTool, onToolChange, style }) {
@@ -232,6 +232,103 @@ function getCanvasCursor(currentTool, state) {
   return state.showToolOverlay ? "none" : "crosshair";
 }
 
+// src/persistence/localIndexedDb.ts
+var DATABASE_PREFIX = "tsdraw_v1_";
+var DATABASE_VERSION = 1;
+var STORE = {
+  records: "records",
+  state: "state"
+};
+function requestToPromise(request) {
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error ?? new Error("IndexedDB request failed"));
+  });
+}
+function transactionDone(transaction) {
+  return new Promise((resolve, reject) => {
+    transaction.oncomplete = () => resolve();
+    transaction.onerror = () => reject(transaction.error ?? new Error("IndexedDB transaction failed"));
+    transaction.onabort = () => reject(transaction.error ?? new Error("IndexedDB transaction aborted"));
+  });
+}
+function openLocalDatabase(persistenceKey) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(`${DATABASE_PREFIX}${persistenceKey}`, DATABASE_VERSION);
+    request.onupgradeneeded = () => {
+      const database = request.result;
+      if (!database.objectStoreNames.contains(STORE.records)) {
+        database.createObjectStore(STORE.records);
+      }
+      if (!database.objectStoreNames.contains(STORE.state)) {
+        database.createObjectStore(STORE.state);
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error ?? new Error("Failed to open IndexedDB"));
+  });
+}
+var TsdrawLocalIndexedDb = class {
+  databasePromise;
+  constructor(persistenceKey) {
+    this.databasePromise = openLocalDatabase(persistenceKey);
+  }
+  async close() {
+    const database = await this.databasePromise;
+    database.close();
+  }
+  async load(sessionId) {
+    const database = await this.databasePromise;
+    const transaction = database.transaction([STORE.records, STORE.state], "readonly");
+    const recordStore = transaction.objectStore(STORE.records);
+    const stateStore = transaction.objectStore(STORE.state);
+    const records = await requestToPromise(recordStore.getAll());
+    let state = (await requestToPromise(stateStore.get(sessionId)))?.snapshot ?? null;
+    if (!state) {
+      const allStates = await requestToPromise(stateStore.getAll());
+      if (allStates.length > 0) {
+        allStates.sort((left, right) => left.updatedAt - right.updatedAt);
+        state = allStates[allStates.length - 1]?.snapshot ?? null;
+      }
+    }
+    await transactionDone(transaction);
+    return { records, state };
+  }
+  async storeSnapshot(args) {
+    const database = await this.databasePromise;
+    const transaction = database.transaction([STORE.records, STORE.state], "readwrite");
+    const recordStore = transaction.objectStore(STORE.records);
+    const stateStore = transaction.objectStore(STORE.state);
+    recordStore.clear();
+    for (const record of args.records) {
+      recordStore.put(record, record.id);
+    }
+    const stateRow = {
+      id: args.sessionId,
+      snapshot: args.state,
+      updatedAt: Date.now()
+    };
+    stateStore.put(stateRow, args.sessionId);
+    await transactionDone(transaction);
+  }
+};
+
+// src/persistence/sessionId.ts
+var SESSION_STORAGE_KEY = "TSDRAW_TAB_SESSION_ID_v1";
+function createSessionId() {
+  const timestamp = Date.now().toString(36);
+  const randomPart = Math.random().toString(36).slice(2, 10);
+  return `tsdraw-session-${timestamp}-${randomPart}`;
+}
+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;
+}
+
 // src/canvas/useTsdrawCanvasController.ts
 function toScreenRect(editor, bounds) {
   const { x, y, zoom } = editor.viewport;
@@ -255,6 +352,9 @@ function useTsdrawCanvasController(options = {}) {
   const lastPointerClientRef = react.useRef(null);
   const currentToolRef = react.useRef(options.initialTool ?? "pen");
   const selectedShapeIdsRef = react.useRef([]);
+  const schedulePersistRef = react.useRef(null);
+  const isPointerActiveRef = react.useRef(false);
+  const pendingRemoteDocumentRef = react.useRef(null);
   const selectionRotationRef = react.useRef(0);
   const resizeRef = react.useRef({
     handle: null,
@@ -300,6 +400,9 @@ function useTsdrawCanvasController(options = {}) {
   react.useEffect(() => {
     selectionRotationRef.current = selectionRotationDeg;
   }, [selectionRotationDeg]);
+  react.useEffect(() => {
+    schedulePersistRef.current?.();
+  }, [selectedShapeIds, currentTool, drawColor, drawDash, drawSize]);
   const render = react.useCallback(() => {
     const canvas = canvasRef.current;
     const editor = editorRef.current;
@@ -411,6 +514,16 @@ function useTsdrawCanvasController(options = {}) {
     if (!editor.tools.hasTool(initialTool)) {
       editor.setCurrentTool("pen");
     }
+    let disposed = false;
+    let ignorePersistenceChanges = false;
+    let disposeMount;
+    let persistenceDb = null;
+    let persistenceChannel = null;
+    let isPersisting = false;
+    let needsAnotherPersist = false;
+    let persistenceActive = false;
+    const persistenceKey = options.persistenceKey;
+    const sessionId = getOrCreateSessionId();
     const activeTool = editor.getCurrentToolId();
     editorRef.current = editor;
     setCurrentToolState(activeTool);
@@ -427,12 +540,81 @@ function useTsdrawCanvasController(options = {}) {
       canvas.height = Math.round(rect.height * dpr);
       canvas.style.width = `${rect.width}px`;
       canvas.style.height = `${rect.height}px`;
-      editor.viewport.x = 0;
-      editor.viewport.y = 0;
-      editor.viewport.zoom = 1;
+      if (!persistenceActive) {
+        editor.setViewport({ x: 0, y: 0, zoom: 1 });
+      }
       render();
       refreshSelectionBounds(editor);
     };
+    const persistSnapshot = async () => {
+      if (!persistenceDb || !persistenceKey || ignorePersistenceChanges || disposed) return;
+      const snapshot = editor.getPersistenceSnapshot({
+        selectedShapeIds: selectedShapeIdsRef.current
+      });
+      await persistenceDb.storeSnapshot({
+        records: snapshot.document.records,
+        state: snapshot.state,
+        sessionId
+      });
+      persistenceChannel?.postMessage({
+        type: "tsdraw:persisted",
+        senderSessionId: sessionId
+      });
+    };
+    const schedulePersist = () => {
+      if (!persistenceDb || !persistenceKey || disposed) return;
+      const runPersist = async () => {
+        if (isPersisting) {
+          needsAnotherPersist = true;
+          return;
+        }
+        isPersisting = true;
+        try {
+          do {
+            needsAnotherPersist = false;
+            await persistSnapshot();
+          } while (needsAnotherPersist && !disposed);
+        } catch (error) {
+          console.error("tsdraw persistence failed", error);
+        } finally {
+          isPersisting = false;
+        }
+      };
+      void runPersist();
+    };
+    schedulePersistRef.current = schedulePersist;
+    const reconcileSelectionAfterDocumentLoad = () => {
+      const nextSelectedShapeIds = selectedShapeIdsRef.current.filter((shapeId) => editor.getShape(shapeId) != null);
+      if (nextSelectedShapeIds.length !== selectedShapeIdsRef.current.length) {
+        selectedShapeIdsRef.current = nextSelectedShapeIds;
+        setSelectedShapeIds(nextSelectedShapeIds);
+      }
+      refreshSelectionBounds(editor, nextSelectedShapeIds);
+    };
+    const applyRemoteDocumentSnapshot = (document) => {
+      ignorePersistenceChanges = true;
+      editor.loadDocumentSnapshot(document);
+      reconcileSelectionAfterDocumentLoad();
+      render();
+      ignorePersistenceChanges = false;
+    };
+    const applyLoadedSnapshot = (snapshot) => {
+      ignorePersistenceChanges = true;
+      const nextSelectionIds = editor.loadPersistenceSnapshot(snapshot);
+      setSelectedShapeIds(nextSelectionIds);
+      selectedShapeIdsRef.current = nextSelectionIds;
+      const nextTool = editor.getCurrentToolId();
+      currentToolRef.current = nextTool;
+      setCurrentToolState(nextTool);
+      const nextDrawStyle = editor.getCurrentDrawStyle();
+      setDrawColor(nextDrawStyle.color);
+      setDrawDash(nextDrawStyle.dash);
+      setDrawSize(nextDrawStyle.size);
+      setSelectionRotationDeg(0);
+      render();
+      refreshSelectionBounds(editor, nextSelectionIds);
+      ignorePersistenceChanges = false;
+    };
     const getPagePoint = (e) => {
       const rect = canvas.getBoundingClientRect();
       return editor.screenToPage(e.clientX - rect.left, e.clientY - rect.top);
@@ -443,6 +625,7 @@ function useTsdrawCanvasController(options = {}) {
     };
     const handlePointerDown = (e) => {
       if (!canvas.contains(e.target)) return;
+      isPointerActiveRef.current = true;
       canvas.setPointerCapture(e.pointerId);
       lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
       updatePointerPreview(e.clientX, e.clientY);
@@ -547,6 +730,7 @@ function useTsdrawCanvasController(options = {}) {
       refreshSelectionBounds(editor);
     };
     const handlePointerUp = (e) => {
+      isPointerActiveRef.current = false;
       lastPointerClientRef.current = null;
       updatePointerPreview(e.clientX, e.clientY);
       const { x, y } = getPagePoint(e);
@@ -607,12 +791,22 @@ function useTsdrawCanvasController(options = {}) {
           selectDragRef.current.mode = "none";
           render();
           refreshSelectionBounds(editor, ids);
+          if (pendingRemoteDocumentRef.current) {
+            const pendingRemoteDocument = pendingRemoteDocumentRef.current;
+            pendingRemoteDocumentRef.current = null;
+            applyRemoteDocumentSnapshot(pendingRemoteDocument);
+          }
           return;
         }
       }
       editor.tools.pointerUp();
       render();
       refreshSelectionBounds(editor);
+      if (pendingRemoteDocumentRef.current) {
+        const pendingRemoteDocument = pendingRemoteDocumentRef.current;
+        pendingRemoteDocumentRef.current = null;
+        applyRemoteDocumentSnapshot(pendingRemoteDocument);
+      }
     };
     const handleKeyDown = (e) => {
       editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
@@ -624,6 +818,41 @@ function useTsdrawCanvasController(options = {}) {
       editor.tools.keyUp({ key: e.key });
       render();
     };
+    const initializePersistence = async () => {
+      if (!persistenceKey) return;
+      persistenceDb = new TsdrawLocalIndexedDb(persistenceKey);
+      const loaded = await persistenceDb.load(sessionId);
+      const snapshot = {};
+      if (loaded.records.length > 0) {
+        snapshot.document = { records: loaded.records };
+      }
+      if (loaded.state) {
+        snapshot.state = loaded.state;
+      }
+      if (snapshot.document || snapshot.state) {
+        applyLoadedSnapshot(snapshot);
+      }
+      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;
+            return;
+          }
+          applyRemoteDocumentSnapshot(nextDocument);
+        }
+      };
+    };
+    const cleanupEditorListener = editor.listen(() => {
+      if (ignorePersistenceChanges) return;
+      schedulePersist();
+    });
     resize();
     const ro = new ResizeObserver(resize);
     ro.observe(container);
@@ -632,7 +861,10 @@ function useTsdrawCanvasController(options = {}) {
     window.addEventListener("pointerup", handlePointerUp);
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
-    const disposeMount = options.onMount?.({
+    void initializePersistence().catch((error) => {
+      console.error("failed to initialize tsdraw persistence", error);
+    });
+    disposeMount = options.onMount?.({
       editor,
       container,
       canvas,
@@ -652,6 +884,9 @@ function useTsdrawCanvasController(options = {}) {
       }
     });
     return () => {
+      disposed = true;
+      schedulePersistRef.current = null;
+      cleanupEditorListener();
       disposeMount?.();
       ro.disconnect();
       canvas.removeEventListener("pointerdown", handlePointerDown);
@@ -659,12 +894,17 @@ function useTsdrawCanvasController(options = {}) {
       window.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
+      isPointerActiveRef.current = false;
+      pendingRemoteDocumentRef.current = null;
+      persistenceChannel?.close();
+      void persistenceDb?.close();
       editorRef.current = null;
     };
   }, [
     getPagePointFromClient,
     options.initialTool,
     options.onMount,
+    options.persistenceKey,
     options.toolDefinitions,
     refreshSelectionBounds,
     render,
@@ -868,10 +1108,11 @@ function Tsdraw(props) {
     toolDefinitions,
     initialTool,
     theme: resolvedTheme,
+    persistenceKey: props.persistenceKey,
     stylePanelToolIds,
     onMount: props.onMount
   });
-  const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 16);
+  const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 14);
   const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8, 8);
   const canvasCursor = props.uiOptions?.cursor?.getCursor?.(cursorContext) ?? defaultCanvasCursor;
   const defaultToolOverlay = /* @__PURE__ */ jsxRuntime.jsx(