White space between panel's border and its content

I have a group with some panels and shapes inside, like the below picture. How can I remove the white space between the circles and the border of its container?

How have you defined that template?

My code was defined for left circle:

// Defined expand/collapse shape circle
const expandCollapseShape: any = {};
expandCollapseShape.width = expandCollapseShapeWidth;
expandCollapseShape.height = expandCollapseShapeHeight;
expandCollapseShape.fill = 'transparent';
expandCollapseShape.stroke = '#33D3E5';
expandCollapseShape.strokeWidth = 1;

// Define left panel
const panelLeft = $(go.Panel, go.Panel.Auto);
panelLeft.defaultAlignment = go.Spot.Center;

let leftExpandCollapseShape = $(go.Shape, 'Circle');
leftExpandCollapseShape = Object.assign(leftExpandCollapseShape, expandCollapseShape);
leftExpandCollapseShape.bind(new go.Binding(visible, 'hasLeft'));

const leftExpandCollapseSymbolTextBlock = $(go.TextBlock);
leftExpandCollapseSymbolTextBlock.bind(new go.Binding('text', 'leftNodeText'));
leftExpandCollapseSymbolTextBlock.bind(new go.Binding(visible, 'hasLeft'));

panelLeft.add(leftExpandCollapseShape);
panelLeft.add(leftExpandCollapseSymbolTextBlock);

// Defined container panel
const panelContainer = $(go.Panel, go.Panel.Horizontal);
panelContainer.add(panelLeft);

// Defined nodes template
export const groupTemplate = $(go.Group, 'Spot');
// groupTemplate.margin = new go.Margin(20);
groupTemplate.layout = $(go.TreeLayout);
groupTemplate.arrangementSpacing = new go.Size(5, 5);
groupTemplate.moveable = false;
panelGroup.add(panelContainer);
groupTemplate.add(panelGroup);

I think you need to set Shape.spot1 and Shape.spot2 on your “RoundedRectangle” Shape.

I find your procedural code very difficult to read. Here’s what I just tried:

    function makeCircle(spot, row, col, textprop, visprop) {
      return $(go.Panel, "Auto",
               { row: row, column: col },
               $(go.Shape, "Circle", { fill: "transparent", stroke: "#33D3E5" },
                 new go.Binding("visible", visprop)),
               $(go.TextBlock,
                 new go.Binding("text", textprop),
                 new go.Binding("visible", visprop))
             );
    }

    myDiagram.groupTemplate =
      $(go.Group, "Auto",
        $(go.Shape, "RoundedRectangle",
          { fill: "transparent", stroke: "#33D3E5", spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
        $(go.Panel, "Table",
          makeCircle(go.Spot.Top, 0, 1, "topNodeText", "hasTop"),
          $(go.TextBlock, { row: 1, column: 1 }, new go.Binding("text")),
          makeCircle(go.Spot.Left, 2, 0, "leftNodeText", "hasLeft"),
          $(go.Placeholder, { row: 2, column: 1, padding: 5 }),
          makeCircle(go.Spot.Right, 2, 2, "rightNodeText", "hasRight"),
          makeCircle(go.Spot.Bottom, 3, 1, "bottomNodeText", "hasBottom")
        )
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 3, text: "Gamma", color: "lightgreen", group: 5 },
      { key: 4, text: "Delta", color: "pink", group: 5 },
      { key: 5, text: "group header", isGroup: true }
    ]);

I find that when writing the code for building the visual tree using indented expressions is much easier to understand than the procedural code that you are using.

You might want to set { visible: false } as the default value for those objects that have a binding on “visible”. (BTW, you didn’t quote “visible” in your code.)

Oh Done! Thankyou very much.