Center rectangles and textboxes on the sides

GoJS
1

I have the following scenario. I have a rectangle that has dynamic content to one of its sides.
The diagram on the left has the ideal data. however when changing the
You can see an example on the following image and pen
What’s the recommended approach for these scenarios? I want the red rectangle to be immutable.

Capture
Capture1064×353 4.13 KB

2

Try this:

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          new go.Binding("text")),
        $(go.Panel, "Table",
          new go.Binding("itemArray", "ports"),
          {
            itemTemplate:
              $(go.Panel, "TableRow",
                $(go.TextBlock, { column: 0, alignment: go.Spot.Right }, new go.Binding("text", "l")),
                $(go.Shape, { column: 1, width: 10, height: 10, fill: "transparent", stroke: "red" }),
                $(go.TextBlock, { column: 2, alignment: go.Spot.Left }, new go.Binding("text", "r"))
              ),
            alignment: go.Spot.TopRight,
            alignmentFocusName: "SHAPE"
          },
          $(go.Panel, "TableRow",  // this row has zero height -- it's just used to line up the middle
            { isPanelMain: true }, // column relative to the main element of the Spot Panel
            $(go.Shape, { name: "SHAPE", column: 1, alignment: go.Spot.Left, width: 0, height: 0, fill: null, strokeWidth: 0 }),
          )
        )
      );

This uses an isPanelMain “TableRow” along with setting Panel.alignmentFocusName to line up the left side of the middle column of the “Table” Panel.

I only bothered to implement them on the right side, you can implement them also on the left side.

With this node data,

  { key: 1, text: "Alpha", color: "lightblue",
    ports: [
        { l: "right 1", r: "bad" },
        { l: "r 2", r: "very bad" },
        { l: "r 3", r: "super bad bad bad" }
      ] },

one gets this result:
image