Give rounded corner to textblock

[ozairsajid]

Hi,

We would like to give rounded corner to textblock. Is this possible?
Below is the current template:

const groupExpandedTemplate =
        $(go.Group, 'Spot',
            {
                selectionAdornmentTemplate: // adornment when a group is selected
                    $(go.Adornment, 'Auto',
                        $(go.Shape, 'RoundedRectangle',
                            { fill: null, stroke: 'dodgerblue', strokeWidth: 3 }),
                        $(go.Placeholder)
                    ),
                computesBoundsAfterDrag: true,  // needed to prevent recomputing Group.placeholder bounds too soon
                computesBoundsIncludingLinks: false,  // to reduce occurrences of links going briefly outside the lane
                computesBoundsIncludingLocation: true,  // to support empty space at top-left corner of lane
                // subGraphExpandedChanged: function (grp) { grp.category = 'collapsed'; },
                toSpot: go.Spot.TopLeft, // links coming into groups at any side
                fromSpot: go.Spot.TopCenter,
                toEndSegmentLength: 30, // fromEndSegmentLength: 30
            },
            // new go.Binding('isSubGraphExpanded').makeTwoWay(),
            $(go.Panel, 'Auto',
                $(go.Shape, 'RoundedRectangle',
                    {
                        name: 'OBJSHAPE',
                        parameter1: 14,
                        opacity: .1
                    },
                    new go.Binding('fill', 'color'),
                    new go.Binding('desiredSize', 'ds')),

                $(go.Panel, 'Vertical',  // title above Placeholder
                    $(go.Panel, 'Horizontal',  // button next to TextBlock

                        { stretch: go.GraphObject.Horizontal },
                        $('SubGraphExpanderButton',
                            { alignment: go.Spot.Left, margin: 5 }),
                        $(go.TextBlock,
                            {
                                alignment: go.Spot.Left,
                                editable: true,
                                margin: 5,
                                font: 'bold 15px sans-serif',
                                opacity: 0.75,
                                stroke: 'white'
                            },
                            new go.Binding('text', 'name')
                        ),
                        new go.Binding('background', 'color')
                    ),  // end Horizontal Panel

                    $(go.Placeholder,
                        { padding: 5, alignment: go.Spot.TopLeft })
                )
            )
        );

We would like to achieve something like below:

We are using gojs@1.8.32.

[walter]

You want a rounded rectangle shape around the whole horizontal panel, yes. Not just the TextBlock. So just wrap an “Auto” Panel around that Horizontal Panel, with the main element being a “RoundedRectangle” Shape whose color is set or bound to whatever you want.

          $(go.Panel, 'Vertical',  // title above Placeholder
            $(go.Panel, "Auto",
              $(go.Shape, "RoundedRectangle",
                { strokeWidth: 0, parameter1: 10 },
                new go.Binding('fill', 'color')),
              $(go.Panel, 'Horizontal',  // button next to TextBlock
                { stretch: go.GraphObject.Horizontal },
                $('SubGraphExpanderButton',
                  { alignment: go.Spot.Left, margin: 5 }),
                $(go.TextBlock,
                  {
                    alignment: go.Spot.Left,
                    editable: true,
                    margin: 5,
                    font: 'bold 15px sans-serif',
                    opacity: 0.75,
                    stroke: 'white'
                  },
                  new go.Binding('text')
                )
              )  // end Horizontal Panel
            ),

[ozairsajid]

Thanks for the reply.
Actually we just want to give rounded corner to the title of the group which contains the SubGraphExpanderButton & the TextBlock. I tried your suggestion but that makes the whole group to be enclosed inside the RoundedRectangle, which we do not want.

If you notice in the above picture, SubGraphExpanderButton & TextBlock are enclosed in a dark orange rectangle. We just want rounded corners for this rectangle. I am following SubGraphExpanderButton design - #8 by walter to change the design of SubGraphExpanderButton. Thanks

[walter]

The Group template that you posted above has a “RoundedRectangle” Shape around the whole group.

What I posted adds a “RoundedRectangle” Shape around the Horizontal Panel holding the button and the TextBlock.

Here’s an example of what I posted:

The only change I made to your code, other than wrapping the Horizontal Panel with an Auto Panel, is moving the Binding on “color” from the Horizontal Panel to the new Auto Panel’s Shape.

[ozairsajid]

Thanks. That did the job. I did not notice because of the nodes overlapped the SubGraphExpanderButton and TextBlock. How can I force (SubGraphExpanderButton and TextBlock) to be positioned at the top and avoid overlapping if enclosed nodes are dragged? I tried setting the alignment for SubGraphExpanderButton and TextBlock to Top/TopLeft but did not help. Below is the current situation.

This is my template code:

const groupExpandedTemplate =
        $(go.Group, 'Spot',
            {
                selectionAdornmentTemplate: // adornment when a group is selected
                    $(go.Adornment, 'Auto',
                        $(go.Shape, 'RoundedRectangle',
                            { fill: null, stroke: 'dodgerblue', strokeWidth: 3 }),
                        $(go.Placeholder)
                    ),
                computesBoundsAfterDrag: true,  // needed to prevent recomputing Group.placeholder bounds too soon
                computesBoundsIncludingLinks: false,  // to reduce occurrences of links going briefly outside the lane
                computesBoundsIncludingLocation: true,  // to support empty space at top-left corner of lane
                // subGraphExpandedChanged: function (grp) { grp.category = 'collapsed'; },
                toSpot: go.Spot.TopLeft, // links coming into groups at any side
                fromSpot: go.Spot.TopCenter,
                toEndSegmentLength: 30, // fromEndSegmentLength: 30
            },
            // new go.Binding('isSubGraphExpanded').makeTwoWay(),
            $(go.Panel, 'Auto',
                $(go.Shape, 'RoundedRectangle',
                    {
                        name: 'OBJSHAPE',
                        parameter1: 14,
                        opacity: .1
                    },
                    new go.Binding('fill', 'color'),
                    new go.Binding('desiredSize', 'ds')),

                $(go.Panel, 'Vertical',  // title above Placeholder
                    $(go.Panel, 'Auto',
                        $(go.Shape, 'RoundedRectangle',
                            {
                                opacity: .1
                            },
                            new go.Binding('fill', 'color')),
                        $(go.Panel, 'Horizontal',  // button next to TextBlock
                            { stretch: go.GraphObject.Horizontal },
                            $('SubGraphExpanderButton',
                                { alignment: go.Spot.Top, margin: 5 }),
                            $(go.TextBlock,
                                {
                                    verticalAlignment: go.Spot.Top,
                                    alignment: go.Spot.Top,
                                    editable: false,
                                    margin: 5,
                                    font: 'bold 15px sans-serif',
                                    opacity: 0.75,
                                    stroke: 'white'
                                },
                                new go.Binding('text', 'name')
                            ),
                            // new go.Binding('background', 'color')
                        ),  // end Horizontal Panel
                        $(go.Placeholder,
                            { padding: 5, alignment: go.Spot.TopLeft })
                    )
                )

            )
        );

[walter]

You didn’t make the same change as what I did above. The visual tree should be like:

Group, 'Spot',
    Panel, 'Auto',
        Shape, 'RoundedRectangle',
        Panel, 'Vertical',  // title above Placeholder
            Panel, "Auto",
                Shape, "RoundedRectangle",
                Panel, 'Horizontal',  // button next to TextBlock
                   'SubGraphExpanderButton',
                   TextBlock,
            Placeholder

Notice that this could be simplified: why is the Group a “Spot” Panel? If this template is a simplified version of what you are actually using, OK. If not, then I suggest that you merge the Group Panel with its only element, the Auto Panel.

Spot Panels should normally have at least two elements, the main element and some element(s) that are positioned at spots relative to the main element. But you aren’t using the Spot Panel functionality, so you might as well get rid of it by having the Group be the Auto Panel.

[ozairsajid]

Thanks for your help.
After adding the additional panel for the group title, the child groups panel width is not being set properly as can be seen in the below pic.

If I remove the stretch property the width is fine but we would want this panel to be stretched - specially the parent group.

Here is the code:

        const groupExpandedTemplate =
                $(go.Group,
                    // new go.Binding('isSubGraphExpanded').makeTwoWay(),
                    $(go.Panel, 'Auto',
                        $(go.Shape, 'RoundedRectangle',
                            {
                                name: 'OBJSHAPE',
                                parameter1: 14,
                                opacity: .1
                            },
                            new go.Binding('fill', 'color')),

                    $(go.Panel, 'Vertical', // title above Placeholder
                        $(go.Panel, 'Auto',
                            {
                                stretch: go.GraphObject.Fill,
                                alignment: go.Spot.Left
                            },
                            $(go.Shape, 'RoundedRectangle',
                                {
                                    strokeWidth: 0,
                                    parameter1: 10
                                },
                                new go.Binding('fill', 'color')
                            ),
                            $(go.Panel, 'Horizontal',  // button next to TextBlock
                                {
                                    alignment: go.Spot.Left
                                },
                                // new go.Binding('desiredSize', 'ds'),
                                $('SubGraphExpanderButton',
                                    { alignment: go.Spot.Left, margin: 5 }),
                                $(go.TextBlock,
                                    {
                                        alignment: go.Spot.Left,
                                        editable: false,
                                        margin: 5,
                                        font: 'bold 15px sans-serif',
                                        opacity: 0.75,
                                        stroke: 'white'
                                    },
                                    new go.Binding('text', 'name')
                                ),
                                // new go.Binding('background', 'color')
                            ),  // end Horizontal Panel
                        ),
                        $(go.Placeholder,
                            { padding: 5, alignment: go.Spot.Left })
                    )
                )
            );

[walter]

What’s wrong? What do you want to stretch, and with respect to what?

[ozairsajid]

I want the child groups to have the width that shows the TextBlock content without cutting it off.

[walter]

In general when one wants to stretch one way or another, you should replace the “Vertical” and “Horizontal” Panels with “Table” Panels, which give you more control over stretching.

      $(go.Group, 'Auto',  // around the whole Group
        $(go.Shape, 'RoundedRectangle',
          { parameter1: 14, opacity: 0.1 },
          new go.Binding('fill', 'color')),
        $(go.Panel, 'Table',  // title above Placeholder
          $(go.Panel, 'Auto',  // around the whole header
            { stretch: go.GraphObject.Horizontal },
            $(go.Shape, 'RoundedRectangle',
              { strokeWidth: 0, parameter1: 10 },
              new go.Binding('fill', 'color')),
            $(go.Panel, 'Table',  // button next to TextBlock
              { alignment: go.Spot.Left },
              $('SubGraphExpanderButton',
                { margin: 5 }),
              $(go.TextBlock,
                { column: 1, alignment: go.Spot.Left,
                  margin: new go.Margin(5, 5, 3, 5),
                  font: 'bold 15px sans-serif',
                  opacity: 0.75, stroke: 'white'
                },
                new go.Binding('text')),
            ),  // end Table Panel
          ),  // end Auto Panel
          $(go.Placeholder,
            { stretch: go.GraphObject.Horizontal },
            { row: 1, padding: 5, alignment: go.Spot.Left })
        )
      );