The lanes and the link inside of the pool all have zOrder set to 2. But if I change zOrder of the link to 1 and then back to 2 it remains behind the lanes. What should I do to bring it back to front?
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go-debug.js"></script>
<div id="sample" style="display: flex">
<div
id="diagramDiv"
style="border: solid 1px black; width: 600px; height: 600px"
></div>
</div>
<p>
The lanes and the link inside of the pool all have zOrder set to 2. But if
I change zOrder of the link to 1 and then back to 2 it remains behind the
lanes. What should I do to bring it back to front?
</p>
<button id="zOrder1">Link.zOrder = 1</button>
<button id="zOrder2">Link.zOrder = 2</button>
<ul id="log"></ul>
<script id="code">
const diagram = new go.Diagram("diagramDiv", {
"animationManager.isEnabled": false,
});
const nodeTemplate = new go.Node("Auto")
.bindTwoWay("location", "location", go.Point.parse, go.Point.stringify)
.bindTwoWay("zOrder")
.add(
new go.Shape("RoundedRectangle", {
strokeWidth: 0,
fill: "white",
}).bind("fill", "color"),
new go.TextBlock({
margin: 8,
font: "bold 14px sans-serif",
stroke: "#333",
}).bind("text")
);
const poolTemplate = new go.Group("Auto", {
layout: new go.GridLayout({
alignment: go.GridAlignment.Position,
comparer: (a, b) => a.position.x - b.position.x,
spacing: new go.Size(0, 0),
cellSize: new go.Size(0, 0),
wrappingColumn: Infinity,
wrappingWidth: Infinity,
isRealtime: true,
}),
})
.bindTwoWay("location", "location", go.Point.parse, go.Point.stringify)
.bindTwoWay("zOrder")
.add(
new go.Shape("RoundedRectangle", {
strokeWidth: 1,
fill: "white",
width: 400,
height: 400,
})
);
const laneTemplate = new go.Group("Vertical", {
isSubGraphExpanded: true,
})
.bindTwoWay("location", "location", go.Point.parse, go.Point.stringify)
.bindTwoWay("isSubGraphExpanded")
.bindTwoWay("zOrder")
.add(
new go.Shape("RoundedRectangle", {
strokeWidth: 1,
fill: "white",
width: 150,
height: 350,
}).bindObject(
"desiredSize",
"isSubGraphExpanded",
(isSubGraphExpanded) =>
isSubGraphExpanded ? new go.Size(150, 350) : new go.Size(30, 350)
)
);
const linkTemplate = new go.Link({
reshapable: true,
resegmentable: true,
routing: go.Routing.Orthogonal,
})
.bindTwoWay(
"points",
"points",
(points) => points.map(go.Point.parse),
(points) => {
const result = points.map(go.Point.stringify).toArray();
// console.trace(result);
return result;
}
)
.bindTwoWay("zOrder")
.add(new go.Shape({ strokeWidth: 1.5, stroke: "red" }))
.add(
new go.Shape({
strokeWidth: 0,
fill: "red",
scale: 0.7,
fromArrow: "circle",
})
)
.add(
new go.Shape({
strokeWidth: 0,
fill: "red",
scale: 0.7,
toArrow: "circle",
})
);
diagram.nodeTemplate = nodeTemplate;
diagram.groupTemplateMap.add("Pool", poolTemplate);
diagram.groupTemplateMap.add("Lane", laneTemplate);
diagram.linkTemplate = linkTemplate;
const nodes = [
{
key: "P",
isGroup: true,
category: "Pool",
location: "31.24609375 -0.3515625",
zOrder: 1,
},
{
key: "L1",
group: "P",
isGroup: true,
category: "Lane",
location: "31.24609375 -0.3515625",
zOrder: 2,
},
{
key: "L2",
group: "P",
isGroup: true,
category: "Lane",
location: "62.24609375 -0.3515625",
zOrder: 2,
},
{
key: "N1",
group: "L1",
text: "Alpha",
color: "lightblue",
location: "74.30859375 157.82421875",
zOrder: 3,
},
{
key: "N2",
group: "L2",
text: "Beta",
color: "orange",
location: "150.8359375 88.375",
zOrder: 3,
},
];
const links = [
{
from: "N1",
to: "N2",
zOrder: 2,
},
];
diagram.model = new go.GraphLinksModel([], []);
setTimeout(() => {
diagram.model.addNodeDataCollection(nodes);
diagram.model.addLinkDataCollection(links);
});
const log = document.getElementById("log");
document.getElementById("zOrder1").addEventListener("click", () => {
const link = [...diagram.links][0];
diagram.commit(() => {
link.zOrder = 1;
});
const li = document.createElement("li");
li.innerText = `Link.zOrder === ${link.zOrder}`;
log.appendChild(li);
});
document.getElementById("zOrder2").addEventListener("click", () => {
const link = [...diagram.links][0];
diagram.commit(() => {
link.zOrder = 2;
});
const li = document.createElement("li");
li.innerText = `Link.zOrder === ${link.zOrder}`;
log.appendChild(li);
});
</script>
</body>
</html>
