Add GraphObject without increasing size of surrounding element

GoJS
1

Hi,
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:
grafik

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:
grafik

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.

2

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.

3

Hello walter,

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

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)

4

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([ {} ]);
  }

produces:
image

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.

5

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!