New approach on my arrows problem. More math, less logic. These are the kinds of arrows I wanted from the start!
So here's how it works. Start by drawing an edge between the two centers. We need this line to have a minimum width—this minimum is: double the length of the shortest side among the two rectangles. We also want a second edge, rotated 90 degrees.
If the distance between centers is below the minimum, add the amount of that overlap to the cross edge. Basically, we want the cross edge to grow as the two rectangles get too close. Here's a better look at it.
Now we want lines between the start and end of the connecting line and those corners. We'll keep track of these as "clockwise" and "counterclockwise". Notice that when we smoosh these rects together, that line moves away from the rect's centers.
Now we need to draw two more temporary boxes around our first two. I make the "to" box a bit more padded out, to make room for the arrow. Next, we need to see where the two cross lines intersect these boxes. These are our points—where the arrow will begin and end.
Now we can draw an arc using those points, with the corner as the control point. The two arcs will be different depending on the shape and position of the rects; and, when they're different, one will tend to look better than the other.
I'm still not sure exactly how to pick the best one (programmatically) but my hunch is that the "better" curve is the one that's more isosceles, with the most-equal sides. Anyway, we need to pick the one that we think is best.
All thats left is to draw the circle at the start point and the arrow at the end point. The arrow will come in at the same angle as that second leg of the triangle. No math there—we can just translate and rotate the canvas we you draw it!
There are still some bugs to work out on extreme overlaps, but these might be unavoidable. (I can't really draw a solution on paper for these cases.) I'm also not avoiding any obstacles, but I could imagine a few approaches. But I'm really happy with the result!
These arrows will be part of my hobby project, State Designer! ide.state-designer.com
Ok, here's the cleaned up code in a CodeSandbox. See what you can do! codesandbox.io/s/dark-sea-fgu…
