Avoid other link overlapped other link lable

GoJS
1

I got an issue that my link’s label get overlapped from another link, is there any possible options to fix this?

image
image958×527 51.7 KB

below is my link template:

 diagram.linkTemplate = $(
        go.Link, // the whole link panel
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 0,
          relinkableFrom: true,
          relinkableTo: true,
          reshapable: true,
          resegmentable: true,
          fromSpot: go.Spot.BottomSide,
          // toSpot: go.Spot.TopSide,
          // mouse-overs subtly highlight links:
          selectionAdorned: false
        },
        new go.Binding('points').makeTwoWay(),
        $(
          go.Shape, // the highlight shape, normally transparent
          {
            isPanelMain: true,
            strokeWidth: 8,
            stroke: 'transparent',
            name: 'HIGHLIGHT'
          }
        ),
        $(
          go.Shape, // the link path shape
          { isPanelMain: true, stroke: 'gray', strokeWidth: 2 },
          new go.Binding('strokeWidth', 'strokeWidth'),
          new go.Binding('stroke', 'isSelected', function (sel) {
            return sel ? 'dodgerblue' : 'gray'
          }).ofObject()
        ),
        $(
          go.Shape, // the arrowhead
          {
            toArrow: 'standard',
            strokeWidth: 0,
            fill: 'gray',
            visible: false,
            name: 'ARROW'
          }
        ),
        $(
          go.Panel,
          'Auto', // the link label, normally not visible
          {
          },
          new go.Binding('visible', 'includeOwnerPercent'),
          $(
            go.Shape,
            'RoundedRectangle', // the label shape
            { fill: '#f4f4f4', strokeWidth: 1, width: 100 }
          ),
          $(
            go.TextBlock,
            {
              textAlign: 'center',
              font: '10pt helvetica, arial, sans-serif',
              stroke: '#333333',
              text: 'Common - 100\n test label'
            },
            new go.Binding('text', 'ownerPercent')
          )
        )
      )

Many thanks!

2

Try using a custom Link class that makes use of Adornments to make sure the labels are always in front of all Links, so there’s no chance that a link will cross in front of a label.
Link labels always in front
As always, the complete source code is in that page script itself.