fix(edges): Cancel edge update if connection exists

package/src/components/Edges/EdgeWrapper.vue

@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import { useHandle, useVueFlow } from '../../composables'
 import { ConnectionMode, EdgeComponent, GraphEdge, Position } from '../../types'
-import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
+import { connectionExists, getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
 interface EdgeWrapper {
@@ -16,12 +16,14 @@ interface EdgeWrapper {
 
 const { id, edge, name, selectable, updatable, type } = defineProps<EdgeWrapper>()
 
-const { emits, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, getNode, addSelectedEdges } = $(useVueFlow())
+const { emits, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdges, getEdge, getNode, addSelectedEdges } = $(
+  useVueFlow(),
+)
 
 let updating = $ref(false)
 
-const sourceNode = $computed(() => getNode(edge.source)!)
+const sourceNode = $computed(() => getNode(edge.source))
-const targetNode = $computed(() => getNode(edge.target)!)
+const targetNode = $computed(() => getNode(edge.target))
 
 const { onMouseDown } = useHandle()
 
@@ -68,15 +70,14 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
     isSourceHandle,
     undefined,
     isSourceHandle ? 'target' : 'source',
-    (connection) => emits.edgeUpdate({ edge, connection }),
+    (connection) => {
+      if (!connectionExists(edge, getEdges)) emits.edgeUpdate({ edge, connection })
+    },
     () => emits.edgeUpdateEnd({ event, edge }),
   )
 }
 
-const sourceHandle = $(
+const sourceHandle = $computed(() => {
-  controlledComputed(
-    () => sourceNode,
-    () => {
   if (!sourceNode) return
 
   let sourceNodeHandles
@@ -87,14 +88,9 @@ const sourceHandle = $(
   }
 
   return getHandle(sourceNodeHandles, edge.sourceHandle)
-    },
+})
-  ),
-)
 
-const targetHandle = $(
+const targetHandle = $computed(() => {
-  controlledComputed(
-    () => targetNode,
-    () => {
   if (!targetNode) return
 
   let targetNodeHandles
@@ -105,9 +101,7 @@ const targetHandle = $(
   }
 
   return getHandle(targetNodeHandles, edge.targetHandle)
-    },
+})
-  ),
-)
 
 const sourcePosition = $(controlledComputed($$(sourceHandle), () => (sourceHandle ? sourceHandle.position : Position.Bottom)))
 
@@ -118,12 +112,13 @@ onMounted(() => {
     [
       $$(sourcePosition),
       $$(targetPosition),
-      () => sourceNode.computedPosition,
+      () => sourceNode?.computedPosition,
-      () => targetNode.computedPosition,
+      () => targetNode?.computedPosition,
-      () => sourceNode.dimensions,
+      () => sourceNode?.dimensions,
-      () => targetNode.dimensions,
+      () => targetNode?.dimensions,
     ],
     () => {
+      if (sourceNode && targetNode) {
         const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
           sourceNode,
           sourceHandle,
@@ -134,10 +129,13 @@ onMounted(() => {
         )
 
         const storedEdge = getEdge(id)!
+        if (storedEdge) {
           if (edge.sourceX !== sourceX) storedEdge.sourceX = sourceX
           if (edge.sourceY !== sourceY) storedEdge.sourceY = sourceY
           if (edge.targetX !== targetX) storedEdge.targetX = targetX
           if (edge.targetY !== targetY) storedEdge.targetY = targetY
+        }
+      }
     },
     { immediate: true, flush: 'pre' },
   )

package/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -75,7 +75,7 @@ const getType = (edge: GraphEdge) => {
       }
     }
   }
-  if (typeof edgeType !== 'string') return edgeType
+  if (edgeType && typeof edgeType !== 'string') return edgeType
 
   const slot = slots?.[`edge-${name}`]
   if (!slot?.({})) {