OK, here’s what I was able to construct using the code that you provided above. I had to comment out basically everything involving this, referring to functions that I know nothing about.
I’m not able to reproduce any problems. What is different in this sample? Ignore irrelevant differences, please.
<!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>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
<script src="https://unpkg.com/gojs"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"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 =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
);
let properties = {
ungroupable: true,
//contextMenu: this.myContextMenu,
//selectionAdornmentTemplate: this.TMSelectionAdornmentTemplate(),
// highlight when dragging into the Group
//mouseDragEnter: this.highlightGroupMouseEnterNewLayout.bind(this),
//mouseDragLeave: this.highlightGroupMouseLeave.bind(this),
//dragComputation: this.stayInGroup.bind(this),
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
//mouseDrop: this.finishDrop.bind(this),
//selectionChanged: (e: go.Part) => currentInstance.setLayerForeground(e)
};
let editNodeText = true;
myDiagram.groupTemplate =
$(go.Group, "Auto", {
layout: $(go.LayeredDigraphLayout, {
direction: 0,
layerSpacing: 10,
isInitial: false,
isOngoing: false,
columnSpacing: 10
}),
computesBoundsAfterDrag: false,
computesBoundsIncludingLinks: false,
computesBoundsIncludingLocation: false,
handlesDragDropForMembers: true,
movable: true,
isShadowed: true,
shadowOffset: new go.Point(2, 2),
shadowColor: "#c7c7c7"
}, new go.Binding("movable", "AllowMove"),
new go.Binding("location", "Location", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, //this.getShapeNewLayout("Collection"),
{ //strokeDashArray: this.getStrokeDashArrayNewLayout("Collection"),
fill: "transparent",
parameter1: 7, strokeWidth: 2 },
new go.Binding("fill", "BackgroundColor"),
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "red" : "#bababa"; }).ofObject(),
new go.Binding("stroke", "BorderColor", function (f) { return "black" ? "#3c3b3d" : f }).ofObject(),
new go.Binding("strokeWidth", "BorderThickness")),
$(go.Panel, go.Panel.Table, { name: "panelRegular", defaultAlignment: go.Spot.Center },
$(go.RowColumnDefinition, { row: 1 }),
$(go.RowColumnDefinition, { row: 2 }),
$(go.Panel, go.Panel.Horizontal,
{ row: 1, column: 0, margin: 2, stretch: go.GraphObject.Horizontal, background: "lavender" },
new go.Binding("background", "TitleBackgroundColor"),
$("SubGraphExpanderButton", //"SubGraphExpanderImageButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.LeftCenter,
editable: editNodeText,
margin: 5,
font: "bold 18px 'Gilroy',sans-serif",
portId: "T",
stroke: "#3c3b3d",
fromSpot: go.Spot.Default,
toSpot: go.Spot.Default,
//toLinkable: true,
//fromLinkable: true,
//cursor: "pointer",
//textValidation: currentInstance.okName,
//textEdited: currentInstance.nodeTextEdited.bind(currentInstance)
}, new go.Binding("text" /*, "FullName"*/).makeTwoWay()),
//currentInstance.makeInformationIcon(go.Spot.Right, go.Spot.Right, 5)
),
$(go.Placeholder,
{ row: 2, column: 0, margin: 2, alignment: go.Spot.TopLeft, padding: 10 },
new go.Binding("background", "BackgroundColor"))),
properties,
new go.Binding("isSubGraphExpanded", "isGraphExpanded").makeTwoWay()
);
myDiagram.model = new go.GraphLinksModel(
[
{"key":"GA","text":"Group A","isGroup":true,"Location":"3 36.5", "isGraphExpanded":false},
{"key":"GB","text":"Group B","isGroup":true,"group":"GA","Location":"96 83", "isGraphExpanded":false},
{"key":"GC","text":"Group C","isGroup":true,"group":"GB","Location":"109 129.5", "isGraphExpanded":false},
{"key":1,"text":"Alpha","color":"lightblue","group":"GA","loc":"13 136.125"},
{"key":2,"text":"Beta","color":"orange","group":"GB","loc":"252.02284749830795 192.75"},
{"key":3,"text":"Gamma","color":"lightgreen","group":"GC","loc":"119 139.5"},
{"key":4,"text":"Delta","color":"pink","group":"GB","loc":"250.52284749830795 142.75"}
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 },
]);
</script>
</body>
</html>