fix(edges): edges not properly calculating position

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

src/components/Edges/EdgeWrapper.vue

@@ -16,7 +16,6 @@ interface EdgeWrapper {
 }
 
 const props = withDefaults(defineProps<EdgeWrapper>(), {})
-
 const store = useStore()
 
 const updating = ref<boolean>(false)
@@ -64,19 +63,8 @@ const targetNodeHandles = computed(() =>
     ? props.edge.targetNode.handleBounds.target
     : props.edge.targetNode.handleBounds.target ?? props.edge.targetNode.handleBounds.source,
 )
-
-const sourceHandle = controlledComputed(
-  () => props.edge,
-  () => {
-    if (props.edge.sourceNode && props.edge.sourceNode.handleBounds.source)
-      return getHandle(props.edge.sourceNode.handleBounds.source, props.edge.sourceHandle)
-    else return undefined
-  },
-)
-const targetHandle = computed(() => {
-  if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.edge.targetHandle)
-  else return undefined
-})
+const sourceHandle = computed(() => getHandle(props.edge.sourceNode.handleBounds.source, props.edge.sourceHandle))
+const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle))
 const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
 
@@ -94,17 +82,17 @@ const edgePos = computed(() =>
     targetPosition.value,
   ),
 )
-
-const isVisible = ({ sourceX, sourceY, targetX, targetY }: EdgePositions) =>
+const isVisible = computed(() =>
   store.onlyRenderVisibleElements
     ? isEdgeVisible({
-        sourcePos: { x: sourceX, y: sourceY },
-        targetPos: { x: targetX, y: targetY },
+        sourcePos: { x: edgePos.value.sourceX, y: edgePos.value.sourceY },
+        targetPos: { x: edgePos.value.targetX, y: edgePos.value.targetY },
         width: props.dimensions.width,
         height: props.dimensions.height,
         transform: props.transform,
       })
-    : true
+    : true,
+)
 </script>
 <script lang="ts">
 export default {
@@ -113,7 +101,7 @@ export default {
 </script>
 <template>
   <g
-    v-show="isVisible(edgePos)"
+    v-show="isVisible"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${props.edge.type || 'default'}`,

src/utils/edge.ts

@@ -1,11 +1,11 @@
 import { rectToBox } from './graph'
-import { EdgePositions, GraphNode, HandleElement, Position, Transform, XYPosition } from '~/types'
+import { EdgePositions, GraphNode, HandleElement, Position, Rect, Transform, XYPosition } from '~/types'
 
-export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition {
-  const x = (handle?.x ?? 0) + node.position.x
-  const y = (handle?.y ?? 0) + node.position.y
-  const width = handle?.width ?? node.dimensions.width
-  const height = handle?.height ?? node.dimensions.height
+export function getHandlePosition(position: Position, rect: Rect, handle?: HandleElement): XYPosition {
+  const x = (handle?.x ?? 0) + rect.x
+  const y = (handle?.y ?? 0) + rect.y
+  const width = handle?.width ?? rect.width
+  const height = handle?.height ?? rect.height
 
   switch (position) {
     case Position.Top:
@@ -31,19 +31,16 @@ export function getHandlePosition(position: Position, node: GraphNode, handle?:
   }
 }
 
-export function getHandle(bounds: HandleElement[], handleId?: string): HandleElement | undefined {
+export function getHandle(bounds?: HandleElement[], handleId?: string): HandleElement | undefined {
   if (!bounds) return undefined
 
   // there is no handleId when there are no multiple handles/ handles with ids
   // so we just pick the first one
   let handle
-  if (bounds.length === 1 ?? !handleId) {
-    handle = bounds[0]
-  } else if (handleId) {
-    handle = bounds.find((d) => d.id === handleId)
-  }
+  if (bounds.length === 1 ?? !handleId) handle = bounds[0]
+  else if (handleId) handle = bounds.find((d) => d.id === handleId)
 
-  return !handle ? undefined : handle
+  return handle
 }
 
 export const getEdgePositions = (
@@ -54,8 +51,22 @@ export const getEdgePositions = (
   targetHandle: HandleElement | undefined,
   targetPosition: Position,
 ): EdgePositions => {
-  const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
-  const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle)
+  const sourceHandlePos = getHandlePosition(
+    sourcePosition,
+    {
+      ...sourceNode.dimensions,
+      ...sourceNode.computedPosition,
+    },
+    sourceHandle,
+  )
+  const targetHandlePos = getHandlePosition(
+    targetPosition,
+    {
+      ...targetNode.dimensions,
+      ...targetNode.computedPosition,
+    },
+    targetHandle,
+  )
 
   return {
     sourceX: sourceHandlePos.x,