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.

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