-
Notifications
You must be signed in to change notification settings - Fork 45
/
useHandleChange.tsx
83 lines (76 loc) · 3.5 KB
/
useHandleChange.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/*******************************************************************************
* Copyright (c) 2023 Obeo.
* This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v2.0
* which accompanies this distribution, and is available at
* https://www.eclipse.org/legal/epl-2.0/
*
* SPDX-License-Identifier: EPL-2.0
*
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
import { Node, NodeChange, NodePositionChange, getConnectedEdges, useReactFlow } from 'reactflow';
import { EdgeData, NodeData } from '../DiagramRenderer.types';
import { getEdgeParametersWhileMoving, getUpdatedConnectionHandles } from '../edge/EdgeLayout';
import { DiagramNodeType } from '../node/NodeTypes.types';
import { ConnectionHandle } from './ConnectionHandles.types';
import { UseHandleChangeValue } from './useHandleChange.types';
const isNodePositionChange = (change: NodeChange): change is NodePositionChange =>
change.type === 'position' && typeof change.dragging === 'boolean' && change.dragging;
export const useHandleChange = (): UseHandleChangeValue => {
const { getEdges } = useReactFlow<NodeData, EdgeData>();
const applyHandleChange = (
changes: NodeChange[],
nodes: Node<NodeData, DiagramNodeType>[]
): Node<NodeData, DiagramNodeType>[] => {
return nodes.map((node) => {
const nodeDraggingChange: NodePositionChange | undefined = changes
.filter(isNodePositionChange)
.find((change) => change.id === node.id);
if (nodeDraggingChange) {
const connectedEdges = getConnectedEdges([node], getEdges());
connectedEdges.forEach((edge) => {
const { sourceHandle, targetHandle } = edge;
const sourceNode = nodes.find((node) => node.id === edge.sourceNode?.id);
const targetNode = nodes.find((node) => node.id === edge.targetNode?.id);
if (sourceNode && targetNode && sourceHandle && targetHandle) {
const { sourcePosition, targetPosition } = getEdgeParametersWhileMoving(
nodeDraggingChange,
sourceNode,
targetNode,
nodes
);
const nodeSourceConnectionHandle: ConnectionHandle | undefined = sourceNode.data.connectionHandles.find(
(connectionHandle: ConnectionHandle) => connectionHandle.id === sourceHandle
);
const nodeTargetConnectionHandle: ConnectionHandle | undefined = targetNode.data.connectionHandles.find(
(connectionHandle: ConnectionHandle) => connectionHandle.id === targetHandle
);
if (
nodeSourceConnectionHandle?.position !== sourcePosition &&
nodeTargetConnectionHandle?.position !== targetPosition
) {
const { sourceConnectionHandles, targetConnectionHandles } = getUpdatedConnectionHandles(
sourceNode,
targetNode,
sourcePosition,
targetPosition,
sourceHandle,
targetHandle
);
if (node.id === sourceNode.id) {
node.data = { ...node.data, connectionHandles: sourceConnectionHandles };
}
if (node.id === targetNode.id) {
node.data = { ...node.data, connectionHandles: targetConnectionHandles };
}
}
}
});
}
return node;
});
};
return { applyHandleChange };
};