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
   }

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -47,7 +47,7 @@ export default {
     :width="store.dimensions.width"
     :height="store.dimensions.height"
     class="vue-flow__edges vue-flow__container"
-    :style="{ zIndex: level.z }"
+    :style="`z-index: ${parseInt(level.level)}`"
   >
     <MarkerDefinitions v-if="level.isMaxLevel" :default-color="store.defaultMarkerColor" />
     <g>

src/store/getters.ts

@@ -52,8 +52,8 @@ export default (state: FlowState): FlowGetters => {
             e.targetNode.dimensions.width &&
             e.targetNode.dimensions.height &&
             isEdgeVisible({
-              sourcePos: e.sourceNode.position || { x: 0, y: 0 },
-              targetPos: e.targetNode.position || { x: 0, y: 0 },
+              sourcePos: e.sourceNode.computedPosition || { x: 0, y: 0 },
+              targetPos: e.targetNode.computedPosition || { x: 0, y: 0 },
               sourceWidth: e.sourceNode.dimensions.width,
               sourceHeight: e.sourceNode.dimensions.height,
               targetWidth: e.targetNode.dimensions.width,

src/utils/edge.ts

@@ -150,7 +150,7 @@ export const groupEdgesByZLevel = (edges: GraphEdge[], nodes: GraphNode[]) => {
     return tree
   }, {})
 
-  return Object.entries(levelLookup).map(([key, edges]) => {
+  return Object.entries(Object.keys(levelLookup).length ? levelLookup : { 0: [] }).map(([key, edges]) => {
     const level = +key
 
     return {

src/utils/graph.ts

@@ -335,8 +335,8 @@ export const getTransformForBounds = (
 export const getXYZPos = (node: GraphNode, result: XYZPosition): XYZPosition => {
   if (!node.parentNode) return result
   return getXYZPos(node.parentNode, {
-    x: result.x + node.parentNode.position.x,
-    y: result.y + node.parentNode.position.y,
+    x: result.x + node.parentNode.computedPosition.x,
+    y: result.y + node.parentNode.computedPosition.y,
     z:
       node.parentNode.computedPosition.z > node.computedPosition.z ? node.parentNode.computedPosition.z : node.computedPosition.z,
   })