remove setPaneClickDistance from store and update it declaritively

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

@@ -69,7 +69,6 @@ const reactFlowFieldsToTrack = [
   'onBeforeDelete',
   'debug',
   'autoPanSpeed',
-  'paneClickDistance',
   'ariaLabelConfig',
 ] as const;
 
@@ -93,7 +92,6 @@ const selector = (s: ReactFlowState) => ({
   setNodeExtent: s.setNodeExtent,
   reset: s.reset,
   setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
-  setPaneClickDistance: s.setPaneClickDistance,
 });
 
 const initPrevValues = {
@@ -124,7 +122,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
     setNodeExtent,
     reset,
     setDefaultNodesAndEdges,
-    setPaneClickDistance,
   } = useStore(selector, shallow);
   const store = useStoreApi<NodeType, EdgeType>();
 
@@ -155,7 +152,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
         else if (fieldName === 'maxZoom') setMaxZoom(fieldValue as number);
         else if (fieldName === 'translateExtent') setTranslateExtent(fieldValue as CoordinateExtent);
         else if (fieldName === 'nodeExtent') setNodeExtent(fieldValue as CoordinateExtent);
-        else if (fieldName === 'paneClickDistance') setPaneClickDistance(fieldValue as number);
         else if (fieldName === 'ariaLabelConfig')
           store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue as AriaLabelConfig) });
         // Renamed fields

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

@@ -105,6 +105,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
       onViewportChange={onViewportChange}
       isControlledViewport={isControlledViewport}
       paneClickDistance={paneClickDistance}
+      selectionOnDrag={_selectionOnDrag}
     >
       <Pane
         onSelectionStart={onSelectionStart}
@@ -119,6 +120,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
         selectionKeyPressed={selectionKeyPressed}
+        paneClickDistance={paneClickDistance}
         selectionOnDrag={_selectionOnDrag}
       >
         {children}

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

@@ -39,6 +39,7 @@ type PaneProps = {
     | 'onPaneMouseMove'
     | 'onPaneMouseLeave'
     | 'selectionOnDrag'
+    | 'paneClickDistance'
   >
 >;
 

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

@@ -309,7 +309,6 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           nodeDragThreshold={nodeDragThreshold}
           connectionDragThreshold={connectionDragThreshold}
           onBeforeDelete={onBeforeDelete}
-          paneClickDistance={paneClickDistance}
           debug={debug}
           ariaLabelConfig={ariaLabelConfig}
         />

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

@@ -12,12 +12,7 @@ import type { ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,
-  | 'deleteKeyCode'
-  | 'selectionKeyCode'
-  | 'multiSelectionKeyCode'
-  | 'noDragClassName'
-  | 'disableKeyboardA11y'
-  | 'selectionOnDrag'
+  'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y'
 > & {
   isControlledViewport: boolean;
 };
@@ -49,6 +44,7 @@ export function ZoomPane({
   onViewportChange,
   isControlledViewport,
   paneClickDistance,
+  selectionOnDrag,
 }: ZoomPaneProps) {
   const store = useStoreApi();
   const zoomPane = useRef<HTMLDivElement>(null);
@@ -77,7 +73,6 @@ export function ZoomPane({
         maxZoom,
         translateExtent,
         viewport: defaultViewport,
-        paneClickDistance,
         onDraggingChange: (paneDragging: boolean) => store.setState({ paneDragging }),
         onPanZoomStart: (event, vp) => {
           const { onViewportChangeStart, onMoveStart } = store.getState();
@@ -128,6 +123,8 @@ export function ZoomPane({
       lib,
       onTransformChange,
       connectionInProgress,
+      selectionOnDrag,
+      paneClickDistance,
     });
   }, [
     onPaneContextMenu,
@@ -146,6 +143,8 @@ export function ZoomPane({
     lib,
     onTransformChange,
     connectionInProgress,
+    selectionOnDrag,
+    paneClickDistance,
   ]);
 
   return (

packages/react/src/store/index.ts

@@ -312,9 +312,6 @@ const createStore = ({
 
         set({ translateExtent });
       },
-      setPaneClickDistance: (clickDistance) => {
-        get().panZoom?.setClickDistance(clickDistance);
-      },
       resetSelectedElements: () => {
         const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
 

packages/react/src/types/store.ts

@@ -175,7 +175,6 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
   panBy: PanBy;
   setCenter: SetCenter;
-  setPaneClickDistance: (distance: number) => void;
 };
 
 export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<