react-svg-canvas 0.1.2 → 0.1.3

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 {};