added a bunch of code to select/deselect edges. I think it should all work intuitively at this point

app/assets/javascripts/Jit/graphsettings.js

@@ -99,10 +99,11 @@ function graphSettings(type) {
 			   if (e.target.id != "infovis-canvas") return false;
                //clicking on a node, or clicking on blank part of canvas?
                if (node.nodeFrom) {
-					selectEdgeOnClickHandler(node);  
+                 selectEdgeOnClickHandler(node, e);  
 			   }
 			   else if (node && !node.nodeFrom) {
-                 selectNodeOnClickHandler(node);
+                 //do nothing - let it select edges, etc instead
+                 //we don't want to run double click handler
                } else {
                  canvasDoubleClickHandler(eventInfo.getPos(), e);
                }//if
@@ -235,8 +236,8 @@ function graphSettings(type) {
 			   if (e.target.id != "infovis-canvas") return false;
                //clicking on an edge, a node, or clicking on blank part of canvas?
                if (eventInfo.getEdge() != false || node.nodeFrom) {
-					if (eventInfo.getEdge() != false) selectEdgeOnClickHandler(eventInfo.getEdge());
+					if (eventInfo.getEdge() != false) selectEdgeOnClickHandler(eventInfo.getEdge(), e);
-					else if (node.nodeFrom) selectEdgeOnClickHandler(node);  
+					else if (node.nodeFrom) selectEdgeOnClickHandler(node, e);  
 			   }
 			   else if (node && !node.nodeFrom) {
 				 if (!Mconsole.busy) {
@@ -279,6 +280,18 @@ function graphSettings(type) {
       };
    }
 
+   $('body').keypress(function(e) {
+     console.log(e);
+     switch(e.keyCode) {
+       case 114: case 82:
+         removeSelectedEdges();
+         break;
+       case 100: case 68:
+         deleteSelectedEdges();
+         break;
+     }//switch
+   });
+
    return t;
 }
 
@@ -364,7 +377,6 @@ var nodeSettings = {
 	  }
   }
   
-  
 // defining custom edges
  var edgeSettings = {  
 	  'customEdge': {  
@@ -408,57 +420,53 @@ var nodeSettings = {
 		}  
 	  }  
 	}
-	
+
-function selectEdgeOnClickHandler(adj) {
+function selectEdgeOnClickHandler(adj, e) {
-      var showDesc = adj.getData("showDesc");
+  if (e.altKey) {
-	  if (showDesc) {
+    removeEdge(adj);
-		adj.setData('showDesc', false, 'current');
+  }
-	  	Mconsole.plot();  
+  var showDesc = adj.getData("showDesc");
-	  } else if (!showDesc) {
+  if (showDesc) {
-	  	adj.setData('showDesc', true, 'current');
+    deselectEdge(adj);
-	  	Mconsole.plot();
+    Mconsole.plot();
-	  }
+  } else if (!showDesc) {
+    selectEdge(adj);
+    Mconsole.plot();
+  }
 }//selectEdgeOnClickHandler
 
 function selectNodeOnClickHandler(node) {
-   
   $('.showcard').css('display','none');
-	$('.name').css('display','block');
+  $('.name').css('display','block');
-	$('.name.topic_' + node.id).css('display','none');
+  $('.name.topic_' + node.id).css('display','none');
-	$('.showcard.topic_' + node.id).fadeIn('fast');
+  $('.showcard.topic_' + node.id).fadeIn('fast');
 				
-   //set final styles  
+  //set final styles  
-   Mconsole.graph.eachNode(function (n) {
+  Mconsole.graph.eachNode(function (n) {
-      if (n.id != node.id) delete n.selected;
+    if (n.id != node.id) delete n.selected;
-      n.setData('dim', 25, 'current');
+    n.setData('dim', 25, 'current');
-      n.eachAdjacency(function (adj) {
+    n.eachAdjacency(function (adj) {
-         adj.setDataset('end', {
+      deselectEdge(adj);
-            lineWidth: 2,
+    });
-            color: '#222222'
+  });
-         });
+  if (!node.selected) {
-         adj.setData('showDesc', false, 'current');
+    node.selected = true;
-      });
+    node.setData('dim', 1, 'current');  
-   });
-   if (!node.selected) {
-      node.selected = true;
-	  node.setData('dim', 1, 'current');  
 
-      node.eachAdjacency(function (adj) {
+    node.eachAdjacency(function (adj) {
-         adj.setDataset('end', {
+      selectEdge(adj);
-            lineWidth: 4,
+    });
-            color: '#FFF'
+    Mconsole.plot();
-         });
+  } else {
-         adj.setData('showDesc', true, 'current');
+    node.setData('dim', 25, 'current');
-      });
+    delete node.selected;
-   } else {
+  }
-	  node.setData('dim', 25, 'current');
+  //trigger animation to final styles  
-      delete node.selected;
+  Mconsole.fx.animate({
-   }
+    modes: ['edge-property:lineWidth:color'],
-   //trigger animation to final styles  
+    duration: 500
-   Mconsole.fx.animate({
+  });
-      modes: ['edge-property:lineWidth:color'],
+  Mconsole.plot();
-      duration: 500
-   });
 }//selectNodeOnClickHandler
 
 //for the canvasDoubleClickHandler function
@@ -677,17 +685,9 @@ function onCreateLabelHandler(domElement, node) {
   $(showCard).find('img.icon').click(function(){
     delete node.selected;
     node.setData('dim', 25, 'current');
-    /*node.eachAdjacency(function (adj) {
+    node.eachAdjacency(function (adj) {
-      adj.setDataset('end', {
+      deselectEdge(adj);
-        lineWidth: 2,
-        color: '#222222'
-      });
-      adj.setData('showDesc', false, 'current');
     });
-    Mconsole.fx.animate({
-      modes: ['edge-property:lineWidth:color'],
-      duration: 500
-    });*/
     $('.showcard.topic_' + node.id).fadeOut('fast', function(){
       $('.name').css('display','block');
       Mconsole.plot();
@@ -795,49 +795,137 @@ function onCreateLabelHandler(domElement, node) {
 
 }//onCreateLabelHandler
 
-var lol = new Object();
+var edgeHover = false;
 
 function onMouseMoveHandler(node, eventInfo, e) {
   var edge = eventInfo.getEdge();
   
-  if (edge == false && lol['edgeHover']) {
+  if (edge == false && edgeHover != false) {
     //mouse not on an edge, but we were on an edge previously
-    onMouseLeave(lol['edgeHover']);
+    onMouseLeave(edgeHover);
-  } else if (edge != false && lol['edgeHover'] == false) {
+  } else if (edge != false && edgeHover == false) {
     //mouse is on an edge, but there isn't a stored edge
     onMouseEnter(edge);
-  } else if (edge != false && lol['edgeHover'] != edge) {
+  } else if (edge != false && edgeHover != edge) {
     //mouse is on an edge, but a different edge is stored
-    onMouseLeave(lol['edgeHover'])
+    onMouseLeave(edgeHover)
-    onMouseEnter(lol['edge']);
+    onMouseEnter(edge);
   }
-  lol['edgeHover'] = edge;
+  edgeHover = edge;
 }
 
 function onMouseEnter(edge) {
-  console.log("Mouse enter");
   $('canvas').css('cursor', 'pointer');
-  edge.setDataset('end', {
+  var showDesc = edge.getData("showDesc");
-    lineWidth: 4,
+  if (!showDesc) {
-    color: '#FFF'
+    edge.setDataset('end', {
-  });
+      lineWidth: 4,
-  Mconsole.fx.animate({
+      color: '#222222'
-    modes: ['edge-property:lineWidth:color'],
+    });
-    duration: 100
+    Mconsole.fx.animate({
-  });
+      modes: ['edge-property:lineWidth:color'],
-  Mconsole.plot();
+      duration: 100
+    });
+    Mconsole.plot();
+  }
 }
 
 function onMouseLeave(edge) {
-  console.log("Mouse leave");
   $('canvas').css('cursor', 'default');
-  edge.setDataset('end', {
+  var showDesc = edge.getData("showDesc");
-    lineWidth: 2,
+  if (!showDesc) {
-    color: '#222222'
+    edge.setDataset('end', {
-  });
+      lineWidth: 2,
-  Mconsole.fx.animate({
+      color: '#222222'
-    modes: ['edge-property:lineWidth:color'],
+    });
-    duration: 100
+    Mconsole.fx.animate({
-  });
+      modes: ['edge-property:lineWidth:color'],
+      duration: 100
+    });
+  }
   Mconsole.plot();
 }
+ 
+// this is for hiding one topic from your canvas
+function removeEdge(edge) {
+  var id = edge.getData("id");
+  $.ajax({
+    type: "DELETE",
+    url: "/synapses/" + id,
+    success: function(){
+      hideEdge(edge);
+    },
+  });
+} 
+
+function hideEdge(edge) {
+  var from = edge.nodeFrom.id;
+  var to = edge.nodeTo.id;
+  edge.setData('alpha', 0, 'end');
+  Mconsole.fx.animate({
+    modes: ['edge-property:alpha'],
+    duration: 1000
+  });
+  Mconsole.graph.removeAdjacence(from, to);
+  Mconsole.plot();
+}
+
+function removeSelectedEdges() {
+  alert ("remove");
+}
+
+function deleteSelectedEdges() {
+  for (var i = 0; i < selectedEdges.length; i += 1) {
+    var edge = selectedEdges[i];
+    var id = edge.getData("id");
+    $.ajax({
+      type: "DELETE",
+      url: "/synapses/" + id,
+    });
+    hideEdge(edge);
+  }
+  selectedEdges = new Array();
+}
+
+//keeps track of all selected edges globally
+var selectedEdges = new Array();
+
+function selectEdge(edge) {
+  var showDesc = edge.getData("showDesc");
+  if (! showDesc) {
+    edge.setData('showDesc', true, 'current');
+    edge.setDataset('end', {
+      lineWidth: 4,
+      color: '#FFFFFF'
+    });
+    Mconsole.fx.animate({
+      modes: ['edge-property:lineWidth:color'],
+      duration: 100
+    });
+  }
+  selectedEdges.push(edge);
+}
+
+function deselectEdge(edge) {
+  var showDesc = edge.getData("showDesc");
+  if (showDesc) {
+    edge.setData('showDesc', false, 'current');
+    edge.setDataset('end', {
+      lineWidth: 2,
+      color: '#222222'
+    });
+
+    if (edgeHover == edge) {
+      edge.setDataset('end', {
+        lineWidth: 4,
+        color: '#222222'
+      });
+    }
+
+    Mconsole.fx.animate({
+      modes: ['edge-property:lineWidth:color'],
+      duration: 100
+    });
+  }
+  selectedEdges.splice(selectedEdges.indexOf(edge), 1);
+}