react-svg-canvas 0.0.2 → 0.1.0

package/README.md

@@ -24,7 +24,7 @@ pnpm add react-svg-canvas
 yarn add react-svg-canvas
 ```
 
-**Peer Dependencies:** React 19.x
+**Peer Dependencies:** React 18+
 
 ## Quick Start
 
@@ -154,14 +154,17 @@ function Canvas({ objects }: { objects: MyObject[] }) {
   const {
     selectedIds,
     selectedObjects,
+    selectionCount,
     selectionBounds,
     hasSelection,
     select,
     selectMultiple,
+    deselect,
     toggle,
     clear,
     selectAll,
     selectInRect,
+    setSelection,
     isSelected
   } = useSelection({ objects, onChange: (ids) => console.log('Selection:', ids) })
 
@@ -306,6 +309,27 @@ function Canvas({ objects }) {
 }
 ```
 
+#### useGrabPoint
+
+Helper hook for calculating the normalized grab point when dragging objects.
+
+```tsx
+import { useGrabPoint } from 'react-svg-canvas'
+
+function MyDraggable({ bounds }) {
+  const { setGrabPoint, getGrabPoint } = useGrabPoint()
+
+  function handleDragStart(mousePos) {
+    setGrabPoint(mousePos, bounds)
+  }
+
+  function handleDrag(delta) {
+    const grabPoint = getGrabPoint()  // Returns { x: 0-1, y: 0-1 }
+    // Use with snapDrag...
+  }
+}
+```
+
 #### Snap Configuration
 
 ```tsx
@@ -488,6 +512,13 @@ interface SpatialObject {
   bounds: Bounds
 }
 
+interface ToolEvent {
+  startX: number
+  startY: number
+  x: number
+  y: number
+}
+
 type ResizeHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
 ```
 
@@ -569,7 +600,7 @@ function Editor() {
 
 ## Browser Support
 
-- Modern browsers with ES2020 support
+- Modern browsers with ES2021 support
 - Touch devices (iOS Safari, Android Chrome)
 
 ## License

package/lib/svgcanvas.d.ts

@@ -12,7 +12,7 @@ export declare function useSvgCanvas(): {
     translateTo: (x: number, y: number) => [number, number];
     translateFrom: (x: number, y: number) => [number, number];
     setDragHandler: React.Dispatch<React.SetStateAction<DragHandler | undefined>>;
-    startDrag: (evt: React.MouseEvent | React.TouchEvent) => void;
+    startDrag: (evt: React.PointerEvent) => void;
 };
 /**
  * Context exposed to consumers via onContextReady callback

package/lib/svgcanvas.js

@@ -17,11 +17,14 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
     const svgRef = React.useRef(null);
     const [active, setActive] = React.useState();
     const [pan, setPan] = React.useState();
-    const [pinch, setPinch] = React.useState();
     const [drag, setDrag] = React.useState();
     const [toolStart, setToolStart] = React.useState();
     const [dragHandler, setDragHandler] = React.useState();
     const [matrix, setMatrix] = React.useState([1, 0, 0, 1, 0, 0]);
+    // Track active pointers for multi-touch gestures
+    const activePointersRef = React.useRef(new Map());
+    const lastPinchDistanceRef = React.useRef(undefined);
+    const lastPinchCenterRef = React.useRef(undefined);
     const translateTo = React.useCallback(function traslateTo(x, y) {
         return [(x - matrix[4]) / matrix[0], (y - matrix[5]) / matrix[3]];
     }, [matrix]);
@@ -29,11 +32,10 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         return [x * matrix[0] + matrix[4], y * matrix[3] + matrix[5]];
     }, [matrix]);
     function startDrag(evt) {
-        const e = 'touches' in evt ? transformTouchEvent(evt) : transformMouseEvent(evt);
+        const e = transformPointerEvent(evt);
         if (!e)
             return;
         setToolStart({ startX: e.x, startY: e.y });
-        //setDrag({ target, startX: e.x, startY: e.y, lastX: e.x, lastY: e.y})
     }
     const svgContext = React.useMemo(() => ({
         svg: svgRef.current || undefined,
@@ -90,11 +92,11 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         getMatrix: () => matrix,
         setMatrix: (newMatrix) => setMatrix(newMatrix)
     }), [matrix]);
-    function transformTouchEvent(evt) {
+    function transformPointerEvent(evt) {
         if (!svgRef.current)
             return { x: 0, y: 0 };
-        const br = svgRef.current.getBoundingClientRect(), [x, y] = translateTo(evt.touches[0].clientX - br.left, evt.touches[0].clientY - br.top);
-        return { buttons: undefined, x, y };
+        const br = svgRef.current.getBoundingClientRect(), [x, y] = translateTo(evt.clientX - br.left, evt.clientY - br.top);
+        return { buttons: evt.buttons, x, y };
     }
     function transformMouseEvent(evt) {
         if (!svgRef.current)
@@ -102,126 +104,161 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         const br = svgRef.current.getBoundingClientRect(), [x, y] = translateTo(evt.clientX - br.left, evt.clientY - br.top);
         return { buttons: evt.buttons, x, y };
     }
-    function onMouseDown(evt) {
+    function onPointerDown(evt) {
+        // Track this pointer
+        activePointersRef.current.set(evt.pointerId, {
+            id: evt.pointerId,
+            x: evt.clientX,
+            y: evt.clientY
+        });
+        const pointerCount = activePointersRef.current.size;
+        // If we have 2+ pointers, enter pinch-zoom mode
+        if (pointerCount >= 2) {
+            const pointers = Array.from(activePointersRef.current.values());
+            const distance = Math.sqrt((pointers[0].x - pointers[1].x) ** 2 +
+                (pointers[0].y - pointers[1].y) ** 2);
+            const centerX = (pointers[0].x + pointers[1].x) / 2;
+            const centerY = (pointers[0].y + pointers[1].y) / 2;
+            lastPinchDistanceRef.current = distance;
+            lastPinchCenterRef.current = { x: centerX, y: centerY };
+            // Cancel any active tool operation
+            setToolStart(undefined);
+            setPan(undefined);
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+        // Single pointer handling
         evt.preventDefault();
         evt.stopPropagation();
-        switch (evt.buttons) {
-            case 1: /* left button */
-                if (onToolStart) {
-                    const e = transformMouseEvent(evt);
-                    if (e) {
-                        setToolStart({ startX: e.x, startY: e.y });
-                        onToolStart({ startX: e.x, startY: e.y, x: e.x, y: e.y });
+        // Check if this is a touch event (pointerType === 'touch') or mouse
+        if (evt.pointerType === 'mouse') {
+            switch (evt.buttons) {
+                case 1: /* left button */
+                    if (onToolStart) {
+                        const e = transformPointerEvent(evt);
+                        if (e) {
+                            setToolStart({ startX: e.x, startY: e.y });
+                            onToolStart({ startX: e.x, startY: e.y, x: e.x, y: e.y });
+                        }
                     }
-                }
-                setActive(undefined);
-                break;
-            case 4: /* middle button */
-                // Pan
-                const lastX = evt.clientX;
-                const lastY = evt.clientY;
-                setPan({ lastX, lastY });
-                break;
-        }
-    }
-    function onTouchStart(evt) {
-        const lastX = evt.touches[0].clientX;
-        const lastY = evt.touches[0].clientY;
-        evt.stopPropagation();
-        if (onToolStart) {
-            const e = transformTouchEvent(evt);
-            if (e) {
-                setToolStart({ startX: e.x, startY: e.y });
-                onToolStart({ startX: e.x, startY: e.y, x: e.x, y: e.y });
+                    setActive(undefined);
+                    break;
+                case 4: /* middle button */
+                    setPan({ lastX: evt.clientX, lastY: evt.clientY });
+                    break;
             }
         }
         else {
-            setPan({ lastX, lastY });
+            // Touch or pen - single finger
+            if (onToolStart) {
+                const e = transformPointerEvent(evt);
+                if (e) {
+                    setToolStart({ startX: e.x, startY: e.y });
+                    onToolStart({ startX: e.x, startY: e.y, x: e.x, y: e.y });
+                }
+            }
+            else {
+                // No tool active - pan mode
+                setPan({ lastX: evt.clientX, lastY: evt.clientY });
+            }
         }
     }
-    function onMouseMove(evt) {
-        if (!evt.buttons)
+    function onPointerMove(evt) {
+        // Update tracked pointer position
+        if (activePointersRef.current.has(evt.pointerId)) {
+            activePointersRef.current.set(evt.pointerId, {
+                id: evt.pointerId,
+                x: evt.clientX,
+                y: evt.clientY
+            });
+        }
+        const pointerCount = activePointersRef.current.size;
+        // Handle 2-finger pinch+pan
+        if (pointerCount >= 2 && lastPinchDistanceRef.current !== undefined && lastPinchCenterRef.current !== undefined) {
+            const pointers = Array.from(activePointersRef.current.values());
+            const newDistance = Math.sqrt((pointers[0].x - pointers[1].x) ** 2 +
+                (pointers[0].y - pointers[1].y) ** 2);
+            const newCenterX = (pointers[0].x + pointers[1].x) / 2;
+            const newCenterY = (pointers[0].y + pointers[1].y) / 2;
+            // Calculate zoom scale
+            const scale = newDistance / lastPinchDistanceRef.current;
+            // Calculate pan delta (center point movement)
+            const dx = newCenterX - lastPinchCenterRef.current.x;
+            const dy = newCenterY - lastPinchCenterRef.current.y;
+            // Apply combined pan+zoom transformation
+            setMatrix(m => [
+                m[0] * scale,
+                m[1] * scale,
+                m[2] * scale,
+                m[3] * scale,
+                (m[4] + dx) - (newCenterX - (m[4] + dx)) * (scale - 1),
+                (m[5] + dy) - (newCenterY - (m[5] + dy)) * (scale - 1)
+            ]);
+            // Update tracking state
+            lastPinchDistanceRef.current = newDistance;
+            lastPinchCenterRef.current = { x: newCenterX, y: newCenterY };
+            evt.stopPropagation();
+            evt.preventDefault();
             return;
-        evt.preventDefault();
-        // Don't stopPropagation - allow window event listeners to work
+        }
+        // Single pointer handling
         if (dragHandler && toolStart) {
-            const e = transformMouseEvent(evt);
+            const e = transformPointerEvent(evt);
             dragHandler.onDragMove({ x: e.x, y: e.y, startX: toolStart.startX, startY: toolStart.startY });
         }
         else if (pan) {
-            if (evt.buttons == 4) {
-                // Pan
-                let x = evt.clientX, 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 {
-                onDragEnd();
-            }
+            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 = transformMouseEvent(evt);
+            const e = transformPointerEvent(evt);
             if (e) {
                 onToolMove({ x: e.x, y: e.y, startX: toolStart.startX, startY: toolStart.startY });
             }
         }
-        // Don't call onDragEnd when nothing was started - allows external handlers (like resize) to work
     }
-    function onTouchMove(evt) {
-        evt.stopPropagation();
-        if (evt.touches.length == 1) {
-            if (dragHandler && toolStart) {
-                const e = transformTouchEvent(evt);
-                dragHandler.onDragMove({ x: e.x, y: e.y, startX: toolStart?.startX, startY: toolStart?.startY });
-                /*
-                if (e && drag.target) {
-                    let scale = matrix[0]
-                } else return onDragEnd()
-                setDrag(drag => drag ? { ...drag, lastX: e.x, lastY: e.y } : undefined)
-                */
-            }
-            else if (pan) {
-                // Pan
-                let x = evt.touches[0].clientX, y = evt.touches[0].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 = transformTouchEvent(evt);
-                if (e) {
-                    onToolMove({ x: e.x, y: e.y, startX: toolStart.startX, startY: toolStart.startY });
-                }
-            }
-            else
-                return onDragEnd();
+    function onPointerUp(evt) {
+        // Remove this pointer from tracking
+        activePointersRef.current.delete(evt.pointerId);
+        const pointerCount = activePointersRef.current.size;
+        // If we still have pointers, reinitialize pinch state with remaining pointers
+        if (pointerCount >= 2) {
+            const pointers = Array.from(activePointersRef.current.values());
+            lastPinchDistanceRef.current = Math.sqrt((pointers[0].x - pointers[1].x) ** 2 +
+                (pointers[0].y - pointers[1].y) ** 2);
+            lastPinchCenterRef.current = {
+                x: (pointers[0].x + pointers[1].x) / 2,
+                y: (pointers[0].y + pointers[1].y) / 2
+            };
+            return;
         }
-        else if (evt.touches.length == 2) {
-            if (!pinch) {
-                setPinch(Math.sqrt((evt.touches[0].clientX - evt.touches[1].clientX) ** 2
-                    + (evt.touches[0].clientY - evt.touches[1].clientY) ** 2));
-            }
-            else {
-                const newPinch = Math.sqrt((evt.touches[0].clientX - evt.touches[1].clientX) ** 2
-                    + (evt.touches[0].clientY - evt.touches[1].clientY) ** 2);
-                const cx = (evt.touches[0].clientX + evt.touches[1].clientX) / 2;
-                const xy = (evt.touches[0].clientY + evt.touches[1].clientY) / 2;
-                const scale = newPinch / pinch;
-                zoom(scale, cx, xy);
-                setPinch(newPinch);
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
+        // If we're down to 1 pointer and were pinching, reset pinch state
+        if (pointerCount === 1) {
+            lastPinchDistanceRef.current = undefined;
+            lastPinchCenterRef.current = undefined;
+            // Don't start panning - let the remaining pointer continue without action
+            return;
+        }
+        // All pointers released - cleanup
+        onDragEnd();
+    }
+    function onPointerCancel(evt) {
+        activePointersRef.current.delete(evt.pointerId);
+        if (activePointersRef.current.size === 0) {
+            lastPinchDistanceRef.current = undefined;
+            lastPinchCenterRef.current = undefined;
+            onDragEnd();
         }
     }
     function onDragEnd() {
-        if (pinch)
-            setPinch(undefined);
+        lastPinchDistanceRef.current = undefined;
+        lastPinchCenterRef.current = undefined;
         if (dragHandler) {
             dragHandler.onDragEnd?.();
             setDragHandler(undefined);
@@ -233,6 +270,7 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
             onToolEnd();
         setDrag(undefined);
         setPan(undefined);
+        setToolStart(undefined);
     }
     function onWheel(evt) {
         const page = svgRef.current?.getBoundingClientRect() || { left: 0, top: 0 };
@@ -256,7 +294,7 @@ export const SvgCanvas = React.forwardRef(function SvgCanvas({ className, style,
         ]);
     }
     return React.createElement(SvgCanvasContext.Provider, { value: svgContext },
-        React.createElement("svg", { ref: svgRef, className: className, style: { ...style, touchAction: 'none' }, onMouseDown: onMouseDown, onTouchStart: onTouchStart, onMouseMove: onMouseMove, onTouchMove: onTouchMove, onMouseUp: onDragEnd, onTouchEnd: onDragEnd, onWheel: onWheel },
+        React.createElement("svg", { ref: svgRef, className: className, style: { ...style, touchAction: 'none' }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onWheel: onWheel },
             React.createElement("g", { transform: `matrix(${matrix.map(x => Math.round(x * 1000) / 1000).join(' ')})` }, children),
             React.createElement("g", null, fixed)));
 });

package/package.json

@@ -1,9 +1,19 @@
 {
   "name": "react-svg-canvas",
-  "version": "0.0.2",
-  "description": "React SVG Canvas",
+  "version": "0.1.0",
+  "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",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    }
+  },
+  "sideEffects": false,
   "files": [
     "lib"
   ],
@@ -12,15 +22,38 @@
     "build": "tsc",
     "watch": "tsc -w",
     "clean": "rimraf .cache lib",
+    "prepublishOnly": "npm run build",
     "pub": "npm publish --access public"
   },
   "keywords": [
     "react",
     "svg",
-    "canvas"
+    "canvas",
+    "pan",
+    "zoom",
+    "drag-and-drop",
+    "selection",
+    "resize",
+    "snapping",
+    "interactive",
+    "editor",
+    "diagram",
+    "whiteboard",
+    "figma"
   ],
-  "author": "Szilard Hajba <szilu@symbion.hu>",
+  "author": "Szilard Hajba <szilard@cloudillo.org>",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloudillo/react-svg-canvas.git"
+  },
+  "homepage": "https://github.com/cloudillo/react-svg-canvas#readme",
+  "bugs": {
+    "url": "https://github.com/cloudillo/react-svg-canvas/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -29,6 +62,6 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "react": "^19.2.0"
+    "react": ">=18.0.0"
   }
 }