From 1d936ad230583c9deda95a4a9af04e66b8a26b4b Mon Sep 17 00:00:00 2001
From: mdtrooper <tres.14159@gmail.com>
Date: Thu, 18 Feb 2016 16:51:03 +0100
Subject: [PATCH] First version of scroll and pan of new networkmap but it is
 buggy.

---
 pandora_console/include/class/Map.class.php   | 91 +++++++++++++++++++
 .../include/javascript/map/MapController.js   | 12 ++-
 2 files changed, 101 insertions(+), 2 deletions(-)

diff --git a/pandora_console/include/class/Map.class.php b/pandora_console/include/class/Map.class.php
index e886ffb3c0..635f744fe4 100644
--- a/pandora_console/include/class/Map.class.php
+++ b/pandora_console/include/class/Map.class.php
@@ -143,6 +143,97 @@ abstract class Map {
 			}
 			?>
 		</script>
+		
+<!--
+		
+		
+		<style>
+
+		svg {
+		  font: 10px sans-serif;
+		  shape-rendering: crispEdges;
+		}
+
+		rect {
+		  fill: #ddd;
+		}
+
+		.axis path,
+		.axis line {
+		  fill: none;
+		  stroke: #fff;
+		}
+
+		</style>
+		
+		
+		<div id="test"></div>
+		<script>
+			
+			var margin = {top: 20, right: 20, bottom: 30, left: 40},
+				width = 960 - margin.left - margin.right,
+				height = 500 - margin.top - margin.bottom;
+
+			var x = d3.scale.linear()
+				.domain([-width / 2, width / 2])
+				.range([0, width]);
+
+			var y = d3.scale.linear()
+				.domain([-height / 2, height / 2])
+				.range([height, 0]);
+
+			var xAxis = d3.svg.axis()
+				.scale(x)
+				.orient("bottom")
+				.tickSize(-height);
+
+			var yAxis = d3.svg.axis()
+				.scale(y)
+				.orient("left")
+				.ticks(5)
+				.tickSize(-width);
+
+			var zoom = d3.behavior.zoom()
+				.x(x)
+				.y(y)
+				.scaleExtent([1, 32])
+				.on("zoom", zoomed);
+
+			var svg = d3.select("#test").append("svg")
+				.attr("width", width + margin.left + margin.right)
+				.attr("height", height + margin.top + margin.bottom)
+			  .append("g")
+				.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+				.call(zoom);
+
+			svg.append("rect")
+				.attr("width", width)
+				.attr("height", height);
+
+			svg.append("g")
+				.attr("class", "x axis")
+				.attr("transform", "translate(0," + height + ")")
+				.call(xAxis);
+
+			svg.append("g")
+				.attr("class", "y axis")
+				.call(yAxis);
+			
+			svg.append("g").append("circle")
+		.attr("id", "node_10")
+		.attr("class", "node")
+		.attr("cx", "20")
+		.attr("cy", "20")
+		.attr("style", "fill: rgb(128, 186, 39);")
+		.attr("r", "5");
+
+			function zoomed() {
+			  svg.select(".x.axis").call(xAxis);
+			  svg.select(".y.axis").call(yAxis);
+			}
+
+		</script>
+-->
 		<?php
 	}
 	
diff --git a/pandora_console/include/javascript/map/MapController.js b/pandora_console/include/javascript/map/MapController.js
index ca0ac14053..f59ac04438 100644
--- a/pandora_console/include/javascript/map/MapController.js
+++ b/pandora_console/include/javascript/map/MapController.js
@@ -30,6 +30,10 @@ MapController.prototype._marginConstant = 0; //To be beauty
 
 
 /*--------------------Methods----------------------*/
+var svg;
+function zoom() {
+  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+}
 
 /*
 Function init_map
@@ -37,9 +41,11 @@ Return void
 This function init the map
 */
 MapController.prototype.init_map = function() {
-	var svg = d3.select("#map svg");
-	
+	svg = d3.select("#map svg");
 	
+	svg
+		.call(d3.behavior.zoom().scaleExtent([1/100, 100]).on("zoom", zoom))
+		.append("g");
 	
 	svg.append("g").append("circle")
 		.attr("id", "node_10")
@@ -105,6 +111,8 @@ MapController.prototype.init_map = function() {
 		.attr("style", "fill: rgb(50, 50, 128);")
 		.attr("r", "6");
 
+
+
 	//Runs tooltipster plugin
 	$(document).ready(function() {
             $('.tooltip').tooltipster();