Add GraphObject without increasing size of surrounding element

I assume this is an easy question but I didn’t know what exactly to look for to find a solution.

I would like to creating something like the following node template:

Panel A and B are in a vertical panel. I’ve added C as a bottom-right Spot on Panel A, but this would push Panel B down so there would be a gap between Panel A and Panel B:

What would be the proper way to define a template without this gap? Note: Unlike in the example above, Panel A and B don’t actually have the same height.

So panel A really is taller because you added C to A.

I suppose you could specify a negative Margin.bottom on A that is about half the height of C.

Hello walter,

it seems that C (the yellow panel) just gets cut off if I define a negative margin:

Basically C should behave like an adornment (only that its visibility is configured by a binding instead of a node selection). It is okay that the yellow panel would be in front of the text (Prozess_einfach_01)

Isn’t A a “Spot” Panel?

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        { defaultAlignment: go.Spot.Left, isOpposite: true },
        $(go.Shape, { fill: "green" }),
        $(go.Panel, "Spot",
          { margin: new go.Margin(0, 0, -10, 0) },
          $(go.Shape, { fill: "red" }),
          $(go.Shape, "Circle",
            { alignment: go.Spot.BottomRight, width: 20, height: 20, fill: "yellow" })

    myDiagram.model = new go.GraphLinksModel([ {} ]);


Note that I had to reverse the z-ordering of the elements so that the green panel wouldn’t overlap the red panel. Alternatively, you might be able to do:

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        $(go.Panel, "Vertical",
          $(go.Shape, { fill: "red" }),
          $(go.Shape, { fill: "green" })
        $(go.Shape, "Circle",
          { alignment: go.Spot.Right, width: 20, height: 20, fill: "yellow" })

But that doesn’t generalize so well if you have a variable number of elements in the vertical panel, each with its own optional decoration.

Thank you walter, I was applying the margin to the wrong panel, now it works fine.
Also thanks for the heads-up about the z-ordering!