@anser/react-node-graph v1.0.0

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":[
    {"nodeId":0,"type":"Timer", position: { "x":89,"y":82 },"connectors":{"in":[{"connectionId":"reset", "rank": 0},{"connectionId":"pause", "rank": 1},{"connectionId":"max", "rank": 2}],"out":[{"connectionId":"out", "rank": 0}]}},
    {"nodeId":1,"type":"MathMult", position: { "x":284,"y":82 },"connectors":{"in":[{"connectionId":"in", "rank": 0},{"connectionId":"factor", "rank": 1}],"out":[{"connectionId":"out", "rank": 0}]}},
    {"nodeId":2,"type":"Vector3", position: { "x":486,"y":188 },"connectors":{"in":[{"connectionId":"xyz", "rank": 0},{"connectionId":"x", "rank": 1},{"connectionId":"y", "rank": 2},{"connectionId":"z", "rank": 3}],"out":[{"connectionId":"xyz", "rank": 0},{"connectionId":"x", "rank": 1},{"connectionId":"y", "rank": 2},{"connectionId":"z", "rank": 4}]}}
  ],
  "connections":[
    {"from_node":nodeId,"from":"field_name","to_node":nodeId,"to":"field_name"},
  ]
};

and passed to our component

<ReactNodeGraph 
            data={exampleGraph} 
            onNodeMove={(nodeId, pos)=>this.onNodeMove(nodeId, pos)}
            onNodeStartMove={(nodeId)=>this.onNodeStartMove(nodeId)}
            onNewConnector={(n1,o,n2,i)=>this.onNewConnector(n1,o,n2,i)} 
            onRemoveConnector={(connector)=>this.onRemoveConnector(connector)}
/>

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