Vis js - manipulation mode event on Network Graph

Question

I'm working with node and edge manipulation in the network graph in vis.js. How do I best go about disabling the physics when I enter manipulation mode to create, edit and delete nodes?

I have created a network like so:

 var nodes = new vis.DataSet([
 {id: 1, label: 'Node 1'},
 {id: 2, label: 'Node 2'},
 {id: 3, label: 'Node 3'},
 {id: 4, label: 'Node 4'},
 {id: 5, label: 'Node 5'}
 ]);
 // create an array with edges
 var edges = new vis.DataSet([
 {from: 1, to: 3},
 {from: 1, to: 2},
 {from: 2, to: 4},
 {from: 2, to: 5},
 {from: 3, to: 3}
 ]);
 var options = {
 interaction: {
 hover: true,
 navigationButtons: true
 },
 manipulation: {
 enabled: true,
 addNode: function(nodeData, callback) {
 network.setOptions({
 physics: false
 });
 callback(nodeData);
 },
 addEdge: function(edgeData, callback) {
 network.setOptions({
 physics: false
 });
 callback(edgeData);
 },
 editNode: function(nodeData, callback) {
 network.setOptions({
 physics: false
 });
 callback(nodeData);
 },
 editEdge: function(edgeData, callback) {
 callback(edgeData);
 },
 }
 },
 layout: {
 improvedLayout: true
 },
 nodes: {
 shape: "dot",
 font: {
 size: 8
 },
 size: 5,
 },
 edges: {
 smooth: false
 },
 physics: {
 barnesHut: {
 springLength: 40
 },
 minVelocity: 0.08,
 timestep: 0.4
 }
};
 // create a network
 var container = document.getElementById('mynetwork');
 var data = {
 nodes: nodes,
 edges: edges
 };
 var network = new vis.Network(container, data, options);

I see there are Manipulation methods that can be called without the GUI on vis.js network docs. I can't spot an 'editModeEnabled' event. I was hoping to write something like

 network.on('editModeEnabled',function(params){
 //...disable physics
 });

Answer 1

How do I best go about disabling the physics

You can iterate over all nodes in your dataset and set them to fixed:

When [fixed is] defined as an object, movement in either X or Y direction can be disabled. (http://visjs.org/docs/network/nodes.html)

// freeze your nodes
const updates = nodes.get().map(node => {
 ...node,
 fixed: { x: true, y: true }
});
// pass updates to your dataset
nodes.update(updates);

For a helpful discussion on "disabling" physics and setting nodes to fixed see this github issue, it also discusses how to fix nodes after the drag event (also see this this issue, note that fixed was formerly named "allowedToMove").

I can't spot an 'editModeEnabled' event.

While vis.js informs you e.g. about drag-start/stop events, it does not, unfortunately, inform you about going or being in "manipulation" mode. A workaround is to check the dom for class names being set, e.g. check for the presence of the back button (which only appears in manipulation mode).

container.getElementsByClassName('vis-button vis-back').length > 0;

Further, you could stay informed about changes by using a mutation observer for your container.

enter image description here