add multiple node box selector on the canvas of VisJS network graph in ReactJS

Question

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?

Sandbox

I setup react-graph-vis(source) in this sandbox, and added a ref to the Graph: https://codesandbox.io/s/5m2vv1yo04

Attempts

• having trouble adding eventLisnters to the Graph/canvas using a React.createRef() on the ''
• having trouble using this method on the canvas: .getContext("2d")
• I feel I don't understand how to access the react-graph-vis methods mentioned here

End Goal

• draw box selector on left-click + mouse-drag
• on mouseup, select nodes in the box drawn on the canvas, and clear drawing

Maybe I'm going in the wrong direction with this.

Sublett

Answer 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

Lysimachus

Answer 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 needs
const 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
<Graph graph={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.

Paul

Ah, okay. Maybe we are adding eventListeners to the wrong element. 🤔 The Network events of startDrag, Dragging, and endDrag are ignored for turning off options.interactions.dragView for when drawing on the canvas. The .getContext("2d") is added in the linked example for drawing the selection box. – Sublett