Position Panel Confusion

GoJS
1

Hi Walter,

I am attempting to shift the position of a ‘go.Shape’ on a ‘go.Panel.Position’.
Currently, the switch I have implemented is working correctly when turned on:
image
However, I am trying to play around with bindings such that when turned off, it is shifted lower down on the panel, to achieve something like this:
image
Instead, I currently have this, and do not know how to fix it:
image
The desired size of the shape is ok, it is simply set to 1/2 height and full width.
I wonder what properties I need to modify to shift things down on this position panel…

   $(
                    go.Panel,
                    go.Panel.Position,

                    new go.Binding('desiredSize', '', getFlipPanelSize),

                    $(
                        go.Shape,
                        {
                            name: SwitchWidgetSegment.ThirdShape,
                        },
                        new go.Binding('geometryString', '', (block: Block) => {
                            return isSwitchActive(block) ? SwitchShape.FlipOn : SwitchShape.FlipOff;
                        }),
                        new go.Binding('desiredSize', '', getThirdShapeDesiredSize),
                    )
2

If you could provide the SVG path strings, I can set that up for you. Never mind, here you go, although the sizes are hard-coded.

image

<!DOCTYPE html>
<html>
<head>
  <title>Simple Toggle Switch</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      layout: new go.GridLayout(),
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  new go.Node("Vertical")
    .add(
      new go.Panel("Position", {
          height: 81,
          background: "transparent",
          click: (e, pnl) => {
            e.diagram.model.commit(m => {
              m.set(pnl.part.data, "up", !pnl.part.data.up);
            })
          }
        })
        .add(
          new go.Shape("Circle", { position: new go.Point(0, 30), fill: "white", width: 20, height: 20 }),
          new go.Shape("Circle", { position: new go.Point(3, 33), fill: "white", width: 14, height: 14, fill: "gray" }),
          new go.Shape("Triangle", { position: new go.Point(0, 40), fill: "white", width: 20, height: 40 })
            .bind("angle", "up", up => up ? 180 : 0)
            .bind("position", "up", up => up ? new go.Point(0, 0) : new go.Point(0, 40))
        ),
      new go.TextBlock({ margin: new go.Margin(2, 0, 0, 0) })
        .bind("text")
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", up: true },
  { key: 2, text: "Beta", up: false },
  { key: 3, text: "Gamma" }
]);
  </script>
</body>
</html>
3

Walter, you are a genius!