fix(reconnect): use connectionDragThreshold

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,7 +95,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       panBy,
       isValidConnection,
       onConnect: onConnectEdge,
-      onConnectStart,
+      onConnectStart: _onConnectStart,
       onConnectEnd,
       onReconnectEnd: _onReconnectEnd,
       updateConnection,

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;
+    const _onConnectStart: OnConnectStart = (evt, params) => {
-    onreconnectstart?.(event, edge, type);
+      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 };
@@ -98,7 +102,7 @@
       updateConnection,
       getTransform: () => [store.viewport.x, store.viewport.y, store.viewport.zoom],
       getFromHandle: () => store.connection.fromHandle,
-      dragThreshold: store.connectionDragThreshold
+      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>;