developed an initial attempt at a box to select feature. SO NICE. you just hold down shift and mouse over the ones you want. fixed an important bug that was causing deselecting to go wacky

Gemfile

@@ -13,7 +13,7 @@ gem 'formtastic'
 gem 'json'
 gem 'rails3-jquery-autocomplete'
 gem 'best_in_place'
-gem 'therubyracer' #optional
+#gem 'therubyracer' #optional
 gem 'rb-readline'
 
 # Gems used only for assets and not required

Gemfile.lock

@@ -94,6 +94,7 @@ GEM
       rdoc (~> 3.4)
       thor (>= 0.14.6, < 2.0)
     rake (10.0.3)
+    rb-readline (0.4.1)
     rdoc (3.12)
       json (~> 1.4)
     sass (3.2.1)
@@ -133,5 +134,6 @@ DEPENDENCIES
   pg
   rails (= 3.2.11)
   rails3-jquery-autocomplete
+  rb-readline
   sass-rails (~> 3.2.3)
   uglifier (>= 1.0.3)

Gemfile~

@@ -13,8 +13,8 @@ gem 'formtastic'
 gem 'json'
 gem 'rails3-jquery-autocomplete'
 gem 'best_in_place'
-#gem 'therubyracer' #optional
-#gem 'rb-readline'
+gem 'therubyracer' #optional
+gem 'rb-readline'
 
 # Gems used only for assets and not required
 # in production environments by default.

app/assets/javascripts/Jit/graphsettings-model.js

@@ -20,6 +20,10 @@ MetamapsModel.widthOfLabel = null;
 //is the mouse hovering over an edge? which one?
 MetamapsModel.edgeHoveringOver = false;
 
+//coordinates of shift click for using box select
+MetamapsModel.boxStartCoordinates = false;
+MetamapsModel.boxEndCoordinates = false;
+
 //double clicking of nodes or canvas
 MetamapsModel.lastNodeClick = 0;
 MetamapsModel.lastCanvasClick = 0;

app/assets/javascripts/Jit/graphsettings.js

@@ -105,7 +105,11 @@ function graphSettings(type, embed) {
         if (e.target.id != "infovis-canvas") return false;
 
         //topic and synapse editing cards
-        if (!Mconsole.events.moved) hideCards();
+        if (!Mconsole.events.moved && !node) {
+          hideCards();
+          deselectAllNodes();
+          deselectAllEdges();
+        }
 
         //clicking on a node, or clicking on blank part of canvas?
         if (node.nodeFrom) {
@@ -427,10 +431,65 @@ var nodeSettings = {
 	  }  
 	}
 
+function drawSelectBox(eventInfo, e) {
+  var ctx=Mconsole.canvas.getCtx();
+  
+  var startX = MetamapsModel.boxStartCoordinates.x,
+      startY = MetamapsModel.boxStartCoordinates.y,
+      currX = eventInfo.getPos().x,
+      currY = eventInfo.getPos().y;
+  
+  Mconsole.plot();
+  ctx.moveTo(startX,startY);
+  ctx.lineTo(startX,currY);
+  ctx.stroke();
+  ctx.lineTo(currX,currY);
+  ctx.stroke();
+  ctx.lineTo(currX,startY);
+  ctx.stroke();
+  ctx.lineTo(startX,startY);
+  ctx.stroke();
+}
+
+function selectNodesWithBox() {
+  
+  var sX = MetamapsModel.boxStartCoordinates.x,
+      sY = MetamapsModel.boxStartCoordinates.y,
+      eX = MetamapsModel.boxEndCoordinates.x,
+      eY = MetamapsModel.boxEndCoordinates.y;
+  
+  
+  Mconsole.graph.eachNode(function (n) {
+		var x = n.pos.x, y = n.pos.y;
+    
+    if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) {
+      selectNode(n);
+    }
+  });
+
+  MetamapsModel.boxStartCoordinates = false;
+  MetamapsModel.boxEndCoordinates = false;
+  Mconsole.plot();
+}
 
 function onMouseMoveHandler(node, eventInfo, e) {
   
   if (Mconsole.busy) return;
+  
+  if (!MetamapsModel.boxStartCoordinates && e.shiftKey) {
+    MetamapsModel.boxStartCoordinates = eventInfo.getPos();
+    return;
+  }
+  if (MetamapsModel.boxStartCoordinates && e.shiftKey) {
+    drawSelectBox(eventInfo,e);
+    return;
+  }
+  if (MetamapsModel.boxStartCoordinates && !e.shiftKey) {
+    MetamapsModel.boxEndCoordinates = eventInfo.getPos();
+    Mconsole.plot();
+    selectNodesWithBox();
+    return;
+  }
 
   var node = eventInfo.getNode();
   var edge = eventInfo.getEdge();

app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js

@@ -230,12 +230,21 @@ function best_in_place_perms(edge) {
 }//best_in_place_perms
 
 function deselectAllEdges() {
-  for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
+  var l = MetamapsModel.selectedEdges.length;
+  for (var i = l-1; i >= 0; i -= 1) {
     var edge = MetamapsModel.selectedEdges[i];
     deselectEdge(edge);
   }
 }
 
+function deselectAllNodes() {
+  var l = MetamapsModel.selectedNodes.length;
+  for (var i = l-1; i >= 0; i -= 1) {
+    var node = MetamapsModel.selectedNodes[i];
+    deselectNode(node);
+  }
+}
+
 // this is for hiding one topic from your canvas
 function removeEdge(edge) {
   var id = edge.getData("id");
@@ -261,7 +270,8 @@ function hideEdge(edge) {
 }
 
 function hideSelectedEdges() {
-  for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
+  var l = MetamapsModel.selectedEdges.length;
+  for (var i = l-1; i >= 0; i -= 1) {
     var edge = MetamapsModel.selectedEdges[i];
     hideEdge(edge);
   }
@@ -269,7 +279,8 @@ function hideSelectedEdges() {
 }
 
 function removeSelectedEdges() {
-  for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
+  var l = MetamapsModel.selectedEdges.length;
+  for (var i = l-1; i >= 0; i -= 1) {
     if (mapid != null) {
       var edge = MetamapsModel.selectedEdges[i];
       var id = edge.getData("id");
@@ -285,7 +296,8 @@ function removeSelectedEdges() {
 }
 
 function deleteSelectedEdges() {
-  for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
+  var l = MetamapsModel.selectedEdges.length;
+  for (var i = l-1; i >= 0; i -= 1) {
     var edge = MetamapsModel.selectedEdges[i];
     var id = edge.getData("id");
     $.ajax({
@@ -400,11 +412,11 @@ function hideNode(nodeid) {
 }
 
 function hideSelectedNodes() {
-  Mconsole.graph.eachNode( function (n) {
-      if (n.getData('whiteCircle') == true) {
-          hideNode(n.id);
-      }
-  });
+  var l = MetamapsModel.selectedNodes.length;
+  for (var i = l-1; i >= 0; i -= 1) {
+    var node = MetamapsModel.selectedNodes[i];
+    hideNode(node.id);
+  }
 }
 
 function removeNode(nodeid) {
@@ -419,11 +431,11 @@ function removeNode(nodeid) {
 }
 function removeSelectedNodes() {
  if (mapperm) {
-    Mconsole.graph.eachNode( function (n) {
-      if (n.getData('whiteCircle') == true) {
-          removeNode(n.id);
-      }
-    });
+    var l = MetamapsModel.selectedNodes.length;
+    for (var i = l-1; i >= 0; i -= 1) {
+      var node = MetamapsModel.selectedNodes[i];
+      removeNode(node.id);
+    }
   }
 }
 
@@ -438,9 +450,9 @@ function deleteNode(nodeid) {
   });
 }
 function deleteSelectedNodes() {
-  Mconsole.graph.eachNode( function (n) {
-      if (n.getData('whiteCircle') == true) {
-        deleteNode(n.id);
-      }
-  });
+  var l = MetamapsModel.selectedNodes.length;
+  for (var i = l-1; i >= 0; i -= 1) {
+    var node = MetamapsModel.selectedNodes[i];
+    deleteNode(node.id);
+  }
 }

app/views/maps/show.html.erb

@@ -9,7 +9,7 @@
     <button onclick="if (!goRealtime) { this.innerHTML = 'Stop Realtime'; } else if (goRealtime) { this.innerHTML = 'Start Realtime'; } goRealtime = !goRealtime;">Start Realtime</button>
     <% end %>
     <button onclick="hideSelectedEdges();hideSelectedNodes();">Hide Selected</button>
-    <button onclick="enterKeyPressed();">Keep Selected</button>
+    <button onclick="enterKeyHandler();">Keep Selected</button>
     <% if authenticated? %>
       <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
         <button onclick="removeSelectedEdges();removeSelectedNodes();">Remove Selected From Map</button>