From 24269a10b921e94a828bd21ce63557ea397c70a1 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Fri, 22 Mar 2013 02:37:56 -0400 Subject: [PATCH] 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 | 2 +- Gemfile.lock | 2 + Gemfile~ | 4 +- .../javascripts/Jit/graphsettings-model.js | 4 ++ app/assets/javascripts/Jit/graphsettings.js | 61 ++++++++++++++++++- .../Jit/select-edit-delete-nodes-and-edges.js | 50 +++++++++------ app/views/maps/show.html.erb | 2 +- 7 files changed, 101 insertions(+), 24 deletions(-) diff --git a/Gemfile b/Gemfile index cb1ac1c2..6b2f6e48 100644 --- a/Gemfile +++ b/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 diff --git a/Gemfile.lock b/Gemfile.lock index cc33f0b6..a85dcd9a 100644 --- a/Gemfile.lock +++ b/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) diff --git a/Gemfile~ b/Gemfile~ index 1f7c3bd8..cb1ac1c2 100644 --- a/Gemfile~ +++ b/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. diff --git a/app/assets/javascripts/Jit/graphsettings-model.js b/app/assets/javascripts/Jit/graphsettings-model.js index dbfecf4f..e5372c9e 100644 --- a/app/assets/javascripts/Jit/graphsettings-model.js +++ b/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; diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js index b9002d79..d7a4b2d1 100644 --- a/app/assets/javascripts/Jit/graphsettings.js +++ b/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(); diff --git a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js b/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js index 987f5c77..c328839d 100644 --- a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js +++ b/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); + } } diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb index c83538b4..1f40a4ff 100644 --- a/app/views/maps/show.html.erb +++ b/app/views/maps/show.html.erb @@ -9,7 +9,7 @@ <% end %> - + <% if authenticated? %> <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>