update(connection): pass source node to ConnectionLine as prop

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

examples/Provider/Sidebar.vue

@@ -2,7 +2,7 @@
 import { useVueFlow } from '~/index'
 const store = useVueFlow()
 
-const nodes = computed(() => store.nodes)
+const nodes = computed(() => store.getNodes)
 const transform = computed(() => store.transform)
 
 const selectAll = () => {
@@ -19,7 +19,7 @@ const selectAll = () => {
     <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
     <div class="title">Nodes</div>
     <div v-for="node of nodes" :key="node.id">
-      Node {{ node.id }} - x: {{ node.__vf.position.x.toFixed(2) }}, y: {{ node.__vf.position.y.toFixed(2) }}
+      Node {{ node.id }} - x: {{ node.position.x.toFixed(2) }}, y: {{ node.position.y.toFixed(2) }}
     </div>
 
     <div class="selectall">

src/components/ConnectionLine/ConnectionLine.vue

@@ -9,13 +9,12 @@ import {
   HandleType,
   XYPosition,
   ConnectionMode,
-  VFInternals,
   Transform,
   GraphNode,
 } from '../../types'
 
 interface ConnectionLineProps {
-  vf: VFInternals
+  sourceNode: GraphNode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
   connectionHandleId?: ElementId
@@ -33,15 +32,16 @@ const props = withDefaults(defineProps<ConnectionLineProps>(), {
   connectionPosition: () => ({ x: 0, y: 0 }),
 })
 
-const sourceNode = props.nodes.find((n) => n.id === props.connectionNodeId)
 const sourceHandle =
   props.connectionHandleId && props.connectionHandleType
-    ? props.vf.handleBounds[props.connectionHandleType]?.find((d: HandleElement) => d.id === props.connectionHandleId)
+    ? props.sourceNode.__vf.handleBounds[props.connectionHandleType]?.find(
-    : props.connectionHandleType && props.vf.handleBounds[props.connectionHandleType ?? 'source']?.[0]
+        (d: HandleElement) => d.id === props.connectionHandleId,
-const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.vf.width as number) / 2
+      )
-const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.vf.height
+    : props.connectionHandleType && props.sourceNode.__vf.handleBounds[props.connectionHandleType ?? 'source']?.[0]
-const sourceX = props.vf.position.x + sourceHandleX
+const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__vf.width as number) / 2
-const sourceY = props.vf.position.y + sourceHandleY
+const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__vf.height
+const sourceX = props.sourceNode.position.x + sourceHandleX
+const sourceY = props.sourceNode.position.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
@@ -105,7 +105,7 @@ export default {
         connectionLineType: props.connectionLineType,
         connectionLineStyle: props.connectionLineStyle,
         nodes: props.nodes,
-        sourceNode,
+        sourceNode: props.sourceNode,
         sourceHandle,
       }"
     >

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -95,7 +95,7 @@ export default {
       </EdgeWrapper>
       <ConnectionLine
         v-if="connectionLineVisible && sourceNode"
-        :vf="sourceNode?.__vf"
+        :source-node="sourceNode"
         :connection-line-style="props.connectionLineStyle"
         :connection-line-type="props.connectionLineType"
         :connection-handle-id="props.connectionHandleId"