refactor(useNodeConnections): change param names

This commit is contained in:
moklick
2025-01-09 16:08:52 +01:00
parent 7dac54ff44
commit 78f9d4e645
8 changed files with 28 additions and 26 deletions
@@ -12,7 +12,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
[nodeId] [nodeId]
); );
const connections = useNodeConnections({ const connections = useNodeConnections({
type: handleProps.type, handleType: handleProps.type,
handleId: handleProps.id, handleId: handleProps.id,
onConnect, onConnect,
onDisconnect, onDisconnect,
@@ -15,7 +15,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
[nodeId] [nodeId]
); );
const connections = useNodeConnections({ const connections = useNodeConnections({
type: handleProps.type, handleType: handleProps.type,
handleId: handleProps.id, handleId: handleProps.id,
onConnect, onConnect,
onDisconnect, onDisconnect,
@@ -4,7 +4,7 @@ import { isTextNode, type MyNode } from '.';
function ResultNode() { function ResultNode() {
const connections = useNodeConnections({ const connections = useNodeConnections({
type: 'target', handleType: 'target',
}); });
const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source)); const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source));
const textNodes = nodesData.filter(isTextNode); const textNodes = nodesData.filter(isTextNode);
@@ -5,7 +5,7 @@ import { isTextNode, type TextNode, type MyNode } from '.';
function UppercaseNode({ id }: NodeProps) { function UppercaseNode({ id }: NodeProps) {
const { updateNodeData } = useReactFlow(); const { updateNodeData } = useReactFlow();
const connections = useNodeConnections({ const connections = useNodeConnections({
type: 'target', handleType: 'target',
}); });
const nodesData = useNodesData<MyNode>(connections[0]?.source); const nodesData = useNodesData<MyNode>(connections[0]?.source);
const textNode = isTextNode(nodesData) ? nodesData : null; const textNode = isTextNode(nodesData) ? nodesData : null;
@@ -14,8 +14,8 @@
$$restProps; $$restProps;
const connections = useNodeConnections({ const connections = useNodeConnections({
nodeId: id, id: id,
type: 'target' handleType: 'target'
}); });
$: nodeData = useNodesData<MyNode>($connections.map((connection) => connection.source)); $: nodeData = useNodesData<MyNode>($connections.map((connection) => connection.source));
@@ -17,8 +17,8 @@
const { updateNodeData } = useSvelteFlow(); const { updateNodeData } = useSvelteFlow();
const connections = useNodeConnections({ const connections = useNodeConnections({
nodeId: id, id: id,
type: 'target' handleType: 'target'
}); });
$: nodeData = useNodesData<MyNode>($connections[0]?.source); $: nodeData = useNodesData<MyNode>($connections[0]?.source);
+11 -9
View File
@@ -14,9 +14,9 @@ import { useNodeId } from '../contexts/NodeIdContext';
const error014 = errorMessages['error014'](); const error014 = errorMessages['error014']();
type UseNodeConnectionsParams = { type UseNodeConnectionsParams = {
type?: HandleType; id?: string;
handleType?: HandleType;
handleId?: string; handleId?: string;
nodeId?: string;
onConnect?: (connections: Connection[]) => void; onConnect?: (connections: Connection[]) => void;
onDisconnect?: (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. * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
* *
* @public * @public
* @param param.nodeId - node id - optional if called inside a custom node * @param param.id - node id - optional if called inside a custom node
* @param param.type - filter by handle type 'source' or 'target' * @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.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.onConnect - gets called when a connection is established
* @param param.onDisconnect - gets called when a connection is removed * @param param.onDisconnect - gets called when a connection is removed
* @returns an array with connections * @returns an array with connections
*/ */
export function useNodeConnections({ export function useNodeConnections({
type, id,
handleType,
handleId, handleId,
nodeId,
onConnect, onConnect,
onDisconnect, onDisconnect,
}: UseNodeConnectionsParams = {}): NodeConnection[] { }: UseNodeConnectionsParams = {}): NodeConnection[] {
const _nodeId = useNodeId(); const nodeId = useNodeId();
const currentNodeId = nodeId ?? _nodeId; const currentNodeId = id ?? nodeId;
if (!currentNodeId) { if (!currentNodeId) {
throw new Error(error014); throw new Error(error014);
@@ -50,7 +50,9 @@ export function useNodeConnections({
const connections = useStore( const connections = useStore(
(state) => (state) =>
state.connectionLookup.get(`${currentNodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`), state.connectionLookup.get(
`${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
),
areConnectionMapsEqual areConnectionMapsEqual
); );
@@ -1,3 +1,4 @@
import { getContext } from 'svelte';
import { derived } from 'svelte/store'; import { derived } from 'svelte/store';
import { import {
areConnectionMapsEqual, areConnectionMapsEqual,
@@ -7,14 +8,13 @@ import {
} from '@xyflow/system'; } from '@xyflow/system';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
import { getContext } from 'svelte';
const error014 = errorMessages['error014'](); const error014 = errorMessages['error014']();
type UseNodeConnectionsParams = { type UseNodeConnectionsParams = {
type?: HandleType; id?: string;
handleType?: HandleType;
handleId?: string; handleId?: string;
nodeId?: string;
// TODO: Svelte 5 // TODO: Svelte 5
// onConnect?: (connections: Connection[]) => void; // onConnect?: (connections: Connection[]) => void;
// onDisconnect?: (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. * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
* *
* @public * @public
* @param param.nodeId - node id - optional if called inside a custom node * @param param.id - node id - optional if called inside a custom node
* @param param.type - filter by handle type 'source' or 'target' * @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.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.onConnect - gets called when a connection is established
* @todo @param param.onDisconnect - gets called when a connection is removed * @todo @param param.onDisconnect - gets called when a connection is removed
* @returns an array with connections * @returns an array with connections
*/ */
export function useNodeConnections({ type, nodeId, handleId }: UseNodeConnectionsParams = {}) { export function useNodeConnections({ id, handleType, handleId }: UseNodeConnectionsParams = {}) {
const { edges, connectionLookup } = useStore(); const { edges, connectionLookup } = useStore();
const _nodeId = getContext<string>('svelteflow__node_id'); const nodeId = getContext<string>('svelteflow__node_id');
const currentNodeId = nodeId ?? _nodeId; const currentNodeId = id ?? nodeId;
if (!currentNodeId) { if (!currentNodeId) {
throw new Error(error014); throw new Error(error014);
@@ -49,7 +49,7 @@ export function useNodeConnections({ type, nodeId, handleId }: UseNodeConnection
[edges, connectionLookup], [edges, connectionLookup],
([, connectionLookup], set) => { ([, connectionLookup], set) => {
const nextConnections = connectionLookup.get( const nextConnections = connectionLookup.get(
`${currentNodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}` `${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
); );
if (!areConnectionMapsEqual(nextConnections, prevConnections)) { if (!areConnectionMapsEqual(nextConnections, prevConnections)) {