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>

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.endHandle = {
-        nodeId: handleNodeId as string,
-        handleId,
-        type: handleType as HandleType,
-      };
+    result.isValid = isValid && isValidConnection(connection);
 
-      result.isValid = isValidConnection(connection);
-    }
+    result.endHandle = {
+      nodeId: handleNodeId as string,
+      handleId,
+      type: handleType as HandleType,
+      position: handleToCheck.getAttribute('data-handlepos') as Position,
+    };
   }
 
   return result;