1.1.1 • Published 6 years ago

react-node-graph v1.1.1

Weekly downloads
10
License
MIT
Repository
github
Last release
6 years ago

Demo

IMAGE ALT TEXT

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={(nid, pos)=>this.onNodeMove(nid, pos)}
            onNodeStartMove={(nid)=>this.onNodeStartMove(nid)}
            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

1.1.1-next

6 years ago

1.1.1

8 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago