feat(core): add edge id to handle connections

Author: bcakmakoglu

packages/core/src/composables/useHandleConnections.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, MaybeRefOrGetter } from 'vue'
 import { computed, ref, toRef, toValue, watch } from 'vue'
-import type { Connection, HandleType } from '../types'
+import type { HandleConnection, HandleType } from '../types'
 import { areConnectionMapsEqual, handleConnectionChange } from '../utils'
 import { useNodeId } from './useNodeId'
 import { useVueFlow } from './useVueFlow'
@@ -9,14 +9,12 @@ export interface UseHandleConnectionsParams {
   type: MaybeRefOrGetter<HandleType>
   id?: MaybeRefOrGetter<string | null>
   nodeId?: MaybeRefOrGetter<string | null>
-  onConnect?: (connections: Connection[]) => void
-  onDisconnect?: (connections: Connection[]) => void
+  onConnect?: (connections: HandleConnection[]) => void
+  onDisconnect?: (connections: HandleConnection[]) => void
 }
 
-// todo: add edge id to connection params
-
 /**
- * Composable that returns existing connections of a handle
+ * Composable that returns existing connections of a `<Handle />`.
  *
  * @public
  * @param params
@@ -28,7 +26,7 @@ export interface UseHandleConnectionsParams {
  *
  * @returns An array of connections
  */
-export function useHandleConnections(params: UseHandleConnectionsParams): ComputedRef<Connection[]> {
+export function useHandleConnections(params: UseHandleConnectionsParams): ComputedRef<HandleConnection[]> {
   const { type, id, nodeId, onConnect, onDisconnect } = params
 
   const { connectionLookup } = useVueFlow()
@@ -41,9 +39,9 @@ export function useHandleConnections(params: UseHandleConnectionsParams): Comput
 
   const handleId = toRef(() => toValue(id) ?? null)
 
-  const prevConnections = ref<Map<string, Connection> | null>(null)
+  const prevConnections = ref<Map<string, HandleConnection> | null>(null)
 
-  const connections = ref<Map<string, Connection>>()
+  const connections = ref<Map<string, HandleConnection>>()
 
   watch(
     () => connectionLookup.value.get(`${currentNodeId.value}-${handleType.value}-${handleId.value}`),
@@ -59,17 +57,22 @@ export function useHandleConnections(params: UseHandleConnectionsParams): Comput
 
   watch(
     [connections, () => typeof onConnect !== 'undefined', () => typeof onDisconnect !== 'undefined'],
-    ([currentConnections]) => {
+    ([currentConnections = new Map<string, HandleConnection>()]) => {
       if (prevConnections.value && prevConnections.value !== currentConnections) {
-        const _connections = currentConnections ?? new Map()
-        handleConnectionChange(prevConnections.value, _connections, onDisconnect)
-        handleConnectionChange(_connections, prevConnections.value, onConnect)
+        handleConnectionChange(prevConnections.value, currentConnections, onDisconnect)
+        handleConnectionChange(currentConnections, prevConnections.value, onConnect)
       }
 
-      prevConnections.value = currentConnections ?? new Map()
+      prevConnections.value = currentConnections
     },
     { immediate: true },
   )
 
-  return computed(() => Array.from(connections.value?.values() ?? []))
+  return computed(() => {
+    if (!connections.value) {
+      return []
+    }
+
+    return Array.from(connections.value.values())
+  })
 }

packages/core/src/types/connection.ts

@@ -33,6 +33,11 @@ export interface Connection {
   targetHandle?: string | null
 }
 
+/** Connection with edge id */
+export interface HandleConnection extends Connection {
+  edgeId: string
+}
+
 export type Connector = (
   params: Connection,
 ) => Promise<(Connection & Partial<Edge>) | false> | ((Connection & Partial<Edge>) | false)
@@ -83,3 +88,5 @@ export interface ConnectionLineProps {
   /** status of the connection (valid, invalid) */
   connectionStatus: ConnectionStatus | null
 }
+
+export type ConnectionLookup = Map<string, Map<string, HandleConnection>>

packages/core/src/types/store.ts

@@ -19,6 +19,7 @@ import type {
   Connection,
   ConnectionLineOptions,
   ConnectionLineType,
+  ConnectionLookup,
   ConnectionMode,
   ConnectionStatus,
   Connector,
@@ -30,8 +31,6 @@ import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks
 import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
 import type { ConnectingHandle, ValidConnectionFunc } from './handle'
 
-export type ConnectionLookup = Map<string, Map<string, Connection>>
-
 export interface UpdateNodeDimensionsParams {
   id: string
   nodeElement: HTMLDivElement

packages/core/src/utils/store.ts

@@ -7,6 +7,7 @@ import type {
   Edge,
   GraphEdge,
   GraphNode,
+  HandleConnection,
   Node,
   State,
   ValidConnectionFunc,
@@ -162,15 +163,15 @@ export function updateConnectionLookup(connectionLookup: ConnectionLookup, edges
  * @internal
  */
 export function handleConnectionChange(
-  a: Map<string, Connection>,
-  b: Map<string, Connection>,
-  cb?: (diff: Connection[]) => void,
+  a: Map<string, HandleConnection>,
+  b: Map<string, HandleConnection>,
+  cb?: (diff: HandleConnection[]) => void,
 ) {
   if (!cb) {
     return
   }
 
-  const diff: Connection[] = []
+  const diff: HandleConnection[] = []
 
   for (const key of a.keys()) {
     if (!b.has(key)) {