How to apply correction to node's position on drag and drop

GoJS
#1

Hello Team Northswood,

I’m currently working on Network Plumbing Diagram that implements GoJS. Basically, I have nodes and links layed out in the following manner:

WhatsApp Image 2021-08-19 at 22.36.25
WhatsApp Image 2021-08-19 at 22.36.251200×1600 288 KB

As you could see there are numerous links and nodes at different levels. Users can drag any node freely on the layout. The problem is, sometimes they might drop the node very close to other nodes and in that case I want to apply some correction on the node’s position.

We have set up the binding for node’s position in the nodeTemplate as follows:

new go.Binding(“position”, “loc”, go.Point.parse)

I change the position property of the node programmatically if the user drags the node too close to the other node. I do it inside a transaction. The position coordinate is changed, but the node isn’t displayed at the set position but instead where the user dropped the node. The change happens only when I select the node again and drag it a little. Only THEN, the node jumps to the set coordinates. I’ve observed that changes made to links are shown immediately when transaction is committed but not those of nodes.

I also read a little about layout refresh and how invalidation of a current layout refreshes the diagram. I tried calling out the following method right after setting nodes position:

diag.layout.invalidateLayout();

Kindly, address a solution for this.
Thanks!

#2

What do you want to do? Restrict the movement of the node to not come too close to some other nodes, or allow it to move there during the drag but force the node to be moved farther away only after a drop happens?

For the former behavior, implement a Part.dragComputation function.

For the latter behavior, implement a “SelectionMoved” DiagramEvent listener.

#3

Hi, thanks for the response, after the latter’s implementation I was able to manipulate node’s position just as desired!

I have a follow up question though. Sometimes, moving a node just above another node requires me to tweak the y position of the node below. Does selection of node allow us to manipulate the surrounding nodes as well or is it restricted to selected parts only?

Thanks in advance.

#4

If you allow it, consider how to handle moving multiple nodes.

Yes, your “SelectionMoved” listener could move “stationary” nodes. That gets more complicated to implement, though.

#5

Thank you Walter.

There’s another topic I need your guidance on. Is it fine to discuss it here or do I need to raise a different topic for it? It’s regarding Orthogonal Link Resegmentation(addition of a new segment by two points within the existing Points object programmatically).

#6

Sounds like a different topic – please start a new one.

#7

Meanwhile, on this topic, you might find this instructive:
Incremental Force Directed Layout