使用 GoJS 更改链接上面板的 zOrder

Question

I am trying to configure my GoJS diagram (using LayeredDiagraphLayout) such that the panels showing a link's label (in this example it displays a percentage) is always at the foreground, in front of all other items on the diagram. Currently, it is displaying with some link lines in front of the panels (as shown in this image):

My goal:

To ensure that panels displaying percentages are always visible in front of everything else.

What I've Tried So Far:

Bringing the links into the Foreground layer (as suggested here ):

myDiagram.linkTemplate =
  $$(go.Link,
    { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 5, layerName:"Foreground" },
    $$(go.Shape, { strokeWidth: 3, stroke: "#555" }),
    $$(go.Panel, "Auto", // this whole Panel is a link label
      $$(go.Shape, "RoundedRectangle", { fill: "lightgray", stroke: "gray" }),
      $$(go.TextBlock, { margin: 3 },
        new go.Binding("text", "ownership"))
    )
  );

Assigning a zOrder directly to the go.Panel , go.Shape , and go.TextBlock items seen in the code above, however, all gave errors like this: Uncaught Error: Trying to set undefined property "zOrder" on object: Shape(RoundedRectangle) . According to the documentation , Part extends Panel , so I expected that I would be able to assign a zOrder to a Panel , but it is giving this error, so apparently my expectations were wrong.

How can I configure this diagram such that the Panel on the Link is always at the foreground and therefore always visible in front of everything else? Thank you!

Answer 1

See https://forum.nwoods.com/t/changing-zorder-for-panel-on-link-on-layereddiagraphlayout/13714 for a discussion.

Maybe this is what you want, assuming the label is the second element of the Link:

      $(go.Diagram, . . .,
        {
          layout: $(go.LayeredDigraphLayout, { direction: 90, . . . }),
          "LayoutCompleted": function(e) {
            e.diagram.links.each(function(l) { l.elt(1).segmentIndex = -Infinity; });
            e.diagram.nodes.each(function(n) {
              var outs = n.findLinksOutOf();
              var ins = n.findLinksInto();
              if (outs.count === 1) outs.first().elt(1).segmentIndex = 1;
              else if (ins.count === 1) ins.first().elt(1).segmentIndex = -2;
            });
          },
          . . .