diff --git a/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx b/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx index 3397242a..5d64f81d 100644 --- a/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx +++ b/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx @@ -12,7 +12,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string [nodeId] ); const connections = useNodeConnections({ - type: handleProps.type, + handleType: handleProps.type, handleId: handleProps.id, onConnect, onDisconnect, diff --git a/examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx b/examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx index 070bbf2a..9361f833 100644 --- a/examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx +++ b/examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx @@ -15,7 +15,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string [nodeId] ); const connections = useNodeConnections({ - type: handleProps.type, + handleType: handleProps.type, handleId: handleProps.id, onConnect, onDisconnect, diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx index 45ec4087..0caa228d 100644 --- a/examples/react/src/examples/UseNodesData/ResultNode.tsx +++ b/examples/react/src/examples/UseNodesData/ResultNode.tsx @@ -4,7 +4,7 @@ import { isTextNode, type MyNode } from '.'; function ResultNode() { const connections = useNodeConnections({ - type: 'target', + handleType: 'target', }); const nodesData = useNodesData(connections.map((connection) => connection.source)); const textNodes = nodesData.filter(isTextNode); diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx index a6f0b67b..792b7c55 100644 --- a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx +++ b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx @@ -5,7 +5,7 @@ import { isTextNode, type TextNode, type MyNode } from '.'; function UppercaseNode({ id }: NodeProps) { const { updateNodeData } = useReactFlow(); const connections = useNodeConnections({ - type: 'target', + handleType: 'target', }); const nodesData = useNodesData(connections[0]?.source); const textNode = isTextNode(nodesData) ? nodesData : null; diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte index 9aa05fc2..701d0506 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte @@ -14,8 +14,8 @@ $$restProps; const connections = useNodeConnections({ - nodeId: id, - type: 'target' + id: id, + handleType: 'target' }); $: nodeData = useNodesData($connections.map((connection) => connection.source)); diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte index 5ca38032..600b7ec8 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte @@ -17,8 +17,8 @@ const { updateNodeData } = useSvelteFlow(); const connections = useNodeConnections({ - nodeId: id, - type: 'target' + id: id, + handleType: 'target' }); $: nodeData = useNodesData($connections[0]?.source); diff --git a/packages/react/src/hooks/useNodeConnections.ts b/packages/react/src/hooks/useNodeConnections.ts index b0481851..c83a7366 100644 --- a/packages/react/src/hooks/useNodeConnections.ts +++ b/packages/react/src/hooks/useNodeConnections.ts @@ -14,9 +14,9 @@ import { useNodeId } from '../contexts/NodeIdContext'; const error014 = errorMessages['error014'](); type UseNodeConnectionsParams = { - type?: HandleType; + id?: string; + handleType?: HandleType; handleId?: string; - nodeId?: string; onConnect?: (connections: Connection[]) => void; onDisconnect?: (connections: Connection[]) => void; }; @@ -25,22 +25,22 @@ type UseNodeConnectionsParams = { * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id. * * @public - * @param param.nodeId - node id - optional if called inside a custom node - * @param param.type - filter by handle type 'source' or 'target' + * @param param.id - node id - optional if called inside a custom node + * @param param.handleType - filter by handle type 'source' or 'target' * @param param.handleId - filter by 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 */ export function useNodeConnections({ - type, + id, + handleType, handleId, - nodeId, onConnect, onDisconnect, }: UseNodeConnectionsParams = {}): NodeConnection[] { - const _nodeId = useNodeId(); - const currentNodeId = nodeId ?? _nodeId; + const nodeId = useNodeId(); + const currentNodeId = id ?? nodeId; if (!currentNodeId) { throw new Error(error014); @@ -50,7 +50,9 @@ export function useNodeConnections({ const connections = useStore( (state) => - state.connectionLookup.get(`${currentNodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`), + state.connectionLookup.get( + `${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}` + ), areConnectionMapsEqual ); diff --git a/packages/svelte/src/lib/hooks/useNodeConnections.ts b/packages/svelte/src/lib/hooks/useNodeConnections.ts index fbebdd92..e3c28759 100644 --- a/packages/svelte/src/lib/hooks/useNodeConnections.ts +++ b/packages/svelte/src/lib/hooks/useNodeConnections.ts @@ -1,3 +1,4 @@ +import { getContext } from 'svelte'; import { derived } from 'svelte/store'; import { areConnectionMapsEqual, @@ -7,14 +8,13 @@ import { } from '@xyflow/system'; import { useStore } from '$lib/store'; -import { getContext } from 'svelte'; const error014 = errorMessages['error014'](); type UseNodeConnectionsParams = { - type?: HandleType; + id?: string; + handleType?: HandleType; handleId?: string; - nodeId?: string; // TODO: Svelte 5 // onConnect?: (connections: Connection[]) => void; // onDisconnect?: (connections: Connection[]) => void; @@ -26,18 +26,18 @@ const initialConnections: NodeConnection[] = []; * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id. * * @public - * @param param.nodeId - node id - optional if called inside a custom node - * @param param.type - filter by handle type 'source' or 'target' + * @param param.id - node id - optional if called inside a custom node + * @param param.handleType - filter by handle type 'source' or 'target' * @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type) * @todo @param param.onConnect - gets called when a connection is established * @todo @param param.onDisconnect - gets called when a connection is removed * @returns an array with connections */ -export function useNodeConnections({ type, nodeId, handleId }: UseNodeConnectionsParams = {}) { +export function useNodeConnections({ id, handleType, handleId }: UseNodeConnectionsParams = {}) { const { edges, connectionLookup } = useStore(); - const _nodeId = getContext('svelteflow__node_id'); - const currentNodeId = nodeId ?? _nodeId; + const nodeId = getContext('svelteflow__node_id'); + const currentNodeId = id ?? nodeId; if (!currentNodeId) { throw new Error(error014); @@ -49,7 +49,7 @@ export function useNodeConnections({ type, nodeId, handleId }: UseNodeConnection [edges, connectionLookup], ([, connectionLookup], set) => { const nextConnections = connectionLookup.get( - `${currentNodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}` + `${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}` ); if (!areConnectionMapsEqual(nextConnections, prevConnections)) {