In the screenshot below, the groupTemplate has a “decorator” as a red target icon on the left border of the group. How can I make the decorator (go.Panel
) above the group content. According to the GoJS doc, I cannot apply layer
or zOrder
on go.Panel
.
I want the target icon in the first group to be fully visible (above Node1) as the one in the second group. We need the group content to touch the side of the group if the content is wide enough. Therefore, adding margin to the groupTemplate is not an option :( Thank you so much for your time!
I am posting the complete HTML + JS code below. 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,
},
{
key: "Node1",
group: "Group1",
},
{
key: "Node2",
group: "Group1",
},
{
key: "Node3",
group: "Group1",
},
{
key: "Group2",
isGroup: true,
},
{
key: "Node4",
group: "Group2",
},
];
const linkDataArray = [
{
from: "Node1",
to: "Node2",
},
{
from: "Node2",
to: "Node3",
},
{
from: "Group1",
to: "Group2",
},
];
myDiagram.groupTemplate = $(
go.Group,
"Spot",
{
layout: $(go.LayeredDigraphLayout),
},
$(
go.Panel,
"Auto",
$(
go.Shape,
"RoundedRectangle", // surrounds everything
{
parameter1: 10,
fill: "white",
stroke: "#999999",
minSize: new go.Size(200, 200),
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight,
}
),
$(go.Placeholder, {
background: "transparent",
})
),
$(
go.Panel,
{
desiredSize: new go.Size(14, 14),
alignment: new go.Spot(0, 0.5),
},
$(go.Shape, "Circle", {
fill: "white",
stroke: "red",
desiredSize: new go.Size(12, 12),
}),
$(go.Shape, "Circle", {
fill: "red",
stroke: "red",
strokeWidth: 0,
desiredSize: new go.Size(4, 4),
position: new go.Point(4.5, 4.5),
})
)
);
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>