react-svg-canvas 0.1.1 → 0.1.2

package/lib/geometry/resize.d.ts

@@ -17,6 +17,12 @@ export declare function getAnchorForHandle(handle: ResizeHandle): Point;
  * The anchor is rotated around the pivot point.
  */
 export declare function getRotatedAnchorPosition(bounds: Bounds, anchor: Point, pivot: Point, rotationMatrix: RotationMatrix): Point;
+/**
+ * Determine which dimension should drive the resize for aspect ratio constraint.
+ * For edge handles, the edge determines the driver.
+ * For corner handles, use proportional change to determine which dimension drives.
+ */
+export declare function getDriverDimension(handle: ResizeHandle, localDx: number, localDy: number, originalWidth: number, originalHeight: number): 'width' | 'height';
 /**
  * Calculate new size based on handle and mouse delta in object-local space.
  */
@@ -67,6 +73,7 @@ export declare function initResizeState(startPoint: Point, handle: ResizeHandle,
  * @param currentPoint - Current mouse/pointer position in canvas coords
  * @param minWidth - Minimum allowed width (default 10)
  * @param minHeight - Minimum allowed height (default 10)
+ * @param aspectRatio - Optional aspect ratio constraint (width/height). When provided, resize maintains this ratio.
  * @returns New bounds with position adjusted to keep anchor fixed
  */
-export declare function calculateResizeBounds(state: ResizeState, currentPoint: Point, minWidth?: number, minHeight?: number): Bounds;
+export declare function calculateResizeBounds(state: ResizeState, currentPoint: Point, minWidth?: number, minHeight?: number, aspectRatio?: number): Bounds;

package/lib/geometry/resize.js

@@ -37,6 +37,22 @@ export function getRotatedAnchorPosition(bounds, anchor, pivot, rotationMatrix)
         y: pivotAbsY + (anchorLocalX - pivotAbsX) * rotationMatrix.sin + (anchorLocalY - pivotAbsY) * rotationMatrix.cos
     };
 }
+/**
+ * Determine which dimension should drive the resize for aspect ratio constraint.
+ * For edge handles, the edge determines the driver.
+ * For corner handles, use proportional change to determine which dimension drives.
+ */
+export function getDriverDimension(handle, localDx, localDy, originalWidth, originalHeight) {
+    // Edge handles: the edge determines the driver
+    if (handle === 'e' || handle === 'w')
+        return 'width';
+    if (handle === 'n' || handle === 's')
+        return 'height';
+    // Corner handles: use proportional change to determine driver
+    const propX = Math.abs(localDx) / originalWidth;
+    const propY = Math.abs(localDy) / originalHeight;
+    return propX >= propY ? 'width' : 'height';
+}
 /**
  * Calculate new size based on handle and mouse delta in object-local space.
  */
@@ -133,19 +149,49 @@ export function initResizeState(startPoint, handle, bounds, pivot, rotation) {
  * @param currentPoint - Current mouse/pointer position in canvas coords
  * @param minWidth - Minimum allowed width (default 10)
  * @param minHeight - Minimum allowed height (default 10)
+ * @param aspectRatio - Optional aspect ratio constraint (width/height). When provided, resize maintains this ratio.
  * @returns New bounds with position adjusted to keep anchor fixed
  */
-export function calculateResizeBounds(state, currentPoint, minWidth = 10, minHeight = 10) {
+export function calculateResizeBounds(state, currentPoint, minWidth = 10, minHeight = 10, aspectRatio) {
     // Calculate screen delta
     const screenDx = currentPoint.x - state.startX;
     const screenDy = currentPoint.y - state.startY;
     // Un-rotate to get local (object space) delta
     const [localDx, localDy] = unrotateDeltaWithMatrix(screenDx, screenDy, state.rotationMatrix);
-    // Calculate new dimensions
+    // Calculate new dimensions (unconstrained first)
     let { width, height } = calculateResizedDimensions(state.handle, state.originalBounds.width, state.originalBounds.height, localDx, localDy);
-    // Enforce minimum size
-    width = Math.max(width, minWidth);
-    height = Math.max(height, minHeight);
+    // Apply aspect ratio constraint if provided
+    if (aspectRatio !== undefined) {
+        const driver = getDriverDimension(state.handle, localDx, localDy, state.originalBounds.width, state.originalBounds.height);
+        if (driver === 'width') {
+            // Width drives, calculate height from aspect ratio
+            height = width / aspectRatio;
+        }
+        else {
+            // Height drives, calculate width from aspect ratio
+            width = height * aspectRatio;
+        }
+    }
+    // Enforce minimum size (maintaining aspect ratio if constrained)
+    if (aspectRatio !== undefined) {
+        // Calculate effective minimum considering aspect ratio
+        const minByWidth = minWidth;
+        const minByHeight = minHeight * aspectRatio;
+        if (width < minByWidth || height < minHeight) {
+            if (minByWidth >= minByHeight) {
+                width = minByWidth;
+                height = width / aspectRatio;
+            }
+            else {
+                height = minHeight;
+                width = height * aspectRatio;
+            }
+        }
+    }
+    else {
+        width = Math.max(width, minWidth);
+        height = Math.max(height, minHeight);
+    }
     // Calculate position to keep anchor fixed
     const position = calculateResizedPosition(width, height, state.anchor, state.pivot, state.anchorScreenPos, state.rotationMatrix);
     return {

package/lib/hooks/useResizable.d.ts

@@ -75,6 +75,17 @@ export interface UseResizableOptions {
      * Returns { x: pivotX, y: pivotY } in normalized coordinates (0-1).
      */
     getPivot?: () => Point;
+    /**
+     * Aspect ratio constraint (width/height).
+     * When provided, resize maintains this ratio.
+     * For images, typically originalWidth / originalHeight.
+     */
+    aspectRatio?: number;
+    /**
+     * Optional getter for fresh aspect ratio at resize start.
+     * Use this when working with CRDT/external state to avoid stale closures.
+     */
+    getAspectRatio?: () => number | undefined;
 }
 export interface UseResizableReturn {
     /** Whether currently resizing */

package/lib/hooks/useResizable.js

@@ -38,7 +38,8 @@ export function useResizable(options) {
         resizeState: null,
         element: null,
         pointerId: -1,
-        currentBounds: { x: 0, y: 0, width: 0, height: 0 }
+        currentBounds: { x: 0, y: 0, width: 0, height: 0 },
+        aspectRatio: undefined
     });
     const optionsRef = React.useRef(options);
     optionsRef.current = options;
@@ -56,11 +57,14 @@ export function useResizable(options) {
         const { bounds, rotation = 0, pivotX = 0.5, pivotY = 0.5 } = optionsRef.current;
         // Initialize rotation-aware resize state
         const resizeState = initResizeState({ x: coords.x, y: coords.y }, handle, bounds, { x: pivotX, y: pivotY }, rotation);
+        // Capture aspect ratio at resize start (from getter if provided, else from prop)
+        const aspectRatio = optionsRef.current.getAspectRatio?.() ?? optionsRef.current.aspectRatio;
         stateRef.current = {
             resizeState,
             element,
             pointerId: e.pointerId,
-            currentBounds: { ...bounds }
+            currentBounds: { ...bounds },
+            aspectRatio
         };
         setIsResizing(true);
         setActiveHandle(handle);
@@ -69,7 +73,7 @@ export function useResizable(options) {
             bounds: { ...bounds }
         });
         const handlePointerMove = (moveEvent) => {
-            const { resizeState, element, pointerId } = stateRef.current;
+            const { resizeState, element, pointerId, aspectRatio } = stateRef.current;
             if (!resizeState || !element || moveEvent.pointerId !== pointerId)
                 return;
             const opts = optionsRef.current;
@@ -77,8 +81,8 @@ export function useResizable(options) {
             // Calculate delta for snapping
             const deltaX = moveCoords.x - resizeState.startX;
             const deltaY = moveCoords.y - resizeState.startY;
-            // Calculate new bounds (rotation-aware)
-            let newBounds = calculateResizeBounds(resizeState, { x: moveCoords.x, y: moveCoords.y }, opts.minWidth ?? 10, opts.minHeight ?? 10);
+            // Calculate new bounds (rotation-aware, with aspect ratio constraint if provided)
+            let newBounds = calculateResizeBounds(resizeState, { x: moveCoords.x, y: moveCoords.y }, opts.minWidth ?? 10, opts.minHeight ?? 10, aspectRatio);
             // Apply snapping if available
             if (opts.snapResize && opts.objectId) {
                 const snapResult = opts.snapResize({
@@ -124,7 +128,8 @@ export function useResizable(options) {
                 resizeState: null,
                 element: null,
                 pointerId: -1,
-                currentBounds: { x: 0, y: 0, width: 0, height: 0 }
+                currentBounds: { x: 0, y: 0, width: 0, height: 0 },
+                aspectRatio: undefined
             };
             setIsResizing(false);
             setActiveHandle(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-svg-canvas",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",