Simplest way of accomplishing well-spaced layout of arrows (node / edge graphs).

87 Views Asked by At

Here is a picture of 3 arrows that I manually set to bezier and manually dragged the control points of to make them look okay as parallel arrows will by-default collide and overlap each other. However, I need a simple geometric method for accomplishing the same thing automatically.

BananaCats spaced arrow picture.

Also when I move a node, I'd like the arrows to follow the line between the center points of the two nodes, or in other words all control points will proportionally move along with node movement.

Thus layout is good-looking and automatically done for the user.

I prefer not to use spring physics because I don't need and do not desire the arrows to "oscillate / bounce" in place.

Thus, my question is what is the easiest method to accomplish the above? Also the algorithm must know when to not be used, i.e. if the graph is a 3D cubic, as in:

3D cubic commutative diagram

then the algorithm should not space the crossing arrows, but just let them cross. So I guess, if the arrows aren't parallel and they collide, then maybe check if small bends will uncross them (?) not sure here!

I should be able to call a scene-level method that updates all arrows to a well-spaced final position.

The nodes will not be auto-positioned, I'm just looking at the arrows for now. For the nodes, I might do "allign to grid" or something...