From 646a90211e432eb8e48a5f3ecb95702868d7016e Mon Sep 17 00:00:00 2001
From: mdtrooper <tres.14159@gmail.com>
Date: Mon, 22 Feb 2016 12:05:28 +0100
Subject: [PATCH] Some changes needs for the zoom.

---
 pandora_console/include/class/Map.class.php   | 102 ++----------
 .../include/javascript/map/MapController.js   | 153 ++++++++++--------
 2 files changed, 96 insertions(+), 159 deletions(-)

diff --git a/pandora_console/include/class/Map.class.php b/pandora_console/include/class/Map.class.php
index 75f6118c0c..36da558715 100644
--- a/pandora_console/include/class/Map.class.php
+++ b/pandora_console/include/class/Map.class.php
@@ -34,8 +34,8 @@ abstract class Map {
 	protected $width = null;
 	protected $height = null;
 	
-	protected $nodes = null;
-	protected $edges = null;
+	protected $nodes = array();
+	protected $edges = array();
 	
 	protected $requires_js = null;
 	
@@ -93,6 +93,13 @@ abstract class Map {
 			echo "var nodes = " . json_encode($this->nodes) . ";";
 			echo "var edges = " . json_encode($this->edges) . ";";
 			?>
+			var temp = [];
+			for (var i in nodes) { temp[parseInt(i)] = nodes[i];}
+			nodes = temp;
+			
+			temp = [];
+			for (var i in edges) { temp[parseInt(i)] = edges[i];}
+			edges = temp;
 		</script>
 		<?php
 	}
@@ -149,97 +156,6 @@ 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 5d6df85ef4..69f63da9f2 100644
--- a/pandora_console/include/javascript/map/MapController.js
+++ b/pandora_console/include/javascript/map/MapController.js
@@ -27,91 +27,112 @@ MapController.prototype._id = null;
 MapController.prototype._tooltipsID = null;
 
 /*--------------------Methods----------------------*/
-
-var svg;
-function zoom() {
-  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
-}
-
 /*
 Function init_map
 Return void
 This function init the map
 */
 MapController.prototype.init_map = function() {
-	svg = d3.select("#map svg");
+	var svg = d3.select(this._target + " svg");
 	
-	svg
+	var viewport = svg
 		.call(d3.behavior.zoom().scaleExtent([1/100, 100]).on("zoom", zoom))
 		.append("g");
 	
-	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 zoom() {
+		viewport
+			.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+	}
 	
-	svg.append("g").append("circle")
-		.attr("id", "node_11")
-		.attr("class", "node")
-		.attr("cx", "20")
-		.attr("cy", "780")
-		.attr("style", "fill: rgb(255, 0, 0);")
-		.attr("r", "10");
+	this.paint_nodes(viewport);
 	
-	svg.append("g").append("circle")
-		.attr("id", "node_12")
-		.attr("class", "node")
-		.attr("cx", "780")
-		.attr("cy", "780")
-		.attr("style", "fill: rgb(255, 255, 0);")
-		.attr("r", "10");
-	
-	svg.append("g").append("circle")
-		.attr("id", "node_13")
-		.attr("class", "node")
-		.attr("cx", "780")
-		.attr("cy", "30")
-		.attr("style", "fill: rgb(255, 0, 255);")
-		.attr("r", "10");
-	
-	svg.append("g").append("circle")
-		.attr("id", "node_14")
-		.attr("class", "node")
-		.attr("cx", "50")
-		.attr("cy", "50")
-		.attr("style", "fill: rgb(112, 51, 51);")
-		.attr("r", "7");
+	//~ viewport.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");
+	//~ 
+	//~ viewport.append("g").append("circle")
+		//~ .attr("id", "node_11")
+		//~ .attr("class", "node")
+		//~ .attr("cx", "20")
+		//~ .attr("cy", "780")
+		//~ .attr("style", "fill: rgb(255, 0, 0);")
+		//~ .attr("r", "10");
+	//~ 
+	//~ viewport.append("g").append("circle")
+		//~ .attr("id", "node_12")
+		//~ .attr("class", "node")
+		//~ .attr("cx", "780")
+		//~ .attr("cy", "780")
+		//~ .attr("style", "fill: rgb(255, 255, 0);")
+		//~ .attr("r", "10");
+	//~ 
+	//~ viewport.append("g").append("circle")
+		//~ .attr("id", "node_13")
+		//~ .attr("class", "node")
+		//~ .attr("cx", "780")
+		//~ .attr("cy", "30")
+		//~ .attr("style", "fill: rgb(255, 0, 255);")
+		//~ .attr("r", "10");
+	//~ 
+	//~ viewport.append("g").append("circle")
+		//~ .attr("id", "node_14")
+		//~ .attr("class", "node")
+		//~ .attr("cx", "50")
+		//~ .attr("cy", "50")
+		//~ .attr("style", "fill: rgb(112, 51, 51);")
+		//~ .attr("r", "7");
+//~ 
+	//~ viewport.append("g").append("circle")
+		//~ .attr("id", "node_15")
+		//~ .attr("class", "node")
+		//~ .attr("cx", "600")
+		//~ .attr("cy", "600")
+		//~ .attr("style", "fill: rgb(98, 149, 54);")
+		//~ .attr("r", "8");
+//~ 
+	//~ viewport.append("g").append("circle")
+		//~ .attr("id", "node_16")
+		//~ .attr("class", "node")
+		//~ .attr("cx", "490")
+		//~ .attr("cy", "490")
+		//~ .attr("style", "fill: rgb(250, 103, 18);")
+		//~ .attr("r", "6");
+//~ 
+	//~ viewport.append("g").append("circle")
+		//~ .attr("id", "node_17")
+		//~ .attr("class", "node")
+		//~ .attr("cx", "400")
+		//~ .attr("cy", "600")
+		//~ .attr("style", "fill: rgb(50, 50, 128);")
+		//~ .attr("r", "6");
 
-	svg.append("g").append("circle")
-		.attr("id", "node_15")
-		.attr("class", "node")
-		.attr("cx", "600")
-		.attr("cy", "600")
-		.attr("style", "fill: rgb(98, 149, 54);")
-		.attr("r", "8");
 
-	svg.append("g").append("circle")
-		.attr("id", "node_16")
-		.attr("class", "node")
-		.attr("cx", "490")
-		.attr("cy", "490")
-		.attr("style", "fill: rgb(250, 103, 18);")
-		.attr("r", "6");
 
-	svg.append("g").append("circle")
-		.attr("id", "node_17")
-		.attr("class", "node")
-		.attr("cx", "400")
-		.attr("cy", "600")
-		.attr("style", "fill: rgb(50, 50, 128);")
-		.attr("r", "6");
 
 	this.init_events();
 };
 
+MapController.prototype.paint_nodes = function(viewport) {
+	console.log(nodes);
+	
+	viewport.selectAll(".node")
+		.data(nodes)
+			.enter()
+				.append("g").append("circle")
+				.attr("id", function(d) { return "node_" + d['id'];})
+				.attr("class", "node")
+				.attr("cx", function(d) { return d['x'];})
+				.attr("cy", function(d) { return d['y'];})
+				.attr("style", "fill: rgb(50, 50, 128);")
+				.attr("r", "6");
+	
+	//~ ITEM_TYPE_AGENT_NETWORKMAP
+}
+
 /*
 Function init_events
 Return boolean