@walter Had to move to a new thread since I hit my “3 replies” limit.
I get an error Cannot read properties of undefined (reading 'fill') and have traced it to Groups when using Routing.AvoidsNodes and isSubGraphExpanded: false,
Here is a simple example that reproduces the error. Change isSubGraphExpanded: false, to isSubGraphExpanded: true, and it works. Could it have something to do with the myDiagram.commandHandler.archetypeGroupData?
<html>
<body>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
<!-- The DIV for a Diagram needs an explicit size -->
<div
id="myDiagramDiv"
style="
width: 500px;
height: 500px;
background-color: #dae4e4;
margin: 20px auto;
border: 1px solid black;
"
>
<script>
let $$ = go.GraphObject.make;
// Diagram declaration
let myDiagram = $$(go.Diagram, "myDiagramDiv", {
initialContentAlignment: go.Spot.Center, // center Diagram contents
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
});
myDiagram.linkTemplate = $$(
go.Link,
{
routing: go.Routing.AvoidsNodes,
corner: 5,
relinkableFrom: true,
relinkableTo: true,
},
$$(
go.Shape,
{
name: "linkLine",
},
new go.Binding("stroke", "isHighlighted", function (h) {
return h ? Colors.link.selected : Colors.link.default;
}).ofObject(),
{ strokeWidth: 3 }
),
$$(
go.Shape,
{
name: "linkArrow",
},
new go.Binding("stroke", "isHighlighted", function (h) {
return h ? Colors.link.selected : Colors.link.default;
}).ofObject(),
new go.Binding("fill", "isHighlighted", function (h) {
return h ? Colors.link.selected : Colors.link.default;
}).ofObject(),
{ toArrow: "Standard" }
)
);
// Node template declaration
myDiagram.nodeTemplate = $$(
go.Node,
"Vertical",
$$(
go.Panel,
"Auto",
$$(
go.Shape,
"RoundedRectangle",
{ fill: "#44CCFF", stroke: "transparent" },
new go.Binding("figure", "shape")
),
$$(
go.TextBlock,
"Default Text",
{ margin: 10, stroke: "white", font: "bold 10px sans-serif" },
new go.Binding("text", "name")
)
)
);
myDiagram.groupTemplate = $$(
go.Group,
"Auto",
{
isSubGraphExpanded: false,
},
new go.Binding("background", "isHighlighted", function (h) {
return h ? "#dedede" : "transparent";
}).ofObject(),
$$(go.Shape, "Rectangle", { fill: null, strokeWidth: 2 }),
$$(
go.Panel,
"Vertical", // title above Placeholder
$$(
go.Panel,
"Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal },
$$("SubGraphExpanderButton", {
alignment: go.Spot.Right,
margin: 5,
}),
$$(
go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: new go.Margin(5, 15, 5, 5),
font: "bold 14px roboto, normal",
//opacity:0.75,
stroke: "#ffffff",
},
new go.Binding("text", "label").makeTwoWay()
)
), // end Horizontal Panel
$$(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
) // end Vertical Panel
);
myDiagram.commandHandler.archetypeGroupData = {
isGroup: true,
category: "Group Of Operations",
label: "Group",
};
// Model declaration
let nodeDataArray = [
{
name: "Input",
key: -1,
},
{
name: "Output",
key: -3,
},
{
name: "Filter",
key: -6,
group: -4,
},
{
isGroup: true,
category: "Group Of Operations",
label: "Group",
key: -4,
type: "Group Of Operations",
},
];
var linkDataArray = [
{
from: -1,
to: -6,
frompid: "O1",
topid: "I1",
},
{
from: -6,
to: -3,
frompid: "O1",
topid: "I1",
},
];
myDiagram.model = new go.GraphLinksModel();
myDiagram.model.nodeDataArray = nodeDataArray;
myDiagram.model.linkDataArray = linkDataArray;
</script>
</div>
</body>
</html>