Highlighting the nearest port to a link

Hi,

When I draw a link from one node’s output port to the next node’s input port, I want the port and the link arrowhead to be highlighted when they come in close proximity. I have been able to achieve something as seen below:

This is the code snippet for it:

commonLinkingToolInit(tool) {
    tool.portGravity = 30;
    tool.temporaryToPort.geometryString = 'M14.512,11.479C18.28,18.127,16.243,28.3,16.243,28.3s-1.635,5.889-5.54,9.181S.626,41.463.626,41.463L1.168,1.7S10.743,4.831,14.512,11.479Z';
    tool.temporaryToPort.width = 26;
    tool.temporaryToPort.height = 50;
    tool.temporaryToPort.stroke = 5;
    tool.portTargeted = (realnode, realport, tempnode, tempport, toend) => {
      if (toend && realport !== null) {
        const diagram = realnode.diagram;
        this.highlight(realport);
        tempport.stroke = '#00dfcc';
        tempport.strokeWidth = 3;
        tempport.height = 50;
        tempport.width = 26;
        tempnode.location = diagram.lastInput.documentPoint.copy();
      } else {
        this.lowlight();
        tempport.stroke = null;
      }
    };
  }

But as you can see there is a bit of an offset from the actual arrowhead. The desired behaviour is that the arch of the connector head should have a highlight.
In the same was only the inner arch of the input port should also get the highlight. I dont want it to be a closed figure as seen above.

How can i do that?

If you want the blue outlines to be open, the geometry should not be closed. In the case of the geometry path string that you are using, remove the closing “Z” command.

I don’t know how you have defined your temporary link, so I’m not sure what’s going on.

Here’s how my temporary link is defined:

const temporaryLink =
        $(go.Link,
            $(go.Shape, { strokeWidth: 2 }),
            $(go.Shape,
                {
                    segmentIndex: -1, segmentOffset: new go.Point(12 / 2, 0),
                    geometryString: 'F M14.512,11.479C18.28,18.127,16.243,28.3,16.243,28.3s-1.635,5.889-5.54,9.181S.626,41.463.626,41.463L1.168,1.7S10.743,4.831,14.512,11.479Z',
                    fill: 'gray', strokeWidth: 0, width: 26, height: 50
                })
        );