diff --git a/packages/react/src/hooks/useHandleConnections.ts b/packages/react/src/hooks/useHandleConnections.ts index 4f62615e..5e7a89a8 100644 --- a/packages/react/src/hooks/useHandleConnections.ts +++ b/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 | null>(null); + const prevConnections = useRef | null>(null); const currentNodeId = nodeId || _nodeId; const connections = useStore( diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index f00ccc44..f8a43dd4 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/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 | null = null; - let connections: Map | undefined; + let prevConnections: Map | null = null; + let connections: Map | undefined; $: if (onconnect || ondisconnect) { // connectionLookup is not reactive, so we use edges to get notified about updates diff --git a/packages/svelte/src/lib/hooks/useHandleConnections.ts b/packages/svelte/src/lib/hooks/useHandleConnections.ts index 27e61c11..d3f51998 100644 --- a/packages/svelte/src/lib/hooks/useHandleConnections.ts +++ b/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 is connected to another 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 | undefined = undefined; + let prevConnections: Map | undefined = undefined; return derived( [edges, connectionLookup], diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index a3b5879d..b7aa248e 100644 --- a/packages/system/src/types/general.ts +++ b/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>; +export type ConnectionLookup = Map>; export type OnBeforeDeleteBase = ({ nodes, diff --git a/packages/system/src/utils/connections.ts b/packages/system/src/utils/connections.ts index ded405c3..b99e6c14 100644 --- a/packages/system/src/utils/connections.ts +++ b/packages/system/src/utils/connections.ts @@ -1,9 +1,9 @@ -import { Connection } from '../types'; +import { HandleConnection } from '../types'; /** * @internal */ -export function areConnectionMapsEqual(a?: Map, b?: Map) { +export function areConnectionMapsEqual(a?: Map, b?: Map) { if (!a && !b) { return true; } @@ -31,15 +31,15 @@ export function areConnectionMapsEqual(a?: Map, b?: Map, - b: Map, - cb?: (diff: Connection[]) => void + a: Map, + b: Map, + cb?: (diff: HandleConnection[]) => void ) { if (!cb) { return; } - const diff: Connection[] = []; + const diff: HandleConnection[] = []; a.forEach((connection, key) => { if (!b?.has(key)) { diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 51cb1329..5cb8a382 100644 --- a/packages/system/src/utils/store.ts +++ b/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));