feat(props): add nodeClickDistance

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

@@ -39,6 +39,7 @@ export function NodeWrapper<NodeType extends Node>({
   rfId,
   nodeTypes,
   nodeExtent,
+  nodeClickDistance,
   onError,
 }: NodeWrapperProps<NodeType>) {
   const { node, internals, isParent } = useStore((s) => {
@@ -76,6 +77,7 @@ export function NodeWrapper<NodeType extends Node>({
     handleSelector: node.dragHandle,
     nodeId: id,
     isSelectable,
+    nodeClickDistance,
   });
   const moveSelectedNodes = useMoveSelectedNodes();
 

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

@@ -22,6 +22,7 @@ export type FlowRendererProps<NodeType extends Node = Node> = Omit<
   | 'selectNodesOnDrag'
   | 'defaultMarkerColor'
   | 'rfId'
+  | 'nodeClickDistance'
 > & {
   isControlledViewport: boolean;
   children: ReactNode;

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

@@ -33,6 +33,7 @@ export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge =
       | 'defaultViewport'
       | 'disableKeyboardA11y'
       | 'paneClickDistance'
+      | 'nodeClickDistance'
     >
   > & {
     rfId: string;
@@ -86,6 +87,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
   onPaneScroll,
   onPaneContextMenu,
   paneClickDistance,
+  nodeClickDistance,
   onEdgeContextMenu,
   onEdgeMouseEnter,
   onEdgeMouseMove,
@@ -183,6 +185,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
           onNodeMouseMove={onNodeMouseMove}
           onNodeMouseLeave={onNodeMouseLeave}
           onNodeContextMenu={onNodeContextMenu}
+          nodeClickDistance={nodeClickDistance}
           onlyRenderVisibleElements={onlyRenderVisibleElements}
           noPanClassName={noPanClassName}
           noDragClassName={noDragClassName}

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

@@ -24,6 +24,7 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
   | 'disableKeyboardA11y'
   | 'nodeExtent'
   | 'nodeTypes'
+  | 'nodeClickDistance'
 >;
 
 const selector = (s: ReactFlowState) => ({
@@ -86,6 +87,7 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
             nodesConnectable={nodesConnectable}
             nodesFocusable={nodesFocusable}
             elementsSelectable={elementsSelectable}
+            nodeClickDistance={props.nodeClickDistance}
             onError={onError}
           />
         );

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

@@ -104,6 +104,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     onPaneScroll,
     onPaneContextMenu,
     paneClickDistance = 0,
+    nodeClickDistance = 0,
     children,
     onReconnect,
     onReconnectStart,
@@ -202,6 +203,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           onPaneScroll={onPaneScroll}
           onPaneContextMenu={onPaneContextMenu}
           paneClickDistance={paneClickDistance}
+          nodeClickDistance={nodeClickDistance}
           onSelectionContextMenu={onSelectionContextMenu}
           onSelectionStart={onSelectionStart}
           onSelectionEnd={onSelectionEnd}

packages/react/src/hooks/useDrag.ts

@@ -11,6 +11,7 @@ type UseDragParams = {
   handleSelector?: string;
   nodeId?: string;
   isSelectable?: boolean;
+  nodeClickDistance?: number;
 };
 
 /**
@@ -25,6 +26,7 @@ export function useDrag({
   handleSelector,
   nodeId,
   isSelectable,
+  nodeClickDistance,
 }: UseDragParams) {
   const store = useStoreApi();
   const [dragging, setDragging] = useState<boolean>(false);
@@ -59,6 +61,7 @@ export function useDrag({
         domNode: nodeRef.current,
         isSelectable,
         nodeId,
+        nodeClickDistance,
       });
       return () => {
         xyDrag.current?.destroy();

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

@@ -227,6 +227,10 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * @default 0
    */
   paneClickDistance?: number;
+  /** Distance that the mouse can move between mousedown/up that will trigger a click
+   * @default 0
+   */
+  nodeClickDistance?: 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/nodes.ts

@@ -53,6 +53,7 @@ export type NodeWrapperProps<NodeType extends Node> = {
   nodeTypes?: NodeTypes;
   nodeExtent?: CoordinateExtent;
   onError?: OnError;
+  nodeClickDistance?: number;
 };
 
 export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;