react-svg-canvas 0.1.3 → 0.1.4

package/lib/svgcanvas.d.ts

@@ -36,6 +36,15 @@ export interface SvgCanvasHandle {
     centerOn: (x: number, y: number, zoom?: number) => void;
     /** Center the viewport on a rectangle (fitting it in view) */
     centerOnRect: (x: number, y: number, width: number, height: number, padding?: number) => void;
+    /** Center the viewport on a rectangle with smooth animation */
+    centerOnRectAnimated: (x: number, y: number, width: number, height: number, options?: {
+        duration?: number;
+        padding?: number;
+        /** Zoom out factor during transition (0-1, e.g. 0.15 = zoom out 15% at midpoint) */
+        zoomOutFactor?: number;
+    }) => void;
+    /** Check if a rectangle's center is currently visible in the viewport */
+    isRectInView: (x: number, y: number, width: number, height: number) => boolean;
     /** Get current matrix */
     getMatrix: () => [number, number, number, number, number, number];
     /** Set matrix directly */

package/lib/svgcanvas.js

@@ -16,7 +16,8 @@ export function useSvgCanvas() {
 export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style, children, fixed, onToolStart, onToolMove, onToolEnd, onMove, onContextReady }, ref) {
     const svgRef = React.useRef(null);
     const [active, setActive] = React.useState();
-    const [pan, setPan] = React.useState();
+    // Use ref for pan state to avoid React batching delays and enable window-level event handling
+    const panRef = React.useRef(null);
     const [drag, setDrag] = React.useState();
     const [toolStart, setToolStart] = React.useState();
     const [dragHandler, setDragHandler] = React.useState();
@@ -25,6 +26,53 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
     const activePointersRef = React.useRef(new Map());
     const lastPinchDistanceRef = React.useRef(undefined);
     const lastPinchCenterRef = React.useRef(undefined);
+    // Track animation frame for cancellation
+    const animationFrameRef = React.useRef(undefined);
+    // Store onContextReady callback in ref to avoid infinite loops
+    const onContextReadyRef = React.useRef(onContextReady);
+    // Cancel any ongoing animation when user interacts
+    const cancelAnimation = React.useCallback(() => {
+        if (animationFrameRef.current !== undefined) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = undefined;
+        }
+    }, []);
+    // Window-level pan handler - uses refs for immediate updates without React batching
+    const handleWindowPan = React.useCallback((evt) => {
+        const pan = panRef.current;
+        if (!pan || evt.pointerId !== pan.pointerId)
+            return;
+        const dx = evt.clientX - pan.lastX;
+        const dy = evt.clientY - pan.lastY;
+        setMatrix(m => [m[0], m[1], m[2], m[3], m[4] + dx, m[5] + dy]);
+        panRef.current = { lastX: evt.clientX, lastY: evt.clientY, pointerId: pan.pointerId };
+    }, []);
+    // Window-level pan end handler - cleans up window listeners
+    const handleWindowPanEnd = React.useCallback((evt) => {
+        const pan = panRef.current;
+        if (!pan || evt.pointerId !== pan.pointerId)
+            return;
+        panRef.current = null;
+        window.removeEventListener('pointermove', handleWindowPan);
+        window.removeEventListener('pointerup', handleWindowPanEnd);
+        window.removeEventListener('pointercancel', handleWindowPanEnd);
+    }, [handleWindowPan]);
+    // Start panning with window-level event listeners
+    const startPan = React.useCallback((evt) => {
+        panRef.current = { lastX: evt.clientX, lastY: evt.clientY, pointerId: evt.pointerId };
+        window.addEventListener('pointermove', handleWindowPan);
+        window.addEventListener('pointerup', handleWindowPanEnd);
+        window.addEventListener('pointercancel', handleWindowPanEnd);
+    }, [handleWindowPan, handleWindowPanEnd]);
+    // Stop panning and clean up window listeners (used when entering pinch-zoom or other cancellation)
+    const stopPan = React.useCallback(() => {
+        if (panRef.current) {
+            panRef.current = null;
+            window.removeEventListener('pointermove', handleWindowPan);
+            window.removeEventListener('pointerup', handleWindowPanEnd);
+            window.removeEventListener('pointercancel', handleWindowPanEnd);
+        }
+    }, [handleWindowPan, handleWindowPanEnd]);
     const translateTo = React.useCallback(function traslateTo(x, y) {
         return [(x - matrix[4]) / matrix[0], (y - matrix[5]) / matrix[3]];
     }, [matrix]);
@@ -46,10 +94,15 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         setDragHandler,
         startDrag
     }), [svgRef.current, matrix]);
-    // Call onContextReady callback when context changes
+    // Keep onContextReady ref in sync
     React.useEffect(() => {
-        if (onContextReady) {
-            onContextReady({
+        onContextReadyRef.current = onContextReady;
+    }, [onContextReady]);
+    // Call onContextReady callback when matrix changes
+    // Only depend on matrix - translateTo/translateFrom are derived from it
+    React.useEffect(() => {
+        if (onContextReadyRef.current) {
+            onContextReadyRef.current({
                 svg: svgRef.current || undefined,
                 matrix,
                 scale: matrix[0],
@@ -57,7 +110,7 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
                 translateFrom
             });
         }
-    }, [onContextReady, matrix, translateTo, translateFrom]);
+    }, [matrix]);
     // Expose imperative handle
     React.useImperativeHandle(ref, () => ({
         centerOn: (x, y, zoom) => {
@@ -89,9 +142,90 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
             const viewCenterY = rect.height / 2;
             setMatrix([scale, 0, 0, scale, viewCenterX - targetCenterX * scale, viewCenterY - targetCenterY * scale]);
         },
+        centerOnRectAnimated: (x, y, width, height, options) => {
+            const svg = svgRef.current;
+            if (!svg)
+                return;
+            const duration = options?.duration ?? 350;
+            const padding = options?.padding ?? 50;
+            const zoomOutFactor = options?.zoomOutFactor ?? 0;
+            const rect = svg.getBoundingClientRect();
+            const availableWidth = rect.width - padding * 2;
+            const availableHeight = rect.height - padding * 2;
+            // Calculate target scale to fit the rectangle
+            const scaleX = availableWidth / width;
+            const scaleY = availableHeight / height;
+            const targetScale = Math.min(scaleX, scaleY, 2); // Cap at 2x zoom
+            // Center of the target rectangle
+            const targetCenterX = x + width / 2;
+            const targetCenterY = y + height / 2;
+            // Center of the viewport
+            const viewCenterX = rect.width / 2;
+            const viewCenterY = rect.height / 2;
+            // Get current matrix for interpolation
+            const startMatrix = [...matrix];
+            const startScale = startMatrix[0];
+            // Calculate start center in canvas coords (reverse the matrix transform)
+            const startCenterX = (viewCenterX - startMatrix[4]) / startScale;
+            const startCenterY = (viewCenterY - startMatrix[5]) / startScale;
+            const startTime = performance.now();
+            // easeInOutCubic for smooth acceleration/deceleration (better for zoom-out transitions)
+            const easeInOutCubic = (t) => {
+                return t < 0.5
+                    ? 4 * t * t * t
+                    : 1 - Math.pow(-2 * t + 2, 3) / 2;
+            };
+            // Cancel any existing animation
+            cancelAnimation();
+            const animate = (currentTime) => {
+                const elapsed = currentTime - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                const eased = easeInOutCubic(progress);
+                // Interpolate center position
+                const currentCenterX = startCenterX + (targetCenterX - startCenterX) * eased;
+                const currentCenterY = startCenterY + (targetCenterY - startCenterY) * eased;
+                // Interpolate scale with optional zoom-out dip
+                // zoomOutDip creates a parabola that dips at t=0.5
+                // At t=0: dip=0, at t=0.5: dip=1, at t=1: dip=0
+                const zoomOutDip = 4 * progress * (1 - progress) * zoomOutFactor;
+                const baseScale = startScale + (targetScale - startScale) * eased;
+                const currentScale = baseScale * (1 - zoomOutDip);
+                // Calculate new matrix with interpolated values
+                const newMatrix = [
+                    currentScale,
+                    0,
+                    0,
+                    currentScale,
+                    viewCenterX - currentCenterX * currentScale,
+                    viewCenterY - currentCenterY * currentScale
+                ];
+                setMatrix(newMatrix);
+                if (progress < 1) {
+                    animationFrameRef.current = requestAnimationFrame(animate);
+                }
+                else {
+                    animationFrameRef.current = undefined;
+                }
+            };
+            animationFrameRef.current = requestAnimationFrame(animate);
+        },
+        isRectInView: (x, y, width, height) => {
+            const svg = svgRef.current;
+            if (!svg)
+                return false;
+            const rect = svg.getBoundingClientRect();
+            // Calculate rect center in canvas coordinates
+            const rectCenterX = x + width / 2;
+            const rectCenterY = y + height / 2;
+            // Transform to screen coordinates using current matrix
+            const screenX = rectCenterX * matrix[0] + matrix[4];
+            const screenY = rectCenterY * matrix[3] + matrix[5];
+            // Check if center is within viewport bounds
+            return screenX >= 0 && screenX <= rect.width && screenY >= 0 && screenY <= rect.height;
+        },
         getMatrix: () => matrix,
         setMatrix: (newMatrix) => setMatrix(newMatrix)
-    }), [matrix]);
+    }), [matrix, cancelAnimation]);
     function transformPointerEvent(evt) {
         if (!svgRef.current)
             return { x: 0, y: 0, shiftKey: false, ctrlKey: false, metaKey: false, altKey: false };
@@ -105,6 +239,8 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         return { buttons: evt.buttons, x, y };
     }
     function onPointerDown(evt) {
+        // Cancel any ongoing animation when user interacts
+        cancelAnimation();
         // Track this pointer
         activePointersRef.current.set(evt.pointerId, {
             id: evt.pointerId,
@@ -123,7 +259,7 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
             lastPinchCenterRef.current = { x: centerX, y: centerY };
             // Cancel any active tool operation
             setToolStart(undefined);
-            setPan(undefined);
+            stopPan();
             evt.preventDefault();
             evt.stopPropagation();
             return;
@@ -145,7 +281,7 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
                     setActive(undefined);
                     break;
                 case 4: /* middle button */
-                    setPan({ lastX: evt.clientX, lastY: evt.clientY });
+                    startPan(evt);
                     break;
             }
         }
@@ -160,7 +296,7 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
             }
             else {
                 // No tool active - pan mode
-                setPan({ lastX: evt.clientX, lastY: evt.clientY });
+                startPan(evt);
             }
         }
     }
@@ -202,20 +338,11 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
             evt.preventDefault();
             return;
         }
-        // Single pointer handling
+        // Single pointer handling (pan is handled by window-level events, not here)
         if (dragHandler && toolStart) {
             const e = transformPointerEvent(evt);
             dragHandler.onDragMove({ x: e.x, y: e.y, startX: toolStart.startX, startY: toolStart.startY });
         }
-        else if (pan) {
-            const x = evt.clientX;
-            const y = evt.clientY;
-            const dx = x - pan.lastX;
-            const dy = y - pan.lastY;
-            setMatrix(matrix => [matrix[0], matrix[1], matrix[2], matrix[3], matrix[4] + dx, matrix[5] + dy]);
-            setPan({ lastX: x, lastY: y });
-            evt.stopPropagation();
-        }
         else if (onToolMove && toolStart) {
             const e = transformPointerEvent(evt);
             if (e) {
@@ -224,7 +351,7 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         }
         // Always call onMove for cursor tracking (when not panning/pinching)
         // pointerCount <= 1 covers both hovering (0) and single pointer drag (1)
-        if (onMove && pointerCount <= 1 && !pan) {
+        if (onMove && pointerCount <= 1 && !panRef.current) {
             const e = transformPointerEvent(evt);
             if (e) {
                 onMove({ x: e.x, y: e.y, startX: e.x, startY: e.y });
@@ -277,10 +404,12 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         if (onToolEnd)
             onToolEnd();
         setDrag(undefined);
-        setPan(undefined);
+        stopPan();
         setToolStart(undefined);
     }
     function onWheel(evt) {
+        // Cancel any ongoing animation when user zooms
+        cancelAnimation();
         const page = svgRef.current?.getBoundingClientRect() || { left: 0, top: 0 };
         let scale = matrix[0];
         if (scale < 10 && evt.deltaY < 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-svg-canvas",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React library for building interactive SVG canvas applications with pan, zoom, selection, drag-and-drop, resize, and Figma-style snapping",
   "type": "module",
   "main": "lib/index.js",