refactor(useNodeConnections): change param names
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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)) {
|
||||||
|
|||||||
Reference in New Issue
Block a user