Added Recenter map, zoom in, zoom out, Zoom to extents and buttons for each. Also, renamed selection function to just SelectWithBox()
This commit is contained in:
Robert Best
parent
910c6a8984
commit
f75c2c1f8a
5 changed files with 271 additions and 135 deletions
|
|
@ -8,6 +8,10 @@ Metamaps.JIT = {
|
|||
var self = Metamaps.JIT;
|
||||
|
||||
self.prepareVizData();
|
||||
$(".zoomIn").click(self.zoomIn);
|
||||
$(".zoomOut").click(self.zoomOut);
|
||||
$(".centerMap").click(self.centerMap);
|
||||
$(".zoomExtents").click(self.zoomExtents);
|
||||
},
|
||||
/**
|
||||
* convert our topic JSON into something JIT can use
|
||||
|
|
@ -307,7 +311,7 @@ Metamaps.JIT = {
|
|||
if (Metamaps.Mouse.boxStartCoordinates) {
|
||||
Metamaps.Visualize.mGraph.busy = false;
|
||||
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
|
||||
Metamaps.JIT.selectNodesWithBox(e);
|
||||
Metamaps.JIT.selectWithBox(e);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -331,7 +335,7 @@ Metamaps.JIT = {
|
|||
if (Metamaps.Mouse.boxStartCoordinates) {
|
||||
Metamaps.Visualize.mGraph.busy = false;
|
||||
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
|
||||
Metamaps.JIT.selectNodesWithBox(e);
|
||||
Metamaps.JIT.selectWithBox(e);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -897,7 +901,7 @@ Metamaps.JIT = {
|
|||
}
|
||||
return 'nothing'; //case 4?
|
||||
}, // handleSelectionBeforeDragging
|
||||
selectNodesWithBox: function (e) {
|
||||
selectWithBox: function (e) {
|
||||
|
||||
var sX = Metamaps.Mouse.boxStartCoordinates.x,
|
||||
sY = Metamaps.Mouse.boxStartCoordinates.y,
|
||||
|
|
@ -1025,7 +1029,7 @@ Metamaps.JIT = {
|
|||
Metamaps.Mouse.boxStartCoordinates = false;
|
||||
Metamaps.Mouse.boxEndCoordinates = false;
|
||||
Metamaps.Visualize.mGraph.plot();
|
||||
}, // selectNodesWithBox
|
||||
}, // selectWithBox
|
||||
drawSelectBox: function (eventInfo, e) {
|
||||
var ctx = Metamaps.Visualize.mGraph.canvas.getCtx();
|
||||
|
||||
|
|
@ -1425,5 +1429,91 @@ Metamaps.JIT = {
|
|||
y: posChild.y
|
||||
}, 13, inv, canvas, 0.3);
|
||||
}
|
||||
} //renderEdgeArrows
|
||||
}, //renderEdgeArrows
|
||||
zoomIn: function () {
|
||||
Metamaps.Visualize.mGraph.canvas.scale(1.25,1.25);
|
||||
},
|
||||
zoomOut: function () {
|
||||
Metamaps.Visualize.mGraph.canvas.scale(0.8,0.8);
|
||||
},
|
||||
centerMap: function () {
|
||||
var canvas = Metamaps.Visualize.mGraph.canvas;
|
||||
var offsetScale = canvas.scaleOffsetX;
|
||||
|
||||
canvas.scale(1/offsetScale,1/offsetScale);
|
||||
|
||||
var offsetX = canvas.translateOffsetX;
|
||||
var offsetY = canvas.translateOffsetY;
|
||||
|
||||
canvas.translate(-1*offsetX,-1*offsetY);
|
||||
},
|
||||
zoomExtents: function () {
|
||||
Metamaps.JIT.centerMap();
|
||||
var height = $(document).height(),
|
||||
width = $(document).width(),
|
||||
maxX, minX, maxY, minY, counter = 0;
|
||||
|
||||
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.9,1/newRatio*0.9);
|
||||
|
||||
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 cogY = (maxY + minY)/2;
|
||||
|
||||
canvas.translate(-1* cogX, -1* cogY);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -2060,7 +2060,7 @@ Metamaps.Filter = {
|
|||
var addedSynapses = [];
|
||||
|
||||
Metamaps.Synapses.each(function(synapse) {
|
||||
if (newSynapsesList.indexOf(synapse.get('desc')) === -1) {
|
||||
if (synapse.get('desc') && newSynapsesList.indexOf(synapse.get('desc')) === -1) {
|
||||
newSynapsesList.push(synapse.get('desc').toString());
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -791,6 +791,47 @@ li.accountInvite span {
|
|||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.zoomIn {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
right: 20px;
|
||||
z-index: 200;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.zoomOut {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
right: 20px;
|
||||
z-index: 200;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.centerMap {
|
||||
position: absolute;
|
||||
bottom: 140px;
|
||||
right: 20px;
|
||||
z-index: 200;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.zoomExtents {
|
||||
position: absolute;
|
||||
bottom: 180px;
|
||||
right: 20px;
|
||||
z-index: 200;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.sidebarFilter.loggedout {
|
||||
right: 35px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zoomIn">+</div>
|
||||
<div class="zoomOut">-</div>
|
||||
<div class="centerMap">C</div>
|
||||
<div class="zoomExtents">E</div>
|
||||
|
||||
<div class="index">
|
||||
<div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
|
||||
<span class="mapInfo"></span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue