Skip to content

Commit

Permalink
Added auto text orientation for edge labels
Browse files Browse the repository at this point in the history
Added new boolean option edgeLabelsUpright which makes edge labels automatically flip over the edge when they are upside-down.  Addresses readability aspect of #56.
  • Loading branch information
tdhsmith committed Feb 11, 2014
1 parent 9eb89a0 commit 6cb2dd8
Showing 1 changed file with 9 additions and 2 deletions.
11 changes: 9 additions & 2 deletions springyui.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ jQuery.fn.springy = function(params) {
var damping = params.damping || 0.5;
var nodeSelected = params.nodeSelected || null;
var nodeImages = {};
var edgeLabelsUpright = true;

var canvas = this[0];
var ctx = canvas.getContext("2d");
Expand Down Expand Up @@ -276,9 +277,15 @@ jQuery.fn.springy = function(params) {
ctx.textBaseline = "top";
ctx.font = (edge.data.font !== undefined) ? edge.data.font : edgeFont;
ctx.fillStyle = stroke;
var textPos = s1.add(s2).divide(2).add(normal.multiply(-8));
var angle = Math.atan2(s2.y - s1.y, s2.x - s1.x);
var displacement = -8;
if (edgeLabelsUpright && (angle > Math.PI/2 || angle < -Math.PI/2)) {
displacement = 8;
angle += Math.PI;
}
var textPos = s1.add(s2).divide(2).add(normal.multiply(displacement));
ctx.translate(textPos.x, textPos.y);
ctx.rotate(Math.atan2(s2.y - s1.y, s2.x - s1.x));
ctx.rotate(angle);
ctx.fillText(text, 0,-2);
ctx.restore();
}
Expand Down

0 comments on commit 6cb2dd8

Please sign in to comment.