Centering of title of group

GoJS
1

I’m using one of your sample with some changes:

diagram.initialContentAlignment = go.Spot.Center;
diagram.groupTemplate =
  $(go.Group, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 5,   defaultAlignment: go.Spot.Left },
    $(go.Panel, "Table",
      { alignment: go.Spot.Top, stretch: go.GraphObject.Fill, background: "#fceed1" },
    $(go.RowColumnDefinition, { column: 0, width: 16 }),
      $("SubGraphExpanderButton",
        { row: 0, column: 0, margin: new go.Margin(0, 0, 0, 3)
         }),
      $(go.TextBlock, {row: 0, column: 1, font: "14px Sans-Serif", margin: new go.Margin(4, 20, 4, -12), stroke: "#a8863b"}, "Center me!")
    ),
    $(go.Placeholder,  { padding: 10 })
  )
);

diagram.model = new go.GraphLinksModel(
 [ { key: 0, isGroup: true },
    { key: 1, group: 0 },
    { key: 2, group: 0 },
    { key: 3, group: 0 } ] );

That’s how I’ve reached centering of the title. And it works. But if I add placeholder to make it a little bit prettier

$(go.Placeholder, { padding: 10 })

It breaks. When I collapse group, group takes place only for this padding and hides the title.

Is it a bug? And more general question is how can I center the title and keep it centered in both collapsed and expanded states of the group?

2

By “centering the title” I assume you mean centering horizontally, while keeping it near the top of the node?

I just tried this:

  $(go.Group, "Auto",
    $(go.Shape, "Rectangle", { fill: "gold" }),
    $(go.Panel, "Spot",
      { margin: 0.5 },
      $(go.Placeholder, { padding: 10 }),
      $(go.Panel, "Table",
        { alignment: go.Spot.Top },
        $(go.RowColumnDefinition, { row: 0, background: "#fceed1" }),
        $("SubGraphExpanderButton", { row: 0, column: 0, margin: 3}),
        $(go.TextBlock, "Center", { row: 0, column: 1, font: "14px Sans-Serif", wrap: go.TextBlock.None, stroke: "#a8863b" })
      )
    )
  )

And the button and text seem to center at the top. But I cannot tell what it is that you really want. There are so many plausible possibilities.

3

This is what I want to do. The expander button is placed about left border and the title is horizontally centered. If you have $(go.Placeholder, { padding: 10 }) padding in the placeholder, when you collapse block you’ll get

As you can see, the title is hidden. Without the padding everything is ok.

So how can I reach that? Should I fix something in this code or there is another way to do it? I’ve used table for alignment purpose only, I tried to do my task with horizontal block with to children for the button and the title, but without luck.

Thank you.

4

You had the right idea – you just didn’t make full use of the “Table” Panel:

  $(go.Group, "Auto",
    $(go.Shape, "Rectangle", { fill: "gold" }),
    $(go.Panel, "Table",
      { margin: 0.5 },
      $(go.RowColumnDefinition, { row: 0, background: "#fceed1" }),
      $("SubGraphExpanderButton", { row: 0, column: 0, margin: 3}),
      $(go.TextBlock, "Center me!", {
        row: 0, column: 1, font: "14px Sans-Serif", stroke: "#a8863b",
        textAlign: "center", stretch: go.GraphObject.Horizontal
      }),
      $(go.Placeholder, { row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft })
    )
  )