How to isolate this link behavior from a sample

GoJS
1

I am trying to isolate the link behavior in this sample: Simple Block Editor
It’s not clear to me what specific configuration allows for link 1) remain parallel and 2) the links easily snap to straight as a pipe.

image

2

That’s primarily a result of the port spreading that occurs due to the fromSpot/toSpot being set to AllSides and grid snapping on the DraggingTool. See the intro pages here:
https://gojs.net/latest/intro/connectionPoints.html#ToSpotAndFromSpot
https://gojs.net/latest/intro/grids.html#GridSnapping

Here’s a simpler example that demonstrates some nodes with AllSides ports, AvoidsNodes link routing, and snapping to grid. https://codepen.io/jhardy/pen/dyKGYPG?editors=1010

3

Thank you. There is an additional behavior your sample is missing. It appears that the links avoid all overlap in the simple block editor but in your example, the links do intersect. Is there an additional config we are missing?

It’s these are very clean.

image

Your example still has links intersecting each other:
image

4

Look how clean the block editor example is even when shapes over lap:

image

5

In your Alpha/Beta/Gamma/Delta example, did you just move Beta up a relative to Gamma? Since you just moved Beta, it did not recompute the routes for the links between Alpha and Gamma (or between Alpha and Delta), since those nodes were unaffected by the move. That was a policy decision – by default we didn’t want those unaffected nodes and links to have any state lost by the move of the Beta node.

But you can implement your own policy where any move will cause all links connected with nodes that are connected with moved nodes to be re-routed:

  $(go.Diagram, . . .,
    {
      "SelectionMoved": e => {
        e.subject.each(n => {
          if (!(n instanceof go.Node)) return;
          n.linksConnected.each(l => {
            l.getOtherNode(n).linksConnected.each(l => l.invalidateRoute());
          });
        }),
      . . .
    })

That’s a blunt policy – you might want to be more selective with those links whose routes you recalculate.

6

OK, the last missing behavior. In the sample you provided, note how the link creates a small “notch” rather than snapping straight. This is perhaps one of the most annoying default behaviors of the framework. Having said this, we love the way this example works in the block example. What specific config do we need on the link template for this behavior? Again we are trying to isolate each behavior we like.

Defualt Behavior
image

Desired Behavior (this is the smallest notch possible in the example before it snaps straight)
image

7

Did you just move either the Alpha or the Delta node, and there no other links connecting with Alpha on the right side? If so, I’m surprised that you have gotten that result – it should be just as you are expecting.

8

It is strange and you can duplicate the problem in the example you gave above.

9

That’s different. No nodes have been moved by the DraggingTool – instead you have deleted two other links connected with Alpha, probably by deleting the Beta and Gamma nodes.

Try adding these event handlers to your node templates:

      {
        linkConnected: (node, link, port) => node.linksConnected.each(l => l.invalidateRoute()),
        linkDisconnected: (node, link, port) => node.linksConnected.each(l => l.invalidateRoute())
      },