Link end points

GoJS
1

Hi,

By default, the links start and end at the node shape or the port shape; like this:

image

So on the side of the circle in this case.

However, I would like the link start and end points to be the location of the node/port; like this:

image

Is this possible?

2

Sure, just have the node’s port be tiny and at the center of that circle.

BTW, you can set Link.toShortLength to 1 or 2, so that the arrowhead looks nicer.

3

Thanks for the tip!

Regarding the tiny node port: It would be very hard to select then I think using the LinkingTool, or can I use another shape as handle? Or how can I solve this.

Thanks.

4

The LinkingBaseTool.portGravity distance causes links to “snap” to ports if the connection is valid.

5

Thanks for pointing that out. But when initiating a link, the user has to select the start node right? This would solve snapping at the link end but not initiating a link at the start node/port.

edit: making it tiny works perfectly for the links but I am not able to select the node/port anymore:

image
image654×641 1.86 KB

6

You’ll need to customize the LinkingTool:

      $(go.Diagram, . . .,
        {
          "linkingTool.findLinkablePort": function() {
            const diagram = this.diagram;
            let obj = this.startObject;
            if (obj === null) {
              obj = diagram.findObjectAt(diagram.firstInput.documentPoint, null, null);
            }
            if (obj === null) return null;
            const part = obj.part;
            if (!(part instanceof go.Node)) return null;
            return part.port;  // use the default port
          },

This assumes that every Node is “linkable”. If that might not be the case, due to LinkingTool.direction or GraphObject.fromLinkable or toLinkable, the override will have to be smarter.

7

I am not really sure how I should continue with your example. Or what it should do. Another thought that slipped my mind: can I alter the computePoints in the Link and update the start and end points?

8

I don’t understand your question. Did you try that code?

Yes, you could change the behavior of Link.computePoints to do what you want instead of using a tiny port, But those computations might not be trivial for Bezier-curved links. It depends on what you want to do.

9

Experiented some more with your code and I finally got it to work. Thanks Walter. I am now adding an additional shape with also a portId specified and use that portId to determine the desired port in the LinkingTool.findLinkablePort method.