user-interfacevis.jsvis.js-network

How to replace manipulation GUI with my own in vis.js


My question is regarding the default manipulation user interface in vis.js:

Image of the default graphical user interface

I would like to replace the existing manipulation user interface in vis.js with my own controls so I will be able to right click the network to add or remove nodes and edges.

I can see from this issue that in 2014 it wasn't possible but it it might have been possible to hack something together (though the links in there doesn't work anymore). My hope is that in the last 5 years this has been made possible without the need to fork the project.

Question:
Is it possible to disable the existing user interface and connect my own controls?


Solution

  • Short answer yes, you can see it in action here: https://thomaash.github.io/me/#/canvas and in code here https://github.com/Thomaash/me/blob/master/src/components/Vis.vue (it's a part of quite big Vue.js app).

    It's all in the documentation. The methods to trigger manipulation action from your GUI are documented here: https://visjs.github.io/vis-network/docs/network/#methodManipulation . And here: https://visjs.github.io/vis-network/docs/network/manipulation.html you have the docs to the callbacks that allow you to react to the user placing the node or connecting nodes with an edge. If you want to react to events (for example oncontext from your question) you can find the docs here: https://visjs.github.io/vis-network/docs/network/#Events .