-
-
Notifications
You must be signed in to change notification settings - Fork 68
/
demo.html
96 lines (77 loc) · 2.26 KB
/
demo.html
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
<!DOCTYPE html>
<html>
<!-- Use `npm run demo` to view the demo -->
<head>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/cytoscape/dist/cytoscape.min.js"></script>
<script src="node_modules/prop-types/prop-types.js"></script>
<script src="dist/react-cytoscape.umd.js"></script>
<title>react-cytoscapejs demo</title>
<style>
body {
font: 14pt helvetica neue, helvetica, sans-serif;
padding: 0;
margin: 1em;
}
#root {
display: inline-block;
}
#props {
font-family: monospace;
width: 400px;
height: 400px;
margin-top: 16px;
}
</style>
</head>
<body>
<h1>react-cytoscapejs demo</h1>
<div id="root"></div>
<textarea id="props"></textarea>
<button id="update">Render</button>
<script>
window.addEventListener('DOMContentLoaded', function () {
const exampleProps = {
id: 'cy',
className: 'foo bar',
style: {
'border': '1px solid #ccc',
'width': '400px',
'height': '400px'
},
global: 'cy',
elements: [
{ data: { id: 'a', label: 'apple' }, position: { x: 0, y: 0 } },
{ data: { id: 'b', label: 'banana' }, position: { x: 100, y: 0 } },
{ data: { id: 'c', label: 'cherry' }, position: { x: 200, y: 0 } }
],
layout: {
name: 'preset'
}
};
class TestComponent extends React.Component {
constructor(props) {
super(props);
props.setStateRef(this.setState.bind(this));
this.state = exampleProps;
}
render() {
return React.createElement(ReactCytoscape, this.state);
}
}
const textBox = document.getElementById('props');
const btn = document.getElementById('update');
btn.addEventListener('click', () => {
update(JSON.parse(textBox.value));
});
let update;
ReactDOM.render(
React.createElement(TestComponent, { setStateRef: ref => update = ref }),
document.getElementById('root')
);
textBox.value = JSON.stringify(exampleProps, null, 2);
});
</script>
</body>
</html>