@ngenux/ngage-whiteboarding 1.0.7 → 1.0.8

package/dist/index.esm.js

@@ -34757,12 +34757,15 @@ const whiteboardReducer = (state, action) => {
             // Prevent duplicate shapes during simultaneous drawing
             const newShape = action.payload;
             const existingShapeIndex = state.shapes.findIndex(shape => shape.id === newShape.id);
+            // Ensure shape has timestamp for proper ordering and stale action filtering
+            const timestamp = newShape.timestamp || Date.now();
             // If shape already exists, update it instead of adding duplicate
             if (existingShapeIndex >= 0) {
                 const updatedShapes = [...state.shapes];
                 updatedShapes[existingShapeIndex] = {
                     ...newShape,
-                    drawingSessionId: newShape.drawingSessionId || `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+                    timestamp,
+                    drawingSessionId: newShape.drawingSessionId || `session-${timestamp}-${Math.random().toString(36).substr(2, 9)}`
                 };
                 return {
                     ...state,
@@ -34770,10 +34773,11 @@ const whiteboardReducer = (state, action) => {
                     currentDrawingShape: undefined,
                 };
             }
-            // Add new shape with session tracking
+            // Add new shape with session tracking and timestamp
             const shapeWithSession = {
                 ...newShape,
-                drawingSessionId: newShape.drawingSessionId || `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+                timestamp,
+                drawingSessionId: newShape.drawingSessionId || `session-${timestamp}-${Math.random().toString(36).substr(2, 9)}`
             };
             const newShapes = [...state.shapes, shapeWithSession];
             const newHistory = state.history.slice(0, state.historyIndex + 1);
@@ -34967,11 +34971,13 @@ const whiteboardReducer = (state, action) => {
                 const userShapes = state.shapes
                     .filter(shape => shape.userId === userId)
                     .sort((a, b) => {
-                    // Sort by id (which contains timestamp) or any timestamp property
-                    return a.id.localeCompare(b.id);
+                    // Sort by timestamp to ensure LIFO (Last In First Out) order
+                    const timestampA = a.timestamp || 0;
+                    const timestampB = b.timestamp || 0;
+                    return timestampA - timestampB;
                 });
                 if (userShapes.length > 0) {
-                    // Get the most recent shape
+                    // Get the most recent shape (last in sorted array)
                     const lastUserShape = userShapes[userShapes.length - 1];
                     // Check if there are multiple shapes that were part of the same drawing session
                     // Use drawingSessionId if available, otherwise fall back to time-based detection
@@ -35265,9 +35271,16 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         // Drawing actions should be filtered if they're older than the last clear
         if (action.type === 'start_draw' || action.type === 'continue_draw' || action.type === 'end_draw' || action.type === 'add') {
             const actionTimestamp = action.timestamp || 0;
-            if (actionTimestamp <= state.lastClearTimestamp) {
+            if (actionTimestamp > 0 && actionTimestamp <= state.lastClearTimestamp) {
                 return true;
             }
+            // Also check timestamp in the payload if it exists
+            if (typeof action.payload === 'object' && action.payload !== null && !Array.isArray(action.payload)) {
+                const payloadTimestamp = action.payload.timestamp || 0;
+                if (payloadTimestamp > 0 && payloadTimestamp <= state.lastClearTimestamp) {
+                    return true;
+                }
+            }
         }
         return false;
     };
@@ -35297,10 +35310,15 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
                     if (syncState.shapes.length === 0) {
                         return; // Don't apply empty state or keep requesting
                     }
-                    // Only apply if the received state has more shapes or we have no shapes
-                    if (state.shapes.length === 0 || syncState.shapes.length > state.shapes.length) {
+                    // Filter out shapes that are older than our last clear
+                    const validShapes = syncState.shapes.filter(shape => {
+                        const shapeTimestamp = shape.timestamp || 0;
+                        return shapeTimestamp === 0 || shapeTimestamp > state.lastClearTimestamp;
+                    });
+                    // Only apply if the received state has valid shapes
+                    if (validShapes.length > 0 && (state.shapes.length === 0 || validShapes.length > state.shapes.length)) {
                         // All shapes from sync_state should have normalized coordinates, denormalize them
-                        const denormalizedShapes = syncState.shapes.map((shape, index) => {
+                        const denormalizedShapes = validShapes.map((shape, index) => {
                             return denormalizeShape(shape);
                         });
                         // Apply the synchronized state
@@ -35318,7 +35336,8 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
                     const denormalizedShape = denormalizeShape(action.payload);
                     // Additional check to prevent adding shapes from before the last clear
                     const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
-                    if (shapeTimestamp <= state.lastClearTimestamp) {
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        console.warn(`[APPLY_ACTION] Skipping stale shape from before clear - shape timestamp: ${shapeTimestamp}, clear timestamp: ${state.lastClearTimestamp}`);
                         break;
                     }
                     dispatch({ type: 'ADD_SHAPE', payload: denormalizedShape });
@@ -35372,6 +35391,11 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             case 'start_draw':
                 if (typeof action.payload !== 'string' && !Array.isArray(action.payload) && isCompleteShape(action.payload)) {
                     const denormalizedShape = denormalizeShape(action.payload);
+                    // Check if this shape is from before the last clear
+                    const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        break; // Skip stale shapes
+                    }
                     // Only apply collaborative start_draw if it's from another user
                     if (denormalizedShape.userId !== state.userId) {
                         // Add to active drawings for real-time collaborative visibility
@@ -35385,6 +35409,11 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             case 'continue_draw':
                 if (typeof action.payload !== 'string' && !Array.isArray(action.payload) && isCompleteShape(action.payload)) {
                     const denormalizedShape = denormalizeShape(action.payload);
+                    // Check if this shape is from before the last clear
+                    const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        break; // Skip stale shapes
+                    }
                     // Only apply collaborative drawing updates if it's not from the current user
                     // to avoid interfering with local real-time drawing
                     if (denormalizedShape.userId !== state.userId) {
@@ -35399,6 +35428,12 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             case 'end_draw':
                 if (typeof action.payload !== 'string' && !Array.isArray(action.payload) && isCompleteShape(action.payload)) {
                     const denormalizedShape = denormalizeShape(action.payload);
+                    // Check if this shape is from before the last clear
+                    const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        console.warn(`[APPLY_ACTION] Skipping stale end_draw from before clear - shape timestamp: ${shapeTimestamp}, clear timestamp: ${state.lastClearTimestamp}`);
+                        break; // Skip stale shapes
+                    }
                     // Only apply collaborative end_draw if it's from another user
                     // Local user's end_draw is handled directly in Board component via ADD_SHAPE
                     if (denormalizedShape.userId !== state.userId) {
@@ -36426,7 +36461,8 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
         }
         // Create new shape ID for regular drawing tools
         const newShapeId = v4();
-        const newDrawingSessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const timestamp = Date.now();
+        const newDrawingSessionId = `session-${timestamp}-${Math.random().toString(36).substr(2, 9)}`;
         setCurrentShapeId(newShapeId);
         setCurrentDrawingSessionId(newDrawingSessionId);
         // Start drawing
@@ -36443,6 +36479,7 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: newDrawingSessionId,
+            timestamp,
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -36555,6 +36592,7 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: currentDrawingSessionId,
+            timestamp: Date.now(),
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -36634,6 +36672,7 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: currentDrawingSessionId,
+            timestamp: Date.now(),
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -42735,6 +42774,28 @@ 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, queueAction, userId, dispatch]);
     // Global cleanup on app unmount
     useEffect(() => {
         const handleBeforeUnload = () => {