Adding Icon and count summary to Groups

GoJS
1

Hi, GoJS how can we add a header icon and a counter (corner circle, number is total number of child groups) to parent group and child group. See attached screenshot.

2020-04-20_13-54-02

2 
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../release/go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "commandHandler.archetypeGroupData": { isGroup: true },
          "undoManager.isEnabled": true
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock, { margin: 8 },
          new go.Binding("text"))
      );

    function updateGroupCount(g) {
      var tb = g.findObject("COUNT");
      tb.text = g.memberParts.filter(function(p) { return p instanceof go.Node; }).count.toString();
    }
    
    myDiagram.groupTemplate =
      $(go.Group, "Spot",
        {
          ungroupable: true,
          memberAdded: updateGroupCount,
          memberRemoved: updateGroupCount
        },
        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle", { fill: "whitesmoke", parameter1: 15 }),
          $(go.Placeholder, { padding: 10 })
        ),
        $(go.Panel, "Auto",
          { alignment: new go.Spot(1, 0, -4, 4) },
          $(go.Shape, "Circle", { fill: "whitesmoke" }),
          $(go.TextBlock, { name: "COUNT" })
        )
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", group: 6 },
      { key: 2, text: "Beta", color: "orange", group: 6 },
      { key: 3, text: "Gamma", color: "lightgreen", group: 5 },
      { key: 4, text: "Delta", color: "pink", group: 5 },
      { key: 5, isGroup: true, group: 6 },
      { key: 6, isGroup: true }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 2 },
      { from: 3, to: 4 },
      { from: 4, to: 1 }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>

image

You might want to adapt the updateGroupCount function to use the number calculation that you want.

3

Thanks a ton Walter, how about the header icon (VPC)? Is there a way to add that

4

Learn about panels, especially “Spot” panels:
https://gojs.net/latest/intro/panels.html#SpotPanels

Hint: the Group template I gave you above already is a “Spot” Panel.

5

Thank you Walter…Appreciate the help