feat(react,svelte): add nodeDragThreshold

packages/react/src/components/StoreUpdater/index.tsx

@@ -56,6 +56,7 @@ type StoreUpdaterProps = Pick<
   | 'connectionRadius'
   | 'isValidConnection'
   | 'selectNodesOnDrag'
+  | 'nodeDragThreshold'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -140,6 +141,7 @@ const StoreUpdater = ({
   connectionRadius,
   isValidConnection,
   selectNodesOnDrag,
+  nodeDragThreshold,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -203,6 +205,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
   useDirectStoreUpdater('isValidConnection', isValidConnection, store.setState);
   useDirectStoreUpdater('selectNodesOnDrag', selectNodesOnDrag, store.setState);
+  useDirectStoreUpdater('nodeDragThreshold', nodeDragThreshold, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);

packages/react/src/container/ReactFlow/index.tsx

@@ -163,6 +163,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onError,
       style,
       id,
+      nodeDragThreshold,
       ...rest
     },
     ref
@@ -292,6 +293,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             connectionRadius={connectionRadius}
             isValidConnection={isValidConnection}
             selectNodesOnDrag={selectNodesOnDrag}
+            nodeDragThreshold={nodeDragThreshold}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}

packages/react/src/store/initialState.ts

@@ -28,6 +28,7 @@ const initialState: ReactFlowStore = {
   paneDragging: false,
   noPanClassName: 'nopan',
   nodeOrigin: [0, 0],
+  nodeDragThreshold: 0,
 
   snapGrid: [15, 15],
   snapToGrid: false,

packages/react/src/types/component-props.ts

@@ -148,6 +148,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   connectionRadius?: number;
   onError?: OnError;
   isValidConnection?: IsValidConnection;
+  nodeDragThreshold?: number;
 };
 
 export type ReactFlowRefType = HTMLDivElement;

packages/react/src/types/store.ts

@@ -61,6 +61,7 @@ export type ReactFlowStore = {
   translateExtent: CoordinateExtent;
   nodeExtent: CoordinateExtent;
   nodeOrigin: NodeOrigin;
+  nodeDragThreshold: number;
 
   nodesSelectionActive: boolean;
   userSelectionActive: boolean;