This repository has been archived by the owner on Jan 30, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Network.js
126 lines (106 loc) · 2.74 KB
/
Network.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { PureComponent, createRef } from 'react';
import PropTypes from 'prop-types';
import { DataSet, Network } from 'vis/dist/vis-network.min';
const defaultStyles = {
position: 'relative',
width: '100%',
height: '100%',
overflow: 'hidden'
};
const eventPattern = /^on([A-Z])(.*)$/;
export default class VisNetwork extends PureComponent {
visContainerRef = createRef();
edges = new DataSet([]);
nodes = new DataSet([]);
state = {
edges: this.edges,
nodes: this.nodes
};
componentDidMount() {
const { options } = this.props;
this.network = new Network(
this.visContainerRef.current,
{
edges: this.edges,
nodes: this.nodes
},
options
);
Object.keys(this.props)
.filter(prop => prop.match(eventPattern))
.forEach(prop => {
const event = prop.replace(
eventPattern,
(match, p1, rest) => p1.toLowerCase() + rest
);
// Props controlled by developer
// eslint-disable-next-line security/detect-object-injection
this.network.on(event, this.props[prop]);
});
this.setState({
network: this.network
});
}
componentWillUnmount() {
this.network.destroy();
}
componentDidUpdate(prevProps) {
const { options, scale, position } = this.props;
const network = this.network;
/* istanbul ignore next */
if (options !== prevProps.options) {
if (options.edges) {
// Avoid blended nested object properties from throwing errors.
// TODO: Fix this up-stream, in vis.js
['forceDirection', 'roundness', 'type'].forEach(prop => {
delete options.edges[prop];
});
}
network.setOptions(options);
}
if (scale !== prevProps.scale || position !== prevProps.position) {
network.moveTo({
scale: scale || network.getScale(),
position: position || network.getViewPosition()
});
}
}
render() {
const { style, children } = this.props;
const appliedStyles = {
...defaultStyles,
...style
};
const extendedChildren = React.Children.map(children, child =>
React.cloneElement(child, {
vis: this.state
})
);
return (
<>
<div
ref={this.visContainerRef}
className={this.props.className}
style={appliedStyles}
>
{extendedChildren}
</div>
</>
);
}
static defaultProps = {
options: {},
style: {}
};
static propTypes = {
children: PropTypes.node,
options: PropTypes.object,
scale: PropTypes.number,
position: PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number
}),
style: PropTypes.object,
className: PropTypes.string
};
}