react-node-graph

    1.1.1 • Public • Published

    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

    Install

    npm i react-node-graph

    DownloadsWeekly Downloads

    24

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • andrewlits
    • flysonic10