Layout changes after grouping

GoJS
1

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

BEFORE
image

AFTER

image
image836×277 19.8 KB

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 ?

2

Try setting Group.layout to null.

3

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

thanks