feat(core): pass targetNode and targetHandle as props

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/ConnectionLine/ConnectionLine.vue

@@ -14,6 +14,7 @@ const {
   connectionLineOptions,
   connectionStatus,
   viewport,
+  findNode,
 } = $(useVueFlow())
 
 const oppositePosition = {
@@ -26,8 +27,13 @@ const oppositePosition = {
 const connectionLineComponent = inject(Slots)?.['connection-line']
 
 const handleId = $computed(() => connectionStartHandle!.handleId)
+
 const type = computed(() => connectionStartHandle!.type)
 
+const targetNode = $computed(
+  () => (connectionStartHandle?.result && findNode(connectionStartHandle.result.connection.target)) || null,
+)
+
 const sourceHandle = $computed(
   () =>
     (connectionMode === ConnectionMode.Strict
@@ -36,6 +42,18 @@ const sourceHandle = $computed(
     sourceNode.handleBounds[type.value ?? 'source']?.[0],
 )
 
+const targetHandle = $computed(
+  () =>
+    (targetNode &&
+      ((connectionMode === ConnectionMode.Strict
+        ? targetNode.handleBounds[type.value === 'source' ? 'target' : 'source']?.find((d) => d.id === handleId)
+        : [...(targetNode.handleBounds.source || []), ...(targetNode.handleBounds.target || [])]?.find(
+            (d) => d.id === handleId,
+          )) ||
+        targetNode.handleBounds[type.value ?? 'source']?.[0])) ||
+    null,
+)
+
 const sourceHandleX = $computed(() => (sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2))
 const sourceHandleY = $computed(() => (sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height))
 
@@ -111,6 +129,8 @@ export default {
         targetPosition,
         sourceNode,
         sourceHandle,
+        targetNode,
+        targetHandle,
         markerEnd: `url(#${getMarkerId(connectionLineOptions.markerEnd)})`,
         markerStart: `url(#${getMarkerId(connectionLineOptions.markerStart)})`,
         connectionStatus,

packages/core/src/types/connection.ts

@@ -70,8 +70,12 @@ export interface ConnectionLineProps {
   targetPosition: Position
   /** The source node of the connection line */
   sourceNode: GraphNode
-  /** The source handle element of the connection line */
+  /** The source handle element (not the DOM element) of the connection line */
   sourceHandle: HandleElement
+  /** The target node of the connection line */
+  targetNode: GraphNode | null
+  /** The target handle element (not the DOM element) of the connection line */
+  targetHandle: HandleElement | null
   /** marker url */
   markerStart: string
   /** marker url */