From c739f58b4bf01b48b6f9ffe630781d166b20b0f5 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sat, 5 Jan 2013 22:39:35 -0500 Subject: [PATCH 1/4] added destroy.js.erb for responding to synapse destruction. Also select edges by default on creation in create.js.erb --- app/views/synapses/create.js.erb | 5 +++-- app/views/synapses/destroy.js.erb | 0 2 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 app/views/synapses/destroy.js.erb diff --git a/app/views/synapses/create.js.erb b/app/views/synapses/create.js.erb index 325ee2e9..2fed16ad 100644 --- a/app/views/synapses/create.js.erb +++ b/app/views/synapses/create.js.erb @@ -28,12 +28,13 @@ if ( Mconsole != null) { }); temp.data.$direction = d; Mconsole.fx.plotLine(temp, Mconsole.canvas); + selectEdge(temp); Mconsole.fx.animate({ - modes: ['edge-property:lineWidth'], + modes: ['edge-property:lineWidth:color'], duration: 400 }); } else { json = <%= @synapse.selfplusnodes_as_json.html_safe %> initialize("chaotic"); -} \ No newline at end of file +} diff --git a/app/views/synapses/destroy.js.erb b/app/views/synapses/destroy.js.erb new file mode 100644 index 00000000..e69de29b From 01fe14dbd180daa168b508965bf653eadee52018 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sat, 5 Jan 2013 22:40:10 -0500 Subject: [PATCH 2/4] remove all mappings from a synapse on destroy in controller. Haven't added stuff to remove mappings to controller --- app/controllers/synapses_controller.rb | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/controllers/synapses_controller.rb b/app/controllers/synapses_controller.rb index 8e23c638..21f5e757 100644 --- a/app/controllers/synapses_controller.rb +++ b/app/controllers/synapses_controller.rb @@ -115,12 +115,17 @@ class SynapsesController < ApplicationController respond_with(@user, location: synapse_url(@synapse)) do |format| end end + # DELETE synapses/:id def destroy - @current = current_user - @synapse = Synapse.find(params[:id]).authorize_to_edit(@current) - - @synapse.delete if @synapse + @current = current_user + @synapse = Synapse.find(params[:id]).authorize_to_edit(@current) + + @synapse.mappings.each do |m| + m.delete + end + + @synapse.delete if @synapse end end From 6226930c986b9a91d509628096b1fe919e0f21f6 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sat, 5 Jan 2013 22:40:31 -0500 Subject: [PATCH 3/4] 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 | 262 +++++++++++++------- 1 file changed, 175 insertions(+), 87 deletions(-) diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js index 93998d58..e0e1be5d 100644 --- a/app/assets/javascripts/Jit/graphsettings.js +++ b/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()); - else if (node.nodeFrom) selectEdgeOnClickHandler(node); + if (eventInfo.getEdge() != false) selectEdgeOnClickHandler(eventInfo.getEdge(), e); + 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) { - var showDesc = adj.getData("showDesc"); - if (showDesc) { - adj.setData('showDesc', false, 'current'); - Mconsole.plot(); - } else if (!showDesc) { - adj.setData('showDesc', true, 'current'); - Mconsole.plot(); - } + +function selectEdgeOnClickHandler(adj, e) { + if (e.altKey) { + removeEdge(adj); + } + var showDesc = adj.getData("showDesc"); + if (showDesc) { + deselectEdge(adj); + Mconsole.plot(); + } else if (!showDesc) { + selectEdge(adj); + Mconsole.plot(); + } }//selectEdgeOnClickHandler function selectNodeOnClickHandler(node) { - $('.showcard').css('display','none'); - $('.name').css('display','block'); - $('.name.topic_' + node.id).css('display','none'); - $('.showcard.topic_' + node.id).fadeIn('fast'); + $('.name').css('display','block'); + $('.name.topic_' + node.id).css('display','none'); + $('.showcard.topic_' + node.id).fadeIn('fast'); - //set final styles - Mconsole.graph.eachNode(function (n) { - if (n.id != node.id) delete n.selected; - n.setData('dim', 25, 'current'); - n.eachAdjacency(function (adj) { - adj.setDataset('end', { - lineWidth: 2, - color: '#222222' - }); - adj.setData('showDesc', false, 'current'); - }); - }); - if (!node.selected) { - node.selected = true; - node.setData('dim', 1, 'current'); + //set final styles + Mconsole.graph.eachNode(function (n) { + if (n.id != node.id) delete n.selected; + n.setData('dim', 25, 'current'); + n.eachAdjacency(function (adj) { + deselectEdge(adj); + }); + }); + if (!node.selected) { + node.selected = true; + node.setData('dim', 1, 'current'); - node.eachAdjacency(function (adj) { - adj.setDataset('end', { - lineWidth: 4, - color: '#FFF' - }); - adj.setData('showDesc', true, 'current'); - }); - } else { - node.setData('dim', 25, 'current'); - delete node.selected; - } - //trigger animation to final styles - Mconsole.fx.animate({ - modes: ['edge-property:lineWidth:color'], - duration: 500 - }); + node.eachAdjacency(function (adj) { + selectEdge(adj); + }); + Mconsole.plot(); + } else { + node.setData('dim', 25, 'current'); + delete node.selected; + } + //trigger animation to final styles + Mconsole.fx.animate({ + modes: ['edge-property:lineWidth:color'], + duration: 500 + }); + Mconsole.plot(); }//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) { - adj.setDataset('end', { - lineWidth: 2, - color: '#222222' - }); - adj.setData('showDesc', false, 'current'); + node.eachAdjacency(function (adj) { + deselectEdge(adj); }); - 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']); - } else if (edge != false && lol['edgeHover'] == false) { + onMouseLeave(edgeHover); + } 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']) - onMouseEnter(lol['edge']); + onMouseLeave(edgeHover) + onMouseEnter(edge); } - lol['edgeHover'] = edge; + 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(); + var showDesc = edge.getData("showDesc"); + if (!showDesc) { + edge.setDataset('end', { + lineWidth: 4, + color: '#222222' + }); + 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 - }); + var showDesc = edge.getData("showDesc"); + if (!showDesc) { + edge.setDataset('end', { + lineWidth: 2, + color: '#222222' + }); + 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); +} From 5bd311ceea770918771b5adc94f246d51fd74230 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sat, 5 Jan 2013 22:41:19 -0500 Subject: [PATCH 4/4] added route to config/routes.rb for removing synapse mappings. It's not actually defined in the controller though.... --- config/routes.rb | 1 + 1 file changed, 1 insertion(+) diff --git a/config/routes.rb b/config/routes.rb index 98020f20..40c00125 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -11,6 +11,7 @@ ISSAD::Application.routes.draw do match 'maps/:id/savelayout', to: 'maps#savelayout', via: :put, as: :savelayout match 'maps/:id/realtime', to: 'maps#realtime', via: :get, as: :realtime match 'mappings/:map_id/:topic_id/removefrommap', to: 'topics#removefrommap', via: :get, as: :removefrommap + match 'mappings/:map_id/:synapse_id/removefrommap', to: 'synapses#removefrommap', via: :post, as: :removefrommap resource :session