Highlighting the nearest port to a link

@jothibaskaran wrote:

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:

port-highlighht.png733×378 17.6 KB

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?

Posts: 1

Participants: 1

Read full topic