@mhamz.01/easyflow-whiteboard 2.81.0 → 2.82.0

package/dist/components/node/custom-node-overlay-fix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-fix.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-fix.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAQhF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CA0SzB"}
+{"version":3,"file":"custom-node-overlay-fix.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-fix.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAQhF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CAiTzB"}

package/dist/components/node/custom-node-overlay-fix.js

@@ -11,8 +11,6 @@ import { useCanvasReady } from "./hooks/useCanvasReady";
 import { useNodeSync } from "./hooks/useNodeSync";
 export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
     // ─── State Management ──────────────────────────────────────────────────
-    const [liveViewport, setLiveViewport] = useState(canvasViewport);
-    const [liveZoom, setLiveZoom] = useState(canvasZoom);
     const [localTasks, setLocalTasks] = useState(tasks);
     const [localDocuments, setLocalDocuments] = useState(documents);
     const [selectedIds, setSelectedIds] = useState(new Set());
@@ -26,10 +24,6 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         fabricCanvas,
         canvasZoom,
         canvasReady,
-        onViewportChange: useCallback((viewport, zoom) => {
-            setLiveViewport(viewport);
-            setLiveZoom(zoom);
-        }, []),
     });
     const { dragStateRef: dragRef, rafIdRef, getPointerEvent, getViewportTransform, handleDragStart: handleDragStartHook, handleDragMove: handleDragMoveHook, handleDragEnd: handleDragEndHook, } = useNodeDrag({
         selectedIds,
@@ -173,6 +167,14 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         onTasksUpdate?.(updated);
     }, [localTasks, onTasksUpdate]);
     // ─── Render Helper ────────────────────────────────────────────────────
+    const getCanvasViewport = () => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return { x: 0, y: 0 };
+        const vpt = canvas.viewportTransform;
+        return vpt ? { x: vpt[4], y: vpt[5] } : { x: 0, y: 0 };
+    };
+    const currentViewport = getCanvasViewport(); // ← Get FRESH viewport every render
     const renderItem = useCallback((id, x, y, children) => {
         const screenX = x * canvasZoom;
         const screenY = y * canvasZoom;
@@ -192,7 +194,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             if (e.target === e.currentTarget)
                 setSelectedIds(new Set());
         }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
-                transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
+                transform: `translate(${currentViewport.x}px, ${currentViewport.y}px)`, // ← Use fresh viewport
                 transformOrigin: "top left",
             }, children: [localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(TaskNode, { ...task, isSelected: selectedIds.has(task.id), onSelect: handleSelect, onDragStart: handleDragStart, onStatusChange: handleStatusChange, zoom: 1 }))), localDocuments.map((doc) => renderItem(doc.id, doc.x, doc.y, _jsx(DocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })))] }) }));
 }

package/dist/components/node/hooks/useNodeDrag.js

@@ -78,7 +78,7 @@ export function useNodeDrag({ selectedIds, fabricCanvas, selectedCanvasObjects,
         if (rafIdRef.current !== null)
             cancelAnimationFrame(rafIdRef.current);
         rafIdRef.current = requestAnimationFrame(() => {
-            const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+            const { canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
             const canvas = fabricCanvas?.current;
             if (!canvas)
                 return;

package/dist/components/node/hooks/useWheelZoom.d.ts

@@ -4,12 +4,8 @@ interface UseWheelZoomProps {
     fabricCanvas?: React.RefObject<Canvas | null>;
     canvasZoom?: number;
     canvasReady?: boolean;
-    onViewportChange: (viewport: {
-        x: number;
-        y: number;
-    }, zoom: number) => void;
 }
-export declare function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom, canvasReady, onViewportChange, }: UseWheelZoomProps): {
+export declare function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom, canvasReady, }: UseWheelZoomProps): {
     handleOverlayWheel: (e: React.WheelEvent) => void;
 };
 export {};

package/dist/components/node/hooks/useWheelZoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWheelZoom.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useWheelZoom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,iBAAiB;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9E;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,YAAY,EACZ,UAAc,EACd,WAAmB,EACnB,gBAAgB,GACjB,EAAE,iBAAiB;4BAEa,KAAK,CAAC,UAAU;EAqFhD"}
+{"version":3,"file":"useWheelZoom.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useWheelZoom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,iBAAiB;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,YAAY,EACZ,UAAc,EACd,WAAmB,GACpB,EAAE,iBAAiB;4BAEa,KAAK,CAAC,UAAU;EA6DhD"}

package/dist/components/node/hooks/useWheelZoom.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-export function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom = 1, canvasReady = false, onViewportChange, }) {
+export function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom = 1, canvasReady = false, }) {
     // React event handler for overlay wheel
     const handleOverlayWheel = (e) => {
         if (e.ctrlKey || e.metaKey || e.shiftKey) {
@@ -22,26 +22,6 @@ export function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom = 1, canvasR
             e.stopPropagation();
         }
     };
-    useEffect(() => {
-        const canvas = fabricCanvas?.current;
-        if (!canvas || !canvasReady)
-            return;
-        // THE FIX: Listen to Fabric's internal render loop
-        // This fires immediately after Fabric moves, reducing the lag time
-        const syncViewport = () => {
-            const vpt = canvas.viewportTransform;
-            if (vpt) {
-                onViewportChange({ x: vpt[4], y: vpt[5] }, // Pan position
-                canvas.getZoom() // Zoom level
-                );
-            }
-        };
-        // Use 'after:render' for the tightest possible sync
-        canvas.on("after:render", syncViewport);
-        return () => {
-            canvas.off("after:render", syncViewport);
-        };
-    }, [fabricCanvas, canvasReady, onViewportChange]);
     // Global wheel event for hovering over nodes
     useEffect(() => {
         const overlayEl = overlayRef.current;

package/package.json

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