Add Multiple Node Box Selector On The Canvas Of Visjs Network Graph In Reactjs

Examples Here is a jQuery example of canvas drawing on the network to select multiple nodes: http://jsfiddle.net/kbj54bas/ (or Github) How can this be translated to React? Sandbo

Solution 1:

I threw this together using the JSSampler example you shared.

Solution

You just needed to use the ref to connect the Network and canvas. Everything else pretty much fell into place. https://codesandbox.io/s/5m2vv1yo04

Cleanup suggestions

• move global variables into react class
• split VisJS highlight code into own file

Solution 2:

vis.js docs reveal that the Network object has methods exposed (http://visjs.org/docs/network). react-graph-vis shows that you can get access to these methods by passing in a callback to the getNetwork prop of Graph. That callback will be invoked with a reference to the underlying Network object at which point you should assign that argument to a class property as described by @Irecknagel in the Github issue.

Adding a ref to the Graph component as you are doing wraps the Component. However, it will not necessarily provide a reference to the Network because the Network is an object constructed by the Graph component.

In regards to adding event listeners, the react-graph-vis demo source code might help. They define their event listeners as an object and then pass it in as a prop like so.

// in render or elsewhere depending on scoping needsconst events = {
  select: function(event) {
    var { nodes, edges } = event;
    console.log("Selected nodes:");
    console.log(nodes);
    console.log("Selected edges:");
    console.log(edges);
  }
};
// return of render<Graphgraph={graph}options={options}events={events}style={{height: "640px" }} />

Due to my lack of familiarity with the packages, I'm not sure what the end goal of calling .getContext("2d") is. I'm not sure if your defined 'end goals' are within the scope of the packages you're using.