@ngenux/ngage-whiteboarding 1.0.3 → 1.0.5

package/README.md

@@ -190,100 +190,6 @@ function CollaborativeApp() {
 }
 ```
 
-### Transparent Background Configuration
-
-If you want to enforce a transparent background and prevent users from changing it:
-
-```tsx
-import { WhiteboardProvider, Whiteboard } from '@ngenux/ngage-whiteboarding';
-
-function TransparentWhiteboard() {
-  return (
-    <WhiteboardProvider webSocketUrl="ws://localhost:3001">
-      <Whiteboard
-        roomId="transparent-room"
-        userId="user-123"
-        isAdmin={true}
-        allowedUsers={['user-123']}
-        transparentBackground={true} // Forces transparent & locks background
-      />
-    </WhiteboardProvider>
-  );
-}
-```
-
-**Behavior:**
-- When `transparentBackground={true}`: 
-  - ✅ Background is automatically set to transparent
-  - 🔒 Background color picker is disabled and shows "Transparent background locked"
-  - Perfect for overlaying the whiteboard on existing content
-  
-- When `transparentBackground={false}` (default):
-  - ✅ Background defaults to white
-  - 🎨 Users can change background color freely
-
-### Video Background for Annotation
-
-Annotate over live video streams (screen-share, webcam, etc.):
-
-```tsx
-import { WhiteboardProvider, Whiteboard } from '@ngenux/ngage-whiteboarding';
-import { useEffect, useState } from 'react';
-
-function VideoAnnotationWhiteboard() {
-  const [videoStream, setVideoStream] = useState<MediaStream | undefined>();
-
-  // Get screen share or webcam stream
-  useEffect(() => {
-    async function getStream() {
-      try {
-        // Screen share example
-        const stream = await navigator.mediaDevices.getDisplayMedia({
-          video: { width: 1920, height: 1080 }
-        });
-        setVideoStream(stream);
-      } catch (err) {
-        console.error('Failed to get video stream:', err);
-      }
-    }
-    getStream();
-
-    return () => {
-      // Cleanup: stop all tracks when component unmounts
-      if (videoStream) {
-        videoStream.getTracks().forEach(track => track.stop());
-      }
-    };
-  }, []);
-
-  return (
-    <WhiteboardProvider webSocketUrl="ws://localhost:3001">
-      <Whiteboard
-        roomId="video-annotation-room"
-        userId="user-123"
-        isAdmin={true}
-        allowedUsers={['user-123']}
-        videoStream={videoStream} // Video renders as background layer
-      />
-    </WhiteboardProvider>
-  );
-}
-```
-
-**Features:**
-- 🎥 **Video as background**: Stream renders behind whiteboard canvas
-- 🖊️ **Draw over video**: All drawing tools work normally over the video
-- 🔒 **Auto-transparent**: Background automatically set to transparent
-- ⚡ **60fps performance**: HTML video layer, no canvas copying
-- 📐 **Auto-scaling**: Video maintains aspect ratio with letterbox
-- 🎯 **Pointer-events handled**: Video doesn't interfere with drawing
-
-**Use cases:**
-- Screen-share annotation for remote presentations
-- Video call annotation
-- Educational content markup
-- Live streaming annotation
-
 ## 📝 API Reference
 
 ### WhiteboardProvider Props

package/dist/index.esm.js

@@ -36710,9 +36710,27 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
         const activeShapes = Object.values(state.activeDrawings);
         return activeShapes.map(shape => (jsx(MemoizedShapeComponent, { shape: shape }, `active-${shape.id}`)));
     }, [state.activeDrawings]);
+    const getStageDataURL = useCallback((format = 'png') => {
+        if (!stageRef.current) {
+            return '';
+        }
+        try {
+            const stage = stageRef.current;
+            return stage.toDataURL({
+                mimeType: format === 'png' ? 'image/png' : 'image/jpeg',
+                quality: 1,
+                pixelRatio: 2,
+            });
+        }
+        catch (error) {
+            console.error('Failed to get stage data URL:', error);
+            return '';
+        }
+    }, []);
     useImperativeHandle(ref, () => ({
         exportAsImage,
         exportAsPDF,
+        getStageDataURL,
     }));
     // Memoized cursor style for performance
     const cursorStyle = useMemo(() => ({
@@ -37033,6 +37051,14 @@ const Undo2 = createLucideIcon("Undo2", [
 const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = false, shouldBeOpenByDefault = true, hasVideoBackground = false }) => {
     const { state, dispatch } = useWhiteboard();
     const [isVisible, setIsVisible] = useState(shouldBeOpenByDefault);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
+    useEffect(() => {
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
     const handleToggleVisibility = () => {
         setIsVisible(!isVisible);
     };
@@ -37094,6 +37120,10 @@ const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockTog
             }
         }
     };
+    // Don't render until fully initialized to prevent race conditions
+    if (!isInitialized) {
+        return null;
+    }
     return (jsxs(Fragment, { children: [jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-10", children: [!isVisible && (jsx("button", { className: "w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300", onClick: handleToggleVisibility, title: "Show Tools", children: jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxs("div", { className: "flex items-center gap-1 p-1", children: [isAdmin && (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${isGloballyUnlocked
                                         ? 'bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-900/70'
                                         : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'}`, onClick: handleLockToggle, title: isGloballyUnlocked ? 'Whiteboard unlocked for all users - Click to lock' : 'Whiteboard locked - Click to unlock for all users', children: isGloballyUnlocked ? jsx(LockOpen, { size: 16, className: "text-current" }) : jsx(Lock, { size: 16, className: "text-current" }) })), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleUndo, disabled: !hasToolAccess, title: hasToolAccess ? 'Undo' : 'Access restricted', children: jsx(Undo2, { size: 16, className: "text-current" }) }), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleRedo, disabled: !hasToolAccess, title: hasToolAccess ? 'Redo' : 'Access restricted', children: jsx(Redo2, { size: 16, className: "text-current" }) }), jsx("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }), tools.map((tool) => (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${!hasToolAccess
@@ -37111,6 +37141,14 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
     const [position, setPosition] = useState({ x: 20, y: 80 });
     const [hasEverHadAccess, setHasEverHadAccess] = useState(hasToolAccess);
     const [wasManuallyClosedAfterAccess, setWasManuallyClosedAfterAccess] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
+    useEffect(() => {
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
     // Set white as default stroke color when video background is active
     useEffect(() => {
         if (hasVideoBackground && state.color === '#000000') {
@@ -37231,6 +37269,10 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
         // Only update local state - don't broadcast opacity changes to other users
         dispatch({ type: 'SET_OPACITY', payload: opacity });
     };
+    // Don't render until fully initialized to prevent race conditions
+    if (!isInitialized) {
+        return null;
+    }
     if (!isVisible) {
         // Only show the sidebar toggle button if user has tool access
         if (!hasToolAccess) {
@@ -37244,16 +37286,20 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
             width: '250px',
             maxHeight: '80vh',
             cursor: isDragging ? 'grabbing' : 'grab'
-        }, onMouseDown: handleMouseDown, children: [jsxs("div", { className: "flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: "Style Panel" }), !hasToolAccess && (jsx("span", { className: "text-xs bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 px-2 py-1 rounded", children: "Locked" }))] }), jsx("button", { className: "close-button p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded", onClick: handleManualClose, onMouseDown: (e) => e.stopPropagation(), title: "Close Panel", children: jsx(ChevronLeft, { size: 14, className: "text-gray-600 dark:text-gray-300" }) })] }), jsxs("div", { className: "sidebar-content p-3 overflow-y-auto", style: { maxHeight: 'calc(80vh - 40px)' }, children: [!hasToolAccess && (jsxs("div", { className: "mb-4 p-3 bg-orange-50 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-lg text-center", children: [jsx("div", { className: "text-orange-700 dark:text-orange-300 text-sm font-medium mb-1", children: "\uD83D\uDD12 Tools Locked" }), jsx("div", { className: "text-orange-600 dark:text-orange-400 text-xs", children: "Contact admin for access" })] })), jsxs("div", { className: "mb-4", children: [jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke Color" }), jsx("div", { className: "grid grid-cols-6 gap-1", children: strokeColors.map((color) => (jsx("button", { className: `w-6 h-6 rounded border-2 transition-all ${!hasToolAccess
-                                        ? 'opacity-50 cursor-not-allowed border-gray-200 dark:border-gray-700'
+        }, onMouseDown: handleMouseDown, children: [jsxs("div", { className: "flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: "Style Panel" }), !hasToolAccess && (jsx("span", { className: "text-xs bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 px-2 py-1 rounded", children: "Locked" }))] }), jsx("button", { className: "close-button p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded", onClick: handleManualClose, onMouseDown: (e) => e.stopPropagation(), title: "Close Panel", children: jsx(ChevronLeft, { size: 14, className: "text-gray-600 dark:text-gray-300" }) })] }), jsxs("div", { className: "sidebar-content p-3 overflow-y-auto", style: { maxHeight: 'calc(80vh - 40px)' }, children: [!hasToolAccess && (jsxs("div", { className: "mb-4 p-3 bg-orange-50 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-lg text-center", children: [jsx("div", { className: "text-orange-700 dark:text-orange-300 text-sm font-medium mb-1", children: "\uD83D\uDD12 Tools Locked" }), jsx("div", { className: "text-orange-600 dark:text-orange-400 text-xs", children: "Contact admin for access" })] })), jsxs("div", { className: "mb-4", children: [jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke Color" }), jsx("div", { className: "grid grid-cols-6 gap-1", children: strokeColors.map((color) => (jsx("button", { className: `w-6 h-6 rounded transition-all relative ${!hasToolAccess
+                                        ? 'opacity-50 cursor-not-allowed border-2 border-gray-200 dark:border-gray-700'
                                         : state.color === color
-                                            ? 'border-purple-400 dark:border-purple-500 scale-110'
+                                            ? 'border-[3px] border-yellow-400 dark:border-yellow-300 scale-125 shadow-lg'
                                             : color === '#FFFFFF'
-                                                ? 'border-gray-400 dark:border-gray-500 hover:border-gray-500 dark:hover:border-gray-400'
-                                                : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`, style: {
+                                                ? 'border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
+                                                : 'border-2 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`, style: {
                                         backgroundColor: color,
-                                        boxShadow: color === '#FFFFFF' ? 'inset 0 0 0 1px rgba(0,0,0,0.1)' : 'none'
-                                    }, onClick: () => handleColorChange(color), disabled: !hasToolAccess, title: hasToolAccess ? (color === '#FFFFFF' ? 'White' : color) : 'Access restricted' }, color))) })] }), jsxs("div", { className: "mb-4", children: [jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Background" }), disableBackgroundChange && (jsx("div", { className: "p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg text-center", children: jsx("div", { className: "text-blue-700 dark:text-blue-300 text-xs", title: "Disabled when video background is active", children: "\uD83D\uDD12 Background selection locked" }) })), !disableBackgroundChange && (jsx("div", { className: "grid grid-cols-6 gap-1", children: backgroundColors.map((color) => (jsx("button", { className: `w-6 h-6 rounded border-2 transition-all relative ${!hasToolAccess
+                                        boxShadow: color === '#FFFFFF'
+                                            ? 'inset 0 0 0 1px rgba(0,0,0,0.15)'
+                                            : state.color === color
+                                                ? '0 4px 12px rgba(234, 179, 8, 0.5), 0 0 0 2px rgba(234, 179, 8, 0.3)'
+                                                : 'none'
+                                    }, onClick: () => handleColorChange(color), disabled: !hasToolAccess, title: hasToolAccess ? (color === '#FFFFFF' ? 'White' : color) : 'Access restricted', children: state.color === color && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: color === '#FFFFFF' || color === '#EA580C' || color === '#DC2626' ? '#000000' : '#FFFFFF', strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }) })) }, color))) })] }), jsxs("div", { className: "mb-4", children: [jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Background" }), disableBackgroundChange && (jsx("div", { className: "p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg text-center", children: jsx("div", { className: "text-blue-700 dark:text-blue-300 text-xs", title: "Disabled when video background is active", children: "\uD83D\uDD12 Background selection locked" }) })), !disableBackgroundChange && (jsx("div", { className: "grid grid-cols-6 gap-1", children: backgroundColors.map((color) => (jsx("button", { className: `w-6 h-6 rounded border-2 transition-all relative ${!hasToolAccess
                                         ? 'opacity-50 cursor-not-allowed border-gray-200 dark:border-gray-700'
                                         : state.backgroundColor === color
                                             ? 'border-blue-400 dark:border-blue-500 scale-110'
@@ -42435,10 +42481,57 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
     }, [state.activeDrawings, state.lastClearTimestamp, dispatch]);
     // Export functions to pass to toolbar
     const handleExportImage = useCallback((format) => {
-        if (boardRef.current) {
+        if (!boardRef.current) {
+            return;
+        }
+        // If video is active, capture both video and canvas
+        if (videoStream && videoRef.current) {
+            const video = videoRef.current;
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            // Set canvas size to match the whiteboard
+            canvas.width = video.videoWidth || video.offsetWidth;
+            canvas.height = video.videoHeight || video.offsetHeight;
+            try {
+                // Draw the video frame
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                // Get the Konva stage data URL
+                const stageDataURL = boardRef.current.getStageDataURL(format);
+                // Create an image from the stage
+                const stageImage = new Image();
+                stageImage.onload = () => {
+                    // Draw the annotations on top of the video
+                    ctx.drawImage(stageImage, 0, 0, canvas.width, canvas.height);
+                    // Convert to blob and download
+                    canvas.toBlob((blob) => {
+                        if (blob) {
+                            const timestamp = new Date().toISOString().slice(0, 16).replace('T', '_').replace(/:/g, '-');
+                            const filename = `whiteboard_video_annotation_${timestamp}.${format}`;
+                            const link = document.createElement('a');
+                            link.download = filename;
+                            link.href = URL.createObjectURL(blob);
+                            document.body.appendChild(link);
+                            link.click();
+                            document.body.removeChild(link);
+                            URL.revokeObjectURL(link.href);
+                        }
+                    }, format === 'png' ? 'image/png' : 'image/jpeg', 1.0);
+                };
+                stageImage.src = stageDataURL;
+            }
+            catch (error) {
+                console.error('Failed to export video with annotations:', error);
+                // Fallback to regular export
+                boardRef.current.exportAsImage(format);
+            }
+        }
+        else {
+            // No video - regular export
             boardRef.current.exportAsImage(format);
         }
-    }, []);
+    }, [videoStream]);
     const handleExportPDF = useCallback(() => {
         if (boardRef.current) {
             boardRef.current.exportAsPDF();