When a link with a “to” or “from” arrow is reshaped so that the center is on the other side of the start/end of the link, the arrow remains pointed in the same direction, making it look backwards after the reshape. Is there a way to adjust the arrow direction based on the new shape of the link when the reshape happens?
(image taken from the “Draggable Link” sample - Draggable Link)
I suppose you could customize the reshaping behavior to change that arrowhead.
Implement a “LinkReshaped” DiagramEvent listener that changes the link’s arrowhead’s segmentIndex and segmentOffset.
@walter Thanks for the reply. Changing the arrowheads segmentIndex to 1 for the beginning arrow and -2 for the end arrow does appear to get the arrowhead to flip when the link is reshaped, but since the arrowhead is now located on that segment point, it is appearing further up the link because of the link’s toEndSegmentLength and fromEndSegmentLength. We can adjust the segmentOffset as well, but we end up with the same problem either way:
We had some luck switching the arrowheads’ segmentOrientation to OrientOpposite but doing this requires calculating where the central points’ x and y values are in relation to the first and last index points of the link to conditionally flip the arrowhead depending on how the link is reshaped.
It might help to set segmentFraction and segmentOffset as well.
Just to follow up on a solution that is working for us:
On a LinkReshaped event, we grabbed the points of the link using e.subject.points.toArray(). We then compared the x and y values of the begin and end points of the link to the middle points. Doing this we can determine what the reshaping looks like on the canvas, and we can conditionally set arrowBegin.segementOrientation = Link.OrientOpposite to flip the arrow, or = Link.OrientAlong to reset the flip.
This solution is a bit heavy handed and there are a lot of conditions to decide when to flip the arrow and when to reset it, but it seems to be working at least.
OK, that makes sense too.
Is your code executing also when the link is connected with a port?
Yeah there were some additional conditions based on the link’s toPort. We use ‘Top’, ‘Right’, ‘Bottom’, and ‘Left’ ports for our shapes so we have to grab the toPort.portId to condition it, and depending on where the node is in relation to the link we needed to restrict the arrow flipping behavior.