|
1 | | -import type { ComputedRef, MaybeRefOrGetter } from 'vue' |
2 | | -import { computed, ref, toRef, toValue, watch } from 'vue' |
3 | | -import type { HandleConnection, HandleElement, HandleType } from '../types' |
| 1 | +import type { MaybeRefOrGetter } from 'vue' |
| 2 | +import { computed, ref, toValue, watch } from 'vue' |
| 3 | +import type { HandleType, NodeConnection } from '../types' |
| 4 | +import { areConnectionMapsEqual, handleConnectionChange } from '../utils' |
4 | 5 | import { useNodeId } from './useNodeId' |
5 | 6 | import { useVueFlow } from './useVueFlow' |
6 | 7 |
|
7 | 8 | export interface UseNodeConnectionsParams { |
8 | | - type: MaybeRefOrGetter<HandleType> |
| 9 | + type?: MaybeRefOrGetter<HandleType> |
| 10 | + handleId?: MaybeRefOrGetter<string | null> |
9 | 11 | nodeId?: MaybeRefOrGetter<string | null> |
10 | | - onConnect?: (connections: HandleConnection[]) => void |
11 | | - onDisconnect?: (connections: HandleConnection[]) => void |
| 12 | + onConnect?: (connections: NodeConnection[]) => void |
| 13 | + onDisconnect?: (connections: NodeConnection[]) => void |
12 | 14 | } |
13 | 15 |
|
14 | 16 | /** |
15 | | - * Composable that returns existing connections of a node by handle type. |
16 | | - * This is useful when you want to get all connections of a node by a specific handle type. |
| 17 | + * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id. |
17 | 18 | * |
18 | 19 | * @public |
19 | 20 | * @param params |
20 | 21 | * @param params.type - handle type `source` or `target` |
21 | 22 | * @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used |
| 23 | + * @param params.handleId - the handle id (this is required if the node has multiple handles of the same type) |
22 | 24 | * @param params.onConnect - gets called when a connection is created |
23 | 25 | * @param params.onDisconnect - gets called when a connection is removed |
24 | 26 | * |
25 | 27 | * @returns An array of connections |
26 | 28 | */ |
27 | | -export function useNodeConnections(params: UseNodeConnectionsParams): ComputedRef<HandleConnection[]> { |
28 | | - const { type, nodeId, onConnect, onDisconnect } = params |
| 29 | +export function useNodeConnections(params: UseNodeConnectionsParams = {}) { |
| 30 | + const { type, handleId, nodeId, onConnect, onDisconnect } = params |
29 | 31 |
|
30 | | - const { connectionLookup, findNode } = useVueFlow() |
| 32 | + const { connectionLookup } = useVueFlow() |
31 | 33 |
|
32 | 34 | const _nodeId = useNodeId() |
33 | 35 |
|
34 | | - const currentNodeId = toRef(() => toValue(nodeId) ?? _nodeId) |
| 36 | + const prevConnections = ref<Map<string, NodeConnection> | null>(null) |
35 | 37 |
|
36 | | - const handleType = toRef(() => toValue(type)) |
| 38 | + const connections = ref<Map<string, NodeConnection>>() |
37 | 39 |
|
38 | | - const node = computed(() => findNode(currentNodeId.value)) |
| 40 | + const lookupKey = computed(() => { |
| 41 | + const currNodeId = toValue(nodeId) ?? _nodeId |
| 42 | + const handleType = toValue(type) |
| 43 | + const currHandleId = toValue(handleId) |
39 | 44 |
|
40 | | - const handleIds = computed(() => { |
41 | | - if (!node.value) { |
42 | | - return [] |
43 | | - } |
44 | | - |
45 | | - const handles: HandleElement['id'][] = [] |
46 | | - for (const handle of node.value?.handleBounds?.[handleType.value] ?? []) { |
47 | | - handles.push(handle.id) |
48 | | - } |
49 | | - |
50 | | - return handles |
51 | | - }) |
52 | | - |
53 | | - const prevConnections = ref<Map<string, HandleConnection> | null>(null) |
54 | | - |
55 | | - const connectionsFromLookup = computed(() => { |
56 | | - const nodeConnections = [] as Map<string, HandleConnection>[] |
57 | | - |
58 | | - for (const handleId of handleIds.value) { |
59 | | - const connectionMap = connectionLookup.value.get(`${currentNodeId.value}-${handleType.value}-${handleId}`) |
60 | | - if (connectionMap) { |
61 | | - nodeConnections.push(connectionMap) |
62 | | - } |
63 | | - } |
64 | | - |
65 | | - return nodeConnections |
| 45 | + return `${currNodeId}${handleType ? (currHandleId ? `-${handleType}-${currHandleId}` : `-${handleType}`) : ''}` |
66 | 46 | }) |
67 | 47 |
|
68 | 48 | watch( |
69 | | - [connectionsFromLookup, () => typeof onConnect !== 'undefined', () => typeof onDisconnect !== 'undefined'], |
70 | | - ([currentConnections]) => { |
71 | | - if (!currentConnections) { |
| 49 | + () => connectionLookup.value.get(lookupKey.value), |
| 50 | + (nextConnections) => { |
| 51 | + if (areConnectionMapsEqual(connections.value, nextConnections)) { |
72 | 52 | return |
73 | 53 | } |
74 | 54 |
|
75 | | - const newConnections = new Map<string, HandleConnection>() |
76 | | - |
77 | | - for (const connectionMap of currentConnections) { |
78 | | - for (const [key, connection] of connectionMap) { |
79 | | - newConnections.set(key, connection) |
80 | | - } |
81 | | - } |
82 | | - |
83 | | - if (!prevConnections.value) { |
84 | | - prevConnections.value = new Map(newConnections) |
85 | | - return |
86 | | - } |
87 | | - |
88 | | - const prevConnectionsValue = prevConnections.value |
89 | | - |
90 | | - const addedConnections = Array.from(newConnections.keys()).filter((key) => !prevConnectionsValue.has(key)) |
91 | | - |
92 | | - const removedConnections = Array.from(prevConnectionsValue.keys()).filter((key) => !newConnections.has(key)) |
93 | | - |
94 | | - if (addedConnections.length && onConnect) { |
95 | | - const added = addedConnections.map((key) => newConnections.get(key)!) |
96 | | - onConnect(added) |
97 | | - } |
| 55 | + connections.value = nextConnections |
| 56 | + }, |
| 57 | + { immediate: true }, |
| 58 | + ) |
98 | 59 |
|
99 | | - if (removedConnections.length && onDisconnect) { |
100 | | - const removed = removedConnections.map((key) => prevConnectionsValue.get(key)!) |
101 | | - onDisconnect(removed) |
| 60 | + watch( |
| 61 | + [connections, () => typeof onConnect !== 'undefined', () => typeof onDisconnect !== 'undefined'], |
| 62 | + ([currentConnections = new Map<string, NodeConnection>()]) => { |
| 63 | + if (prevConnections.value && prevConnections.value !== currentConnections) { |
| 64 | + handleConnectionChange(prevConnections.value, currentConnections, onDisconnect) |
| 65 | + handleConnectionChange(currentConnections, prevConnections.value, onConnect) |
102 | 66 | } |
103 | 67 |
|
104 | | - prevConnections.value = new Map(newConnections) |
| 68 | + prevConnections.value = currentConnections |
105 | 69 | }, |
106 | 70 | { immediate: true }, |
107 | 71 | ) |
108 | 72 |
|
109 | 73 | return computed(() => { |
110 | | - const connections = [] as HandleConnection[] |
111 | | - |
112 | | - for (const connectionMap of connectionsFromLookup.value) { |
113 | | - for (const connection of connectionMap.values()) { |
114 | | - connections.push(connection) |
115 | | - } |
| 74 | + if (!connections.value) { |
| 75 | + return [] |
116 | 76 | } |
117 | 77 |
|
118 | | - return connections |
| 78 | + return Array.from(connections.value.values()) |
119 | 79 | }) |
120 | 80 | } |
0 commit comments