Hi,
Is there a way to set the group width to be determined by the width of its placeholder instead of other pieces of the group content.
In the screenshot below, I want the 2nd group has the same width of the 1st group. That is, I want the first node in the group always touch its left border and the last node always touch its right border. The title should be truncated if it is too long. Is it possible?
I am pasting the complete HTML+JS code below for the diagram above. Thanks!
<!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>
</head>
<body>
<div
id="myDiagramDiv"
style="border: solid 1px black; width: 100%; height: 700px"
></div>
<script src="../../site/release/go-debug.js"></script>
<script>
function init() {
const $ = go.GraphObject.make;
const myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.LayeredDigraphLayout),
});
const nodeDataArray = [
{
key: "Group1",
isGroup: true,
label: "Short title",
},
{
key: "Node1",
group: "Group1",
},
{
key: "Node2",
group: "Group1",
},
{
key: "Node3",
group: "Group1",
},
{
key: "Group2",
isGroup: true,
label:
"Very long long long long long long long long long long long long long long long title",
},
{
key: "Node4",
group: "Group2",
},
{
key: "Node5",
group: "Group2",
},
{
key: "Node6",
group: "Group2",
},
];
const linkDataArray = [
{
from: "Node1",
to: "Node2",
},
{
from: "Node2",
to: "Node3",
},
{
from: "Node4",
to: "Node5",
},
{
from: "Node5",
to: "Node6",
},
{
from: "Group1",
to: "Group2",
},
];
myDiagram.groupTemplate = $(
go.Group,
"Spot",
{
layout: $(go.LayeredDigraphLayout),
},
$(
go.Panel,
"Auto",
$(
go.Shape,
"RoundedRectangle", // surrounds everything
{
parameter1: 10,
fill: null,
stroke: "#999999",
minSize: new go.Size(200, 200),
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight,
}
),
$(
go.Panel,
"Vertical",
$(
go.Panel,
{
height: 30,
alignment: go.Spot.Left,
padding: 2,
},
$(go.TextBlock, new go.Binding("text", "label"))
),
$(go.Placeholder, {
minSize: new go.Size(200, 170),
})
)
)
);
myDiagram.nodeTemplate = $(
go.Node,
"Auto",
$(go.Shape, "Rectangle", {
fill: "yellow",
stroke: "blue",
width: 50,
height: 50,
}),
$(go.TextBlock, new go.Binding("text", "key"), {
textAlign: "center",
})
);
const model = new go.GraphLinksModel();
model.nodeDataArray = nodeDataArray;
model.linkDataArray = linkDataArray;
myDiagram.model = model;
}
window.addEventListener("DOMContentLoaded", init);
</script>
</body>
</html>