From b2d1844c0f626862576623063589993aaedaa8b0 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 7 Jan 2025 14:18:05 +0100 Subject: [PATCH] remove redundant connectionLookup entries --- .../react/src/hooks/useHandleConnections.ts | 4 ++-- packages/react/src/hooks/useReactFlow.ts | 9 +++++++- packages/react/src/types/instance.ts | 21 +++++++++++++++++-- .../src/lib/components/Handle/Handle.svelte | 2 +- .../src/lib/hooks/useHandleConnections.ts | 4 ++-- packages/system/src/utils/store.ts | 8 ++++--- 6 files changed, 37 insertions(+), 11 deletions(-) diff --git a/packages/react/src/hooks/useHandleConnections.ts b/packages/react/src/hooks/useHandleConnections.ts index 6d82403c..cad87715 100644 --- a/packages/react/src/hooks/useHandleConnections.ts +++ b/packages/react/src/hooks/useHandleConnections.ts @@ -32,7 +32,7 @@ type useHandleConnectionsParams = { */ export function useHandleConnections({ type, - id = null, + id, nodeId, onConnect, onDisconnect, @@ -47,7 +47,7 @@ export function useHandleConnections({ const prevConnections = useRef | null>(null); const connections = useStore( - (state) => state.connectionLookup.get(`${currentNodeId}-${type}-${id}`), + (state) => state.connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ''}`), areConnectionMapsEqual ); diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts index c4d81e2d..ab090820 100644 --- a/packages/react/src/hooks/useReactFlow.ts +++ b/packages/react/src/hooks/useReactFlow.ts @@ -239,7 +239,14 @@ export function useReactFlow + Array.from( + store + .getState() + .connectionLookup.get(`${nodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`) ?.values() ?? [] ), }; diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts index fdece4dd..e0a38d67 100644 --- a/packages/react/src/types/instance.ts +++ b/packages/react/src/types/instance.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-namespace */ -import type { HandleConnection, HandleType, Rect, Viewport } from '@xyflow/system'; +import type { HandleConnection, HandleType, NodeConnection, Rect, Viewport } from '@xyflow/system'; import type { Node, Edge, ViewportHelperFunctions, InternalNode } from '.'; export type ReactFlowJsonObject = { @@ -183,7 +183,7 @@ export type GeneralHelpers Rect; /** * Gets all connections for a given handle belonging to a specific node. - * + * @de * @param type - handle type 'source' or 'target' * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle) * @param nodeId - the node id the handle belongs to @@ -198,6 +198,23 @@ export type GeneralHelpers HandleConnection[]; + /** + * Gets all connections to a node. Can be filtered by handle type and id. + * @deprecated use `getNodeConnections` instead + * @param type - handle type 'source' or 'target' + * @param handleId - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle) + * @param nodeId - the node id the handle belongs to + * @returns an array with handle connections + */ + getNodeConnections: ({ + type, + handleId, + nodeId, + }: { + type?: HandleType; + nodeId: string; + handleId?: string | null; + }) => NodeConnection[]; }; export type ReactFlowInstance = GeneralHelpers< diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index 45f70fb2..aa93d868 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -116,7 +116,7 @@ $: if (onconnect || ondisconnect) { // connectionLookup is not reactive, so we use edges to get notified about updates $edges; - connections = $connectionLookup.get(`${nodeId}-${type}-${id || null}`); + connections = $connectionLookup.get(`${nodeId}-${type}${id ? `-${id}` : ''}`); } $: { diff --git a/packages/svelte/src/lib/hooks/useHandleConnections.ts b/packages/svelte/src/lib/hooks/useHandleConnections.ts index be331d8a..16f84f0c 100644 --- a/packages/svelte/src/lib/hooks/useHandleConnections.ts +++ b/packages/svelte/src/lib/hooks/useHandleConnections.ts @@ -22,7 +22,7 @@ const initialConnections: HandleConnection[] = []; * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type) * @returns an array with connections */ -export function useHandleConnections({ type, nodeId, id = null }: useHandleConnectionsParams) { +export function useHandleConnections({ type, nodeId, id }: useHandleConnectionsParams) { const { edges, connectionLookup } = useStore(); console.warn( @@ -37,7 +37,7 @@ export function useHandleConnections({ type, nodeId, id = null }: useHandleConne return derived( [edges, connectionLookup], ([, connectionLookup], set) => { - const nextConnections = connectionLookup.get(`${currentNodeId}-${type}-${id || null}`); + const nextConnections = connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ''}`); if (!areConnectionMapsEqual(nextConnections, prevConnections)) { prevConnections = nextConnections; diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 223772ea..bccb115d 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -468,9 +468,11 @@ function addConnectionToLookup( const typeMap = connectionLookup.get(key) || new Map(); connectionLookup.set(key, typeMap.set(connectionKey, connection)); - key = `${nodeId}-${type}-${handleId}`; - const handleMap = connectionLookup.get(key) || new Map(); - connectionLookup.set(key, handleMap.set(connectionKey, connection)); + if (handleId) { + key = `${nodeId}-${type}-${handleId}`; + const handleMap = connectionLookup.get(key) || new Map(); + connectionLookup.set(key, handleMap.set(connectionKey, connection)); + } } export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeLookup: EdgeLookup, edges: EdgeBase[]) {