lightsinthesky / react-node-graph

React node graph component

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={(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

react-node-graph's Issues

Uncaught TypeError: Cannot read property 'bool' of undefined

Hello, I tried to use this module on a new, clean, React project, and I got the following error just by adding the import ReactNodeGraph from 'react-node-graph' line to my App.js file:

So, this doesn't work with the newest version of React?

I'm working with:
Windows 10
React: 16.8.6,
node: 5.6.0

Thank you!

Old react dependency

Old react and reactdom dependencies are interfering with development with newer packages as react is on version 16. Will this package be updated?

update react-dom

Hey, cool demo. I am looking for something along these lines for a simple demo. However, I am facing with an error related with reactdom
Could be caused by a version change

Any suggestions?

Style dependent position calculations

Hello,

are you going to update position calculations to be independent on style, or maybe configurable with props?

React can't find 'nid

Hello and good day. I've installed your library and trying to run your example at github. React gives me an issue 'nid' is not defined no-undef. What can be the problem?

My code

import React, { Component } from 'react';
import ReactNodeGraph from 'react-node-graph';

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"},
]
};

class DrawGraph1 extends Component
{
render()
{
return (
<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)}
/>
);

}

}

export default DrawGraph1;

License

Can you please add a LICENSE file or otherwise clarify the licensing of this project (even if it's just all rights reserved).
I'm interested in extending/contributing if this project is available under a permissive license.