alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge useNodeConnections

Browse Source
This commit is contained in:
peterkogo
2025-01-08 12:59:17 +01:00
parent e62c496a77 c2f056fea5
commit 9645d885c5
27 changed files with 273 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/hooks/derivedWarning.svelte.ts
+2 -2
View File
@@ -9,7 +9,7 @@ import { getContext } from 'svelte';
* @param functionName - The name of the function that is being called
* @param force - If true, the warning will be shown regardless if child of <SvelteFlowFlow />
*/
export function derivedWarning(functionName: string, force?: boolean) {
export function derivedWarning(functionName: string) {
const storeContext = getContext<StoreContext>(key);
if (!storeContext) {
@@ -18,7 +18,7 @@ export function derivedWarning(functionName: string, force?: boolean) {
);
}
if ((force || storeContext.provider) && !$effect.tracking()) {
if (storeContext.provider && typeof window === 'object' && !$effect.tracking()) {
console.warn(`Use $derived(${functionName}()) to receive updates when values change.`);
console.trace(functionName);
}
packages/svelte/src/lib/hooks/useHandleConnections.svelte.ts
-52
View File
@@ -1,52 +0,0 @@
import { areConnectionMapsEqual, type HandleConnection, type HandleType } from '@xyflow/system';
import { useStore } from '$lib/store';
import { getContext } from 'svelte';
export type useHandleConnectionsParams = {
type: HandleType;
nodeId?: string;
id?: string | null;
};
const initialConnections: HandleConnection[] = [];
/**
* Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
*
* @public
* @param param.nodeId
* @param param.type - handle type 'source' or 'target'
* @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: _nodeId,
id = null
}: useHandleConnectionsParams) {
const { edges, connectionLookup } = $derived(useStore());
const contextNodeId = getContext<string>('svelteflow__node_id');
const nodeId = _nodeId ?? contextNodeId;
let prevConnections: Map<string, HandleConnection> | undefined = new Map();
let connectionsArray: HandleConnection[] = initialConnections;
const connections = $derived.by(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
edges;
const nextConnections = connectionLookup.get(`${nodeId}-${type}-${id || null}`);
if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
prevConnections = nextConnections;
connectionsArray = Array.from(nextConnections?.values() || initialConnections);
}
return connectionsArray;
});
return {
get current() {
return connections;
}
};
}
packages/svelte/src/lib/hooks/useNodeConnections.svelte.ts
+59
View File
@@ -0,0 +1,59 @@
import { areConnectionMapsEqual, type NodeConnection, type HandleType } from '@xyflow/system';
import { useStore } from '$lib/store';
import { getContext } from 'svelte';
type UseNodeConnectionsParams = {
type?: HandleType;
handleId?: string;
nodeId?: string;
// TODO: Svelte 5
// onConnect?: (connections: Connection[]) => void;
// onDisconnect?: (connections: Connection[]) => void;
};
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.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: _nodeId,
handleId
}: UseNodeConnectionsParams = {}) {
const { edges, connectionLookup } = $derived(useStore());
const contextNodeId = getContext<string>('svelteflow__node_id');
const nodeId = _nodeId ?? contextNodeId;
let prevConnections: Map<string, NodeConnection> | undefined = new Map();
let connectionsArray: NodeConnection[] = initialConnections;
const connections = $derived.by(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
edges;
const nextConnections = connectionLookup.get(
`${nodeId}-${type}${handleId ? `-${handleId}` : ''}`
);
if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
prevConnections = nextConnections;
connectionsArray = Array.from(nextConnections?.values() || initialConnections);
}
return connectionsArray;
});
return {
get current() {
return connections;
}
};
}