Layout changes after grouping

I’m trying to introduce grouping in my diagram. I have added the following code in my initDiagram function:

    dia.commandHandler.archetypeGroupData = { key: 'Group', isGroup: true };

 dia.groupTemplate =
      $(go.Group, 'Auto',
        { layout: $(go.TreeLayout) },
        $(go.Shape, 'Rectangle', { fill: 'white', }),
        $(go.Panel, 'Table',
          { margin: 0.5 },  // avoid overlapping border with table contents
          $(go.RowColumnDefinition, { row: 0, background: 'white' }),  // header is white
          $('SubGraphExpanderButton', { row: 0, column: 0, margin: 3 }),
          $(go.TextBlock,  // title is centered in header
              row: 0, column: 1, font: 'bold 14px Sans-Serif', stroke: 'black',
              textAlign: 'center', stretch: go.GraphObject.Horizontal
            new go.Binding('text')),
          $(go.Placeholder,  // becomes zero-sized when Group.isSubGraphExpanded is false
            { row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
            new go.Binding('padding', 'isSubGraphExpanded',
              exp => exp ? 10 : 0).ofObject())

Now I can draw a purple rectangle around shapes and group them with ctrl-G . However the layout changes completely and links are no longer attach to nodes after grouping



How can make sure the group does not change the existing layout, i.e takes the exact size of the purple rectangle that I drew when selecting the shapes ? And how to preserve links connections ?

Try setting Group.layout to null.

ah yes perfect
don’t know why I had set it to TreeLayout, must be a copy/paste from a sample