From 01ca6263e916a95d306fcdcd4a71febc2932bb07 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sat, 5 Jan 2013 16:28:04 -0500
Subject: [PATCH 1/2] cursor when hovering edge

---
 app/assets/javascripts/Jit/graphsettings.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js
index adabfe06..f159a9c7 100644
--- a/app/assets/javascripts/Jit/graphsettings.js
+++ b/app/assets/javascripts/Jit/graphsettings.js
@@ -48,7 +48,9 @@ function graphSettings(type) {
             enable: true,
 			enableForEdges: true,
             type: 'HTML',
-            //Change cursor style when hovering a node
+            onMouseMove: function(node, eventInfo, e) {
+              onMouseMoveHandler(node, eventInfo, e);
+            },
             onMouseEnter: function () {
                
             },
@@ -187,7 +189,9 @@ function graphSettings(type) {
          Events: {
             enable: true,
             type: 'HTML',
-            //Change cursor style when hovering a node
+            onMouseMove: function(node, eventInfo, e) {
+              onMouseMoveHandler(node, eventInfo, e);
+            },
             onMouseEnter: function () {
                
             },
@@ -785,3 +789,11 @@ function onCreateLabelHandler(domElement, node) {
   });
 
 }//onCreateLabelHandler
+
+function onMouseMoveHandler(node, eventInfo, e) {
+  if (eventInfo.getEdge() != false) {
+    $('canvas').css('cursor', 'pointer');
+  } else {
+    $('canvas').css('cursor', 'default');
+  }
+}

From 4e7c7f5d1bb438ede02c09f49726d7fe44e6d0e5 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sat, 5 Jan 2013 17:31:38 -0500
Subject: [PATCH 2/2] implemented mouseEnter and mouseLeave for edges and made
 them get all highlighted on mouse over

---
 app/assets/javascripts/Jit/graphsettings.js | 66 +++++++++++++++++----
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js
index f159a9c7..93998d58 100644
--- a/app/assets/javascripts/Jit/graphsettings.js
+++ b/app/assets/javascripts/Jit/graphsettings.js
@@ -96,7 +96,6 @@ function graphSettings(type) {
             },
             //Add also a click handler to nodes
             onClick: function (node, eventInfo, e) {
-			   console.log(e);
 			   if (e.target.id != "infovis-canvas") return false;
                //clicking on a node, or clicking on blank part of canvas?
                if (node.nodeFrom) {
@@ -299,24 +298,30 @@ var renderMidArrow = function(from, to, dim, swap, canvas){
         // compute the midpoint of the edge line 
         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 
-        midPoint.x += (vect.x / 0.7); 
-        midPoint.y += (vect.y / 0.7); 
+        var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y);
         // compute the tail intersection point with the edge line 
-        var intermediatePoint = new $jit.Complex(midPoint.x - vect.x, 
-midPoint.y - vect.y); 
+        var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x, 
+arrowPoint.y - vect.y); 
         // vector perpendicular to vect 
         var normal = new $jit.Complex(-vect.y / 2, vect.x / 2); 
         var v1 = intermediatePoint.add(normal); 
         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.moveTo(from.x, from.y); 
         ctx.lineTo(to.x, to.y); 
         ctx.stroke(); 
         ctx.beginPath(); 
         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.stroke(); 
 };
@@ -790,10 +795,49 @@ function onCreateLabelHandler(domElement, node) {
 
 }//onCreateLabelHandler
 
+var lol = new Object();
+
 function onMouseMoveHandler(node, eventInfo, e) {
-  if (eventInfo.getEdge() != false) {
-    $('canvas').css('cursor', 'pointer');
-  } else {
-    $('canvas').css('cursor', 'default');
+  var edge = eventInfo.getEdge();
+  
+  if (edge == false && lol['edgeHover']) {
+    //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();
 }