Custom Link Routing or option to ignore specific panel

GoJS
1

Hi,

I’m currently facing an issue, which consists of two nodes connected by two links. The connection setup works well; however, I’ve encountered a challenge when introducing conditional “permanent tooltips” (panels) into the mix.

These tooltips seem to interfere with the link routing, as the links are configured to avoid nodes, and they appear to be treating these tooltip panels as obstacles to be avoided. This behavior is illustrated in the attached screenshots.

Screenshot 2024-02-29 at 13.55.42
Screenshot 2024-02-29 at 13.55.421035×522 25.5 KB

Screenshot 2024-02-29 at 13.58.44
Screenshot 2024-02-29 at 13.58.441035×517 16 KB

Is there a solution to either make certain elements ignored in the link routing algorithm, or is there an alternative way to display tooltips permanently without affecting the link paths?

Thanks in advance

2

How are those “permanent tooltips” implemented?

I would implement them as labels on links: GoJS Link Labels -- Northwoods Software

3

They are included as standard panels within the node (Port). I also thought about this, but they should also be shown when there is no Link attached. They display the name of the Port.

 new Panel(Panel.Auto, {
    margin,
  })
    .add(
      new Shape({
        fill: 'white',
      }),
      new TextBlock({
        stroke: 'black',
        margin: 2,
        textAlign: actualSide,
        verticalAlignment: Spot.Center,
      }).bind('text', 'name'),
    )
}

And those are attached to a Horizontal “Port Panel”

4

Ah, OK, that makes sense. But then it should also make sense that if those port names are part of the Node, the Node’s bounds would naturally include those names, making the nodes bigger than that big rectangular gray area.

But you can customize how big the “avoidable” area is for those nodes. The easy way is to set Node.avoidableMargin, but that won’t work for your case because your port names have different sizes and thus they stick out variable distances from the big rectangular area.

So what you can do is define a custom Node subclass that overrides the Node.getAvoidableRect method. I’ll assume the name of that big rectangular area is “BODY”. Then you could use something like:

class AvoidableNode extends go.Node {
  getAvoidableRect(result) {
    return this.findObject("BODY").getDocumentBounds(result);
  }
}

Use this class instead of go.Node in your node template(s).

If some of your node templates don’t have a “BODY” object, you’ll need to check for findObject returning null.

Also, maybe you want to add Node.avoidableMargin to the result. Depends on what routing behavior you want.

5

Thank you very much, it works :)