Custom Link Routing

GoJS
1

Hi, I want to visually change the route of links that link a group to one of their child nodes.
That is to say, if there is a group that has child nodes displayed inside of it and there is a direct link from the group to a child the routing should be customized.

When using a bezier curve it already looks close to what I want, I am looking for a way to make normal links do something similar.

Here we see a screen shot with an illustration of what I want
image

2

The current link drops down from the TopCenter of the group and attaches to the BottomCenter of the child.

In the hand-drawn example to the right the desired route pops up from TopCenter out of the group and comes back around inside to attach to the child.

This can be more or less achieved when using Bezier curves by setting the toSpot and the fromSpot of the link and just letting the routing do its thing.

I haven’t been able to get a normal link to do this.

I attempted to modify the points of the link to specify a point outside the group but this didn’t work, although I am not sure I tried the right way.

Does anyone know how to do this with a regular link (not Bezier) ?
Thanks

3

Yes, the basic idea is to specify a different Spot. That’s in fact how Links do routing – when it recognizes that it’s connecting a member node with its containing group, under the assumption that member nodes are inside its containing group, it reverses the direction that is used at the group.

What are you currently getting for “regular” (non-Bezier curve) routes, and what do you want instead?

4

Ok, that is what I thought, I just need to figure out how to do it then.
Here is a normal link with the right fromSpot and endSpot.
image

5

And here a drawing of something I would like to do (see how the drawn blue line jumps up vertically out of the group before making its way over to the right):
desired

6

And here are the current points of that link.

[
    {
        "x": 1156.9999999999998,
        "y": 307.2141479492187,
        "_isFrozen": true
    },
    {
        "x": 1156.9999999999998,
        "y": 307.2141479492187,
        "_isFrozen": true
    },
    {
        "x": 2021.9999999999995,
        "y": 307.2141479492187,
        "_isFrozen": true
    },
    {
        "x": 2021.9999999999995,
        "y": 432.8228248596191,
        "_isFrozen": true
    },
    {
        "x": 2021.9999999999995,
        "y": 558.4315017700195,
        "_isFrozen": true
    },
    {
        "x": 2021.9999999999995,
        "y": 558.4315017700195,
        "_isFrozen": true
    }
]
7

Try using this custom Link class in your Link template(s):

class CustomLink extends go.Link {
  getLinkDirection(node, port, linkpoint, spot, from, ortho, othernode, otherport) {
    let angle = super.getLinkDirection(node, port, linkpoint, spot, from, ortho, othernode, otherport);
    if (othernode && spot.isNoSpot() && othernode.isMemberOf(node)) {
      angle += 180;
      if (angle >= 360) angle -= 360;
    }
    return angle;
  }
}