chore: fix conflicts

packages/core/src/hooks/useDrag/index.ts

@@ -1,12 +1,13 @@
-import { RefObject, useEffect, useRef, MouseEvent, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import type { RefObject, MouseEvent } from 'react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
 import type { D3DragEvent, SubjectPosition } from 'd3';
 
 import { useStoreApi } from '../../hooks/useStore';
-import { NodeDragItem, Node, SelectionDragHandler } from '../../types';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
+import type { NodeDragItem, Node, SelectionDragHandler } from '../../types';
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
 export type UseDragData = { dx: number; dy: number };

packages/core/src/hooks/useDrag/utils.ts

@@ -1,7 +1,7 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 
-import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
 import { clampPosition, devWarn } from '../../utils';
+import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {

packages/core/src/hooks/useEdges.ts

@@ -1,5 +1,5 @@
 import { useStore } from '../hooks/useStore';
-import { Edge, ReactFlowState } from '../types';
+import type { Edge, ReactFlowState } from '../types';
 
 const edgesSelector = (state: ReactFlowState) => state.edges;
 

packages/core/src/hooks/useGlobalKeyHandler.ts

@@ -2,9 +2,8 @@ import { useEffect } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
 import useKeyPress from './useKeyPress';
-import { KeyCode } from '../types';
+import type { KeyCode } from '../types';
 import useReactFlow from './useReactFlow';
-
 interface HookParams {
   deleteKeyCode: KeyCode | null;
   multiSelectionKeyCode: KeyCode | null;
@@ -19,13 +18,10 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
 
   useEffect(() => {
     if (deleteKeyPressed) {
-      const {
-        nodeInternals,
-        edges,
-      } = store.getState();
+      const { nodeInternals, edges } = store.getState();
       const nodes = Array.from(nodeInternals.values());
-      const nodeIds = nodes.filter(node => node.selected).map(node => node.id);
-      const edgeIds = edges.filter(edge => edge.selected).map(edge => edge.id);
+      const nodeIds = nodes.filter((node) => node.selected).map((node) => node.id);
+      const edgeIds = edges.filter((edge) => edge.selected).map((edge) => edge.id);
       deleteElements(nodeIds, edgeIds);
       store.setState({ nodesSelectionActive: false });
     }

packages/core/src/hooks/useKeyPress.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 
-import { KeyCode } from '../types';
+import type { KeyCode } from '../types';
 
 type Keys = Array<string>;
 type PressedKeys = Set<string>;

packages/core/src/hooks/useNodes.ts

@@ -1,5 +1,5 @@
 import { useStore } from '../hooks/useStore';
-import { Node, ReactFlowState } from '../types';
+import type { Node, ReactFlowState } from '../types';
 
 const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values());
 

packages/core/src/hooks/useNodesEdgesState.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useCallback, SetStateAction, Dispatch } from 'react';
+import { useState, useCallback } from 'react';
+import type { SetStateAction, Dispatch } from 'react';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
-import { Node, NodeChange, Edge, EdgeChange } from '../types';
+import type { Node, NodeChange, Edge, EdgeChange } from '../types';
 
 type ApplyChanges<ItemType, ChangesType> = (changes: ChangesType[], items: ItemType[]) => ItemType[];
 type OnChange<ChangesType> = (changes: ChangesType[]) => void;

packages/core/src/hooks/useNodesInitialized.ts

@@ -1,6 +1,6 @@
-import { ReactFlowState } from '../types';
 import { internalsSymbol } from '../utils';
 import { useStore } from './useStore';
+import type { ReactFlowState } from '../types';
 
 const selector = (s: ReactFlowState) => {
   if (s.nodeInternals.size === 0) {

packages/core/src/hooks/useOnInitHandler.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 import useReactFlow from './useReactFlow';
-import { OnInit } from '../types';
+import type { OnInit } from '../types';
 
 function useOnInitHandler(onInit: OnInit | undefined) {
   const rfInstance = useReactFlow();

packages/core/src/hooks/useReactFlow.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from '../hooks/useStore';
-import {
+import type {
   ReactFlowInstance,
   Instance,
   NodeAddChange,

packages/core/src/hooks/useResizeHandler.ts

@@ -1,4 +1,5 @@
-import { useEffect, MutableRefObject } from 'react';
+import { useEffect } from 'react';
+import type { MutableRefObject } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
 import { devWarn, getDimensions } from '../utils';

packages/core/src/hooks/useStore.ts

@@ -1,8 +1,9 @@
 import { useContext, useMemo } from 'react';
-import { StoreApi, useStore as useZustandStore } from 'zustand';
+import { useStore as useZustandStore } from 'zustand';
+import type { StoreApi } from 'zustand';
 
 import StoreContext from '../contexts/RFStoreContext';
-import { ReactFlowState } from '../types';
+import type { ReactFlowState } from '../types';
 
 const errorMessage =
   '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#100';

packages/core/src/hooks/useUpdateNodeInternals.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
-import { UpdateNodeInternals } from '../types';
+import type { UpdateNodeInternals } from '../types';
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
   const store = useStoreApi();

packages/core/src/hooks/useUpdateNodePositions.ts

@@ -2,24 +2,25 @@ import { useCallback } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
 import { calcNextPosition } from './useDrag/utils';
-
-import { XYPosition } from '../types';
+import type { XYPosition } from '../types';
 
 function useUpdateNodePositions() {
   const store = useStoreApi();
 
   const updatePositions = useCallback((positionDiff: XYPosition) => {
-    const { nodeInternals, nodeExtent, updateNodePositions } = store.getState();
+    const { nodeInternals, nodeExtent, updateNodePositions, snapToGrid, snapGrid } = store.getState();
     const selectedNodes = Array.from(nodeInternals.values()).filter((n) => n.selected);
 
     const nodeUpdates = selectedNodes.map((n) => {
       if (n.positionAbsolute) {
-        const updatedPos = calcNextPosition(
-          n,
-          { x: n.positionAbsolute.x + positionDiff.x, y: n.positionAbsolute.y + positionDiff.y },
-          nodeInternals,
-          nodeExtent
-        );
+        const nextPosition = { x: n.positionAbsolute.x + positionDiff.x, y: n.positionAbsolute.y + positionDiff.y };
+
+        if (snapToGrid) {
+          nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]);
+          nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
+        }
+
+        const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent);
 
         n.position = updatedPos.position;
         n.positionAbsolute = updatedPos.positionAbsolute;

packages/core/src/hooks/useViewport.ts

@@ -1,7 +1,7 @@
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../hooks/useStore';
-import { Viewport, ReactFlowState } from '../types';
+import type { Viewport, ReactFlowState } from '../types';
 
 const viewportSelector = (state: ReactFlowState) => ({
   x: state.transform[0],

packages/core/src/hooks/useViewportHelper.ts

@@ -4,8 +4,8 @@ import shallow from 'zustand/shallow';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
-import { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 import { fitView as fitViewStore } from '../store/utils';
+import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};

packages/core/src/hooks/useVisibleEdges.ts

@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 
 import { useStore } from '../hooks/useStore';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
-import { ReactFlowState, NodeInternals, Edge } from '../types';
 import { internalsSymbol, isNumeric } from '../utils';
+import type { ReactFlowState, NodeInternals, Edge } from '../types';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 

packages/core/src/hooks/useVisibleNodes.ts

@@ -2,8 +2,7 @@ import { useCallback } from 'react';
 
 import { useStore } from '../hooks/useStore';
 import { getNodesInside } from '../utils/graph';
-
-import { ReactFlowState } from '../types';
+import type { ReactFlowState } from '../types';
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(