Added auto text orientation for edge labels

Added new boolean option edgeLabelsUpright which makes edge labels automatically flip over the edge when they are upside-down.  Addresses readability aspect of #56.
This commit is contained in:
tdhsmith 2014-02-11 16:02:49 -06:00
parent 9eb89a03cf
commit 6cb2dd813f

View File

@ -34,6 +34,7 @@ jQuery.fn.springy = function(params) {
var damping = params.damping || 0.5; var damping = params.damping || 0.5;
var nodeSelected = params.nodeSelected || null; var nodeSelected = params.nodeSelected || null;
var nodeImages = {}; var nodeImages = {};
var edgeLabelsUpright = true;
var canvas = this[0]; var canvas = this[0];
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
@ -276,9 +277,15 @@ jQuery.fn.springy = function(params) {
ctx.textBaseline = "top"; ctx.textBaseline = "top";
ctx.font = (edge.data.font !== undefined) ? edge.data.font : edgeFont; ctx.font = (edge.data.font !== undefined) ? edge.data.font : edgeFont;
ctx.fillStyle = stroke; 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.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.fillText(text, 0,-2);
ctx.restore(); ctx.restore();
} }