-
Notifications
You must be signed in to change notification settings - Fork 173
/
NodesCanvas.js
61 lines (55 loc) 路 1.71 KB
/
NodesCanvas.js
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
import React from 'react';
import PropTypes from 'prop-types';
import { NodeType } from '../../shared/Types';
import DiagramNode from '../DiagramNode/DiagramNode';
import updateNodeCoordinates from './updateNodeCoordinates';
/**
* Handles the nodes' events and business logic
*/
const NodesCanvas = (props) => {
const {
nodes, onPortRegister, onNodeRegister, onNodeRemove, onDragNewSegment, onSegmentFail, onSegmentConnect, onChange,
} = props;
// when a node item update its position updates it within the nodes array
const onNodePositionChange = (nodeId, newCoordinates) => {
if (onChange) {
const nextNodes = updateNodeCoordinates(nodeId, newCoordinates, nodes);
onChange(nextNodes);
}
};
return nodes && nodes.length > 0 && nodes.map(({ data, ...node }) => (
<DiagramNode
{...node}
data={data}
onPositionChange={onNodePositionChange}
onPortRegister={onPortRegister}
onNodeRemove={onNodeRemove}
onDragNewSegment={onDragNewSegment}
onSegmentFail={onSegmentFail}
onSegmentConnect={onSegmentConnect}
onMount={onNodeRegister}
key={node.id}
/>
));
};
NodesCanvas.propTypes = {
nodes: PropTypes.arrayOf(NodeType),
onChange: PropTypes.func,
onNodeRegister: PropTypes.func,
onPortRegister: PropTypes.func,
onNodeRemove: PropTypes.func,
onDragNewSegment: PropTypes.func,
onSegmentFail: PropTypes.func,
onSegmentConnect: PropTypes.func,
};
NodesCanvas.defaultProps = {
nodes: [],
onChange: undefined,
onNodeRegister: undefined,
onPortRegister: undefined,
onNodeRemove: undefined,
onDragNewSegment: undefined,
onSegmentFail: undefined,
onSegmentConnect: undefined,
};
export default React.memo(NodesCanvas);