fix(core): connection line pos not matching edge pos

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

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

@@ -58,27 +58,38 @@ const targetHandle = $computed(() => {
   )
 })
 
-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))
-
-const sourceX = $computed(() => sourceNode.computedPosition.x + sourceHandleX)
-const sourceY = $computed(() => sourceNode.computedPosition.y + sourceHandleY)
-
 const fromPosition = computed(() => sourceHandle?.position)
+
+const fromXY = computed(() => {
+  if (sourceHandle) {
+    return getHandlePosition(
+      fromPosition.value || Position.Top,
+      { ...sourceNode.dimensions, ...sourceNode.computedPosition },
+      sourceHandle,
+    )
+  }
+
+  return {
+    x: sourceNode.dimensions.width / 2,
+    y: sourceNode.dimensions.height / 2,
+  }
+})
+
 const targetPosition = computed(() => (fromPosition.value ? oppositePosition[fromPosition.value] : undefined))
 
-const targetX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom)
+// todo: rename corresponding props
-const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom)
+const toX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom)
+const toY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom)
 
 const dAttr = computed(() => {
   let path
 
   const pathParams = {
-    sourceX,
+    sourceX: fromXY.value.x,
-    sourceY,
+    sourceY: fromXY.value.y,
     sourcePosition: fromPosition.value,
-    targetX,
+    targetX: toX,
-    targetY,
+    targetY: toY,
     targetPosition: targetPosition.value,
   }
 
@@ -125,11 +136,11 @@ export default {
       :is="connectionLineComponent"
       v-if="connectionLineComponent"
       v-bind="{
-        sourceX,
+        sourceX: fromXY.x,
-        sourceY,
+        sourceY: fromXY.y,
         sourcePosition: sourceHandle?.position,
-        targetX,
+        targetX: toX,
-        targetY,
+        targetY: toY,
         targetPosition,
         sourceNode,
         sourceHandle,

packages/core/src/components/Handle/Handle.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { isFunction, isString } from '@vueuse/core'
-import type { Position } from '../../types'
+import { Position } from '../../types'
 import type { HandleProps } from '../../types/handle'
 
-const { position = 'top' as Position, connectable, id, isValidConnection, ...props } = defineProps<HandleProps>()
+const { position = Position.Top, connectable, id, isValidConnection, ...props } = defineProps<HandleProps>()
 
 const type = toRef(props, 'type', 'source')
 

packages/core/src/utils/handle.ts

@@ -38,8 +38,14 @@ export function getHandles(
         id: h.id || null,
         type,
         nodeId: node.id,
-        x: (node.computedPosition?.x ?? 0) + h.x + h.width / 2,
+        ...getHandlePosition(
-        y: (node.computedPosition?.y ?? 0) + h.y + h.height / 2,
+          h.position,
+          {
+            ...node.dimensions,
+            ...node.computedPosition,
+          },
+          h,
+        ),
       })
     }
     return res