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

implemented mouseEnter and mouseLeave for edges and made them get all highlighted on mouse over

Browse source
This commit is contained in:
Devin Howard 2013-01-05 17:31:38 -05:00
parent 01ca6263e9
commit 4e7c7f5d1b
1 changed files with 55 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -96,7 +96,6 @@ function graphSettings(type) {
}, },
//Add also a click handler to nodes //Add also a click handler to nodes
onClick: function (node, eventInfo, e) { onClick: function (node, eventInfo, e) {
console.log(e);
if (e.target.id != "infovis-canvas") return false; if (e.target.id != "infovis-canvas") return false;
//clicking on a node, or clicking on blank part of canvas? //clicking on a node, or clicking on blank part of canvas?
if (node.nodeFrom) { if (node.nodeFrom) {
@ -299,24 +298,30 @@ var renderMidArrow = function(from, to, dim, swap, canvas){
// compute the midpoint of the edge line // compute the midpoint of the edge line
var midPoint = new $jit.Complex((to.x + from.x) / 2, (to.y + from.y) / 2); var midPoint = new $jit.Complex((to.x + from.x) / 2, (to.y + from.y) / 2);
// move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint // move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint
midPoint.x += (vect.x / 0.7); var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y);
midPoint.y += (vect.y / 0.7);
// compute the tail intersection point with the edge line // compute the tail intersection point with the edge line
var intermediatePoint = new $jit.Complex(midPoint.x - vect.x, var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x,
midPoint.y - vect.y); arrowPoint.y - vect.y);
// vector perpendicular to vect // vector perpendicular to vect
var normal = new $jit.Complex(-vect.y / 2, vect.x / 2); var normal = new $jit.Complex(-vect.y / 2, vect.x / 2);
var v1 = intermediatePoint.add(normal); var v1 = intermediatePoint.add(normal);
var v2 = intermediatePoint.$add(normal.$scale(-1)); var v2 = intermediatePoint.$add(normal.$scale(-1));
//ctx.strokeStyle = 'black'; //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.beginPath(); ctx.beginPath();
ctx.moveTo(from.x, from.y); ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y); ctx.lineTo(to.x, to.y);
ctx.stroke(); ctx.stroke();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(v1.x, v1.y); ctx.moveTo(v1.x, v1.y);
ctx.lineTo(midPoint.x, midPoint.y); ctx.lineTo(arrowPoint.x, arrowPoint.y);
ctx.lineTo(v2.x, v2.y); ctx.lineTo(v2.x, v2.y);
ctx.stroke(); ctx.stroke();
}; };
@ -790,10 +795,49 @@ function onCreateLabelHandler(domElement, node) {
}//onCreateLabelHandler }//onCreateLabelHandler
var lol = new Object();
function onMouseMoveHandler(node, eventInfo, e) { function onMouseMoveHandler(node, eventInfo, e) {
if (eventInfo.getEdge() != false) { var edge = eventInfo.getEdge();
$('canvas').css('cursor', 'pointer');
} else { if (edge == false && lol['edgeHover']) {
$('canvas').css('cursor', 'default'); //mouse not on an edge, but we were on an edge previously
onMouseLeave(lol['edgeHover']);
} else if (edge != false && lol['edgeHover'] == false) {
//mouse is on an edge, but there isn't a stored edge
onMouseEnter(edge);
} else if (edge != false && lol['edgeHover'] != edge) {
//mouse is on an edge, but a different edge is stored
onMouseLeave(lol['edgeHover'])
onMouseEnter(lol['edge']);
} }
lol['edgeHover'] = edge;
}
function onMouseEnter(edge) {
console.log("Mouse enter");
$('canvas').css('cursor', 'pointer');
edge.setDataset('end', {
lineWidth: 4,
color: '#FFF'
});
Mconsole.fx.animate({
modes: ['edge-property:lineWidth:color'],
duration: 100
});
Mconsole.plot();
}
function onMouseLeave(edge) {
console.log("Mouse leave");
$('canvas').css('cursor', 'default');
edge.setDataset('end', {
lineWidth: 2,
color: '#222222'
});
Mconsole.fx.animate({
modes: ['edge-property:lineWidth:color'],
duration: 100
});
Mconsole.plot();
} }