Merge pull request #5344 from xyflow/feat/connection-drag-threshold

Add connectionDragThreshold

.changeset/twelve-llamas-sort.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': minor
+---
+
+Add connectionDragThreshold prop

examples/react/src/examples/CustomConnectionLine/index.tsx

@@ -36,6 +36,7 @@ const ConnectionLineFlow = () => {
       onEdgesChange={onEdgesChange}
       connectionLineComponent={ConnectionLine}
       onConnect={onConnect}
+      connectionDragThreshold={25}
     >
       <Background variant={BackgroundVariant.Lines} />
     </ReactFlow>

examples/svelte/src/routes/examples/custom-connection-line/+page.svelte

@@ -24,7 +24,14 @@
 </script>
 
 <div style="height:100vh;">
-	<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView connectionLineComponent={ConnectionLine}>
+	<SvelteFlow
+		bind:nodes
+		bind:edges
+		{nodeTypes}
+		fitView
+		connectionLineComponent={ConnectionLine}
+		connectionDragThreshold={100}
+	>
 		<Background variant={BackgroundVariant.Lines} />
 	</SvelteFlow>
 </div>

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -1,5 +1,12 @@
 // Reconnectable edges have a anchors around their handles to reconnect the edge.
-import { XYHandle, type Connection, EdgePosition, FinalConnectionState, HandleType } from '@xyflow/system';
+import {
+  XYHandle,
+  type Connection,
+  EdgePosition,
+  FinalConnectionState,
+  HandleType,
+  OnConnectStart,
+} from '@xyflow/system';
 
 import { EdgeAnchor } from '../Edges/EdgeAnchor';
 import type { EdgeWrapperProps, Edge } from '../../types/edges';
@@ -60,15 +67,17 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
     } = store.getState();
     const isTarget = oppositeHandle.type === 'target';
 
-    setReconnecting(true);
-    onReconnectStart?.(event, edge, oppositeHandle.type);
-
     const _onReconnectEnd = (evt: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => {
       setReconnecting(false);
       onReconnectEnd?.(evt, edge, oppositeHandle.type, connectionState);
     };
 
     const onConnectEdge = (connection: Connection) => onReconnect?.(edge, connection);
+    const _onConnectStart: OnConnectStart = (_event, params) => {
+      setReconnecting(true);
+      onReconnectStart?.(event, edge, oppositeHandle.type);
+      onConnectStart?.(_event, params);
+    };
 
     XYHandle.onPointerDown(event.nativeEvent, {
       autoPanOnConnect,
@@ -86,12 +95,13 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       panBy,
       isValidConnection,
       onConnect: onConnectEdge,
-      onConnectStart,
+      onConnectStart: _onConnectStart,
       onConnectEnd,
       onReconnectEnd: _onReconnectEnd,
       updateConnection,
       getTransform: () => store.getState().transform,
       getFromHandle: () => store.getState().connection.fromHandle,
+      dragThreshold: store.getState().connectionDragThreshold,
     });
   };
 

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

@@ -149,6 +149,7 @@ function HandleComponent(
         getTransform: () => store.getState().transform,
         getFromHandle: () => store.getState().connection.fromHandle,
         autoPanSpeed: currentStore.autoPanSpeed,
+        dragThreshold: currentStore.connectionDragThreshold,
       });
     }
 

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

@@ -65,6 +65,7 @@ const reactFlowFieldsToTrack = [
   'isValidConnection',
   'selectNodesOnDrag',
   'nodeDragThreshold',
+  'connectionDragThreshold',
   'onBeforeDelete',
   'debug',
   'autoPanSpeed',

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

@@ -139,6 +139,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     style,
     id,
     nodeDragThreshold,
+    connectionDragThreshold,
     viewport,
     onViewportChange,
     width,
@@ -306,6 +307,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           isValidConnection={isValidConnection}
           selectNodesOnDrag={selectNodesOnDrag}
           nodeDragThreshold={nodeDragThreshold}
+          connectionDragThreshold={connectionDragThreshold}
           onBeforeDelete={onBeforeDelete}
           paneClickDistance={paneClickDistance}
           debug={debug}

packages/react/src/store/initialState.ts

@@ -107,6 +107,7 @@ const getInitialState = ({
     noPanClassName: 'nopan',
     nodeOrigin: storeNodeOrigin,
     nodeDragThreshold: 1,
+    connectionDragThreshold: 1,
 
     snapGrid: [15, 15],
     snapToGrid: false,

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

@@ -658,6 +658,12 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * @default 1
    */
   nodeDragThreshold?: number;
+  /**
+   * The threshold in pixels that the mouse must move before a connection line starts to drag.
+   * This is useful to prevent accidental connections when clicking on a handle.
+   * @default 1
+   */
+  connectionDragThreshold?: number;
   /** Sets a fixed width for the flow. */
   width?: number;
   /** Sets a fixed height for the flow. */

packages/react/src/types/store.ts

@@ -76,6 +76,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   nodeExtent: CoordinateExtent;
   nodeOrigin: NodeOrigin;
   nodeDragThreshold: number;
+  connectionDragThreshold: number;
 
   nodesSelectionActive: boolean;
   userSelectionActive: boolean;

packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useStore } from '$lib/store';
   import type { Edge } from '$lib/types';
-  import { XYHandle, type HandleType } from '@xyflow/system';
+  import { XYHandle, type HandleType, type OnConnectStart } from '@xyflow/system';
   import { getContext } from 'svelte';
   import { EdgeLabel } from '../EdgeLabel';
   import type { EdgeReconnectAnchorProps } from './types';
@@ -12,6 +12,7 @@
     position,
     class: className,
     size = 25,
+    dragThreshold = 1,
     children,
     ...rest
   }: EdgeReconnectAnchorProps = $props();
@@ -52,8 +53,11 @@
     let newEdge: Edge | undefined;
     let edge = edgeLookup.get(edgeId)!;
 
-    reconnecting = true;
-    onreconnectstart?.(event, edge, type);
+    const _onConnectStart: OnConnectStart = (evt, params) => {
+      reconnecting = true;
+      onreconnectstart?.(event, edge, type);
+      onconnectstart?.(evt, params);
+    };
 
     const opposite =
       type === 'target'
@@ -79,7 +83,7 @@
       cancelConnection,
       panBy,
       isValidConnection,
-      onConnectStart: onconnectstart,
+      onConnectStart: _onConnectStart,
       onConnectEnd: onconnectend,
       onConnect: (connection) => {
         newEdge = { ...edge, ...connection };
@@ -97,7 +101,8 @@
       },
       updateConnection,
       getTransform: () => [store.viewport.x, store.viewport.y, store.viewport.zoom],
-      getFromHandle: () => store.connection.fromHandle
+      getFromHandle: () => store.connection.fromHandle,
+      dragThreshold: dragThreshold ?? store.connectionDragThreshold
     });
   };
 </script>

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

@@ -10,4 +10,5 @@ export type EdgeReconnectAnchorProps = {
   position?: XYPosition;
   size?: number;
   children?: Snippet;
+  dragThreshold?: number;
 } & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -139,7 +139,8 @@
           store.onconnectend?.(event, connectionState);
         },
         getTransform: () => [store.viewport.x, store.viewport.y, store.viewport.zoom],
-        getFromHandle: () => store.connection.fromHandle
+        getFromHandle: () => store.connection.fromHandle,
+        dragThreshold: store.connectionDragThreshold
       });
     }
   }

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

@@ -64,6 +64,7 @@
     fitViewOptions,
     nodeOrigin,
     nodeDragThreshold,
+    connectionDragThreshold,
     minZoom,
     maxZoom,
     initialViewport,

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

@@ -170,6 +170,12 @@ export type SvelteFlowProps<
      * @default 0
      */
     nodeClickDistance?: number;
+    /**
+     * The threshold in pixels that the mouse must move before a connection line starts to drag.
+     * This is useful to prevent accidental connections when clicking on a handle.
+     * @default 1
+     */
+    connectionDragThreshold?: number;
     /** Minimum zoom level
      * @default 0.5
      */

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -286,6 +286,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     autoPanOnNodeDrag: boolean = $derived(signals.props.autoPanOnNodeDrag ?? true);
     autoPanOnConnect: boolean = $derived(signals.props.autoPanOnConnect ?? true);
     autoPanOnNodeFocus: boolean = $derived(signals.props.autoPanOnNodeFocus ?? true);
+    connectionDragThreshold: number = $derived(signals.props.connectionDragThreshold ?? 1);
 
     fitViewQueued: boolean = signals.props.fitView ?? false;
     fitViewOptions: FitViewOptions | undefined = signals.props.fitViewOptions;

packages/system/src/xyhandle/XYHandle.ts

@@ -45,6 +45,7 @@ function onPointerDown(
     getTransform,
     getFromHandle,
     autoPanSpeed,
+    dragThreshold = 1,
   }: OnPointerDownParams
 ) {
   // when xyflow is used inside a shadow root we can't use document
@@ -56,6 +57,7 @@ function onPointerDown(
   const clickedHandle = doc?.elementFromPoint(x, y);
   const handleType = getHandleType(edgeUpdaterType, clickedHandle);
   const containerBounds = domNode?.getBoundingClientRect();
+  let connectionStarted = false;
 
   if (!containerBounds || !handleType) {
     return;
@@ -92,10 +94,9 @@ function onPointerDown(
   };
 
   const fromNodeInternal = nodeLookup.get(nodeId)!;
-
   const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true);
 
-  const newConnection: ConnectionInProgress = {
+  let previousConnection: ConnectionInProgress = {
     inProgress: true,
     isValid: null,
 
@@ -110,12 +111,31 @@ function onPointerDown(
     toNode: null,
   };
 
-  updateConnection(newConnection);
-  let previousConnection: ConnectionInProgress = newConnection;
+  function startConnection() {
+    updateConnection(previousConnection);
+    onConnectStart?.(event, { nodeId, handleId, handleType });
+  }
 
-  onConnectStart?.(event, { nodeId, handleId, handleType });
+  if (dragThreshold === 0) {
+    startConnection();
+  }
 
   function onPointerMove(event: MouseEvent | TouchEvent) {
+    if (!connectionStarted) {
+      const { x: evtX, y: evtY } = getEventPosition(event);
+      const dx = evtX - x;
+      const dy = evtY - y;
+      const nextConnectionStarted = dx * dx + dy * dy > dragThreshold * dragThreshold;
+
+      if (!nextConnectionStarted) {
+        return;
+      }
+
+      startConnection();
+
+      connectionStarted = nextConnectionStarted;
+    }
+
     if (!getFromHandle() || !fromHandle) {
       onPointerUp(event);
       return;

packages/system/src/xyhandle/types.ts

@@ -37,6 +37,7 @@ export type OnPointerDownParams = {
   getTransform: () => Transform;
   getFromHandle: () => Handle | null;
   autoPanSpeed?: number;
+  dragThreshold?: number;
 };
 
 export type IsValidParams = {