If a group has a simple diagram, the start node and the end node (red dots) are vertically-center aligned inside a group, which is good because the group ports are also vertically centered.
However, when the diagram inside a group becomes a little more complicated, the start and the end nodes are no longer vertically-center aligned.
I am wondering if there is any approach to always keep the start and the end nodes inside a group vertically-center aligned, which makes the start node and the left port properly aligned and the end node and the right port properly aligned.
I posted the HTML + JS code below with the problematic layout.
<!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>
#myDiagramDiv {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDiagramDiv"></div>
<script src="../../release/go-debug.js"></script>
<script>
const $ = go.GraphObject.make;
const init = () => {
const myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.LayeredDigraphLayout, {
layerSpacing: 50,
linkSpacing: 20,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
}),
});
myDiagram.nodeTemplateMap.add(
"",
$(
go.Node,
"Position",
$(go.Shape, "RoundedRectangle", {
name: "CONTAINER",
fill: "transparent",
width: 200,
height: 150,
stroke: null,
}),
$(go.Shape, "RoundedRectangle", {
fill: "white",
position: new go.Point(0, 0),
width: 200,
height: 120,
}),
$(
go.TextBlock, // the text label
new go.Binding("text", "label"),
{
position: new go.Point(0, 120),
width: 200,
height: 30,
verticalAlignment: go.Spot.Center,
textAlign: "center",
},
),
),
);
myDiagram.nodeTemplateMap.add(
"global-node",
$(
go.Node,
"Spot",
$(go.Shape, "Circle", {
fill: null,
width: 30,
height: 30,
stroke: "black",
}),
),
);
myDiagram.nodeTemplateMap.add(
"group-node",
$(
go.Node,
"Spot",
$(go.Shape, "Circle", {
fill: "red",
width: 5,
height: 5,
stroke: null,
}),
),
);
myDiagram.linkTemplate = $(
go.Link,
go.Link.Orthogonal,
{
corner: 10,
},
$(go.Shape, { strokeWidth: 1 }),
$(go.Shape, { toArrow: "Standard", stroke: null }),
);
myDiagram.groupTemplate = $(
go.Group,
"Auto",
{
layout: $(go.LayeredDigraphLayout, {
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
layerSpacing: 50,
}),
},
$(
go.Shape,
"RoundedRectangle", // surrounds everything
{ parameter1: 10, fill: "rgba(128,128,128,0.33)" },
),
$(
go.Panel,
"Vertical", // position header above the subgraph
$(
go.Panel,
{
height: 20,
},
$(
go.TextBlock, // group title near top, next to button
{ font: "Bold 12pt Sans-Serif" },
new go.Binding("text", "label"),
),
),
$(
go.Placeholder, // represents area for all member parts
{ padding: 5, background: "white" },
),
$(go.Panel, {
height: 20,
}),
),
);
const nodeDataArray = [
{
key: "start",
category: "global-node",
},
{
key: "end",
category: "global-node",
},
{
key: "group",
isGroup: true,
label: "Group",
},
{
key: "group-start",
group: "group",
category: "group-node",
},
{
key: "group-end",
group: "group",
category: "group-node",
},
{
key: "node1",
group: "group",
label: "Node 1",
},
{
key: "node2",
group: "group",
label: "Node 2",
},
{
key: "node3",
group: "group",
label: "Node 3",
},
];
const linkDataArray = [
{
from: "start",
to: "group",
},
{
from: "group",
to: "end",
},
{
from: "group-start",
to: "node1",
},
{
from: "group-start",
to: "node2",
},
{
from: "node1",
to: "node3",
},
{
from: "node2",
to: "group-end",
},
{
from: "node3",
to: "group-end",
},
];
const model = new go.GraphLinksModel();
model.nodeGroupKey = "group";
model.nodeDataArray = nodeDataArray;
model.linkDataArray = linkDataArray;
model.linkFromPortIdProperty = "fromPort";
model.linkToPortIdProperty = "toPort";
myDiagram.model = model;
};
window.addEventListener("DOMContentLoaded", init);
</script>
</body>
</html>
Below are another nodeDataArray and linkDataArray that cause problematic layout.
const nodeDataArray = [
{
key: "start",
category: "global-node",
},
{
key: "end",
category: "global-node",
},
{
key: "group",
isGroup: true,
label: "Group",
},
{
key: "group-start",
group: "group",
category: "group-node",
},
{
key: "group-end",
group: "group",
category: "group-node",
},
{
key: "node1",
group: "group",
label: "Node 1",
},
{
key: "node2",
group: "group",
label: "Node 2",
},
{
key: "node3",
group: "group",
label: "Node 3",
},
];
const linkDataArray = [
{
from: "start",
to: "group",
},
{
from: "group",
to: "end",
},
{
from: "group-start",
to: "node1",
},
{
from: "group-start",
to: "node2",
},
{
from: "node1",
to: "node3",
},
{
from: "node3",
to: "group-end",
},
];
Thanks so much for your time!
