Merge branch 'master' of github.com:Connoropolous/metamaps_gen002
This commit is contained in:
commit
e0a2df285f
5 changed files with 188 additions and 93 deletions
|
@ -99,10 +99,11 @@ function graphSettings(type) {
|
||||||
if (e.target.id != "infovis-canvas") return false;
|
if (e.target.id != "infovis-canvas") return false;
|
||||||
//clicking on a node, or clicking on blank part of canvas?
|
//clicking on a node, or clicking on blank part of canvas?
|
||||||
if (node.nodeFrom) {
|
if (node.nodeFrom) {
|
||||||
selectEdgeOnClickHandler(node);
|
selectEdgeOnClickHandler(node, e);
|
||||||
}
|
}
|
||||||
else if (node && !node.nodeFrom) {
|
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 {
|
} else {
|
||||||
canvasDoubleClickHandler(eventInfo.getPos(), e);
|
canvasDoubleClickHandler(eventInfo.getPos(), e);
|
||||||
}//if
|
}//if
|
||||||
|
@ -235,8 +236,8 @@ function graphSettings(type) {
|
||||||
if (e.target.id != "infovis-canvas") return false;
|
if (e.target.id != "infovis-canvas") return false;
|
||||||
//clicking on an edge, a node, or clicking on blank part of canvas?
|
//clicking on an edge, a node, or clicking on blank part of canvas?
|
||||||
if (eventInfo.getEdge() != false || node.nodeFrom) {
|
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) {
|
else if (node && !node.nodeFrom) {
|
||||||
if (!Mconsole.busy) {
|
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;
|
return t;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -364,7 +377,6 @@ var nodeSettings = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// defining custom edges
|
// defining custom edges
|
||||||
var edgeSettings = {
|
var edgeSettings = {
|
||||||
'customEdge': {
|
'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
|
}//selectEdgeOnClickHandler
|
||||||
|
|
||||||
function selectNodeOnClickHandler(node) {
|
function selectNodeOnClickHandler(node) {
|
||||||
|
|
||||||
$('.showcard').css('display','none');
|
$('.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
|
}//selectNodeOnClickHandler
|
||||||
|
|
||||||
//for the canvasDoubleClickHandler function
|
//for the canvasDoubleClickHandler function
|
||||||
|
@ -677,17 +685,9 @@ function onCreateLabelHandler(domElement, node) {
|
||||||
$(showCard).find('img.icon').click(function(){
|
$(showCard).find('img.icon').click(function(){
|
||||||
delete node.selected;
|
delete node.selected;
|
||||||
node.setData('dim', 25, 'current');
|
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(){
|
$('.showcard.topic_' + node.id).fadeOut('fast', function(){
|
||||||
$('.name').css('display','block');
|
$('.name').css('display','block');
|
||||||
Mconsole.plot();
|
Mconsole.plot();
|
||||||
|
@ -795,49 +795,137 @@ function onCreateLabelHandler(domElement, node) {
|
||||||
|
|
||||||
}//onCreateLabelHandler
|
}//onCreateLabelHandler
|
||||||
|
|
||||||
var lol = new Object();
|
var edgeHover = false;
|
||||||
|
|
||||||
function onMouseMoveHandler(node, eventInfo, e) {
|
function onMouseMoveHandler(node, eventInfo, e) {
|
||||||
var edge = eventInfo.getEdge();
|
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
|
//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
|
//mouse is on an edge, but there isn't a stored edge
|
||||||
onMouseEnter(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
|
//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) {
|
function onMouseEnter(edge) {
|
||||||
console.log("Mouse enter");
|
|
||||||
$('canvas').css('cursor', 'pointer');
|
$('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) {
|
function onMouseLeave(edge) {
|
||||||
console.log("Mouse leave");
|
|
||||||
$('canvas').css('cursor', 'default');
|
$('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();
|
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);
|
||||||
|
}
|
||||||
|
|
|
@ -115,12 +115,17 @@ class SynapsesController < ApplicationController
|
||||||
respond_with(@user, location: synapse_url(@synapse)) do |format|
|
respond_with(@user, location: synapse_url(@synapse)) do |format|
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
||||||
# DELETE synapses/:id
|
# DELETE synapses/:id
|
||||||
def destroy
|
def destroy
|
||||||
@current = current_user
|
@current = current_user
|
||||||
@synapse = Synapse.find(params[:id]).authorize_to_edit(@current)
|
@synapse = Synapse.find(params[:id]).authorize_to_edit(@current)
|
||||||
|
|
||||||
@synapse.delete if @synapse
|
@synapse.mappings.each do |m|
|
||||||
|
m.delete
|
||||||
|
end
|
||||||
|
|
||||||
|
@synapse.delete if @synapse
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
@ -28,12 +28,13 @@ if ( Mconsole != null) {
|
||||||
});
|
});
|
||||||
temp.data.$direction = d;
|
temp.data.$direction = d;
|
||||||
Mconsole.fx.plotLine(temp, Mconsole.canvas);
|
Mconsole.fx.plotLine(temp, Mconsole.canvas);
|
||||||
|
selectEdge(temp);
|
||||||
Mconsole.fx.animate({
|
Mconsole.fx.animate({
|
||||||
modes: ['edge-property:lineWidth'],
|
modes: ['edge-property:lineWidth:color'],
|
||||||
duration: 400
|
duration: 400
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
json = <%= @synapse.selfplusnodes_as_json.html_safe %>
|
json = <%= @synapse.selfplusnodes_as_json.html_safe %>
|
||||||
initialize("chaotic");
|
initialize("chaotic");
|
||||||
}
|
}
|
||||||
|
|
0
app/views/synapses/destroy.js.erb
Normal file
0
app/views/synapses/destroy.js.erb
Normal file
|
@ -11,6 +11,7 @@ ISSAD::Application.routes.draw do
|
||||||
match 'maps/:id/savelayout', to: 'maps#savelayout', via: :put, as: :savelayout
|
match 'maps/:id/savelayout', to: 'maps#savelayout', via: :put, as: :savelayout
|
||||||
match 'maps/:id/realtime', to: 'maps#realtime', via: :get, as: :realtime
|
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/: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
|
resource :session
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue