feat(panzoom): add paneClickDistance prop

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

@@ -67,6 +67,7 @@ const reactFlowFieldsToTrack = [
   'onBeforeDelete',
   'debug',
   'autoPanSpeed',
+  'paneClickDistance',
 ] as const;
 
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
@@ -89,6 +90,7 @@ const selector = (s: ReactFlowState) => ({
   setNodeExtent: s.setNodeExtent,
   reset: s.reset,
   setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
+  setPaneClickDistance: s.setPaneClickDistance,
 });
 
 const initPrevValues = {
@@ -102,6 +104,7 @@ const initPrevValues = {
   elementsSelectable: true,
   noPanClassName: 'nopan',
   rfId: '1',
+  paneClickDistance: 0,
 };
 
 export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
@@ -116,6 +119,7 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
     setNodeExtent,
     reset,
     setDefaultNodesAndEdges,
+    setPaneClickDistance,
   } = useStore(selector, shallow);
   const store = useStoreApi<NodeType, EdgeType>();
 
@@ -146,6 +150,7 @@ 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);
         // Renamed fields
         else if (fieldName === 'fitView') store.setState({ fitViewOnInit: fieldValue as boolean });
         else if (fieldName === 'fitViewOptions') store.setState({ fitViewOnInitOptions: fieldValue as FitViewOptions });

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

@@ -41,6 +41,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   onPaneMouseLeave,
   onPaneContextMenu,
   onPaneScroll,
+  paneClickDistance,
   deleteKeyCode,
   selectionKeyCode,
   selectionOnDrag,
@@ -101,6 +102,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
       noPanClassName={noPanClassName}
       onViewportChange={onViewportChange}
       isControlledViewport={isControlledViewport}
+      paneClickDistance={paneClickDistance}
     >
       <Pane
         onSelectionStart={onSelectionStart}

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

@@ -32,6 +32,7 @@ export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge =
       | 'noPanClassName'
       | 'defaultViewport'
       | 'disableKeyboardA11y'
+      | 'paneClickDistance'
     >
   > & {
     rfId: string;
@@ -84,6 +85,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
   onPaneMouseLeave,
   onPaneScroll,
   onPaneContextMenu,
+  paneClickDistance,
   onEdgeContextMenu,
   onEdgeMouseEnter,
   onEdgeMouseMove,
@@ -116,6 +118,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
       onPaneMouseLeave={onPaneMouseLeave}
       onPaneContextMenu={onPaneContextMenu}
       onPaneScroll={onPaneScroll}
+      paneClickDistance={paneClickDistance}
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
       selectionOnDrag={selectionOnDrag}

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

@@ -103,6 +103,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     onPaneMouseLeave,
     onPaneScroll,
     onPaneContextMenu,
+    paneClickDistance = 0,
     children,
     onReconnect,
     onReconnectStart,
@@ -200,6 +201,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           onPaneMouseLeave={onPaneMouseLeave}
           onPaneScroll={onPaneScroll}
           onPaneContextMenu={onPaneContextMenu}
+          paneClickDistance={paneClickDistance}
           onSelectionContextMenu={onSelectionContextMenu}
           onSelectionStart={onSelectionStart}
           onSelectionEnd={onSelectionEnd}
@@ -277,6 +279,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           selectNodesOnDrag={selectNodesOnDrag}
           nodeDragThreshold={nodeDragThreshold}
           onBeforeDelete={onBeforeDelete}
+          paneClickDistance={paneClickDistance}
           debug={debug}
         />
         <SelectionListener onSelectionChange={onSelectionChange} />

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

@@ -47,6 +47,7 @@ export function ZoomPane({
   noPanClassName,
   onViewportChange,
   isControlledViewport,
+  paneClickDistance,
 }: ZoomPaneProps) {
   const store = useStoreApi();
   const zoomPane = useRef<HTMLDivElement>(null);
@@ -64,6 +65,7 @@ export function ZoomPane({
         maxZoom,
         translateExtent,
         viewport: defaultViewport,
+        paneClickDistance,
         onTransformChange: (transform: Transform) => {
           onViewportChange?.({ x: transform[0], y: transform[1], zoom: transform[2] });
 

packages/react/src/store/index.ts

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

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

@@ -223,6 +223,10 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   onPaneMouseMove?: (event: ReactMouseEvent) => void;
   /** This event handler gets called when mouse leaves the pane */
   onPaneMouseLeave?: (event: ReactMouseEvent) => void;
+  /** Distance that the mouse can move between mousedown/up that will trigger a click
+   * @default 0
+   */
+  paneClickDistance?: number;
   /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
   onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
   /** Custom node types to be available in a flow.

packages/react/src/types/store.ts

@@ -170,6 +170,7 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   panBy: PanBy;
   fitView: (options?: FitViewOptions) => Promise<boolean>;
   fitViewSync: (options?: FitViewOptions) => boolean;
+  setPaneClickDistance: (distance: number) => void;
 };
 
 export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<