Merge pull request #5594 from xyflow/enhance/connection-snapping

Enhance/connection snapping

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

@@ -69,7 +69,7 @@ const ConnectionLine = <NodeType extends Node = Node>({
   CustomComponent,
   isValid,
 }: ConnectionLineProps<NodeType>) => {
-  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } =
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition, pointer } =
     useConnection<NodeType>();
 
   if (!inProgress) {
@@ -92,6 +92,7 @@ const ConnectionLine = <NodeType extends Node = Node>({
         connectionStatus={getConnectionStatus(isValid)}
         toNode={toNode}
         toHandle={toHandle}
+        pointer={pointer}
       />
     );
   }

packages/react/src/types/edges.ts

@@ -22,6 +22,7 @@ import type {
   OnError,
   OnReconnect,
   FinalConnectionState,
+  XYPosition,
 } from '@xyflow/system';
 
 import { EdgeTypes, InternalNode, Node } from '.';
@@ -279,6 +280,7 @@ export type ConnectionLineComponentProps<NodeType extends Node = Node> = {
   connectionStatus: 'valid' | 'invalid' | null;
   toNode: InternalNode<NodeType> | null;
   toHandle: Handle | null;
+  pointer: XYPosition;
 };
 
 export type ConnectionLineComponent<NodeType extends Node = Node> = ComponentType<

packages/system/src/types/general.ts

@@ -292,6 +292,7 @@ export const initialConnection: NoConnection = {
   toHandle: null,
   toPosition: null,
   toNode: null,
+  pointer: null,
 };
 
 export type NoConnection = {
@@ -305,6 +306,7 @@ export type NoConnection = {
   toHandle: null;
   toPosition: null;
   toNode: null;
+  pointer: null;
 };
 export type ConnectionInProgress<NodeType extends InternalNodeBase = InternalNodeBase> = {
   /** Indicates whether a connection is currently in progress. */
@@ -330,6 +332,8 @@ export type ConnectionInProgress<NodeType extends InternalNodeBase = InternalNod
   toPosition: Position;
   /** Returns the end node or `null` if no connection is in progress. */
   toNode: NodeType | null;
+  /** Returns the pointer position or `null` if no connection is in progress. */
+  pointer: XYPosition;
 };
 
 /**

packages/system/src/xyhandle/XYHandle.ts

@@ -109,6 +109,7 @@ function onPointerDown(
     toHandle: null,
     toPosition: oppositePosition[fromHandle.position],
     toNode: null,
+    pointer: position,
   };
 
   function startConnection() {
@@ -182,26 +183,9 @@ function onPointerDown(
       toHandle: result.toHandle,
       toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
       toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId)! : null,
+      pointer: position,
     };
 
-    /*
-     * we don't want to trigger an update when the connection
-     * is snapped to the same handle as before
-     */
-    if (
-      isValid &&
-      closestHandle &&
-      previousConnection.toHandle &&
-      newConnection.toHandle &&
-      previousConnection.toHandle.type === newConnection.toHandle.type &&
-      previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId &&
-      previousConnection.toHandle.id === newConnection.toHandle.id &&
-      previousConnection.to.x === newConnection.to.x &&
-      previousConnection.to.y === newConnection.to.y
-    ) {
-      return;
-    }
-
     updateConnection(newConnection);
     previousConnection = newConnection;
   }