glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Devin Howard 2013-01-05 22:40:31 -05:00
parent 01fe14dbd1
commit 6226930c98
1 changed files with 175 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

262
app/assets/javascripts/Jit/graphsettings.js
View file

@ -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);
}