Hello,
we use one of the latest GoJS library versions (2.1.38) and face sometimes a very frustrating issue, which is I guess related to the z-index of GraphObjects
in the diagram. Our users started to complain, that links, which connect nodes are shown incorrectly.
I was wondering why nodes are z-indexed correctly and links not, because if you look at the example, which I have attached below, you could see, that groups and nodes appear correctly in the diagram, the z-index depends on the node addition to the diagram - no strange overlapping issues, but the links are just stupidly wrong. In the attachment, you can see that links are showing on the top even from the far behind group.
As a user I would expect, that links are managed the same way as nodes are - only the relevant links are shown, for example, if I look at the top group, I only see the links, which are incoming and outgoing of this group and all the links, which are in this group…
We would like to improve this behavior, as it is really frustrating and users have a hard time understanding the connections between nodes, because you need to do a lot of additional work, like dragging the group somewhere to the side, just to not see the irrelevant links. What could be done in this case?
I will also attach the link template and diagram setup parameters (if you need any other input, please, let me know):
- Link template:
setupLinkTemplate() {
return this.create(go.Link,
{
routing: go.Link.Orthogonal, corner: 5,
relinkableFrom: true, relinkableTo: true,
curviness: 5, curve: go.Link.JumpOver
},
new go.Binding("deletable"),
new go.Binding("visible"),
new go.Binding("opacity"),
new go.Binding("pickable", "opacity", (o) => o > 0),
new go.Binding("curve", "opacity", (o) => o > 0 ? go.Link.JumpOver : go.Link.Normal),
this.create(
go.Shape,
{
stroke: "gray"
},
new go.Binding("strokeWidth", "", (obj) => {
if (this.linkPortsAreReadOnly(obj)) {
return 3;
} else {
return 2;
}
}).ofObject()
),
this.create(go.Shape,
{ fill: "gray", toArrow: "Standard", stroke: "gray" },
)
);
}
- Diagram setup:
setupDiagram(params) {
return this.create(go.Diagram, params.container, {
initialContentAlignment: go.Spot.TopCenter,
contentAlignment: go.Spot.TopCenter,
layout: this.create(go.LayeredDigraphLayout,
{
direction: 90,
isOngoing: true,
isRealtime: false
}),
"undoManager.isEnabled": false,
"model": new go.GraphLinksModel(),
"model.makeUniqueKeyFunction": this.generateUUID,
"model.linkFromPortIdProperty": "frompid",
"model.linkToPortIdProperty": "topid",
"animationManager.isInitial": false,
allowDrop: true,
padding: 150
});
}
P.S: We have the support available as we recently renewed our license for the 2.1.* version.