refactor(screenToFlowPosition): add option to configure snapToGrid #3771

packages/react/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## 12.0.0-next.6
 
+## Minor changes
+
+- pass Node/Edge types to changes thanks @FelipeEmos
+- use position instead of positionAbsolute for `getNodesBounds`
+- add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used
+
+## 12.0.0-next.6
+
 ### Minor changes
 
 - fix `deleteElements`

packages/react/src/hooks/useViewportHelper.ts

@@ -86,8 +86,8 @@ const useViewportHelper = (): ViewportHelperFunctions => {
 
         panZoom?.setViewport(viewport, { duration: options?.duration });
       },
-      screenToFlowPosition: (position: XYPosition) => {
+      screenToFlowPosition: (position: XYPosition, options: { snapToGrid: boolean } = { snapToGrid: true }) => {
-        const { transform, snapToGrid, snapGrid, domNode } = store.getState();
+        const { transform, snapGrid, domNode } = store.getState();
 
         if (!domNode) {
           return position;
@@ -100,7 +100,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           y: position.y - domY,
         };
 
-        return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+        return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
       },
       flowToScreenPosition: (position: XYPosition) => {
         const { transform, domNode } = store.getState();

packages/react/src/types/general.ts

@@ -55,7 +55,7 @@ export type ViewportHelperFunctions = {
   fitView: FitView;
   setCenter: SetCenter;
   fitBounds: FitBounds;
-  screenToFlowPosition: (position: XYPosition) => XYPosition;
+  screenToFlowPosition: (position: XYPosition, options?: { snapToGrid: boolean }) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewportInitialized: boolean;
 };

packages/svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @xyflow/svelte
 
+## 0.0.34
+
+## Minor changes
+
+- add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used
+
 ## 0.0.33
 
 ### Bugfix

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -53,7 +53,7 @@ export function useSvelteFlow(): {
     nodes?: (Node | { id: Node['id'] })[];
     edges?: (Edge | { id: Edge['id'] })[];
   }) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
-  screenToFlowPosition: (position: XYPosition) => XYPosition;
+  screenToFlowPosition: (position: XYPosition, options?: { snapToGrid: boolean }) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewport: Writable<Viewport>;
   updateNode: (
@@ -228,14 +228,17 @@ export function useSvelteFlow(): {
         deletedEdges: matchingEdges
       };
     },
-    screenToFlowPosition: (position: XYPosition) => {
+    screenToFlowPosition: (
+      position: XYPosition,
+      options: { snapToGrid: boolean } = { snapToGrid: true }
+    ) => {
       const _domNode = get(domNode);
 
       if (!_domNode) {
         return position;
       }
 
-      const _snapGrid = get(snapGrid);
+      const _snapGrid = options.snapToGrid ? get(snapGrid) : false;
       const { x, y, zoom } = get(viewport);
       const { x: domX, y: domY } = _domNode.getBoundingClientRect();
       const correctedPosition = {