Dynamic change of the "fixed" node option and node coordinates

[fedorov]

I am not happy with the algorithm used for positioning of nodes/edges, but I do like the interaction, presentation, and the capability to define the network programmatically and control from JS.

What I am trying to do is to arrange nodes in a way that I like, manually, and then fix the positions. Sort of a visual network editor, but I am not satistfied with the currently available solutions like draw.io.

So what I would like to do is to start with a fixed configuration, observe dragStart event, unset "fixed", observe pointer position and update node x,y as the user drags the cursor. Then on dragEnd, I would like to toggle back fixed option.

I looked at the documentation, and it explicitly says fixed, x and y cannot be edited. Is this correct?

[AlexDM0]

Hi,

There are a lot of people using vis this way, its definitely possible.

You could also disable the physics if you're not using dynamic edges. Where in the docs did you find the explicit statement that this is not possible?

If you don't like the physics, don't use them.

Regards,

Alex

[fedorov]

here http://visjs.org/docs/network/manipulation.html it says for controlNodeStyle "All fields described in the nodes module are allowed except obviously for id, x, y and fixed."

I think I am not approaching the problem from the right angle. Let me look some more, I actually have not even tried to disable physics. If you can point me to a specific most relevant example, this would be helpful!

On a related note, do you know if anyone came up with a network editor based on vis.js? This would be a great product I think.

[felixhayashi]

Hi @fedorov

I once was struggling with this too and asked many questions at this repo and Alex answered these and other user questions that relate to your topic in deep in the issues I list further below.

In summary, you should probably not disable the physics but fix all nodes and only allow the node to move that you currently dragndrop. Disabling the physics completely will create undesired results if you use smooth/dynamic curves as "support nodes" stay fixed due to a lack of physics.

Here are some topics on this. The answers to your question are sometimes hidden in the discussions. Note that option names have changed quite a bit in visjs v4:

• Lock position of Network Nodes after Drag Lock position of Network Nodes after Drag #315
• Problem with stabilizing nodes and turning physics off Problem with stabilizing nodes and turning physics off #458
• Curved line redrawing when physics off Curved line redrawing when physics off #303

On a related note, do you know if anyone came up with a network editor based on vis.js? This would be a great product I think.

Not sure if this is what you had in mind, but I created a concept mapping editor based on visjs https://en.wikipedia.org/wiki/TiddlyMap.

[AlexDM0]

Hi,

The description your refer to is meant like this:

the network has an options object. In this object you can set global options that are valid for all nodes/edges.

Certain options are only relevant per node/edge. This goes for things like ID, x,y and fixed etc.

These are options you supply per node. You can use the dataset to change the options of nodes an edges after the initialization of the network.

If you feel we should rephrase the documentation to better reflect this, we'd be very open to suggestions.

Apart from the links Felix is adding (thanks felix!), there are examples on the use of the dataset on our website.

Regards

[AlexDM0]

Is this still an issue?

[fedorov]

I have not had a chance yet to continue working on this project. The comments were very helpful, and I will update the issue when the issue is resolved, or if I feel stuck. Thank you.

[fedorov]

@AlexDM0 if you could point to most similar example, it would help. Otherwise I will keep looking. allowedToMoveX referenced from Felix post seems similar to what I need, but not available in the current version.

[AlexDM0]

AllowedToMoveX is now fixed.x

When allowedtomove was false it was the same as fixed is true.

That code is still the exact same way to do it though.

Regards

[fedorov]

Indeed, this works! Thanks a lot to both of you for help!

    network.on("dragEnd", function (params) {
      for (var i = 0; i < params.nodes.length; i++) {
          var nodeId = params.nodes[i];
          nodes.update({id: nodeId, fixed: {x: true, y: true}});
      }
    });
    network.on('dragStart', function(params) {
      for (var i = 0; i < params.nodes.length; i++) {
          var nodeId = params.nodes[i];
          nodes.update({id: nodeId, fixed: {x: false, y: false}});
      }
    });

[felixhayashi]

Thanks a lot to both of you for help!

no problem.