@ngenux/ngage-whiteboarding 1.0.9 → 1.0.10

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useReducer, useContext, useState, useRef, useMemo, useEffect, forwardRef, useCallback, useImperativeHandle, createElement } from 'react';
+import React__default, { createContext, useRef, useReducer, useEffect, useContext, useState, useMemo, forwardRef, useCallback, useImperativeHandle, createElement } from 'react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -34911,6 +34911,21 @@ const whiteboardReducer = (state, action) => {
                 userUndoStacks: {}, // Clear all user undo stacks as well
             };
         }
+        case 'RESET_EMPTY_ROOM': {
+            // Same visual reset as a fresh board, but lastClearTimestamp stays 0 so shapes from
+            // sync_state (drawn before this client joined) are not rejected as pre-clear stale.
+            return {
+                ...state,
+                shapes: [],
+                history: [[]],
+                historyIndex: 0,
+                selectedShapeId: undefined,
+                currentDrawingShape: undefined,
+                activeDrawings: {},
+                userUndoStacks: {},
+                lastClearTimestamp: 0,
+            };
+        }
         case 'UNDO': {
             if (state.historyIndex > 0) {
                 return {
@@ -35116,8 +35131,120 @@ const whiteboardReducer = (state, action) => {
     }
 };
 const WhiteboardContext = createContext(undefined);
-const WhiteboardProvider = ({ children, webSocketUrl }) => {
-    const [state, dispatch] = useReducer(whiteboardReducer, initialState);
+// Helper function to get storage key for a room
+const getStorageKey = (roomId) => {
+    return roomId ? `whiteboard-state-${roomId}` : 'whiteboard-state-default';
+};
+// Helper function to load persisted state from sessionStorage
+const loadPersistedState = (roomId) => {
+    try {
+        const key = getStorageKey(roomId);
+        const persisted = sessionStorage.getItem(key);
+        if (persisted) {
+            const parsed = JSON.parse(persisted);
+            return parsed;
+        }
+    }
+    catch (error) {
+        console.error('[PERSISTENCE] Failed to load persisted state:', error);
+    }
+    return null;
+};
+// Helper function to save state to sessionStorage
+const savePersistedState = (state, roomId) => {
+    try {
+        const key = getStorageKey(roomId);
+        // Only persist essential state (shapes, history, background, canvas size)
+        const stateToPersist = {
+            shapes: state.shapes,
+            history: state.history,
+            historyIndex: state.historyIndex,
+            backgroundColor: state.backgroundColor,
+            canvasSize: state.canvasSize,
+            lastClearTimestamp: state.lastClearTimestamp,
+            userUndoStacks: state.userUndoStacks,
+        };
+        sessionStorage.setItem(key, JSON.stringify(stateToPersist));
+    }
+    catch (error) {
+        console.error('[PERSISTENCE] Failed to save persisted state:', error);
+    }
+};
+// Helper function to clear persisted state
+const clearPersistedState = (roomId) => {
+    try {
+        const key = getStorageKey(roomId);
+        sessionStorage.removeItem(key);
+    }
+    catch (error) {
+        console.error('[PERSISTENCE] Failed to clear persisted state:', error);
+    }
+};
+const WhiteboardProvider = ({ children, webSocketUrl, roomId: initialRoomId }) => {
+    const [currentRoomId, setCurrentRoomId] = React__default.useState(initialRoomId);
+    // Track if a clear action was performed
+    const clearActionRef = useRef(false);
+    // Load persisted state if available, otherwise use initialState
+    const getInitialState = () => {
+        const persisted = loadPersistedState(currentRoomId);
+        if (persisted) {
+            // Merge persisted state with current initialState to ensure all properties exist
+            return {
+                ...initialState,
+                ...persisted,
+                // Reset transient state
+                isDrawing: false,
+                currentDrawingShape: undefined,
+                selectedShapeId: undefined,
+                activeDrawings: {},
+                captureEnabled: true,
+            };
+        }
+        return initialState;
+    };
+    const [state, dispatch] = useReducer((s, action) => {
+        // Track clear action
+        if (action.type === 'CLEAR_CANVAS') {
+            clearActionRef.current = true;
+        }
+        return whiteboardReducer(s, action);
+    }, getInitialState());
+    const prevRoomIdRef = useRef(currentRoomId);
+    // Save state to sessionStorage whenever it changes (debounced)
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            // Only save empty shapes if a clear action was performed
+            if (state.shapes.length > 0 || clearActionRef.current) {
+                savePersistedState(state, currentRoomId);
+                clearActionRef.current = false;
+            }
+        }, 500); // Debounce to avoid excessive writes
+        return () => clearTimeout(timeoutId);
+    }, [state.shapes, state.history, state.backgroundColor, state.canvasSize, state.lastClearTimestamp, currentRoomId]);
+    // Handle room changes - load new room state or clear if switching rooms
+    useEffect(() => {
+        if (prevRoomIdRef.current !== currentRoomId) {
+            // Save current room state before switching
+            if (prevRoomIdRef.current) {
+                savePersistedState(state, prevRoomIdRef.current);
+            }
+            // Load new room state
+            const newRoomState = loadPersistedState(currentRoomId);
+            if (newRoomState) {
+                dispatch({ type: 'SET_SHAPES', payload: newRoomState.shapes || [] });
+                dispatch({ type: 'SET_BACKGROUND_COLOR', payload: newRoomState.backgroundColor || '#FFFFFF' });
+                if (newRoomState.lastClearTimestamp) {
+                    dispatch({ type: 'SET_CLEAR_TIMESTAMP', payload: newRoomState.lastClearTimestamp });
+                }
+            }
+            else {
+                // No persisted state for new room — empty locally but do not use CLEAR_CANVAS
+                // (that sets lastClearTimestamp = now and breaks applying peer sync_state for pre-join strokes).
+                dispatch({ type: 'RESET_EMPTY_ROOM' });
+            }
+            prevRoomIdRef.current = currentRoomId;
+        }
+    }, [currentRoomId, state]);
     const normalizePoint = (point) => {
         return {
             x: point.x / state.canvasSize.width,
@@ -35198,7 +35325,7 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         };
     };
     // Store reference to current queue action for state requests
-    let currentQueueAction = null;
+    const currentQueueActionRef = useRef(null);
     // Type guard and shape normalizer to ensure we have a complete ShapeProps object
     const isCompleteShape = (obj) => {
         if (!obj) {
@@ -35254,10 +35381,10 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         return true;
     };
     const requestStateFromPeers = () => {
-        if (currentQueueAction) {
+        if (currentQueueActionRef.current) {
             setTimeout(() => {
-                if (currentQueueAction) {
-                    currentQueueAction({
+                if (currentQueueActionRef.current) {
+                    currentQueueActionRef.current({
                         type: 'request_state',
                         payload: '',
                         requesterId: state.userId,
@@ -35296,9 +35423,9 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         switch (action.type) {
             case 'request_state':
                 // Another user is requesting current state, send our state to them
-                if (typeof action.payload === 'string' && action.requesterId && currentQueueAction) {
+                if (typeof action.payload === 'string' && action.requesterId && currentQueueActionRef.current) {
                     const currentState = getCurrentSyncState();
-                    currentQueueAction({
+                    currentQueueActionRef.current({
                         type: 'sync_state',
                         payload: currentState,
                         requesterId: action.requesterId, // Send specifically to the requester
@@ -35372,16 +35499,19 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
                     console.warn(`[APPLY_ACTION] Failed to delete shape - payload not string:`, action.payload);
                 }
                 break;
-            case 'clear':
-                // Clear all canvas content including active drawings
+            case 'clear': {
+                // All users (not just host) must clear their local state when a collaborative clear is received
                 dispatch({ type: 'CLEAR_CANVAS' });
                 dispatch({ type: 'CLEAR_ACTIVE_DRAWINGS' });
+                // Clear persisted state in sessionStorage
+                clearPersistedState(currentRoomId);
                 // Update last clear time to prevent conflicting actions
                 if (typeof action.payload === 'object' && action.payload !== null && 'timestamp' in action.payload) {
                     const clearTimestamp = action.payload.timestamp;
                     dispatch({ type: 'SET_CLEAR_TIMESTAMP', payload: clearTimestamp });
                 }
                 break;
+            }
             case 'undo':
             case 'redo':
                 if (Array.isArray(action.payload)) {
@@ -35557,8 +35687,9 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             getCurrentSyncState,
             requestStateFromPeers,
             setQueueAction: (queueAction) => {
-                currentQueueAction = queueAction;
+                currentQueueActionRef.current = queueAction;
             },
+            setCurrentRoomId,
             normalizePoint,
             denormalizePoint,
             webSocketUrl,
@@ -42433,8 +42564,8 @@ const waitForSocket = (webSocketUrl, timeoutMs = 5000) => {
     });
 };
 
-const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transparentBackground = false, videoStream }) => {
-    const { state, dispatch, setQueueAction, requestStateFromPeers, webSocketUrl } = useWhiteboard();
+const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transparentBackground = false, videoStream, externalApiRef }) => {
+    const { state, dispatch, setQueueAction, requestStateFromPeers, setCurrentRoomId, webSocketUrl } = useWhiteboard();
     const [lastCollaborativeAction, setLastCollaborativeAction] = useState(null);
     const [hasRequestedState, setHasRequestedState] = useState(false);
     const [lastStateRequestTime, setLastStateRequestTime] = useState(0);
@@ -42458,6 +42589,10 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
     useEffect(() => {
         dispatch({ type: 'SET_USER_ID', payload: userId });
     }, [userId, dispatch]);
+    // Set current roomId in context for persistence
+    useEffect(() => {
+        setCurrentRoomId(roomId);
+    }, [roomId, setCurrentRoomId]);
     // Set background color based on transparentBackground prop or videoStream presence
     useEffect(() => {
         if (transparentBackground || videoStream) {
@@ -42593,9 +42728,10 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
         setLastStateRequestTime(0);
         setIsRoomJoined(false);
     }, [roomId]);
-    // Retry state request if canvas is still empty after 3 seconds
+    // Retry state request if canvas is still empty (e.g. first request raced before host had queueAction).
+    // Intentionally does NOT gate on hasRequestedState — the initial effect sets that immediately while send is delayed 2s.
     useEffect(() => {
-        if (!isRoomJoined || !isSocketConnected || hasRequestedState || state.shapes.length > 0 || !queueAction) {
+        if (!isRoomJoined || !isSocketConnected || state.shapes.length > 0 || !queueAction) {
             return;
         }
         const now = Date.now();
@@ -42606,9 +42742,9 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
         const retryTimer = setTimeout(() => {
             requestStateFromPeers();
             setLastStateRequestTime(Date.now());
-        }, 3000);
+        }, 4500);
         return () => clearTimeout(retryTimer);
-    }, [isRoomJoined, isSocketConnected, state.shapes.length, queueAction, requestStateFromPeers, lastStateRequestTime, userId]);
+    }, [isRoomJoined, isSocketConnected, state.shapes.length, queueAction, requestStateFromPeers, roomId]);
     // Cleanup stale active drawings periodically
     useEffect(() => {
         const cleanupInterval = setInterval(() => {
@@ -42707,6 +42843,22 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
             });
         }
     }, [isAdmin, dispatch, queueAction, userId]);
+    // Expose a minimal imperative API for host apps that need to perform the same
+    // collaborative clear as the toolbar button (e.g., on "stop screenshare with annotations").
+    useEffect(() => {
+        if (!externalApiRef) {
+            return;
+        }
+        externalApiRef.current = {
+            clear: handleClear,
+            getRoomId: () => roomId,
+        };
+        return () => {
+            if (externalApiRef.current?.getRoomId?.() === roomId) {
+                externalApiRef.current = null;
+            }
+        };
+    }, [externalApiRef, handleClear, roomId]);
     const handleLockToggle = useCallback(() => {
         if (!isAdmin) {
             return;
@@ -42789,28 +42941,6 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
             leaveRoom(roomId);
         };
     }, [roomId]);
-    // Clear all canvases on component unmount if admin leaves
-    useEffect(() => {
-        return () => {
-            // If admin leaves, clear all users' canvases
-            if (isAdmin && queueAction) {
-                const clearTimestamp = Date.now();
-                // Clear local state immediately
-                dispatch({ type: 'CLEAR_CANVAS' });
-                dispatch({ type: 'CLEAR_ACTIVE_DRAWINGS' });
-                // Send clear action to all users
-                queueAction({
-                    type: 'clear',
-                    payload: {
-                        timestamp: clearTimestamp,
-                        adminId: userId,
-                    },
-                    userId: userId,
-                    timestamp: clearTimestamp,
-                });
-            }
-        };
-    }, [isAdmin, userId, dispatch]);
     // Global cleanup on app unmount
     useEffect(() => {
         const handleBeforeUnload = () => {