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

Merge pull request #365 from Connoropolous/wip-zoomExtents

Browse source 
Various changes, but mostly to Selection with box and zoom to extents
This commit is contained in:
Connor Turland 2014-09-29 10:38:23 -04:00
commit ca8794e61b
5 changed files with 355 additions and 285 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/src/JIT.js
View file

@ -2498,7 +2498,11 @@ Extras.Classes.Navigation = new Class({
if (!Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) { if (!Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) {
Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos(); Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos();
} }
Metamaps.Mouse.didPan = false; Metamaps.Mouse.didPan = false;
// END METAMAPS CODE // END METAMAPS CODE
this.pos = eventInfo.getPos(); this.pos = eventInfo.getPos();
@ -2570,6 +2574,8 @@ Extras.Classes.Navigation = new Class({
// START METAMAPS CODE // START METAMAPS CODE
if (Metamaps.Mouse.didPan) Metamaps.JIT.SmoothPanning(); if (Metamaps.Mouse.didPan) Metamaps.JIT.SmoothPanning();
// END METAMAPS CODE // END METAMAPS CODE
} }

23
app/assets/javascripts/src/Metamaps.GlobalUI.js
View file

@ -366,6 +366,29 @@ Metamaps.GlobalUI.Search = {
self.close(0, true); self.close(0, true);
} }
break; break;
case 65:
case 97:
if (e.ctrlKey){
Metamaps.Control.deselectAllNodes();
Metamaps.Control.deselectAllEdges();
e.preventDefault();
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
Metamaps.Control.selectNode(n,e);
});
Metamaps.Visualize.mGraph.plot();
}
break;
case 69:
case 101:
if (e.ctrlKey){
e.preventDefault();
Metamaps.JIT.zoomExtents();
}
break;
default: default:
break; //console.log(e.which); break; //console.log(e.which);
} }

214
app/assets/javascripts/src/Metamaps.JIT.js
View file

@ -319,7 +319,7 @@ Metamaps.JIT = {
if (Metamaps.Mouse.boxStartCoordinates) { if (Metamaps.Mouse.boxStartCoordinates) {
Metamaps.Visualize.mGraph.busy = false; Metamaps.Visualize.mGraph.busy = false;
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
Metamaps.JIT.selectWithBox(e); Metamaps.JIT.zoomToBox();
return; return;
} }
@ -672,8 +672,6 @@ Metamaps.JIT = {
var scale = dist / lastDist; var scale = dist / lastDist;
console.log(scale);
if (8 >= Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale && Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale >= 1) { if (8 >= Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale && Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale >= 1) {
Metamaps.Visualize.mGraph.canvas.scale(scale, scale); Metamaps.Visualize.mGraph.canvas.scale(scale, scale);
} }
@ -940,7 +938,7 @@ Metamaps.JIT = {
Metamaps.Control.deselectAllEdges(); Metamaps.Control.deselectAllEdges();
} }
//select all nodes, and their edges, that are within the box //select all nodes that are within the box
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
var x = n.pos.x, var x = n.pos.x,
y = n.pos.y; y = n.pos.y;
@ -988,7 +986,7 @@ Metamaps.JIT = {
(eX > maxBoxX) ? (maxBoxX = eX):(minBoxX = eX); (eX > maxBoxX) ? (maxBoxX = eX):(minBoxX = eX);
(eY > maxBoxY) ? (maxBoxY = eY):(minBoxY = eY); (eY > maxBoxY) ? (maxBoxY = eY):(minBoxY = eY);
//Fins the slopes from the synapse fromNode to the 4 corners of the selection box //Find the slopes from the synapse fromNode to the 4 corners of the selection box
var slopes = []; var slopes = [];
slopes.push( (sY - fromNodeY) / (sX - fromNodeX) ); slopes.push( (sY - fromNodeY) / (sX - fromNodeX) );
slopes.push( (sY - fromNodeY) / (eX - fromNodeX) ); slopes.push( (sY - fromNodeY) / (eX - fromNodeX) );
@ -1006,13 +1004,12 @@ Metamaps.JIT = {
var synSlope = (toNodeY - fromNodeY) / (toNodeX - fromNodeX); var synSlope = (toNodeY - fromNodeY) / (toNodeX - fromNodeX);
var b = fromNodeY - synSlope * fromNodeX; var b = fromNodeY - synSlope * fromNodeX;
var selectTest = false; //Use the selection box edges as test cases for synapse intersection
//if the synapse slope is within a range that would intersect with the selection box
if (synSlope <= maxSlope && synSlope >= minSlope){
var testX = sX; var testX = sX;
var testY = synSlope * testX + b; var testY = synSlope * testX + b;
var selectTest;
if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){ if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
selectTest = true; selectTest = true;
} }
@ -1027,17 +1024,22 @@ Metamaps.JIT = {
testY = sY; testY = sY;
testX = (testY - b)/synSlope; testX = (testY - b)/synSlope;
if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testY <= maxBoxX){ if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
selectTest = true; selectTest = true;
} }
testY = eY; testY = eY;
testX = (testY - b)/synSlope; testX = (testY - b)/synSlope;
if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testY <= maxBoxX){ if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
selectTest = true; selectTest = true;
} }
//Case where the synapse is wholly enclosed in the seldction box
if(fromNodeX >= minBoxX && fromNodeX <= maxBoxX && fromNodeY >= minBoxY && fromNodeY <= maxBoxY && toNodeX >= minBoxX && toNodeX <= maxBoxX && toNodeY >= minBoxY && toNodeY <= maxBoxY){
selectTest = true;
} }
//The test synapse was selected! //The test synapse was selected!
if(selectTest){ if(selectTest){
if(e.ctrlKey){ if(e.ctrlKey){
@ -1102,15 +1104,23 @@ Metamaps.JIT = {
// wait a certain length of time, then check again, then run this code // wait a certain length of time, then check again, then run this code
setTimeout(function () { setTimeout(function () {
if (!Metamaps.JIT.nodeWasDoubleClicked()) { if (!Metamaps.JIT.nodeWasDoubleClicked()) {
if (!e.shiftKey) { if (!e.shiftKey && !e.ctrlKey) {
Metamaps.Control.deselectAllNodes(); Metamaps.Control.deselectAllNodes();
Metamaps.Control.deselectAllEdges(); Metamaps.Control.deselectAllEdges();
} }
if(e.ctrlKey || e.shiftKey){
if (node.selected) { if (node.selected) {
Metamaps.Control.deselectNode(node); Metamaps.Control.deselectNode(node);
} else { } else {
Metamaps.Control.selectNode(node,e); Metamaps.Control.selectNode(node,e);
} }
}
else{
Metamaps.Control.deselectAllNodes();
Metamaps.Control.deselectAllEdges();
Metamaps.Control.selectNode(node,e);
}
//trigger animation to final styles //trigger animation to final styles
Metamaps.Visualize.mGraph.fx.animate({ Metamaps.Visualize.mGraph.fx.animate({
modes: ['edge-property:lineWidth:color:alpha'], modes: ['edge-property:lineWidth:color:alpha'],
@ -1138,7 +1148,6 @@ Metamaps.JIT = {
// create new menu for clicked on node // create new menu for clicked on node
var rightclickmenu = document.createElement("div"); var rightclickmenu = document.createElement("div");
rightclickmenu.className = "rightclickmenu"; rightclickmenu.className = "rightclickmenu";
// add the proper options to the menu // add the proper options to the menu
var menustring = '<ul>'; var menustring = '<ul>';
@ -1170,8 +1179,7 @@ Metamaps.JIT = {
top: e.clientY top: e.clientY
}); });
//add the menu to the page //add the menu to the page
$('#wrapper').append(rightclickmenu); $('#infovis-canvaswidget').append(rightclickmenu);
// attach events to clicks on the list items // attach events to clicks on the list items
@ -1494,15 +1502,63 @@ Metamaps.JIT = {
canvas.translate(-1*offsetX,-1*offsetY); canvas.translate(-1*offsetX,-1*offsetY);
}, },
zoomExtents: function (event) { zoomToBox: function () {
var sX = Metamaps.Mouse.boxStartCoordinates.x,
sY = Metamaps.Mouse.boxStartCoordinates.y,
eX = Metamaps.Mouse.boxEndCoordinates.x,
eY = Metamaps.Mouse.boxEndCoordinates.y;
Metamaps.JIT.centerMap();
var height = $(document).height(),
width = $(document).width();
var spanX = Math.abs(sX - eX);
var spanY = Math.abs(sY - eY);
var ratioX = width / spanX;
var ratioY = height / spanY;
var newRatio = Math.min(ratioX,ratioY);
var canvas = Metamaps.Visualize.mGraph.canvas;
if(canvas.scaleOffsetX *newRatio<= 5 && canvas.scaleOffsetX*newRatio >= 0.2){
canvas.scale(newRatio,newRatio);
}
else if(canvas.scaleOffsetX * newRatio > 5){
newRatio = 5/ canvas.scaleOffsetX;
canvas.scale(newRatio,newRatio);
}
else{
newRatio = 0.2/ canvas.scaleOffsetX;
canvas.scale(newRatio,newRatio);
}
var cogX = (sX + eX)/2;
var cogY = (sY + eY)/2;
canvas.translate(-1* cogX, -1* cogY);
Metamaps.Mouse.boxStartCoordinates = false;
Metamaps.Mouse.boxEndCoordinates = false;
Metamaps.Visualize.mGraph.plot();
},
zoomExtents: function () {
Metamaps.JIT.centerMap(); Metamaps.JIT.centerMap();
var height = $(document).height(), var height = $(document).height(),
width = $(document).width(), width = $(document).width(),
maxX, minX, maxY, minY, counter = 0; maxX, minX, maxY, minY, counter = 0;
var canvas = Metamaps.Visualize.mGraph.canvas;
if (Metamaps.Selected.Nodes.length > 0) { if (Metamaps.Selected.Nodes.length > 0) {
var nodes = Metamaps.Selected.Nodes; var nodes = Metamaps.Selected.Nodes;
}
else {
var nodes = _.values(Metamaps.Visualize.mGraph.graph.nodes);
}
if(nodes.length > 1){ if(nodes.length > 1){
nodes.forEach(function (n) { nodes.forEach(function (n) {
@ -1516,10 +1572,22 @@ Metamaps.JIT = {
minY = y; minY = y;
} }
maxX = Math.max(x,maxX); var arrayOfLabelLines = Metamaps.Util.splitLine(n.name, 30).split('\n'),
maxY = Math.max(y,maxY); dim = n.getData('dim'),
minX = Math.min(x,minX); ctx = canvas.getCtx();
minY = Math.min(y,minY);
var height = 25 * arrayOfLabelLines.length;
var index, lineWidths = [];
for (index = 0; index < arrayOfLabelLines.length; ++index) {
lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
}
var width = Math.max.apply(null, lineWidths) + 8;
maxX = Math.max(x + width /2,maxX);
maxY = Math.max(y + n.getData("height") + 5 + height,maxY);
minX = Math.min(x - width /2,minX);
minY = Math.min(y - dim,minY);
counter++; counter++;
}); });
@ -1530,10 +1598,19 @@ Metamaps.JIT = {
var ratioY = spanY / height; var ratioY = spanY / height;
var newRatio = Math.max(ratioX,ratioY); var newRatio = Math.max(ratioX,ratioY);
var scaleMultiplier = 1/newRatio*0.9;
var canvas = Metamaps.Visualize.mGraph.canvas; if(canvas.scaleOffsetX *scaleMultiplier<= 3 && canvas.scaleOffsetX*scaleMultiplier >= 0.2){
canvas.scale(scaleMultiplier,scaleMultiplier);
canvas.scale(1/newRatio*0.8,1/newRatio*0.8); }
else if(canvas.scaleOffsetX * scaleMultiplier > 3){
scaleMultiplier = 3/ canvas.scaleOffsetX;
canvas.scale(scaleMultiplier,scaleMultiplier);
}
else{
scaleMultiplier = 0.2/ canvas.scaleOffsetX;
canvas.scale(scaleMultiplier,scaleMultiplier);
}
counter = 0; counter = 0;
@ -1548,74 +1625,25 @@ Metamaps.JIT = {
minY = y; minY = y;
} }
maxX = Math.max(x,maxX); var arrayOfLabelLines = Metamaps.Util.splitLine(n.name, 30).split('\n'),
maxY = Math.max(y,maxY); dim = n.getData('dim'),
minX = Math.min(x,minX); ctx = canvas.getCtx();
minY = Math.min(y,minY);
var height = 25 * arrayOfLabelLines.length;
var index, lineWidths = [];
for (index = 0; index < arrayOfLabelLines.length; ++index) {
lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
}
var width = Math.max.apply(null, lineWidths) + 8;
maxX = Math.max(x + width /2,maxX);
maxY = Math.max(y + n.getData("height") + 5 + height,maxY);
minX = Math.min(x - width /2,minX);
minY = Math.min(y - dim,minY);
counter++; counter++;
}); });
}
}
else{
var nodes = Metamaps.Visualize.mGraph.graph;
if(Object.keys(nodes).length >1){
nodes.eachNode(function (n) {
var x = n.pos.x,
y = n.pos.y;
if (counter == 0){
maxX = x;
minX = x;
maxY = y;
minY = y;
}
maxX = Math.max(x,maxX);
maxY = Math.max(y,maxY);
minX = Math.min(x,minX);
minY = Math.min(y,minY);
counter++;
});
var spanX = maxX - minX;
var spanY = maxY - minY;
var ratioX = spanX / width;
var ratioY = spanY / height;
var newRatio = Math.max(ratioX,ratioY);
var canvas = Metamaps.Visualize.mGraph.canvas;
canvas.scale(1/newRatio*0.8,1/newRatio*0.8);
counter = 0;
nodes.eachNode(function (n) {
var x = n.pos.x,
y = n.pos.y;
if (counter == 0){
maxX = x;
minX = x;
maxY = y;
minY = y;
}
maxX = Math.max(x,maxX);
maxY = Math.max(y,maxY);
minX = Math.min(x,minX);
minY = Math.min(y,minY);
counter++;
});
}
}
var cogX = (maxX + minX)/2; var cogX = (maxX + minX)/2;
var cogY = (maxY + minY)/2; var cogY = (maxY + minY)/2;
@ -1623,4 +1651,14 @@ Metamaps.JIT = {
canvas.translate(-1* cogX, -1* cogY); canvas.translate(-1* cogX, -1* cogY);
$(document).trigger(Metamaps.JIT.events.zoom, [event]); $(document).trigger(Metamaps.JIT.events.zoom, [event]);
} }
else if(nodes.length == 1){
nodes.forEach(function (n) {
var x = n.pos.x,
y = n.pos.y;
canvas.translate(-1* x, -1* y);
$(document).trigger(Metamaps.JIT.events.zoom, [event]);
});
}
}
}; };

3
app/assets/javascripts/src/Metamaps.js
View file

@ -47,6 +47,7 @@ Metamaps.Touch = {
Metamaps.Mouse = { Metamaps.Mouse = {
didPan: false, didPan: false,
didBoxZoom: false,
changeInX: 0, changeInX: 0,
changeInY: 0, changeInY: 0,
edgeHoveringOver: false, edgeHoveringOver: false,
@ -2021,11 +2022,13 @@ Metamaps.Control = {
if (Metamaps.Selected.Nodes.indexOf(node) != -1) return; if (Metamaps.Selected.Nodes.indexOf(node) != -1) return;
node.selected = true; node.selected = true;
node.setData('dim', 30, 'current'); node.setData('dim', 30, 'current');
/*
if(!(e.ctrlKey) && !(e.altKey)){ if(!(e.ctrlKey) && !(e.altKey)){
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
Metamaps.Control.selectEdge(adj); Metamaps.Control.selectEdge(adj);
}); });
} }
*/
Metamaps.Selected.Nodes.push(node); Metamaps.Selected.Nodes.push(node);
}, },