Make group "decorator" above its content

In the screenshot below, the groupTemplate has a “decorator” as a red target icon on the left border of the group. How can I make the decorator (go.Panel) above the group content. According to the GoJS doc, I cannot apply layer or zOrder on go.Panel.

Screenshot 2023-05-25 at 10.46.20 AM

I want the target icon in the first group to be fully visible (above Node1) as the one in the second group. We need the group content to touch the side of the group if the content is wide enough. Therefore, adding margin to the groupTemplate is not an option :( Thank you so much for your time!

I am posting the complete HTML + JS code below. Thanks!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="myDiagramDiv"
      style="border: solid 1px black; width: 100%; height: 700px"
    ></div>
    <script src="../../site/release/go-debug.js"></script>
    <script>
      function init() {
        const $ = go.GraphObject.make;
        const myDiagram = $(go.Diagram, "myDiagramDiv", {
          layout: $(go.LayeredDigraphLayout),
        });
        const nodeDataArray = [
          {
            key: "Group1",
            isGroup: true,
          },
          {
            key: "Node1",
            group: "Group1",
          },
          {
            key: "Node2",
            group: "Group1",
          },
          {
            key: "Node3",
            group: "Group1",
          },
          {
            key: "Group2",
            isGroup: true,
          },
          {
            key: "Node4",
            group: "Group2",
          },
        ];

        const linkDataArray = [
          {
            from: "Node1",
            to: "Node2",
          },
          {
            from: "Node2",
            to: "Node3",
          },
          {
            from: "Group1",
            to: "Group2",
          },
        ];

        myDiagram.groupTemplate = $(
          go.Group,
          "Spot",
          {
            layout: $(go.LayeredDigraphLayout),
          },
          $(
            go.Panel,
            "Auto",
            $(
              go.Shape,
              "RoundedRectangle", // surrounds everything
              {
                parameter1: 10,
                fill: "white",
                stroke: "#999999",
                minSize: new go.Size(200, 200),
                spot1: go.Spot.TopLeft,
                spot2: go.Spot.BottomRight,
              }
            ),
            $(go.Placeholder, {
              background: "transparent",
            })
          ),
          $(
            go.Panel,
            {
              desiredSize: new go.Size(14, 14),
              alignment: new go.Spot(0, 0.5),
            },
            $(go.Shape, "Circle", {
              fill: "white",
              stroke: "red",
              desiredSize: new go.Size(12, 12),
            }),
            $(go.Shape, "Circle", {
              fill: "red",
              stroke: "red",
              strokeWidth: 0,
              desiredSize: new go.Size(4, 4),
              position: new go.Point(4.5, 4.5),
            })
          )
        );

        myDiagram.nodeTemplate = $(
          go.Node,
          "Auto",
          $(go.Shape, "Rectangle", {
            fill: "yellow",
            stroke: "blue",
            width: 50,
            height: 50,
          }),
          $(go.TextBlock, new go.Binding("text", "key"), {
            textAlign: "center",
          })
        );

        const model = new go.GraphLinksModel();
        model.nodeDataArray = nodeDataArray;
        model.linkDataArray = linkDataArray;
        myDiagram.model = model;
      }

      window.addEventListener("DOMContentLoaded", init);
    </script>
  </body>
</html>

I moved the Group to be in the “Foreground” layer and made sure that the Shape had a null Shape.fill and that the Placeholder.background was not set (it’s null by default).

  myDiagram.groupTemplate = $(go.Group, "Spot",
    {
      layerName: "Foreground",  // !!
      layout: $(go.LayeredDigraphLayout),
    },
    $(go.Panel, "Auto",
      $(go.Shape, "RoundedRectangle", // surrounds everything
        {
          parameter1: 10,
          fill: null,  // !!
          stroke: "#999999",
          minSize: new go.Size(200, 200),
          spot1: go.Spot.TopLeft,
          spot2: go.Spot.BottomRight,
        }
      ),
      $(go.Placeholder, {
        //!! background: "transparent",
      })
    ),
    $(go.Panel,
      {
        desiredSize: new go.Size(14, 14),
        alignment: new go.Spot(0, 0.5),
      },
      $(go.Shape, "Circle", {
        fill: "white",
        stroke: "red",
        desiredSize: new go.Size(12, 12),
      }),
      $(go.Shape, "Circle", {
        fill: "red",
        stroke: "red",
        strokeWidth: 0,
        desiredSize: new go.Size(4, 4),
        position: new go.Point(4.5, 4.5),
      })
    )
  );

Thank you so much, Walter! But what if I need to set the background color, say yellow, to the group?

One way is to always show an Adornment: Node labels always in front

As always, the complete source code is in the page itself.

Thank you, Walter. Let me try it… and get back to you

Thank you, Walter. The code works very well :)