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?