tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed the zoom controller, thanks to R.Novoa

This commit is contained in:
mdtrooper 2016-02-23 16:48:58 +01:00
parent 2ee1e5c345
commit 5f7eee5bc8
2 changed files with 98 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
pandora_console/include/class/Map.class.php
View File

@ -130,7 +130,7 @@ abstract class Map {
?>
<div id="map" data-id="<?php echo $this->id;?>" style="border: 1px red solid;">
<div class="zoom_controller" style="">
<div class="zoom_box" style="">
<style type="text/css">
.zoom_controller {
width: 30px;
@ -138,7 +138,7 @@ abstract class Map {
background: blue;
border-radius: 15px;
top: 60px;
top: 100px;
left: 10px;
position: absolute;
}
@ -170,23 +170,68 @@ abstract class Map {
left: -87px;
top: 93px;
}
}
}
.home_zoom {
top: 360px;
left: 10px;
display: table-cell;
position: absolute;
top: 215px;
left: 1px;
font-weight: bolder;
font-size: 20px;
background: blue;
color: white;
border-radius: 10px;
padding: 5px;
border-radius: 15px;
width: 30px;
height: 30px;
cursor:pointer;
text-align: center;
vertical-align: middle;
}
.zoom_in {
top: 10px;
left: 10px;
display: table-cell;
position: relative;
font-weight: bolder;
font-size: 20px;
background: blue;
color: white;
border-radius: 15px;
width: 30px;
height: 30px;
cursor:pointer;
text-align: center;
vertical-align: middle;
}
.zoom_out {
top: 320px;
left: 10px;
display: table-cell;
position: absolute;
font-weight: bolder;
font-size: 20px;
background: blue;
color: white;
border-radius: 15px;
width: 30px;
height: 30px;
cursor:pointer;
text-align: center;
vertical-align: middle;
}
</style>
<input class="vertical_range" type="range" name="range" min="-666" max="666" step="1" value="666" />
<span class="home_zoom">H</span>
<div class="zoom_controller">
<input class="vertical_range" type="range" name="range" min="-666" max="666" step="1" value="666" />
</div>
<div class="zoom_in">+</div>
<div class="zoom_out">-</div>
<div class="home_zoom">H</div>
</div>
<?php
if ($this->width == 0) {

69
pandora_console/include/javascript/map/MapController.js
View File

@ -12,6 +12,9 @@
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
/*-------------------Constants-------------------*/
var MAX_ZOOM_LEVEL = 50;
/*-------------------Constructor-------------------*/
var MapController = function(target) {
this._target = target;
@ -26,6 +29,7 @@ MapController.prototype._id = null;
MapController.prototype._tooltipsID = null;
MapController.prototype._viewport = null;
MapController.prototype._zoomManager = null;
MapController.prototype._slider = null;
/*--------------------Methods----------------------*/
/*
@ -39,7 +43,7 @@ MapController.prototype.init_map = function() {
var svg = d3.select(this._target + " svg");
self._zoomManager =
d3.behavior.zoom().scaleExtent([1/100, 100]).on("zoom", zoom);
d3.behavior.zoom().scaleExtent([1/MAX_ZOOM_LEVEL, MAX_ZOOM_LEVEL]).on("zoom", zoom);
self._viewport = svg
.call(self._zoomManager)
@ -52,35 +56,43 @@ MapController.prototype.init_map = function() {
var zoom_level = d3.event.scale;
if (zoom_level == 1) {
zoom_level = 0;
}
else if (zoom_level < 1) {
zoom_level = (zoom_level * 100) - 100;
}
slider.property("value", zoom_level);
self._slider.property("value", Math.log(zoom_level));
self._viewport
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function zoom_in(d) {
var step = parseFloat(self._slider.property("step"));
var slider_value = parseFloat(self._slider.property("value"));
slider_value += step;
var zoom_level = Math.exp(slider_value);
self._slider.property("value", Math.log(zoom_level));
self._slider.on("input")();
}
function zoom_out(d) {
var step = parseFloat(self._slider.property("step"));
var slider_value = parseFloat(self._slider.property("value"));
slider_value -= step;
var zoom_level = Math.exp(slider_value);
self._slider.property("value", Math.log(zoom_level));
self._slider.on("input")();
}
function home_zoom(d) {
self._zoomManager.scale(1).translate([0, 0]).event(self._viewport);
}
function slided(d) {
var zoom_level = parseFloat(d3.select(this).property("value"));
var slider_value = parseFloat(self._slider.property("value"))
if (zoom_level == 0) {
zoom_level = 1;
}
else if (zoom_level < 0) {
console.log("caca");
zoom_level = (zoom_level + 100) / 100;
}
zoom_level = Math.exp(slider_value);
// Code to translate the map with the zoom for to hold the center
var center = [
@ -106,17 +118,24 @@ MapController.prototype.init_map = function() {
.event(self._viewport);
}
var slider = d3.select("#map .zoom_controller .vertical_range")
.attr("value", self._zoomManager.scaleExtent()[0])
.attr("min", (self._zoomManager.scaleExtent()[0] * 100) - 100)
.attr("max", self._zoomManager.scaleExtent()[1])
.attr("step", (self._zoomManager.scaleExtent()[1] - self._zoomManager.scaleExtent()[0]) / 100)
console.log(self._zoomManager.scaleExtent());
self._slider = d3.select("#map .zoom_controller .vertical_range")
.property("value", 0)
.property("min", -Math.log(MAX_ZOOM_LEVEL))
.property("max", Math.log(MAX_ZOOM_LEVEL))
.property("step", Math.log(MAX_ZOOM_LEVEL) * 2 / MAX_ZOOM_LEVEL)
.on("input", slided);
d3.select("#map .zoom_controller .home_zoom")
d3.select("#map .zoom_box .home_zoom")
.on("click", home_zoom);
d3.select("#map .zoom_box .zoom_in")
.on("click", zoom_in);
d3.select("#map .zoom_box .zoom_out")
.on("click", zoom_out);
self.paint_nodes();