refactor(useHandleConnections): also return edge id

packages/react/src/hooks/useHandleConnections.ts

@@ -1,5 +1,11 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Connection, HandleType, areConnectionMapsEqual, handleConnectionChange } from '@xyflow/system';
+import {
+  Connection,
+  HandleConnection,
+  HandleType,
+  areConnectionMapsEqual,
+  handleConnectionChange,
+} from '@xyflow/system';
 
 import { useStore } from './useStore';
 import { useNodeId } from '../contexts/NodeIdContext';
@@ -21,7 +27,7 @@ type useHandleConnectionsParams = {
  * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
- * @returns an array with connections
+ * @returns an array with handle connections
  */
 export function useHandleConnections({
   type,
@@ -29,9 +35,9 @@ export function useHandleConnections({
   nodeId,
   onConnect,
   onDisconnect,
-}: useHandleConnectionsParams): Connection[] {
+}: useHandleConnectionsParams): HandleConnection[] {
   const _nodeId = useNodeId();
-  const prevConnections = useRef<Map<string, Connection> | null>(null);
+  const prevConnections = useRef<Map<string, HandleConnection> | null>(null);
   const currentNodeId = nodeId || _nodeId;
 
   const connections = useStore(

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -6,7 +6,7 @@
     Position,
     XYHandle,
     isMouseEvent,
-    type Connection,
+    type HandleConnection,
     areConnectionMapsEqual,
     handleConnectionChange
   } from '@xyflow/system';
@@ -103,8 +103,8 @@
     }
   }
 
-  let prevConnections: Map<string, Connection> | null = null;
+  let prevConnections: Map<string, HandleConnection> | null = null;
-  let connections: Map<string, Connection> | undefined;
+  let connections: Map<string, HandleConnection> | undefined;
 
   $: if (onconnect || ondisconnect) {
     // connectionLookup is not reactive, so we use edges to get notified about updates

packages/svelte/src/lib/hooks/useHandleConnections.ts

@@ -1,5 +1,5 @@
 import { derived } from 'svelte/store';
-import { areConnectionMapsEqual, type Connection, type HandleType } from '@xyflow/system';
+import { areConnectionMapsEqual, type HandleConnection, type HandleType } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 
@@ -9,7 +9,7 @@ export type useHandleConnectionsParams = {
   id?: string | null;
 };
 
-const initialConnections: Connection[] = [];
+const initialConnections: HandleConnection[] = [];
 
 /**
  *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
@@ -22,7 +22,7 @@ const initialConnections: Connection[] = [];
  */
 export function useHandleConnections({ nodeId, type, id = null }: useHandleConnectionsParams) {
   const { edges, connectionLookup } = useStore();
-  let prevConnections: Map<string, Connection> | undefined = undefined;
+  let prevConnections: Map<string, HandleConnection> | undefined = undefined;
 
   return derived(
     [edges, connectionLookup],

packages/system/src/types/general.ts

@@ -28,6 +28,10 @@ export type Connection = {
   targetHandle: string | null;
 };
 
+export type HandleConnection = Connection & {
+  edgeId: string;
+};
+
 export type ConnectionStatus = 'valid' | 'invalid';
 
 export enum ConnectionMode {
@@ -136,7 +140,7 @@ export type UpdateConnection = (params: {
 export type ColorModeClass = 'light' | 'dark';
 export type ColorMode = ColorModeClass | 'system';
 
-export type ConnectionLookup = Map<string, Map<string, Connection>>;
+export type ConnectionLookup = Map<string, Map<string, HandleConnection>>;
 
 export type OnBeforeDeleteBase<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase> = ({
   nodes,

packages/system/src/utils/connections.ts

@@ -1,9 +1,9 @@
-import { Connection } from '../types';
+import { HandleConnection } from '../types';
 
 /**
  * @internal
  */
-export function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Connection>) {
+export function areConnectionMapsEqual(a?: Map<string, HandleConnection>, b?: Map<string, HandleConnection>) {
   if (!a && !b) {
     return true;
   }
@@ -31,15 +31,15 @@ export function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<stri
  * @internal
  */
 export function handleConnectionChange(
-  a: Map<string, Connection>,
+  a: Map<string, HandleConnection>,
-  b: Map<string, Connection>,
+  b: Map<string, HandleConnection>,
-  cb?: (diff: Connection[]) => void
+  cb?: (diff: HandleConnection[]) => void
 ) {
   if (!cb) {
     return;
   }
 
-  const diff: Connection[] = [];
+  const diff: HandleConnection[] = [];
 
   a.forEach((connection, key) => {
     if (!b?.has(key)) {

packages/system/src/utils/store.ts

@@ -260,7 +260,7 @@ export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeL
 
     const prevSource = connectionLookup.get(sourceKey) || new Map();
     const prevTarget = connectionLookup.get(targetKey) || new Map();
-    const connection = { source, target, sourceHandle, targetHandle };
+    const connection = { edgeId: edge.id, source, target, sourceHandle, targetHandle };
 
     edgeLookup.set(edge.id, edge);
     connectionLookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));