@mhamz.01/easyflow-whiteboard 2.141.0 → 2.142.0

package/dist/components/whiteboard/whiteboard-test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA2HD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAiRvB"}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAiHD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAyRvB"}

package/dist/components/whiteboard/whiteboard-test.js

@@ -30,15 +30,13 @@ const MemoizedToolbarWrapper = React.memo(function ToolbarWrapper({ canvasReady,
 // ── Memoized Overlay wrapper (Issue 11) ───────────────────────────────────────
 // This wrapper only updates when tasks/documents/canvasReady change
 // Not on every pan/zoom frame
-const MemoizedOverlayWrapper = React.memo(function OverlayWrapper({ tasks, documents, canvasReady, fabricCanvasRef, onTasksUpdate, onDocumentsUpdate, }) {
-    // Issue 11: Read zoom/viewport directly from fabricCanvas instead of prop drilling
-    // This prevents re-renders on every pan/zoom frame
+const MemoizedOverlayWrapper = React.memo(function OverlayWrapper({ tasks, documents, canvasReady, fabricCanvasRef, onTasksUpdate, onDocumentsUpdate, selectionBox, // ← destructure from props
+selectedCanvasObjects, // ← destructure from props
+ }) {
+    // Only zoom/viewport are read from canvas internally — these two have no external source
     const [canvasZoom, setCanvasZoom] = useState(1);
     const [canvasViewport, setCanvasViewport] = useState({ x: 0, y: 0 });
-    const [selectionBox, setSelectionBox] = useState(null);
-    const [selectedCanvasObjects, setSelectedCanvasObjects] = useState([]);
-    // Effect to sync zoom/viewport from fabric canvas
-    // This keeps the overlay in sync without prop drilling
+    // ← Remove the two useState calls for selectionBox and selectedCanvasObjects entirely
     React.useEffect(() => {
         const canvas = fabricCanvasRef.current;
         if (!canvas)
@@ -47,29 +45,25 @@ const MemoizedOverlayWrapper = React.memo(function OverlayWrapper({ tasks, docum
             const vpt = canvas.viewportTransform;
             if (!vpt)
                 return;
-            // Extract zoom (scale) from viewport transform
-            const zoom = vpt[0];
-            const vpX = vpt[4];
-            const vpY = vpt[5];
-            setCanvasZoom(zoom);
-            setCanvasViewport({ x: vpX, y: vpY });
+            setCanvasZoom(vpt[0]);
+            setCanvasViewport({ x: vpt[4], y: vpt[5] });
         };
-        // Update on viewport change
         canvas.on("after:render", updateViewport);
-        updateViewport(); // Initial sync
+        updateViewport();
         return () => {
-            canvas.off("after:render", updateViewport); // ← was "viewport:changed", must match registration
+            canvas.off("after:render", updateViewport);
         };
     }, [fabricCanvasRef, canvasReady]);
-    return (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: onTasksUpdate, onDocumentsUpdate: onDocumentsUpdate, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady }));
+    return (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: onTasksUpdate, onDocumentsUpdate: onDocumentsUpdate, canvasZoom: canvasZoom, canvasViewport: canvasViewport, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects }));
 }, (prev, next) => {
-    // Custom comparator — only re-render if these props change
     return (prev.tasks === next.tasks &&
         prev.documents === next.documents &&
         prev.canvasReady === next.canvasReady &&
         prev.fabricCanvasRef === next.fabricCanvasRef &&
         prev.onTasksUpdate === next.onTasksUpdate &&
-        prev.onDocumentsUpdate === next.onDocumentsUpdate);
+        prev.onDocumentsUpdate === next.onDocumentsUpdate &&
+        prev.selectionBox === next.selectionBox &&
+        prev.selectedCanvasObjects === next.selectedCanvasObjects);
 });
 export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs, availableTasks = [], availableDocuments = [], isLoadingData = false, }) {
     // Refs
@@ -96,6 +90,8 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
     const [tasks, setTasks] = useState([]);
     const [canvasReady, setCanvasReady] = useState(false);
     const [documents, setDocuments] = useState([]);
+    const [selectionBox, setSelectionBox] = useState(null);
+    const [selectedCanvasObjects, setSelectedCanvasObjects] = useState([]);
     const MIN_ZOOM = 0.1;
     const MAX_ZOOM = 5;
     const ZOOM_STEP = 0.1;
@@ -183,8 +179,8 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         activeTool,
         canvasZoom: 1, // Read from canvas instead
         canvasViewport: { x: 0, y: 0 },
-        setSelectionBox: () => { }, // Not used anymore
-        setSelectedCanvasObjects: () => { }, // Not used anymore
+        setSelectionBox, // Not used anymore
+        setSelectedCanvasObjects, // Not used anymore
         isDrawingRef,
     });
     // Text style updates
@@ -274,5 +270,5 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
                         backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`,
                         backgroundSize: "40px 40px",
                         zIndex: 0,
-                    } }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), _jsx(MemoizedOverlayWrapper, { tasks: tasks, documents: documents, canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: _jsx(MemoizedToolbarWrapper, { canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: 1, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
+                    } }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), _jsx(MemoizedOverlayWrapper, { tasks: tasks, documents: documents, canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: _jsx(MemoizedToolbarWrapper, { canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: 1, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "2.141.0",
+    "version": "2.142.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",