fix(edges): connection line not showing up when no edges are defined

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

src/components/ConnectionLine/ConnectionLine.vue

@@ -14,8 +14,8 @@ const sourceHandle =
     : store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
-const sourceX = props.sourceNode.position.x + sourceHandleX
-const sourceY = props.sourceNode.position.y + sourceHandleY
+const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
+const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top

src/components/Edges/EdgeWrapper.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useHandle, useStore } from '../../composables'
-import { ConnectionMode, Position, EdgePositions, Dimensions, Transform, GraphEdge } from '../../types'
-import { isEdge, getEdgePositions, getHandle, isEdgeVisible } from '../../utils'
+import { ConnectionMode, Position, GraphEdge } from '../../types'
+import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
 
 interface EdgeWrapper {
@@ -119,8 +119,8 @@ export default {
         labelBgBorderRadius: props.edge.labelBgBorderRadius,
         data: props.edge.data,
         style: props.edge.style,
-        markerEnd: props.edge.markerEnd,
-        markerStart: props.edge.markerStart,
+        markerStart: `url(#${getMarkerId(props.edge.markerStart)})`,
+        markerEnd: `url(#${getMarkerId(props.edge.markerEnd)})`,
         sourcePosition,
         targetPosition,
         sourceX: edgePos.sourceX,
@@ -150,8 +150,8 @@ export default {
           labelBgBorderRadius: props.edge.labelBgBorderRadius,
           data: props.edge.data,
           style: props.edge.style,
-          markerEnd: props.edge.markerEnd,
-          markerStart: props.edge.markerStart,
+          markerStart: `url(#${getMarkerId(props.edge.markerStart)})`,
+          markerEnd: `url(#${getMarkerId(props.edge.markerEnd)})`,
           sourcePosition,
           targetPosition,
           sourceX: edgePos.sourceX,

src/components/Nodes/NodeWrapper.vue

@@ -80,10 +80,10 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
 
 const xyzPos = computed(() => {
   if (node.value.parentNode) {
-    return getXYZPos(node.value, {
+    return (node.value.computedPosition = getXYZPos(node.value, {
       ...node.value.position,
       z: node.value.computedPosition.z,
-    })
+    }))
   } else {
     return node.value.computedPosition
   }