Link end points


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


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:


Is this possible?

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.

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.


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

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:

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.

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?

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.

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.