react-svg-canvas 0.1.1 → 0.1.3

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/lib/snapping/SnapGuides.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import type { Bounds } from '../types';
-import type { ActiveSnap, ScoredCandidate, SnapGuidesConfig, SnapDebugConfig, RotatedBounds } from './types';
+import type { ActiveSnap, ActiveSnapEdge, ScoredCandidate, SnapGuidesConfig, SnapDebugConfig, RotatedBounds } from './types';
 export interface SnapGuidesProps {
     activeSnaps: ActiveSnap[];
     allCandidates?: ScoredCandidate[];
@@ -11,10 +11,12 @@ export interface SnapGuidesProps {
     debugConfig?: SnapDebugConfig;
     viewBounds: Bounds;
     draggedBounds?: RotatedBounds;
+    /** Which snap edges are active based on grab point (for visual feedback) */
+    activeSnapEdges?: ActiveSnapEdge[];
     /** Transform function to convert canvas coords to screen coords (for fixed layer rendering) */
     transformPoint?: (x: number, y: number) => [number, number];
 }
 /**
  * Main snap guides component - renders Figma-style red guide lines
  */
-export declare function SnapGuides({ activeSnaps, allCandidates, config, debugConfig, viewBounds, draggedBounds, transformPoint }: SnapGuidesProps): React.JSX.Element | null;
+export declare function SnapGuides({ activeSnaps, allCandidates, config, debugConfig, viewBounds, draggedBounds, activeSnapEdges, transformPoint }: SnapGuidesProps): React.JSX.Element | null;

package/lib/snapping/SnapGuides.js

@@ -49,11 +49,55 @@ function SourceBoundingBoxHighlight({ bounds, color, strokeWidth, transformPoint
     const height = Math.abs(y2 - y1);
     return (React.createElement("rect", { x: minX, y: minY, width: width, height: height, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeDasharray: "4,3", strokeOpacity: 0.7 }));
 }
+/**
+ * Render active snap edge indicators on the dragged object
+ * Shows lines along the edges that are being used for snapping
+ */
+function ActiveSnapEdgeIndicators({ activeSnapEdges, draggedBounds, config, transformPoint }) {
+    if (activeSnapEdges.length === 0)
+        return null;
+    const color = config.color;
+    const extensionLength = 10; // How far to extend beyond the object bounds
+    return (React.createElement("g", { className: "active-snap-edges" }, activeSnapEdges.map((edge, index) => {
+        // Calculate line along the full edge
+        let x1, y1, x2, y2;
+        if (edge.axis === 'x') {
+            // Vertical edge (left, right, centerX)
+            // Draw a vertical line along the edge, extending beyond bounds
+            const edgeX = edge.position;
+            x1 = edgeX;
+            y1 = draggedBounds.y - extensionLength;
+            x2 = edgeX;
+            y2 = draggedBounds.y + draggedBounds.height + extensionLength;
+        }
+        else {
+            // Horizontal edge (top, bottom, centerY)
+            // Draw a horizontal line along the edge, extending beyond bounds
+            const edgeY = edge.position;
+            x1 = draggedBounds.x - extensionLength;
+            y1 = edgeY;
+            x2 = draggedBounds.x + draggedBounds.width + extensionLength;
+            y2 = edgeY;
+        }
+        // Transform to screen coordinates
+        const [sx1, sy1] = transformPoint(x1, y1);
+        const [sx2, sy2] = transformPoint(x2, y2);
+        // Calculate midpoint for the diamond marker
+        const midX = (sx1 + sx2) / 2;
+        const midY = (sy1 + sy2) / 2;
+        return (React.createElement("g", { key: `snap-edge-${edge.edge}-${index}` },
+            React.createElement("line", { x1: sx1, y1: sy1, x2: sx2, y2: sy2, stroke: "white", strokeWidth: 5, strokeLinecap: "round" }),
+            React.createElement("line", { x1: sx1, y1: sy1, x2: sx2, y2: sy2, stroke: color, strokeWidth: 3, strokeLinecap: "round" }),
+            React.createElement(DiamondMarker, { x: midX, y: midY, size: 10, color: "white" }),
+            React.createElement(DiamondMarker, { x: midX, y: midY, size: 7, color: color })));
+    })));
+}
 /**
  * Main snap guides component - renders Figma-style red guide lines
  */
-export function SnapGuides({ activeSnaps, allCandidates, config, debugConfig, viewBounds, draggedBounds, transformPoint }) {
-    if (activeSnaps.length === 0 && (!debugConfig?.enabled || !allCandidates?.length)) {
+export function SnapGuides({ activeSnaps, allCandidates, config, debugConfig, viewBounds, draggedBounds, activeSnapEdges, transformPoint }) {
+    const hasActiveContent = activeSnaps.length > 0 || (activeSnapEdges && activeSnapEdges.length > 0);
+    if (!hasActiveContent && (!debugConfig?.enabled || !allCandidates?.length)) {
         return null;
     }
     // Identity transform if none provided
@@ -71,7 +115,13 @@ export function SnapGuides({ activeSnaps, allCandidates, config, debugConfig, vi
     }, [activeSnaps]);
     return (React.createElement("g", { className: "snap-guides", pointerEvents: "none" },
         sourceObjectsToHighlight.map(([sourceId, bounds]) => (React.createElement(SourceBoundingBoxHighlight, { key: `source-highlight-${sourceId}`, bounds: bounds, color: config.color, strokeWidth: config.strokeWidth, transformPoint: transform }))),
-        activeSnaps.map((snap, index) => (React.createElement(SnapGuideLine, { key: `active-${index}-${snap.target.axis}-${snap.target.value}`, snap: snap, config: config, draggedBounds: draggedBounds, isActive: true, transformPoint: transform }))),
+        activeSnapEdges && draggedBounds && (React.createElement(ActiveSnapEdgeIndicators, { activeSnapEdges: activeSnapEdges, draggedBounds: draggedBounds, config: config, transformPoint: transform })),
+        activeSnaps
+            .filter(snap => !snap.distribution)
+            .map((snap, index) => (React.createElement(SnapGuideLine, { key: `active-${index}-${snap.target.axis}-${snap.target.value}`, snap: snap, config: config, draggedBounds: draggedBounds, isActive: true, transformPoint: transform }))),
+        activeSnaps
+            .filter(snap => snap.distribution)
+            .map((snap, index) => (React.createElement(DistributionGapsRenderer, { key: `dist-${index}`, snap: snap, config: config, transformPoint: transform }))),
         debugConfig?.enabled && allCandidates && (React.createElement(SnapDebugCandidates, { candidates: allCandidates, config: debugConfig, activeSnaps: activeSnaps, transformPoint: transform }))));
 }
 /**
@@ -81,6 +131,40 @@ function DiamondMarker({ x, y, size = 4, color }) {
     const half = size / 2;
     return (React.createElement("polygon", { points: `${x},${y - half} ${x + half},${y} ${x},${y + half} ${x - half},${y}`, fill: color }));
 }
+/**
+ * Distribution gap indicator with arrows and spacing label
+ */
+function DistributionGapIndicator({ gap, color, strokeWidth, transformPoint }) {
+    const [x1, y1] = transformPoint(gap.start.x, gap.start.y);
+    const [x2, y2] = transformPoint(gap.end.x, gap.end.y);
+    const midX = (x1 + x2) / 2;
+    const midY = (y1 + y2) / 2;
+    const spacing = Math.round(gap.distance);
+    // Arrow size
+    const arrowSize = 5;
+    const isHorizontal = gap.axis === 'x';
+    return (React.createElement("g", null,
+        React.createElement("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: color, strokeWidth: strokeWidth }),
+        isHorizontal ? (React.createElement(React.Fragment, null,
+            React.createElement("polygon", { points: `${x1},${y1} ${x1 + arrowSize},${y1 - arrowSize / 2} ${x1 + arrowSize},${y1 + arrowSize / 2}`, fill: color }),
+            React.createElement("polygon", { points: `${x2},${y2} ${x2 - arrowSize},${y2 - arrowSize / 2} ${x2 - arrowSize},${y2 + arrowSize / 2}`, fill: color }))) : (React.createElement(React.Fragment, null,
+            React.createElement("polygon", { points: `${x1},${y1} ${x1 - arrowSize / 2},${y1 + arrowSize} ${x1 + arrowSize / 2},${y1 + arrowSize}`, fill: color }),
+            React.createElement("polygon", { points: `${x2},${y2} ${x2 - arrowSize / 2},${y2 - arrowSize} ${x2 + arrowSize / 2},${y2 - arrowSize}`, fill: color }))),
+        spacing > 0 && (React.createElement("g", null, isHorizontal ? (React.createElement(React.Fragment, null,
+            React.createElement("rect", { x: midX - 15, y: midY - 18, width: 30, height: 14, fill: "white", fillOpacity: 0.95, rx: 2 }),
+            React.createElement("text", { x: midX, y: midY - 7, fontSize: 10, fill: color, fontFamily: "system-ui, sans-serif", textAnchor: "middle" }, spacing))) : (React.createElement(React.Fragment, null,
+            React.createElement("rect", { x: midX + 5, y: midY - 7, width: 30, height: 14, fill: "white", fillOpacity: 0.95, rx: 2 }),
+            React.createElement("text", { x: midX + 20, y: midY + 4, fontSize: 10, fill: color, fontFamily: "system-ui, sans-serif", textAnchor: "middle" }, spacing)))))));
+}
+/**
+ * Render all distribution gaps for an active snap
+ */
+function DistributionGapsRenderer({ snap, config, transformPoint }) {
+    if (!snap.distribution || snap.distribution.gaps.length === 0) {
+        return null;
+    }
+    return (React.createElement("g", { className: "distribution-gaps" }, snap.distribution.gaps.map((gap, index) => (React.createElement(DistributionGapIndicator, { key: `dist-gap-${index}`, gap: gap, color: config.color, strokeWidth: config.strokeWidth, transformPoint: transformPoint })))));
+}
 /**
  * Individual snap guide line
  */

package/lib/snapping/distribution-detection.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Distribution snap detection for equal-spacing patterns
+ * Detects row, column, and staircase arrangements
+ */
+import type { Point, Bounds } from '../types';
+import type { SnapSpatialObject, RotatedBounds, DistributionSnapInfo, ActiveSnap, SnapConfiguration } from './types';
+/**
+ * Candidate for distribution snapping
+ */
+export interface DistributionCandidate {
+    /** Snapped position for the dragged object */
+    position: Point;
+    /** Distribution pattern info */
+    info: DistributionSnapInfo;
+    /** How far the object moved to snap */
+    distance: number;
+    /** Score for prioritization */
+    score: number;
+}
+/**
+ * Object with computed bounds for distribution detection
+ */
+interface ObjectWithBounds {
+    id: string;
+    bounds: Bounds;
+    centerX: number;
+    centerY: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+/**
+ * Detect row distribution pattern (horizontal equal spacing)
+ */
+export declare function detectRowDistribution(dragged: ObjectWithBounds, objects: ObjectWithBounds[], threshold: number, minObjects?: number): DistributionCandidate | null;
+/**
+ * Detect column distribution pattern (vertical equal spacing)
+ */
+export declare function detectColumnDistribution(dragged: ObjectWithBounds, objects: ObjectWithBounds[], threshold: number, minObjects?: number): DistributionCandidate | null;
+/**
+ * Detect staircase distribution pattern (diagonal equal spacing)
+ */
+export declare function detectStaircaseDistribution(dragged: ObjectWithBounds, objects: ObjectWithBounds[], threshold: number, minObjects?: number): DistributionCandidate | null;
+/**
+ * Main distribution detection function
+ * Detects all distribution patterns and returns the best candidates
+ */
+export declare function detectDistribution(draggedBounds: RotatedBounds, draggedId: string, objects: SnapSpatialObject[], excludeIds: Set<string>, config: SnapConfiguration): DistributionCandidate[];
+/**
+ * Convert distribution candidate to ActiveSnap for rendering
+ */
+export declare function distributionToActiveSnap(candidate: DistributionCandidate, config: SnapConfiguration): ActiveSnap;
+export {};