Display text labels along edges

[danielabar]

SVG textPath can be used to draw text along a path (which the edges have been converted to from lines as part of #48 ).

As part of #48, this has been used to display edgeKind along the edge path. Now a few more complexities to handle:

• render the label somewhat closer to source node than target node, so it reads more naturally
• label positioning should take node radius into account so it doesn't render "underneath" the node
• detect if text label is upside down
• if its upside down, recalculate the path to invert it (keeping proximity to source node)
• choose color for labels to make it easy to read
• consider if label color should change with highlight

[danielabar]

To detect upside down, consider a point that is drawn to the right of the given source point, some distance (eg: x+10), and on the same y plane. Now label the source point a fixed point. Then calculate the angle between the newly added point and the target point, using the fixed point as an anchor.

Then use the angle to determine:

• Any angle between 0 and 90 is right side up
• Between 90 and 270 is upside down
• Between 270 and 360 is right side up

[matanox]

+1 for the trigonometry

[matanox]

Pointwise: label should likely animate along the "neighbors" highlight animation, for harmony, other considerations aside... (how it would animate (color tween, size tween, font weight tween) depends on the overall harmony).