@ngenux/ngage-whiteboarding 1.0.5 → 1.0.7

package/dist/index.js

@@ -35923,7 +35923,7 @@ const Arrow = React.memo(({ shapeProps, isSelected, onSelect, onUpdate, }) => {
 });
 
 const ErasedShape = ({ shapeProps, isSelected, onSelect, onUpdate, }) => {
-    const [imageElement, setImageElement] = React.useState(null);
+    const [bitmap, setBitmap] = React.useState(null);
     const canvasRef = React.useRef(null);
     // Memoize bounds calculation to avoid unnecessary recalculations
     const bounds = React.useMemo(() => calculateShapeBounds(shapeProps), [shapeProps.points, shapeProps.strokeWidth, shapeProps.erasePaths]);
@@ -35953,22 +35953,24 @@ const ErasedShape = ({ shapeProps, isSelected, onSelect, onUpdate, }) => {
             });
         }
         ctx.restore();
-        // Convert canvas to image
-        const img = new window.Image();
-        img.onload = () => {
-            setImageElement(img);
-        };
-        img.onerror = () => {
-            console.error('[ErasedShape] Failed to create image from canvas');
-            setImageElement(null);
-        };
-        img.src = canvas.toDataURL();
+        // Use canvas directly as Konva image - no async
+        setBitmap(canvas);
         return () => {
             if (canvasRef.current) {
                 canvasRef.current.remove();
+                canvasRef.current = null;
             }
         };
-    }, [shapeProps, bounds]); // Re-render when shape or bounds change
+    }, [
+        bounds,
+        shapeProps.points,
+        shapeProps.erasePaths,
+        shapeProps.stroke,
+        shapeProps.strokeWidth,
+        shapeProps.opacity,
+        shapeProps.strokeStyle,
+        shapeProps.type
+    ]);
     // Calculate bounds of the shape including erase paths
     function calculateShapeBounds(shape) {
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -36087,11 +36089,48 @@ const ErasedShape = ({ shapeProps, isSelected, onSelect, onUpdate, }) => {
             ctx.stroke();
         }
     };
-    if (!imageElement) {
-        return null; // Still rendering
-    }
     const padding = 50;
-    return (jsxRuntime.jsx(Image$1, { image: imageElement, x: bounds.minX - padding, y: bounds.minY - padding, draggable: isSelected, onClick: onSelect, onTap: onSelect, onDragEnd: (e) => {
+    // Render original shape as fallback while bitmap is being created
+    if (!bitmap) {
+        const commonProps = {
+            onClick: onSelect,
+            onTap: onSelect,
+            listening: true,
+            stroke: shapeProps.stroke,
+            strokeWidth: shapeProps.strokeWidth,
+            opacity: shapeProps.opacity,
+            dash: shapeProps.strokeStyle === 'dashed' ? [5, 5] : shapeProps.strokeStyle === 'dotted' ? [2, 3] : undefined,
+        };
+        switch (shapeProps.type) {
+            case 'pencil':
+                return (jsxRuntime.jsx(Line$1, { points: shapeProps.points.flatMap(p => [p.x, p.y]), lineCap: "round", lineJoin: "round", ...commonProps }));
+            case 'line':
+                if (shapeProps.points.length >= 2) {
+                    return (jsxRuntime.jsx(Line$1, { points: [
+                            shapeProps.points[0].x,
+                            shapeProps.points[0].y,
+                            shapeProps.points[1].x,
+                            shapeProps.points[1].y,
+                        ], ...commonProps }));
+                }
+                return null;
+            case 'rectangle':
+                if (shapeProps.points.length >= 2) {
+                    const [start, end] = shapeProps.points;
+                    return (jsxRuntime.jsx(Rect, { x: start.x, y: start.y, width: end.x - start.x, height: end.y - start.y, ...commonProps }));
+                }
+                return null;
+            case 'ellipse':
+                if (shapeProps.points.length >= 2) {
+                    const [start, end] = shapeProps.points;
+                    return (jsxRuntime.jsx(Ellipse$1, { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2, radiusX: Math.abs(end.x - start.x) / 2, radiusY: Math.abs(end.y - start.y) / 2, ...commonProps }));
+                }
+                return null;
+            default:
+                return null;
+        }
+    }
+    return (jsxRuntime.jsx(Image$1, { image: bitmap, x: bounds.minX - padding, y: bounds.minY - padding, draggable: isSelected, onClick: onSelect, onTap: onSelect, onDragEnd: (e) => {
             const newX = e.target.x();
             const newY = e.target.y();
             const deltaX = newX - (bounds.minX - padding);
@@ -36131,6 +36170,10 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
     const containerRef = React.useRef(null);
     const lastPointerPosition = React.useRef(null);
     const mouseMoveThrottleRef = React.useRef(null);
+    // NEW: Eraser preview state for real-time visual feedback
+    const [eraserPreviewPoints, setEraserPreviewPoints] = React.useState([]);
+    const [keepPreviewVisible, setKeepPreviewVisible] = React.useState(false);
+    const [justErasedIds, setJustErasedIds] = React.useState(new Set());
     // Find shapes that intersect with the erase path
     const findIntersectingShapes = (erasePath, shapes) => {
         const eraseRadius = 10; // Half of eraser width
@@ -36221,8 +36264,20 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             setCurrentShapeId(null);
             setCurrentDrawingSessionId(null);
             lastPointerPosition.current = null;
+            setEraserPreviewPoints([]); // Clear eraser preview
+            setKeepPreviewVisible(false);
+            setJustErasedIds(new Set());
         }
     }, [hasToolAccess, state.isDrawing, dispatch]);
+    // Clear justErasedIds after one frame to complete transition
+    React.useEffect(() => {
+        if (justErasedIds.size > 0) {
+            const id = requestAnimationFrame(() => {
+                setJustErasedIds(new Set());
+            });
+            return () => cancelAnimationFrame(id);
+        }
+    }, [justErasedIds]);
     // Memoized export functionality for performance
     const exportAsImage = React.useCallback((format = 'png') => {
         if (!stageRef.current) {
@@ -36385,6 +36440,7 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
         if (state.tool === 'eraser') {
             dispatch({ type: 'SET_DRAWING', payload: true });
             setCurrentPoints([pos]);
+            setEraserPreviewPoints([pos]); // NEW: start preview stroke
             setCurrentShapeId('erasing'); // Special ID for erasing mode
             return;
         }
@@ -36433,6 +36489,9 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 setCurrentShapeId(null);
                 setCurrentDrawingSessionId(null);
                 lastPointerPosition.current = null;
+                setEraserPreviewPoints([]); // Clear eraser preview
+                setKeepPreviewVisible(false);
+                setJustErasedIds(new Set());
             }
             return;
         }
@@ -36450,10 +36509,41 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 return; // Ultra-sensitive for maximum smoothness
         }
         lastPointerPosition.current = pos;
-        // Handle eraser tool - just collect points
+        // Handle eraser tool - collect points and stream erase in real-time
         if (state.tool === 'eraser') {
             const newPoints = [...currentPoints, pos];
             setCurrentPoints(newPoints);
+            setEraserPreviewPoints(newPoints); // Live preview
+            // Create segment from last point to current point for real-time streaming
+            const segment = currentPoints.length > 0
+                ? [currentPoints[currentPoints.length - 1], pos]
+                : [pos];
+            // Apply segment to intersecting shapes in real-time
+            const intersectingShapes = findIntersectingShapes(segment, state.shapes);
+            if (intersectingShapes.length > 0) {
+                const timestamp = Date.now();
+                intersectingShapes.forEach((shape, index) => {
+                    const updatedShape = {
+                        ...shape,
+                        erasePaths: [...(shape.erasePaths || []), segment],
+                    };
+                    // Update the shape locally
+                    dispatch({ type: 'UPDATE_SHAPE', payload: updatedShape });
+                    // Queue erase action for real-time collaboration
+                    if (queueAction) {
+                        const erasePayload = {
+                            shapeId: shape.id,
+                            erasePath: segment,
+                            timestamp: timestamp + index,
+                        };
+                        queueAction({
+                            type: 'erase',
+                            payload: erasePayload,
+                            timestamp: timestamp + index,
+                        });
+                    }
+                });
+            }
             return;
         }
         let newPoints;
@@ -36503,7 +36593,7 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 };
                 queueAction(continueAction);
                 mouseMoveThrottleRef.current = null;
-            }, 8); // Optimized to ~120fps for ultra-smooth real-time collaboration
+            }, 1); // Maximum frequency for ultra-smooth real-time collaboration
         }
     }, [hasToolAccess, state.isDrawing, state.tool, state.userId, state.color, state.strokeWidth, state.strokeStyle, state.opacity, currentShapeId, currentDrawingSessionId, currentPoints, queueAction, dispatch]);
     const handleMouseUp = React.useCallback(() => {
@@ -36516,6 +36606,9 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 setCurrentShapeId(null);
                 setCurrentDrawingSessionId(null);
                 lastPointerPosition.current = null;
+                setEraserPreviewPoints([]); // Clear eraser preview
+                setKeepPreviewVisible(false);
+                setJustErasedIds(new Set());
             }
             return;
         }
@@ -36531,36 +36624,23 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             setCurrentDrawingSessionId(null);
             return;
         }
-        // Handle eraser tool - apply erase to intersecting shapes
+        // Handle eraser tool - cleanup on mouse up (erasing already done in mouse move)
         if (state.tool === 'eraser') {
-            // Find shapes that intersect with the erase path
-            const intersectingShapes = findIntersectingShapes(currentPoints, state.shapes);
-            // Apply erase path to each intersecting shape
-            intersectingShapes.forEach(shape => {
-                const updatedShape = {
-                    ...shape,
-                    erasePaths: [...(shape.erasePaths || []), currentPoints],
-                };
-                // Update the shape locally
-                dispatch({ type: 'UPDATE_SHAPE', payload: updatedShape });
-                // Queue erase action for collaboration
-                if (queueAction) {
-                    const erasePayload = {
-                        shapeId: shape.id,
-                        erasePath: currentPoints,
-                        timestamp: Date.now(),
-                    };
-                    queueAction({
-                        type: 'erase',
-                        payload: erasePayload,
-                    });
-                }
-            });
+            // Stop drawing state
+            dispatch({ type: 'SET_DRAWING', payload: false });
             // Reset erasing state
             setCurrentPoints([]);
             setCurrentShapeId(null);
             setCurrentDrawingSessionId(null);
             lastPointerPosition.current = null;
+            // Clear preview after a brief delay to ensure smooth transition
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setEraserPreviewPoints([]);
+                    setKeepPreviewVisible(false);
+                    setJustErasedIds(new Set());
+                });
+            });
             return;
         }
         // Handle regular drawing tools
@@ -36627,31 +36707,39 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
         if (shape.isEraser) {
             return null;
         }
-        // Use ErasedShape component for shapes that have erase paths applied
-        if (shape.erasePaths && shape.erasePaths.length > 0) {
-            return (jsxRuntime.jsx(ErasedShape, { shapeProps: shape, isSelected: shape.isSelected || false, onSelect: () => handleShapeClick(shape.id), onUpdate: handleShapeUpdate }));
-        }
-        // Use original shape components for shapes without erase operations
         const commonProps = {
             shapeProps: shape,
             isSelected: shape.isSelected || false,
             onSelect: () => handleShapeClick(shape.id),
             onUpdate: handleShapeUpdate,
         };
-        switch (shape.type) {
-            case 'rectangle':
-                return jsxRuntime.jsx(Rectangle, { ...commonProps });
-            case 'ellipse':
-                return jsxRuntime.jsx(Ellipse, { ...commonProps });
-            case 'line':
-                return jsxRuntime.jsx(Line, { ...commonProps });
-            case 'pencil':
-                return jsxRuntime.jsx(FreehandDrawing, { ...commonProps });
-            case 'arrow':
-                return jsxRuntime.jsx(Arrow, { ...commonProps });
-            default:
-                return null;
+        // Render original shape component
+        const OriginalShape = () => {
+            switch (shape.type) {
+                case 'rectangle':
+                    return jsxRuntime.jsx(Rectangle, { ...commonProps });
+                case 'ellipse':
+                    return jsxRuntime.jsx(Ellipse, { ...commonProps });
+                case 'line':
+                    return jsxRuntime.jsx(Line, { ...commonProps });
+                case 'pencil':
+                    return jsxRuntime.jsx(FreehandDrawing, { ...commonProps });
+                case 'arrow':
+                    return jsxRuntime.jsx(Arrow, { ...commonProps });
+                default:
+                    return null;
+            }
+        };
+        // Use ErasedShape component for shapes that have erase paths applied
+        if (shape.erasePaths && shape.erasePaths.length > 0) {
+            // If this shape just got erased, render both to prevent flicker
+            if (justErasedIds.has(shape.id)) {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OriginalShape, {}), jsxRuntime.jsx(ErasedShape, { shapeProps: shape, isSelected: shape.isSelected || false, onSelect: () => handleShapeClick(shape.id), onUpdate: handleShapeUpdate })] }));
+            }
+            return (jsxRuntime.jsx(ErasedShape, { shapeProps: shape, isSelected: shape.isSelected || false, onSelect: () => handleShapeClick(shape.id), onUpdate: handleShapeUpdate }));
         }
+        // Use original shape components for shapes without erase operations
+        return jsxRuntime.jsx(OriginalShape, {});
     }, (prevProps, nextProps) => {
         // Ultra-precise comparison to prevent unnecessary re-renders during simultaneous drawing
         const prevShape = prevProps.shape;
@@ -36758,11 +36846,11 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             state.tool === 'select' ? 'default' :
                 state.tool === 'pan' ? 'grab' : 'crosshair'
     }), [hasToolAccess, state.tool]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: "w-full h-full relative", style: { backgroundColor: state.backgroundColor }, children: jsxRuntime.jsx(Stage, { ref: stageRef, width: size.width, height: size.height, onMouseDown: handleMouseDown, onMousemove: handleMouseMove, onMouseup: handleMouseUp, onTouchStart: handleMouseDown, onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, style: cursorStyle, children: jsxRuntime.jsxs(Layer, { children: [React.useMemo(() => {
-                        if (state.backgroundColor === 'transparent')
-                            return null;
-                        return (jsxRuntime.jsx(Rect, { x: 0, y: 0, width: size.width, height: size.height, fill: state.backgroundColor, listening: false }));
-                    }, [state.backgroundColor, size.width, size.height]), renderedShapes, renderedActiveDrawings, renderCurrentShape] }) }) }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: "w-full h-full relative", style: { backgroundColor: state.backgroundColor }, children: jsxRuntime.jsxs(Stage, { ref: stageRef, width: size.width, height: size.height, onMouseDown: handleMouseDown, onMousemove: handleMouseMove, onMouseup: handleMouseUp, onTouchStart: handleMouseDown, onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, style: cursorStyle, children: [jsxRuntime.jsxs(Layer, { children: [React.useMemo(() => {
+                            if (state.backgroundColor === 'transparent')
+                                return null;
+                            return (jsxRuntime.jsx(Rect, { x: 0, y: 0, width: size.width, height: size.height, fill: state.backgroundColor, listening: false }));
+                        }, [state.backgroundColor, size.width, size.height]), renderedShapes, renderedActiveDrawings, renderCurrentShape] }), jsxRuntime.jsx(Layer, { listening: false, children: eraserPreviewPoints.length > 0 && (state.isDrawing || keepPreviewVisible) && state.tool === 'eraser' && (jsxRuntime.jsx(Line$1, { points: eraserPreviewPoints.flatMap(p => [p.x, p.y]), stroke: state.backgroundColor === 'transparent' ? '#FFFFFF' : state.backgroundColor, strokeWidth: 20, lineCap: "round", lineJoin: "round", opacity: 1.0, listening: false, perfectDrawEnabled: false })) })] }) }));
 });
 // Memoize the Board component to prevent unnecessary re-renders
 const Board = React.memo(BoardComponent, (prevProps, nextProps) => {
@@ -37169,13 +37257,15 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
             setIsInitialized(true);
         }
     }, [state]);
-    // Set white as default stroke color when video background is active
+    // Set white as default stroke color when video background is first activated (only once)
+    const hasVideoBackgroundRef = React.useRef(false);
     React.useEffect(() => {
-        if (hasVideoBackground && state.color === '#000000') {
-            // Only change if currently black, to avoid overriding user's choice
+        // Only auto-switch to white on first video activation, and only if currently black
+        if (hasVideoBackground && !hasVideoBackgroundRef.current && state.color === '#000000') {
             dispatch({ type: 'SET_COLOR', payload: '#FFFFFF' });
         }
-    }, [hasVideoBackground, state.color, dispatch]);
+        hasVideoBackgroundRef.current = hasVideoBackground;
+    }, [hasVideoBackground, dispatch]);
     // Track initial access grant
     React.useEffect(() => {
         if (hasToolAccess && !hasEverHadAccess) {
@@ -37707,15 +37797,15 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
         totalActions: 0,
     });
     // Throttling configuration - Ultra-optimized for smooth real-time collaboration
-    const THROTTLE_DELAY = 30; // ms - Reduced delay for faster transmission
-    const MAX_ACTIONS_PER_BATCH = 15; // Smaller batches for faster transmission
+    const THROTTLE_DELAY = 10; // ms - Minimal delay for faster transmission
+    const MAX_ACTIONS_PER_BATCH = 8; // Smaller batches for faster transmission
     const MAX_MESSAGE_SIZE = 500; // characters - matches API constraint
-    const MAX_MESSAGES_PER_SECOND = 15; // Increased rate for smoother collaboration  
+    const MAX_MESSAGES_PER_SECOND = 30; // Maximum rate for smoother collaboration  
     const MAX_PAYLOAD_SIZE = 1024; // bytes (1KB) - matches API constraint
     // Drawing-specific throttling for ultra-smooth real-time collaboration
-    const DRAWING_THROTTLE_DELAY = 8; // ms - 120fps for ultra-smooth drawing actions
-    const DRAWING_BATCH_SIZE = 5; // Much smaller batches for immediate transmission
-    const DRAWING_IMMEDIATE_THRESHOLD = 2; // Send immediately if we have 2+ drawing actions
+    const DRAWING_THROTTLE_DELAY = 1; // ms - Maximum frequency for ultra-smooth drawing actions
+    const DRAWING_BATCH_SIZE = 2; // Minimal batches for immediate transmission
+    const DRAWING_IMMEDIATE_THRESHOLD = 1; // Send immediately if we have 1+ drawing actions
     // Message rate limiting
     const messageTimestampsRef = React.useRef([]);
     const isRateLimited = React.useCallback(() => {
@@ -37879,7 +37969,7 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
             let delay = THROTTLE_DELAY;
             if (remainingDrawingActions.length > 0) {
                 delay = remainingDrawingActions.length >= DRAWING_IMMEDIATE_THRESHOLD ?
-                    Math.max(DRAWING_THROTTLE_DELAY / 2, 4) : // Even faster for multiple actions
+                    Math.max(DRAWING_THROTTLE_DELAY / 2, 2) : // Even faster for multiple actions
                     DRAWING_THROTTLE_DELAY;
             }
             throttleTimerRef.current = setTimeout(() => {
@@ -38022,7 +38112,7 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
                 clearTimeout(throttleTimerRef.current);
                 throttleTimerRef.current = setTimeout(() => {
                     transmitRef.current?.();
-                }, Math.max(DRAWING_THROTTLE_DELAY / 4, 2)); // Ultra-fast transmission
+                }, 1); // Ultra-fast transmission - 1ms for maximum responsiveness
             }
         }
     }, [state.canvasSize, state.userId, roomId, callbacks, sendWithConstraints]);
@@ -38042,7 +38132,11 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
                     // Process each action in the batch with duplicate prevention
                     parsedData.actions.forEach(action => {
                         // Create unique action ID for deduplication
-                        const actionId = `${action.type}-${parsedData.userId}-${action.timestamp || Date.now()}`;
+                        // For erase actions, include shapeId to allow multiple erases in same stroke
+                        let actionId = `${action.type}-${parsedData.userId}-${action.timestamp || Date.now()}`;
+                        if (action.type === 'erase' && action.payload && typeof action.payload === 'object' && 'shapeId' in action.payload) {
+                            actionId = `${action.type}-${parsedData.userId}-${action.payload.shapeId}-${action.timestamp || Date.now()}`;
+                        }
                         // Skip if we've already processed this action (prevents shape loss from duplicate processing)
                         if (processedActionsRef.current.has(actionId)) {
                             return;