rita-workspace 0.4.7 → 0.4.9

package/dist/index.d.mts

@@ -99,6 +99,7 @@ interface WorkspaceContextValue {
     activeDrawing: Drawing | null;
     isLoading: boolean;
     error: string | null;
+    isDrawingConflict: boolean;
     lang: string;
     t: Translations;
     createNewDrawing: (name?: string) => Promise<Drawing | null>;

package/dist/index.d.ts

@@ -99,6 +99,7 @@ interface WorkspaceContextValue {
     activeDrawing: Drawing | null;
     isLoading: boolean;
     error: string | null;
+    isDrawingConflict: boolean;
     lang: string;
     t: Translations;
     createNewDrawing: (name?: string) => Promise<Drawing | null>;

package/dist/index.js

@@ -323,12 +323,70 @@ function useWorkspaceLang() {
   }
   return { lang: context.lang, t: context.t };
 }
+var TAB_ID = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+var TABS_KEY = "rita-workspace-tabs";
+var TAB_CHANNEL = "rita-workspace-tabs";
+function getTabsMap() {
+  try {
+    return JSON.parse(localStorage.getItem(TABS_KEY) || "{}");
+  } catch {
+    return {};
+  }
+}
+function setTabDrawing(drawingId) {
+  const tabs = getTabsMap();
+  if (drawingId) {
+    tabs[TAB_ID] = drawingId;
+  } else {
+    delete tabs[TAB_ID];
+  }
+  localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+}
+function isDrawingOpenInOtherTab(drawingId) {
+  const tabs = getTabsMap();
+  return Object.entries(tabs).some(
+    ([tabId, dId]) => tabId !== TAB_ID && dId === drawingId
+  );
+}
 function WorkspaceProvider({ children, lang = "en" }) {
   const [workspace, setWorkspace] = (0, import_react.useState)(null);
   const [drawings, setDrawings] = (0, import_react.useState)([]);
   const [activeDrawing, setActiveDrawing2] = (0, import_react.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [error, setError] = (0, import_react.useState)(null);
+  const [isDrawingConflict, setIsDrawingConflict] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const drawingId = activeDrawing?.id || null;
+    setTabDrawing(drawingId);
+    if (drawingId) {
+      setIsDrawingConflict(isDrawingOpenInOtherTab(drawingId));
+    } else {
+      setIsDrawingConflict(false);
+    }
+    let channel = null;
+    try {
+      channel = new BroadcastChannel(TAB_CHANNEL);
+      channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
+      channel.onmessage = (event) => {
+        if (event.data?.tabId !== TAB_ID && drawingId) {
+          setIsDrawingConflict(isDrawingOpenInOtherTab(drawingId));
+        }
+      };
+    } catch {
+    }
+    return () => {
+      channel?.close();
+    };
+  }, [activeDrawing?.id]);
+  (0, import_react.useEffect)(() => {
+    const onUnload = () => {
+      const tabs = getTabsMap();
+      delete tabs[TAB_ID];
+      localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+    };
+    window.addEventListener("beforeunload", onUnload);
+    return () => window.removeEventListener("beforeunload", onUnload);
+  }, []);
   const t = getTranslations(lang);
   (0, import_react.useEffect)(() => {
     async function init() {
@@ -339,9 +397,23 @@ function WorkspaceProvider({ children, lang = "en" }) {
         const allDrawings = await getAllDrawings();
         const wsDrawings = allDrawings.filter((d) => ws.drawingIds.includes(d.id));
         setDrawings(wsDrawings);
-        if (ws.activeDrawingId) {
-          const active = await getDrawing(ws.activeDrawingId);
-          setActiveDrawing2(active || null);
+        const lastDrawingId = sessionStorage.getItem("rita-workspace-tab-drawing");
+        let active = null;
+        if (lastDrawingId) {
+          active = wsDrawings.find((d) => d.id === lastDrawingId) || null;
+          if (!active) {
+            const fromDb = await getDrawing(lastDrawingId);
+            if (fromDb && ws.drawingIds.includes(fromDb.id)) {
+              active = fromDb;
+            }
+          }
+        }
+        if (!active && wsDrawings.length > 0) {
+          active = wsDrawings[0];
+        }
+        if (active) {
+          setActiveDrawing2(active);
+          sessionStorage.setItem("rita-workspace-tab-drawing", active.id);
         }
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to load workspace");
@@ -357,10 +429,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const allDrawings = await getAllDrawings();
       const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
       setDrawings(wsDrawings);
-      if (workspace.activeDrawingId) {
-        const active = await getDrawing(workspace.activeDrawingId);
-        if (active) setActiveDrawing2(active);
-      }
     } catch (err) {
     }
   }, [workspace]);
@@ -370,7 +438,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const defaultName = `${t.newDrawing} ${drawings.length + 1}`;
       const drawing = await createDrawing(name || defaultName);
       await addDrawingToWorkspace(workspace.id, drawing.id);
-      await setActiveDrawing(workspace.id, drawing.id);
       setDrawings((prev) => [...prev, drawing]);
       setActiveDrawing2(drawing);
       setWorkspace((prev) => prev ? {
@@ -378,6 +445,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
         drawingIds: [...prev.drawingIds, drawing.id],
         activeDrawingId: drawing.id
       } : null);
+      sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
       return drawing;
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to create drawing");
@@ -389,9 +457,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
     try {
       const drawing = await getDrawing(id);
       if (drawing) {
-        await setActiveDrawing(workspace.id, id);
         setActiveDrawing2(drawing);
         setWorkspace((prev) => prev ? { ...prev, activeDrawingId: id } : null);
+        sessionStorage.setItem("rita-workspace-tab-drawing", id);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to switch drawing");
@@ -607,6 +675,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     activeDrawing,
     isLoading,
     error,
+    isDrawingConflict,
     lang,
     t,
     createNewDrawing,
@@ -988,11 +1057,15 @@ var DrawingsDialog = ({
   const [position, setPosition] = (0, import_react5.useState)(null);
   const dragRef = (0, import_react5.useRef)(null);
   const dialogRef = (0, import_react5.useRef)(null);
+  const prevOpenRef = (0, import_react5.useRef)(false);
   (0, import_react5.useEffect)(() => {
     if (open) {
       refreshDrawings();
-      setPosition(null);
+      if (!prevOpenRef.current) {
+        setPosition(null);
+      }
     }
+    prevOpenRef.current = open;
   }, [open, refreshDrawings]);
   const handleMouseDown = (0, import_react5.useCallback)((e) => {
     if (e.target.closest("button")) return;
@@ -1099,17 +1172,16 @@ var DrawingsDialog = ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.4)",
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
         display: position ? "block" : "flex",
         alignItems: "center",
         justifyContent: "center",
-        zIndex: 9999,
-        pointerEvents: position ? "none" : "auto"
+        zIndex: 9999
       },
       onClick: (e) => {
-        if (!position && e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: { ...dialogStyle, pointerEvents: "auto" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {

package/dist/index.mjs

@@ -261,12 +261,70 @@ function useWorkspaceLang() {
   }
   return { lang: context.lang, t: context.t };
 }
+var TAB_ID = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+var TABS_KEY = "rita-workspace-tabs";
+var TAB_CHANNEL = "rita-workspace-tabs";
+function getTabsMap() {
+  try {
+    return JSON.parse(localStorage.getItem(TABS_KEY) || "{}");
+  } catch {
+    return {};
+  }
+}
+function setTabDrawing(drawingId) {
+  const tabs = getTabsMap();
+  if (drawingId) {
+    tabs[TAB_ID] = drawingId;
+  } else {
+    delete tabs[TAB_ID];
+  }
+  localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+}
+function isDrawingOpenInOtherTab(drawingId) {
+  const tabs = getTabsMap();
+  return Object.entries(tabs).some(
+    ([tabId, dId]) => tabId !== TAB_ID && dId === drawingId
+  );
+}
 function WorkspaceProvider({ children, lang = "en" }) {
   const [workspace, setWorkspace] = useState(null);
   const [drawings, setDrawings] = useState([]);
   const [activeDrawing, setActiveDrawing2] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [isDrawingConflict, setIsDrawingConflict] = useState(false);
+  useEffect(() => {
+    const drawingId = activeDrawing?.id || null;
+    setTabDrawing(drawingId);
+    if (drawingId) {
+      setIsDrawingConflict(isDrawingOpenInOtherTab(drawingId));
+    } else {
+      setIsDrawingConflict(false);
+    }
+    let channel = null;
+    try {
+      channel = new BroadcastChannel(TAB_CHANNEL);
+      channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
+      channel.onmessage = (event) => {
+        if (event.data?.tabId !== TAB_ID && drawingId) {
+          setIsDrawingConflict(isDrawingOpenInOtherTab(drawingId));
+        }
+      };
+    } catch {
+    }
+    return () => {
+      channel?.close();
+    };
+  }, [activeDrawing?.id]);
+  useEffect(() => {
+    const onUnload = () => {
+      const tabs = getTabsMap();
+      delete tabs[TAB_ID];
+      localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+    };
+    window.addEventListener("beforeunload", onUnload);
+    return () => window.removeEventListener("beforeunload", onUnload);
+  }, []);
   const t = getTranslations(lang);
   useEffect(() => {
     async function init() {
@@ -277,9 +335,23 @@ function WorkspaceProvider({ children, lang = "en" }) {
         const allDrawings = await getAllDrawings();
         const wsDrawings = allDrawings.filter((d) => ws.drawingIds.includes(d.id));
         setDrawings(wsDrawings);
-        if (ws.activeDrawingId) {
-          const active = await getDrawing(ws.activeDrawingId);
-          setActiveDrawing2(active || null);
+        const lastDrawingId = sessionStorage.getItem("rita-workspace-tab-drawing");
+        let active = null;
+        if (lastDrawingId) {
+          active = wsDrawings.find((d) => d.id === lastDrawingId) || null;
+          if (!active) {
+            const fromDb = await getDrawing(lastDrawingId);
+            if (fromDb && ws.drawingIds.includes(fromDb.id)) {
+              active = fromDb;
+            }
+          }
+        }
+        if (!active && wsDrawings.length > 0) {
+          active = wsDrawings[0];
+        }
+        if (active) {
+          setActiveDrawing2(active);
+          sessionStorage.setItem("rita-workspace-tab-drawing", active.id);
         }
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to load workspace");
@@ -295,10 +367,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const allDrawings = await getAllDrawings();
       const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
       setDrawings(wsDrawings);
-      if (workspace.activeDrawingId) {
-        const active = await getDrawing(workspace.activeDrawingId);
-        if (active) setActiveDrawing2(active);
-      }
     } catch (err) {
     }
   }, [workspace]);
@@ -308,7 +376,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const defaultName = `${t.newDrawing} ${drawings.length + 1}`;
       const drawing = await createDrawing(name || defaultName);
       await addDrawingToWorkspace(workspace.id, drawing.id);
-      await setActiveDrawing(workspace.id, drawing.id);
       setDrawings((prev) => [...prev, drawing]);
       setActiveDrawing2(drawing);
       setWorkspace((prev) => prev ? {
@@ -316,6 +383,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
         drawingIds: [...prev.drawingIds, drawing.id],
         activeDrawingId: drawing.id
       } : null);
+      sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
       return drawing;
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to create drawing");
@@ -327,9 +395,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
     try {
       const drawing = await getDrawing(id);
       if (drawing) {
-        await setActiveDrawing(workspace.id, id);
         setActiveDrawing2(drawing);
         setWorkspace((prev) => prev ? { ...prev, activeDrawingId: id } : null);
+        sessionStorage.setItem("rita-workspace-tab-drawing", id);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to switch drawing");
@@ -545,6 +613,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     activeDrawing,
     isLoading,
     error,
+    isDrawingConflict,
     lang,
     t,
     createNewDrawing,
@@ -926,11 +995,15 @@ var DrawingsDialog = ({
   const [position, setPosition] = useState4(null);
   const dragRef = useRef2(null);
   const dialogRef = useRef2(null);
+  const prevOpenRef = useRef2(false);
   useEffect3(() => {
     if (open) {
       refreshDrawings();
-      setPosition(null);
+      if (!prevOpenRef.current) {
+        setPosition(null);
+      }
     }
+    prevOpenRef.current = open;
   }, [open, refreshDrawings]);
   const handleMouseDown = useCallback2((e) => {
     if (e.target.closest("button")) return;
@@ -1037,17 +1110,16 @@ var DrawingsDialog = ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.4)",
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
         display: position ? "block" : "flex",
         alignItems: "center",
         justifyContent: "center",
-        zIndex: 9999,
-        pointerEvents: position ? "none" : "auto"
+        zIndex: 9999
       },
       onClick: (e) => {
-        if (!position && e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: { ...dialogStyle, pointerEvents: "auto" }, children: [
+      children: /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
         /* @__PURE__ */ jsxs4(
           "div",
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rita-workspace",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",