Vertical Group?

GoJS
1

Getting started with groups in GoJS but I want to have my shapes stacked vertically in the group, and I want the group text positioned top center in the group.

Here is my current group definition:

myDiagram.groupTemplate =
            $(go.Group, "Vertical",
                $(go.Panel, "Auto",
                    $(go.Shape, "Rectangle",  // surrounds the Placeholder
                        {
                            fill: "rgba(128,128,128,0.33)"
                        }),
                    $(go.Placeholder,    // represents the area of all member parts,
                        { padding: 5 })  // with some extra padding around them
                ),
                $(go.TextBlock,         // group title
                    { alignment: go.Spot.TopCenter, font: "Bold 12pt Sans-Serif" },
                    new go.Binding("text", "label"))
            );

but when it renders it looks like this:

What is wrong in my config?

Thanks!

2

The positioning of a Group’s member Nodes is controlled by the Group.layout.

I think you want to set this on your group template:

    layout: $(go.GridLayout, { wrappingColumn: 1 })

If you want the group’s text to be at the top, I think you want to put the TextBlock before the Auto Panel.

3

Ok its close now. Here is the code:

 myDiagram.groupTemplate =
            $(go.Group, "Vertical",
                $(go.GridLayout, { wrappingColumn: 1 }),
                $(go.Panel, "Auto",
                    $(go.Shape, "Rectangle",  // surrounds the Placeholder
                        {
                            fill: "rgba(128,128,128,0.33)"
                        }),
                    $(go.Placeholder,    
                        { padding: 20 }),  
                    $(go.TextBlock,         
                        { alignment: go.Spot.TopCenter, font: "Bold 12pt Sans-Serif", margin: 5},
                        new go.Binding("text", "label"))
                )
               
            );

here is the result:

How can I have the group title have more margin around it than the nodes below them have? I want to have a larger amount of seperation between the title and the nodes.

Thanks!

4

Have you tried increasing the margin? Or increase it only on the bottom.

5

yeah the issue is it seems like placeholders padding controls the spacing between hexagons, including the bufffer size on the top of them, so inorder to create more space i need to adjust the padding on the placeholder but that evenly spaces the padding in the group. If i only adjust the text block margin it will move the label under the shapes.

I wonder if i need a nested panel or something

6

No, Placeholder.padding controls the margin between all of the group’s members and the size of the Placeholder.

If you want to adjust the spacing between the member nodes, adjust the Group’s GridLayout.spacing.

7

The Vertical Panel should be within the Auto Panel, since you said you want the heading inside the Group’s shape. Right now, the Vertical Panel only contains one element, so it isn’t really doing much. As Walter suggested earlier, a margin around the TextBlock is probably what you want to get the members spaced as you are hoping.

$(go.Group, "Auto",
  { layout: $(go.GridLayout, { wrappingColumn: 1 }) },
  $(go.Shape, "Rectangle",  // surrounds the Vertical panel
    { fill: "rgba(128,128,128,0.33)"}
  ),
  $(go.Panel, "Vertical",
    $(go.TextBlock,         // group title
      { font: "Bold 12pt Sans-Serif", margin: 10 },
      new go.Binding("text", "label")
    ),
    $(go.Placeholder,    // represents the area of all member parts,
      { padding: 5 }       // with some extra padding around them
    )  
  )
);
8

Thanks jhardy, that group definition was what I was looking for. Here is the result: