Expand collapse node

GoJS
1

What is the best way to show additional nodes like below?
Before
image
When the user clicks on the +4, additional nodes are shown below and +4 is changed to -4
image

We are thinking that clicking on +4 can be captured and we insert a new group(all new nodes can be put into this group) and rewrite the links to insert the group. But I assume it’s not an ideal solution.
Or can you keep the group hidden by default and when hidden the links don’t lose their connectivity(inbound links to the group will be extended to connect the nodes connected from the outbound links), do we have such a feature in GoJs?
We need some suggestions.
Edit: Clicking on -4 will collapse the group and -4 changes to +4, the graph become same as before

2

Does the “4” refer to the number of nodes in the subgraph?

This otherwise looks like a regular use of a Group. I can show you an example later today.

3

Yes, 4 here refers to the no of nodes in the group.
Sure, an example would help us a lot.

4 
<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
function init() {
  const $ = go.GraphObject.make;

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        layout: $(go.TreeLayout, { angle: 90 }),
        "undoManager.isEnabled": true
      });

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

  function updateGroupLabel(g) {
    const tb = g.findObject("LABEL");
    if (!tb) return;
    tb.text = (g.isSubGraphExpanded ? "-" : "+") + g.memberParts.filter(m => m instanceof go.Node).count;
  }

  myDiagram.groupTemplate =
    $(go.Group, "Vertical",
      {
        locationSpot: go.Spot.Center,
        layout: $(go.ForceDirectedLayout, { defaultSpringLength: 10, defaultElectricalCharge: 40 }),
        click: (e, g) => {
          if (g.isSubGraphExpanded) e.diagram.commandHandler.collapseSubGraph(g);
          else e.diagram.commandHandler.expandSubGraph(g);
        },
        subGraphExpandedChanged: updateGroupLabel,
        memberAdded: updateGroupLabel,
        memberRemoved: updateGroupLabel,
      },
      new go.Binding("isSubGraphExpanded").makeTwoWay(),  // remember expansion state
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",
          { fill: "#333", strokeWidth: 0, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
        $(go.TextBlock, { name: "LABEL", margin: 6, stroke: "white", font: "bold 12pt sans-serif" })
      ),
      $(go.Shape, "LineV", { width: 0, height: 10 },
        new go.Binding("visible", "isSubGraphExpanded").ofObject()),
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",
          { fill: "white", strokeWidth: 1.5, strokeDashArray: [4, 4],
            spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight },
          new go.Binding("visible", "isSubGraphExpanded").ofObject()),
        $(go.Placeholder, { padding: 10 })
      )
    )

  myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue" },
    { key: 2, isGroup: true },
    { key: 21, text: "Beta 1", color: "orange", group: 2 },
    { key: 22, text: "Beta 2", color: "pink", group: 2 },
    { key: 3, isGroup: true, isSubGraphExpanded: false },
    { key: 31, text: "Gamma 1", color: "lightgreen", group: 3 },
    { key: 32, text: "Gamma 2", color: "lightgreen", group: 3 },
    { key: 33, text: "Gamma 3", color: "lightgreen", group: 3 },
    { key: 4, text: "Delta", color: "yellow" }
  ],
  [
    { from: 1, to: 2 },
    { from: 2, to: 3 },
    { from: 21, to: 22 },
    { from: 3, to: 4 },
    { from: 31, to: 32 },
    { from: 32, to: 33 },
    { from: 33, to: 31 }
  ]);
}
window.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>

image
image395×724 8.34 KB

5

Thanks, Walter for the example.
Can you please, show me how to identify the clicked element in the callback?
I want to expand/collapse only when clicked on the +4/-4 (the element with the name LABEL)

6

Just move this event handler from the Group:

to the element that you want to handle the click event. I suspect that is the “Auto” Panel holding that “+4” label:

        click: (e, panel) => {
          const g = panel.part;
          if (g.isSubGraphExpanded) e.diagram.commandHandler.collapseSubGraph(g);
          else e.diagram.commandHandler.expandSubGraph(g);
        },