react-svg-canvas 0.1.4 → 0.1.5

package/lib/snapping/snap-engine.d.ts

@@ -42,8 +42,8 @@ export declare function computeScore(target: SnapTarget, distance: number, dragS
 /**
  * Main snap computation for drag operations
  */
-export declare function computeSnap(context: DragSnapContext, objects: SnapSpatialObject[], viewBounds: Bounds, config: SnapConfiguration, getParent?: (id: string) => string | undefined): SnapResult;
+export declare function computeSnap(context: DragSnapContext, objects: SnapSpatialObject[], viewBounds: Bounds, config: SnapConfiguration, getParent?: (id: string) => string | undefined, customTargets?: SnapTarget[]): SnapResult;
 /**
  * Compute snapping for resize operations
  */
-export declare function computeResizeSnap(context: ResizeSnapContext, objects: SnapSpatialObject[], viewBounds: Bounds, config: SnapConfiguration, getParent?: (id: string) => string | undefined): ResizeSnapResult;
+export declare function computeResizeSnap(context: ResizeSnapContext, objects: SnapSpatialObject[], viewBounds: Bounds, config: SnapConfiguration, getParent?: (id: string) => string | undefined, customTargets?: SnapTarget[]): ResizeSnapResult;

package/lib/snapping/snap-engine.js

@@ -304,7 +304,7 @@ function getDragSnapValuesForAxis(snapPoints, axis, grabPoint) {
 /**
  * Main snap computation for drag operations
  */
-export function computeSnap(context, objects, viewBounds, config, getParent) {
+export function computeSnap(context, objects, viewBounds, config, getParent, customTargets) {
     if (!config.enabled) {
         return {
             snappedPosition: { x: context.draggedBounds.x, y: context.draggedBounds.y },
@@ -320,7 +320,9 @@ export function computeSnap(context, objects, viewBounds, config, getParent) {
     }
     // Generate all snap targets with geometric relevance filtering
     const excludeIds = new Set([context.draggedId]);
-    const targets = generateAllSnapTargets(objects, excludeIds, viewBounds, config, context.draggedBounds);
+    const generatedTargets = generateAllSnapTargets(objects, excludeIds, viewBounds, config, context.draggedBounds);
+    // Merge with custom targets (e.g., from table grids)
+    const targets = customTargets ? [...generatedTargets, ...customTargets] : generatedTargets;
     // Get snap points from dragged bounds
     const draggedSnapPoints = getSnapPoints(context.draggedBounds);
     // Score all candidates
@@ -499,7 +501,7 @@ export function computeSnap(context, objects, viewBounds, config, getParent) {
 /**
  * Compute snapping for resize operations
  */
-export function computeResizeSnap(context, objects, viewBounds, config, getParent) {
+export function computeResizeSnap(context, objects, viewBounds, config, getParent, customTargets) {
     if (!config.enabled) {
         return {
             snappedBounds: context.currentBounds,
@@ -514,7 +516,9 @@ export function computeResizeSnap(context, objects, viewBounds, config, getParen
         objectBoundsMap.set(obj.id, getAABB(obj));
     }
     const excludeIds = new Set([context.objectId]);
-    const targets = generateAllSnapTargets(objects, excludeIds, viewBounds, config);
+    const generatedTargets = generateAllSnapTargets(objects, excludeIds, viewBounds, config);
+    // Merge with custom targets (e.g., from table grids)
+    const targets = customTargets ? [...generatedTargets, ...customTargets] : generatedTargets;
     // For resize, we snap the edges being resized
     const currentSnapPoints = getSnapPoints(context.currentBounds);
     // Determine which edges are being resized based on handle

package/lib/snapping/useSnapping.d.ts

@@ -2,12 +2,14 @@
  * React hook for snapping functionality
  */
 import type { Point, Bounds, ResizeHandle } from '../types';
-import type { SnapConfiguration, SnapSpatialObject, RotatedBounds, ActiveSnap, ActiveSnapEdge, ScoredCandidate } from './types';
+import type { SnapConfiguration, SnapSpatialObject, SnapTarget, RotatedBounds, ActiveSnap, ActiveSnapEdge, ScoredCandidate } from './types';
 export interface UseSnappingOptions {
     objects: SnapSpatialObject[];
     config: SnapConfiguration;
     viewBounds: Bounds;
     getParent?: (id: string) => string | undefined;
+    /** Additional snap targets (e.g., from table grids, guides) */
+    customTargets?: SnapTarget[];
 }
 export interface SnapDragParams {
     bounds: RotatedBounds;

package/lib/snapping/useSnapping.js

@@ -38,7 +38,7 @@ function normalizeDirection(delta) {
  * Hook for snapping during drag and resize operations
  */
 export function useSnapping(options) {
-    const { objects, config, viewBounds, getParent } = options;
+    const { objects, config, viewBounds, getParent, customTargets } = options;
     // State for active snaps, candidates, and active snap edges
     const [activeSnaps, setActiveSnaps] = React.useState([]);
     const [allCandidates, setAllCandidates] = React.useState([]);
@@ -66,7 +66,7 @@ export function useSnapping(options) {
             delta
         };
         const finalExcludeIds = excludeIds || new Set([objectId]);
-        const result = computeSnap(context, objectsRef.current, viewBounds, config, getParent);
+        const result = computeSnap(context, objectsRef.current, viewBounds, config, getParent, customTargets);
         setActiveSnaps(result.activeSnaps);
         setAllCandidates(result.candidates);
         setActiveSnapEdges(result.activeSnapEdges);
@@ -76,7 +76,7 @@ export function useSnapping(options) {
             candidates: result.candidates,
             activeSnapEdges: result.activeSnapEdges
         };
-    }, [config, viewBounds, getParent]);
+    }, [config, viewBounds, getParent, customTargets]);
     const snapResize = React.useCallback((params) => {
         const { originalBounds, currentBounds, objectId, handle, delta, excludeIds } = params;
         const context = {
@@ -86,7 +86,7 @@ export function useSnapping(options) {
             handle,
             delta
         };
-        const result = computeResizeSnap(context, objectsRef.current, viewBounds, config, getParent);
+        const result = computeResizeSnap(context, objectsRef.current, viewBounds, config, getParent, customTargets);
         setActiveSnaps(result.activeSnaps);
         setAllCandidates(result.candidates);
         return {
@@ -94,7 +94,7 @@ export function useSnapping(options) {
             activeSnaps: result.activeSnaps,
             candidates: result.candidates
         };
-    }, [config, viewBounds, getParent]);
+    }, [config, viewBounds, getParent, customTargets]);
     const clearSnaps = React.useCallback(() => {
         setActiveSnaps([]);
         setAllCandidates([]);

package/package.json

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