How to avoid overlapping of group

Hi,
I am having a group templates and when I am dragging another group template and if I drag the new group template over the other one it will overlap the template how can I restrict the overlapping?

The individual group are as

1 Like

There are several choices. During the drag did you want to prevent any overlapping? If so take a look at Drag Unoccupied.

Or, upon a drop did you want to move the dropped node so that it no longer overlaps? I don’t know if there is an example of that, but basically you could implement a “SelectionMoved” and “SelectionCopied” DiagramEvent listeners to see if the dropped Node(s) overlap any other stationary Nodes. If so, shift the Node(s) to a nearby empty area. You can use Diagram.findObjectsIn to find any nearby nodes, but be sure that your predicate excludes any nodes that were just dropped!

Page Not Found -- Northwoods Software.

this example is working when I am dragging an existing object but I want to do this when I am dropping a new grouptype node in my diagram. I want to call avoidNodeOverlap method on ExternalDroppedObject event like this

this.graph = this.diagram(go.Diagram, obj.elementId,
{
initialContentAlignment: go.Spot.Center,
allowDrop: true,
allowCopy: false,
//mouseDrop: function () { if (this.currentGroup) delete this.currentGroup; },
ExternalObjectsDropped: ExternalObjectsDropped,
//“animationManager.duration”: 800,
“animationManager.isEnabled”: false,
“undoManager.isEnabled”: true,
“toolManager.mouseWheelBehavior”: go.ToolManager.WheelNone,
“commandHandler.archetypeGroupData”: { isGroup: true }
});

how to do this.

I just tried modifying the Drag Unoccupied sample by adding a Palette to it. It behaved as I think you want – during the drag the user could easily move the new (temporary) node from the palette to empty areas of the main diagram, but would be prevented from moving the new node onto existing nodes.

However, I did notice that when entering the target diagram, the new node could be created overlapping an existing node. Only until the mouse moved to an empty area would the new node snap to that area, and then it would never overlap any stationary nodes. But it isn’t clear what should be done in that situation. This requires some further investigation. Did you have any preferences?

To clarify: finding an unoccupied area in which to put a node depends on knowing how large the node is. But we cannot know how large the node is until it has been created and added to the diagram, so that data bindings get a chance to be evaluated.

So the problem is where to put the newly created copy during the drag-and-drop when the mouse first enters the viewport. I guess the code could search for an empty area that is big enough and just move it there, even though that point might be far away from where the mouse is. But it might be disconcerting to the user. Of course the current behavior can be disconcerting when the copied node shows up overlapping an existing node and it doesn’t move until the mouse gets to an empty area.