Merge pull request #4451 from xyflow/feat/node-click-distance

Feat/node click distance

.changeset/twenty-ghosts-turn.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+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'>;

packages/svelte/src/lib/actions/drag/index.ts

@@ -10,6 +10,7 @@ export type UseDragParams = {
   handleSelector?: string;
   nodeId?: string;
   isSelectable?: boolean;
+  nodeClickDistance?: number;
   onDrag?: OnDrag;
   onDragStart?: OnDrag;
   onDragStop?: OnDrag;
@@ -60,7 +61,8 @@ export default function drag(domNode: Element, params: UseDragParams) {
       noDragClassName: params.noDragClass,
       handleSelector: params.handleSelector,
       nodeId: params.nodeId,
-      isSelectable: params.isSelectable
+      isSelectable: params.isSelectable,
+      nodeClickDistance: params.nodeClickDistance
     });
   }
 

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -43,6 +43,7 @@
   export let dragHandle: $$Props['dragHandle'] = undefined;
   export let initialized: $$Props['initialized'] = false;
   export let parentId: $$Props['parentId'] = undefined;
+  export let nodeClickDistance: $$Props['nodeClickDistance'] = undefined;
 
   let className: string = '';
   export { className as class };
@@ -156,6 +157,7 @@
       disabled: false,
       handleSelector: dragHandle,
       noDragClass: 'nodrag',
+      nodeClickDistance,
       onNodeMouseDown: handleNodeSelection,
       onDrag: (event, _, targetNode, nodes) => {
         dispatchNodeEvent('nodedrag', { event, targetNode, nodes });

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -34,4 +34,5 @@ export type NodeWrapperProps = Pick<
   zIndex: number;
   node: InternalNode;
   initialized: boolean;
+  nodeClickDistance?: number;
 };

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -4,6 +4,11 @@
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
+  import type { NodeRendererProps } from './types';
+
+  type $$Props = NodeRendererProps;
+
+  export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
 
   const {
     visibleNodes,
@@ -76,6 +81,7 @@
       measuredHeight={node.measured.height}
       parentId={node.parentId}
       {resizeObserver}
+      {nodeClickDistance}
       on:nodeclick
       on:nodemouseenter
       on:nodemousemove

packages/svelte/src/lib/container/NodeRenderer/types.ts

@@ -0,0 +1,3 @@
+export type NodeRendererProps = {
+  nodeClickDistance?: number;
+};

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -80,6 +80,7 @@
   export let oninit: $$Props['oninit'] = undefined;
   export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
   export let paneClickDistance: $$Props['paneClickDistance'] = 0;
+  export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -254,6 +255,7 @@
         <div class="svelte-flow__edgelabel-renderer" />
         <div class="svelte-flow__viewport-portal" />
         <NodeRenderer
+          {nodeClickDistance}
           on:nodeclick
           on:nodemouseenter
           on:nodemousemove

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -138,6 +138,10 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
    * @default 0
    */
   paneClickDistance?: number;
+  /** Distance that the mouse can move between mousedown/up that will trigger a click
+   * @default 0
+   */
+  nodeClickDistance?: number;
   /** Minimum zoom level
    * @default 0.5
    */

packages/system/src/xydrag/XYDrag.ts

@@ -84,6 +84,7 @@ export type DragUpdateParams = {
   isSelectable?: boolean;
   nodeId?: string;
   domNode: Element;
+  nodeClickDistance?: number;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -105,7 +106,14 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
   let abortDrag = false; // prevents unintentional dragging on multitouch
 
   // public functions
-  function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
+  function update({
+    noDragClassName,
+    handleSelector,
+    domNode,
+    isSelectable,
+    nodeId,
+    nodeClickDistance = 0,
+  }: DragUpdateParams) {
     d3Selection = select(domNode);
     function updateNodes({ x, y }: XYPosition, dragEvent: MouseEvent | null) {
       const {
@@ -264,6 +272,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
     }
 
     const d3DragInstance = drag()
+      .clickDistance(nodeClickDistance)
       .on('start', (event: UseDragEvent) => {
         const { domNode, nodeDragThreshold, transform, snapGrid, snapToGrid } = getStoreItems();