Avoid groups overlapping

Hi, I have a question, how can I avoid overlapping groups? I’m generating several groups, but when I generate them, they overlap the previous one. Is there a property to avoid that and not generate over the previous one? Thanks.

The positioning of nodes is normally determined by the Diagram.layout. In the case of groups (which are normally treated as nodes), the positioning of groups may also be affected by their member nodes if they have a Placeholder.

This is my main group’s layout.

  layout:  
            $(go.GridLayout, {
                wrappingWidth: 1, alignment: go.GridLayout.Position,
                cellSize: new go.Size(1, 1), spacing: new go.Size(12, 12)
              })

Yes, each internal node in the group has a placeholder. What should be changed to avoid overlap?

That’s the Group.layout, yes? What is the layout that is arranging the groups? Is that the Diagram.layout? If so, how is that defined?

Yes, this is the main group layout diagram. Within it are the nodes and subgroups.

Yes, please continue…

Here is part of the main group definition.

 this.dia.groupTemplateMap.add("MainGroups",
      $(go.Group,  "Spot",
        {
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true,
          memberValidation: samePrefix,
          mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
          mouseDragLeave: function(e, grp, next) { 
            highlightGroup(e, grp, false); 
          },
          memberAdded: updateGroupCount,
          memberRemoved: updateGroupCount,
          computesBoundsAfterDrag: true,
          movable: true,
          groupable: false,
          copyable: false,
          layout:  
            $(go.GridLayout, {
                wrappingWidth: 1, alignment: go.GridLayout.Position,
                cellSize: new go.Size(1, 1), spacing: new go.Size(12, 12)
              })
        },

And the problem is that some subgroups are overlapping each other, but not of the top-level groups?

How are those subgroups defined? What is their Group.layout??

No, no. Sorry, maybe I didn’t make myself clear. I have a group, and when I generate another one (with a click event), this new group appears over the previous one. I want to avoid that, that when it is generated, it appears over the previous one.

OK, back to my original question: what is the Diagram.layout? That is what is responsible for arranging all of the top-level nodes, including groups.

Second question: have you disabled any layout invalidation? That means Layout.isOngoing or Part.isLayoutPositioned or other ways, as discussed in https://gojs.net/latest/intro/layouts.html#LayoutInvalidation

I have not defined a Diagram.layout as such, only the layouts of each group.

And yes, I tried the isOngoing to false, and it didn’t work. The Part.isLayoutPositioned in which part would it go?

I was just asking to make sure you hadn’t set any of those properties.

You need to set Diagram.layout to something that you like.

Setting up the Diagram.Layout, which property will avoid overlap?

Most layouts try to make sure the nodes do not overlap each other. ForceDirectedLayout does not guarantee that. And many layouts have a way of forcing overlaps in certain cases because you want it, by setting the properties a certain way.
https://gojs.net/latest/intro/layouts.html

The solution was to define the Diagram.layout like this: layout: $(go.TreeLayout) hahaha. Thanks Walter.