I have a group template that toggle the visibility of two parts based on the empty field of the group data.
$(go.Placeholder, new go.Binding("visible", "empty", v => !v), {
minSize: new go.Size(240, 160),
background: "lightblue",
}),
$(go.Panel, "Spot", new go.Binding("visible", "empty"), {
desiredSize: new go.Size(240, 160),
background: "palegreen",
}),
As shown below, either the placeholder or the part is visible.
However, why are the group members (two red dots + the edges between them) always visible, even when the placeholder is not visible? If I understand correctly, this document indicates that the group member should not be displayed if the placeholder is not visible. Did I do anything wrong?
I am including the complete HTML and JS code below. You can toggle the empty value of the object with key: "lane" in the nodeDataArray.
Thanks for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div
id="myDiagramDiv"
style="border: solid 1px black; width: 100%; height: 70%"
></div>
<script src="../../release/go-debug.js"></script>
<script>
const init = () => {
const $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.LayeredDigraphLayout),
});
myDiagram.groupTemplate = $(
go.Group,
"Auto",
{
layout: $(go.LayeredDigraphLayout),
},
$(go.Shape, "RoundedRectangle", {
desiredSize: new go.Size(240, 220),
fill: "white",
}),
$(go.Placeholder, new go.Binding("visible", "empty", v => !v), {
minSize: new go.Size(240, 160),
background: "lightblue",
}),
$(go.Panel, "Spot", new go.Binding("visible", "empty"), {
desiredSize: new go.Size(240, 160),
background: "palegreen",
}),
);
myDiagram.nodeTemplate = $(
go.Node,
"Auto",
$(go.Shape, "Rectangle", {
width: 6,
height: 6,
fill: "red",
}),
);
const nodeDataArray = [
{
key: "lane",
isGroup: true,
empty: false,
},
{
key: "lane-start",
group: "lane",
},
{
key: "lane-end",
group: "lane",
},
];
const linkDataArray = [
{
from: "lane-start",
to: "lane-end",
},
];
const model = new go.GraphLinksModel();
model.nodeGroupKey = "group";
model.nodeDataArray = nodeDataArray;
model.linkDataArray = linkDataArray;
myDiagram.model = model;
};
window.addEventListener("DOMContentLoaded", init);
</script>
</body>
</html>