How can I prevent groups or nodes from overlapping?

I am using a GridLayout, and initially, after the first rendering, the nodes are neatly arranged.
However, when I move a node within a group, the surrounding nodes do not move aside, and they still overlap.
I want the nodes around the moved position to be pushed aside by a certain distance when I move a node within the group.
And I also want the nodes to be automatically vertically aligned when they are placed horizontally.
For security reasons, I cannot directly show my own data, but here is an example.
스크린샷 2024-01-15 163137
When moving nodes in this state,
스크린샷 2024-01-15 154017
This should not happen.
스크린샷 2024-01-15 154035
It should be like this.
스크린샷 2024-01-15 154645
Also, even if you drag the third node to the right, as shown in the picture above,
스크린샷 2024-01-15 154035
it should automatically align like this.

Basically you want to perform the Group.layout again after a drag. One can implement that in a “SelectionMoved” DiagramEvent listener.

But from your example it appears that you want to change the sorting order for the layout. That can be accomplished by providing an appropriate GridLayout.comparer.

Both are demonstrated in Sorting Layout in Groups. As normal, the complete source code for the sample is in the page itself. Use the ResortingGridLayout and the “SelectionMoved” listener from that sample.

That sample also implements some cleverness involving Layout.arrangementOrigin so that the Group stays where it was even though it has a Placeholder and the user may have dragged nodes in a manner that would normally cause the group to move. So you will need the DraggingTool.doActivate override from that sample too.

This is exactly the solution I was looking for. Thank you, Walter! My diagram is now complete.