Recursive Link Overlapping Other Links

GoJS
1

In the following diagram, when I have a link that links to itself with other links, the links overlap (i.e. see the links connected to the TRANSACTION node). However, when I have the links connected between two nodes, they don’t overlap (i.e. see links connected to LINE_ITEM. How do I get the recursive links to automatically separately similar to the other links?

image
image916×656 24.8 KB

2

Reflexive links are routed separately from the other links.

Maybe you could do something like:

    function updateReflexive(link) {
      if (link.fromPort === link.toPort) {
        link.fromSpot = new go.Spot(0.999, 1, -5, 0);
        link.toSpot = new go.Spot(1, 0.999, 0, -5);
        link.curviness = 4;
      } else {
        link.fromSpot = go.Spot.Default;
        link.toSpot = go.Spot.Default;
        link.curviness = NaN;
      }
    }

    myDiagram.linkTemplate =
      $(go.Link,
        {
          routing: go.Link.Orthogonal,
          fromPortChanged: updateReflexive,
          toPortChanged: updateReflexive
        },
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard" })
      );

Fiddle with the constants to suit your taste. If there might be multiple reflexive links, you could consider handling those distinctly.

3

This works great! How do I make it so the points are a little further from the node so the text on the link doesn’t overlap the node?

4

Fiddle with the curviness.

5

Perfect! Thank you.