Use correct end handle position when drawing a connection (#4382)

* use correct end handle position \when drawing connection lines

* provide correct connection end handle, also when connection is invalid

* add end handle position to connection despite being invalid

* chore(connectionline): remove logs

---------

Co-authored-by: moklick <info@moritzklack.com>

examples/react/src/examples/Validation/index.tsx

@@ -41,7 +41,7 @@ const CustomInput: FC<NodeProps> = () => (
 
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
-    <Handle type="target" position={Position.Left} isConnectableStart={false} />
+    <Handle type="target" position={Position.Top} isConnectableStart={false} />
     <div>{id}</div>
     <Handle type="source" position={Position.Right} />
   </>

examples/svelte/src/routes/examples/validation/+page.svelte

@@ -24,8 +24,8 @@
 			data: { label: 'only connectable with B' },
 			...nodeDefaults
 		},
-		{ id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' }, ...nodeDefaults },
+		{ id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' } },
-		{ id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' }, ...nodeDefaults },
+		{ id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' } },
 		{ id: 'C', position: { x: 250, y: 300 }, data: { label: 'C' }, ...nodeDefaults }
 	]);
 

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

@@ -39,7 +39,7 @@ const ConnectionLine = ({
   CustomComponent,
   connectionStatus,
 }: ConnectionLineProps) => {
-  const { fromNode, handleId, toX, toY, connectionMode } = useStore(
+  const { fromNode, handleId, toX, toY, connectionMode, endPosition, isValid } = useStore(
     useCallback(
       (s: ReactFlowStore) => ({
         fromNode: s.nodeLookup.get(nodeId),
@@ -47,11 +47,14 @@ const ConnectionLine = ({
         toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
         connectionMode: s.connectionMode,
+        endPosition: s.connectionEndHandle?.position,
+        isValid: s.connectionStatus === 'valid',
       }),
       [nodeId]
     ),
     shallow
   );
+
   const fromHandleBounds = fromNode?.internals.handleBounds;
   let handleBounds = fromHandleBounds?.[handleType];
 
@@ -69,7 +72,7 @@ const ConnectionLine = ({
   const fromX = fromNode.internals.positionAbsolute.x + fromHandleX;
   const fromY = fromNode.internals.positionAbsolute.y + fromHandleY;
   const fromPosition = fromHandle?.position;
-  const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
+  const toPosition = isValid && endPosition ? endPosition : fromPosition ? oppositePosition[fromPosition] : null;
 
   if (!fromPosition || !toPosition) {
     return null;

packages/svelte/src/lib/store/derived-connection-props.ts

@@ -88,7 +88,9 @@ export function getDerivedConnectionProps(
       const fromX = (fromNode?.internals.positionAbsolute.x ?? 0) + fromHandleX;
       const fromY = (fromNode?.internals.positionAbsolute.y ?? 0) + fromHandleY;
       const fromPosition = fromHandle?.position;
-      const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
+      const toPosition =
+        connection.connectionEndHandle?.position ??
+        (fromPosition ? oppositePosition[fromPosition] : undefined);
 
       const pathParams = {
         sourceX: fromX,

packages/system/src/types/handles.ts

@@ -16,6 +16,7 @@ export type ConnectingHandle = {
   nodeId: string;
   type: HandleType;
   handleId?: string | null;
+  position?: Position | null;
 };
 
 export type ConnectionHandle = {

packages/system/src/xyhandle/XYHandle.ts

@@ -13,6 +13,7 @@ import {
   type IsValidConnection,
   type ConnectionHandle,
   NodeLookup,
+  Position,
 } from '../types';
 
 import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils';
@@ -138,12 +139,12 @@ function onPointerDown(
     nodeId,
     handleId,
     type: handleType,
+    position: (clickedHandle?.getAttribute('data-handlepos') as Position) || Position.Top,
   };
 
   updateConnection({
     connectionPosition,
     connectionStatus: null,
-    // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
     connectionStartHandle,
     connectionEndHandle: null,
   });
@@ -297,15 +298,14 @@ function isValidHandle(
         ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
         : handleNodeId !== fromNodeId || handleId !== fromHandleId);
 
-    if (isValid) {
+    result.isValid = isValid && isValidConnection(connection);
-      result.endHandle = {
-        nodeId: handleNodeId as string,
-        handleId,
-        type: handleType as HandleType,
-      };
 
-      result.isValid = isValidConnection(connection);
+    result.endHandle = {
-    }
+      nodeId: handleNodeId as string,
+      handleId,
+      type: handleType as HandleType,
+      position: handleToCheck.getAttribute('data-handlepos') as Position,
+    };
   }
 
   return result;