<!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>