glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

render edge labels with white background

Browse source
This commit is contained in:
Devin Howard 2013-01-07 20:34:47 -05:00
parent 954ce2009b
commit 647467e97a
1 changed files with 37 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
app/assets/javascripts/Jit/graphsettings.js
View file

@ -307,13 +307,6 @@ arrowPoint.y - vect.y);
var v1 = intermediatePoint.add(normal); var v1 = intermediatePoint.add(normal);
var v2 = intermediatePoint.$add(normal.$scale(-1)); var v2 = intermediatePoint.$add(normal.$scale(-1));
//draw circle
//ctx.strokeStyle = "rgb(150,0,0)";
//ctx.beginPath();
//ctx.arc(midPoint.x, midPoint.y, 8, 0, (Math.PI/180)*360, true);
//ctx.stroke();
//ctx.closePath();
//ctx.strokeStyle = "#222222"; //ctx.strokeStyle = "#222222";
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(from.x, from.y); ctx.moveTo(from.x, from.y);
@ -393,12 +386,31 @@ var nodeSettings = {
var showDesc = adj.getData("showDesc"); var showDesc = adj.getData("showDesc");
if( desc != "" && showDesc ) { if( desc != "" && showDesc ) {
//now adjust the label placement //now adjust the label placement
var ctx = canvas.getCtx();
var radius = canvas.getSize(); var radius = canvas.getSize();
var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2); var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
var y = parseInt((pos.y + posChild.y) /2); var y = parseInt((pos.y + posChild.y) /2);
canvas.getCtx().fillStyle = '#000'; ctx.font = 'bold 14px arial';
canvas.getCtx().font = 'bold 14px arial';
canvas.getCtx().fillText(desc, x, y); //render background
ctx.fillStyle = '#FFF';
var margin = 5;
var height = 14 + margin; //font size + margin
var CURVE = height / 2; //offset for curvy corners
var width = ctx.measureText(desc).width + 2 * margin - 2 * CURVE
var labelX = x - margin + CURVE;
var labelY = y - height + margin;
ctx.fillRect(labelX, labelY, width, height);
//curvy corners woo - circles in place of last CURVE pixels of rect
ctx.beginPath();
ctx.arc(labelX, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
ctx.arc(labelX + width, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
ctx.fill();
//render text
ctx.fillStyle = '#000';
ctx.fillText(desc, x, y);
} }
}, 'contains' : function(adj, pos) { }, 'contains' : function(adj, pos) {
var from = adj.nodeFrom.pos.getc(true), var from = adj.nodeFrom.pos.getc(true),
@ -737,11 +749,7 @@ function onCreateLabelHandler(domElement, node) {
// add some events to the label // add some events to the label
$(showCard).find('img.icon').click(function(){ $(showCard).find('img.icon').click(function(){
$('.showcard.topic_' + node.id).fadeOut('fast', function(){ hideCard(node);
node.setData('dim', 25, 'current');
$('.name').css('display','block');
Mconsole.plot();
});
}); });
$(showCard).find('.scroll').mCustomScrollbar(); $(showCard).find('.scroll').mCustomScrollbar();
@ -854,6 +862,19 @@ function onCreateLabelHandler(domElement, node) {
}//onCreateLabelHandler }//onCreateLabelHandler
function hideCard(node) {
var card = '.showcard';
if (node != null) {
card += '.topic_' + node.id;
}
$(card).fadeOut('fast', function(){
node.setData('dim', 25, 'current');
$('.name').show();
Mconsole.plot();
});
}
//edge that the mouse is currently hovering over //edge that the mouse is currently hovering over
var edgeHover = false; var edgeHover = false;