tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-28 00:04:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed the zoom controller, thanks to R.Novoa

Browse Source
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 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"> <style type="text/css">
.zoom_controller { .zoom_controller {
width: 30px; width: 30px;
@ -138,7 +138,7 @@ abstract class Map {
background: blue; background: blue;
border-radius: 15px; border-radius: 15px;
top: 60px; top: 100px;
left: 10px; left: 10px;
position: absolute; position: absolute;
} }
@ -170,23 +170,68 @@ abstract class Map {
left: -87px; left: -87px;
top: 93px; top: 93px;
} }
} }
.home_zoom { .home_zoom {
top: 360px;
left: 10px;
display: table-cell;
position: absolute; position: absolute;
top: 215px;
left: 1px;
font-weight: bolder; font-weight: bolder;
font-size: 20px; font-size: 20px;
background: blue; background: blue;
color: white; color: white;
border-radius: 10px; border-radius: 15px;
padding: 5px; width: 30px;
height: 30px;
cursor:pointer; 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> </style>
<input class="vertical_range" type="range" name="range" min="-666" max="666" step="1" value="666" /> <div class="zoom_controller">
<span class="home_zoom">H</span> <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> </div>
<?php <?php
if ($this->width == 0) { 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 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
/*-------------------Constants-------------------*/
var MAX_ZOOM_LEVEL = 50;
/*-------------------Constructor-------------------*/ /*-------------------Constructor-------------------*/
var MapController = function(target) { var MapController = function(target) {
this._target = target; this._target = target;
@ -26,6 +29,7 @@ MapController.prototype._id = null;
MapController.prototype._tooltipsID = null; MapController.prototype._tooltipsID = null;
MapController.prototype._viewport = null; MapController.prototype._viewport = null;
MapController.prototype._zoomManager = null; MapController.prototype._zoomManager = null;
MapController.prototype._slider = null;
/*--------------------Methods----------------------*/ /*--------------------Methods----------------------*/
/* /*
@ -39,7 +43,7 @@ MapController.prototype.init_map = function() {
var svg = d3.select(this._target + " svg"); var svg = d3.select(this._target + " svg");
self._zoomManager = 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 self._viewport = svg
.call(self._zoomManager) .call(self._zoomManager)
@ -52,35 +56,43 @@ MapController.prototype.init_map = function() {
var zoom_level = d3.event.scale; var zoom_level = d3.event.scale;
if (zoom_level == 1) { self._slider.property("value", Math.log(zoom_level));
zoom_level = 0;
}
else if (zoom_level < 1) {
zoom_level = (zoom_level * 100) - 100;
}
slider.property("value", zoom_level);
self._viewport self._viewport
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); .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) { function home_zoom(d) {
self._zoomManager.scale(1).translate([0, 0]).event(self._viewport); self._zoomManager.scale(1).translate([0, 0]).event(self._viewport);
} }
function slided(d) { function slided(d) {
var zoom_level = parseFloat(d3.select(this).property("value")); var slider_value = parseFloat(self._slider.property("value"))
zoom_level = Math.exp(slider_value);
if (zoom_level == 0) {
zoom_level = 1;
}
else if (zoom_level < 0) {
console.log("caca");
zoom_level = (zoom_level + 100) / 100;
}
// Code to translate the map with the zoom for to hold the center // Code to translate the map with the zoom for to hold the center
var center = [ var center = [
@ -106,17 +118,24 @@ MapController.prototype.init_map = function() {
.event(self._viewport); .event(self._viewport);
} }
var slider = d3.select("#map .zoom_controller .vertical_range") console.log(self._zoomManager.scaleExtent());
.attr("value", self._zoomManager.scaleExtent()[0])
.attr("min", (self._zoomManager.scaleExtent()[0] * 100) - 100) self._slider = d3.select("#map .zoom_controller .vertical_range")
.attr("max", self._zoomManager.scaleExtent()[1]) .property("value", 0)
.attr("step", (self._zoomManager.scaleExtent()[1] - self._zoomManager.scaleExtent()[0]) / 100) .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); .on("input", slided);
d3.select("#map .zoom_controller .home_zoom") d3.select("#map .zoom_box .home_zoom")
.on("click", 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(); self.paint_nodes();