Demo
Install
Npm:
npm install --save react-node-graph
Usage
node data should follow this structure (ripped from https://github.com/idflood/ThreeNodes.js):
var exampleGraph = "nodes": "nid":0"type":"Timer""x":89"y":82"fields":"in":"name":"reset""name":"pause""name":"max""out":"name":"out" "nid":1"type":"MathMult""x":284"y":82"fields":"in":"name":"in""name":"factor""out":"name":"out" "nid":2"type":"Vector3""x":486"y":188"fields":"in":"name":"xyz""name":"x""name":"y""name":"z""out":"name":"xyz""name":"x""name":"y""name":"z" "connections": "from_node":nid"from":"field_name""to_node":nid"to":"field_name" ;
and passed to our component
<ReactNodeGraph data=exampleGraph onNodeMove=this onNodeStartMove=this onNewConnector=this onRemoveConnector=this/>
Events:
OnNodeMove : triggered on a completed node drag
onNodeStartMove : triggered at the start of a node move
onNewConnector : triggered when a new connection is made
onRemoveConnector : triggered when a connection is removed