diff --git a/packages/core/src/composables/useHandleConnections.ts b/packages/core/src/composables/useHandleConnections.ts index 97b4ca3f..dd71d5a1 100644 --- a/packages/core/src/composables/useHandleConnections.ts +++ b/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 id?: MaybeRefOrGetter nodeId?: MaybeRefOrGetter - 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 ``. * * @public * @param params @@ -28,7 +26,7 @@ export interface UseHandleConnectionsParams { * * @returns An array of connections */ -export function useHandleConnections(params: UseHandleConnectionsParams): ComputedRef { +export function useHandleConnections(params: UseHandleConnectionsParams): ComputedRef { 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 | null>(null) + const prevConnections = ref | null>(null) - const connections = ref>() + const connections = ref>() 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()]) => { 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()) + }) } diff --git a/packages/core/src/types/connection.ts b/packages/core/src/types/connection.ts index c2ff8d5b..51f1906c 100644 --- a/packages/core/src/types/connection.ts +++ b/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) | false> | ((Connection & Partial) | false) @@ -83,3 +88,5 @@ export interface ConnectionLineProps { /** status of the connection (valid, invalid) */ connectionStatus: ConnectionStatus | null } + +export type ConnectionLookup = Map> diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index b7a807aa..6d4c5771 100644 --- a/packages/core/src/types/store.ts +++ b/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> - export interface UpdateNodeDimensionsParams { id: string nodeElement: HTMLDivElement diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts index 04b6c1fc..3d0ae197 100644 --- a/packages/core/src/utils/store.ts +++ b/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, - b: Map, - cb?: (diff: Connection[]) => void, + a: Map, + b: Map, + cb?: (diff: HandleConnection[]) => void, ) { if (!cb) { return } - const diff: Connection[] = [] + const diff: HandleConnection[] = [] for (const key of a.keys()) { if (!b.has(key)) {