Here’s my test app that lets one do what you did:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Editor</title>
<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
// initialize main Diagram
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"commandHandler.archetypeGroupData": { isGroup: true, text: "Group", color: "green" },
"undoManager.isEnabled": true,
"InitialLayoutCompleted": function(e) {
myDiagram.findTopLevelGroups().each(function(g) { console.log(g.data.text); });
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape,
{
fill: "white", stroke: "gray", strokeWidth: 2,
portId: "", fromLinkable: true, toLinkable: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true,
fromLinkableSelfNode: true, toLinkableSelfNode: true
},
new go.Binding("stroke", "color")),
$(go.TextBlock,
{
margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
editable: true
},
new go.Binding("text").makeTwoWay())
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
{
ungroupable: true,
handlesDragDropForMembers: true,
mouseDrop: function(e, grp) { grp.addMembers(e.diagram.selection); }
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, { fill: "#AAAAAA20", strokeWidth: 0 }),
$(go.Panel, "Table",
$(go.Shape,
{ fill: "orange", strokeWidth: 0, width: 20, stretch: go.GraphObject.Vertical },
new go.Binding("fill", "color")),
$(go.Panel, "Vertical",
{ column: 1 },
$(go.TextBlock,
{ margin: 5, minSize: new go.Size(200, NaN), editable: true },
new go.Binding("text").makeTwoWay()),
$(go.Placeholder, { padding: 5, minSize: new go.Size(200, NaN) }),
// A textual button for toggling Group.isSubGraphExpanded
$(go.TextBlock,
{
alignment: go.Spot.Left,
margin: 5,
isUnderline: true,
stroke: "royalblue",
click: function(e, tb) {
var group = tb.part;
if (group.isSubGraphExpanded) {
group.diagram.commandHandler.collapseSubGraph(group);
} else {
group.diagram.commandHandler.expandSubGraph(group);
}
}
},
new go.Binding("text", "isSubGraphExpanded",
function(exp) { return exp ? "Hide" : "Show"; }).ofObject()
)
// Alternatively:
// $("SubGraphExpanderButton", { alignment: go.Spot.Left, margin: 5 })
)
)
)
// initialize Palette
myPalette =
$(go.Palette, "myPaletteDiv",
{
nodeTemplateMap: myDiagram.nodeTemplateMap,
groupTemplateMap: myDiagram.groupTemplateMap,
model: new go.GraphLinksModel([
{ text: "red node", color: "red" },
{ text: "green node", color: "green" },
{ text: "blue node", color: "blue" },
{ text: "orange node", color: "orange" },
{ text: "Group 1", color: "purple", isGroup: true }
])
});
// initialize Overview
myOverview =
$(go.Overview, "myOverviewDiv",
{
observed: myDiagram,
contentAlignment: go.Spot.Center
});
load();
}
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
var str = myDiagram.model.toJson();
document.getElementById("mySavedModel").value = str;
}
function load() {
var str = document.getElementById("mySavedModel").value;
myDiagram.model = go.Model.fromJson(str);
}
</script>
</head>
<body onload="init()">
<div style="width: 100%; display: flex; justify-content: space-between">
<div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
<div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: floralwhite; border: solid 1px black"></div>
<div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: whitesmoke; border: solid 1px black"></div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
</div>
<div id="buttons">
<button id="loadModel" onclick="load()">Load</button>
<button id="saveModel" onclick="save()">Save</button>
</div>
<textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"isGroup":true, "text":"Somma", "loc":"128 -31.5", "horiz":"#FFAA33", "rightArray":[ {"portId":"Ambito", "checked":true},{"portId":"Scalo", "checked":true},{"portId":"Profit", "checked":true} ], "source":"/FILL_EM/img/plus.png", "key":-1},
{"isGroup":true, "text":"Prodotto", "loc":"144 14", "horiz":"#33D3E5", "rightArray":[ {"portId":"Ambito", "checked":true},{"portId":"Scalo", "checked":true},{"portId":"Profit", "checked":true} ], "source":"/FILL_EM/img/mult.png", "key":-2, "group":-1},
{"isGroup":true, "text":"Prodotto", "loc":"744 14", "horiz":"#33D3E5", "rightArray":[ {"portId":"Profit", "checked":true},{"portId":"Scalo", "checked":true},{"portId":"Ambito", "checked":true} ], "source":"/FILL_EM/img/mult.png", "key":-3, "group":-1},
{"key":"PE700", "text":"PE700", "category":"Input", "group":-2, "name":"Parametro test dimensioni su base anagrafica 1", "fields":[ {"id":"PE700_3", "name":"Ambito"},{"id":"PE700_1", "name":"Scalo"} ], "loc":"159 29.00000000000007"},
{"key":"PE703", "text":"PE703", "category":"TOTOUT", "group":-2, "name":"Parametro test calcolato prodotto", "fields":[ {"id":"PE703_1", "name":"Scalo"},{"id":"PE703_3", "name":"Ambito"},{"id":"PE703_2", "name":"Profit"} ], "loc":"399.00000000000017 29.00000000000007"},
{"key":"PE701", "text":"PE701", "category":"Input", "group":-3, "name":"Parametro test dimensioni su base anagrafica 2", "fields":[ {"id":"PE701_2", "name":"Profit"},{"id":"PE701_1", "name":"Scalo"},{"id":"PE701_3", "name":"Ambito"} ], "loc":"758.9999999999998 29.00000000000007"},
{"key":"PE704", "text":"PE704", "category":"Input", "group":-3, "name":"Parametro test dimensioni configurabili", "fields":[ {"id":"PE704_1", "name":"Scalo"},{"id":"PE704_3", "name":"Ambito"} ], "loc":"999.0000000000002 29.00000000000007"}
],
"linkDataArray": []}
</textarea>
</body>
</html>
After doing what you list you did, I am unable to reproduce any problem.
myDiagram.findTopLevelGroups().each(function(g) { console.log(g.data.text); });
printed two groups, as one would expect with the third one as a member of one of the other two groups.
EDIT: I have replaced the earlier serialized model in the page with the one I just built by hand, in case what I built isn’t what you were building.
