From c6f65455e7b6b9b0842f8801947eb2c78bb73bc7 Mon Sep 17 00:00:00 2001
From: mdtrooper <tres.14159@gmail.com>
Date: Thu, 3 Mar 2016 15:08:05 +0100
Subject: [PATCH] Some fixes in the arrows.

---
 extras/cats.html                              | 216 ++++--------------
 pandora_console/include/class/Map.class.php   |  90 ++++++++
 .../include/class/Networkmap.class.php        |   2 +-
 .../include/javascript/map/MapController.js   |  80 ++++---
 4 files changed, 177 insertions(+), 211 deletions(-)

diff --git a/extras/cats.html b/extras/cats.html
index f6e5290b71..8da94e3e5e 100644
--- a/extras/cats.html
+++ b/extras/cats.html
@@ -246,40 +246,7 @@ var svg = d3.select("#test svg");
 				//~ ...
 			//~ }
 			
-			function wait_for_preload_symbols(symbols, callback) {
-				var count_symbols = symbols.length;
-				
-				function wait(symbol, callback) {
-					switch (is_preload_symbol(symbol)) {
-						case -1:
-							preload_symbol(symbol);
-							
-							setTimeout(function() {
-								wait(symbol,
-									callback);
-							}, 300);
-							break;
-						case 0:
-							// Wait
-							setTimeout(function() {
-								wait(symbol,
-									callback);
-							}, 300);
-							break;
-						case 1:
-							count_symbols--;
-							break;
-					}
-					
-					if (count_symbols == 0) {
-						callback();
-					}
-				}
-				
-				for (var i in symbols) {
-					wait(symbols[i], callback);
-				}
-			}
+			
 			
 			function arrow_by_pieces2(id_arrow, element1, element2, step) {
 				if (typeof(step) === "undefined")
@@ -371,146 +338,49 @@ var svg = d3.select("#test svg");
 				}
 			}
 			
-			
-			
-			/**
-			* Function arrow_by_pieces
-			* Return void
-			* This method print the arrow by pieces
-			*/
-			function arrow_by_pieces(id_arrow, element1, element2, step) {
+			function wait_for_preload_symbols(symbols, callback) {
+				var count_symbols = symbols.length;
 				
-				//~ wait_for_preload_symbol('pedo');
-				
-				switch (is_preload_symbol("body_arrow.svg#body_arrow")) {
-					case -1:
-						preload_symbol("body_arrow.svg#body_arrow");
-						
-						setTimeout(function() {
-							arrow_by_pieces(id_arrow,
-								element1,
-								element2);
-						}, 300);
-						return;
-						break;
-					case 0:
-						// Wait
-						setTimeout(function() {
-							arrow_by_pieces(id_arrow,
-								element1,
-								element2);
-						}, 300);
-						return;
-						break;
-					case 1:
-						//It is preloaded
-						break;
+				function wait(symbol, callback) {
+					switch (is_preload_symbol(symbol)) {
+						case -1:
+							preload_symbol(symbol);
+							
+							setTimeout(function() {
+								wait(symbol,
+									callback);
+							}, 100);
+							break;
+						case 0:
+							// Wait
+							setTimeout(function() {
+								wait(symbol,
+									callback);
+							}, 100);
+							break;
+						case 1:
+							count_symbols--;
+							break;
+					}
+					
+					if (count_symbols == 0) {
+						//~ setTimeout(function() {
+							//~ callback();
+						//~ }, 1000);
+						callback();
+					}
 				}
 				
-				if (typeof(step) === "undefined")
-					step = 0;
-				
-				step++;
-				
-				var callback = "arrow_by_pieces("+
-					"'" + id_arrow + "', "+
-					"'" + element1 + "', "+
-					"'" + element2 + "', "+
-					" " + step + ");"
-				
-				/*-----------------------------------------------*/
-				/*---------------- Print by steps ---------------*/
-				/*------------- 1 Link the arrow body -----------*/
-				/*------------- 2 Link the arrow head -----------*/
-				/*------------- 3 Print the arrow ---------------*/
-				/*-----------------------------------------------*/
-				switch (step) {
-					case 1:
-						var arrow = svg.append("g")
-							.attr("id", id_arrow)
-							.attr("style", "opacity: 0");
-						
-						arrow.append("g")
-							.attr("id", "body")
-							.append("use")
-								.attr("xlink:href", "body_arrow.svg#body_arrow")
-								//~ .attr("onload",
-									//~ callback);
-						console.log(arrow.select("#body").node().getBBox());
-						return;
-						break;
-					case 2:
-						var arrow = d3.select("#" +id_arrow);
-						
-						arrow.append("g")
-								.attr("id", "head")
-								.append("use")
-									.attr("xlink:href", "head_arrow.svg#head_arrow")
-									.attr("onload",
-										callback);
-						break;
-					case 3:
-						var c_elem1 = get_center_element("#" + element1);
-						var c_elem2 = get_center_element("#" + element2);
-						var distance = get_distance_between_point(c_elem1, c_elem2);
-						
-						var transform = d3.transform();
-					
-						/*---------------------------------------------*/
-						/*--- Position of layer arrow (body + head) ---*/
-						/*---------------------------------------------*/
-						var arrow = d3.select("#" + id_arrow);
-						
-						var arrow_body = d3.select("#" + id_arrow + " #body");
-						var arrow_body_b = arrow_body.node().getBBox();
-						
-						transform.translate[0] = c_elem1[0];
-						transform.translate[1] = c_elem1[1] - arrow_body_b['height'] / 2;
-						transform.rotate = get_angle_of_line(c_elem1, c_elem2);
-						
-						arrow.attr("transform", transform.toString());
-						
-						/*---------------------------------------------*/
-						/*-------- Resize the body arrow width --------*/
-						/*---------------------------------------------*/
-						var arrow_body = d3.select("#" + id_arrow + " #body");
-						var arrow_body_b = arrow_body.node().getBBox();
-						var arrow_head = d3.select("#" + id_arrow + " #head");
-						var arrow_head_b = arrow_head.node().getBBox();
-						
-						var body_width = distance - arrow_head_b['width'];
-						
-						transform = d3.transform();
-						transform.scale[0] = body_width / arrow_body_b['width'];
-						arrow_body.attr("transform", transform.toString());
-						
-						/*---------------------------------------------*/
-						/*---------- Position of head arrow -----------*/
-						/*---------------------------------------------*/
-						transform = d3.transform();
-						
-						var arrow_body_t = d3.transform(arrow_body.attr("transform"));
-						
-						var scale = arrow_body_t.scale[0];
-						var x = 0 + arrow_body_b['width'] * scale;
-						var y = 0 + (arrow_body_b['height'] / 2  - arrow_head_b['height'] / 2);
-						
-						transform.translate[0] = x;
-						transform.translate[1] = y;
-						
-						arrow_head.attr("transform", transform.toString());
-
-						/*---------------------------------------------*/
-						/*------- Show the result in one time ---------*/
-						/*---------------------------------------------*/
-						arrow.attr("style", "opacity: 1");
-						break;
+				for (var i in symbols) {
+					wait(symbols[i], callback);
 				}
 			}
 			
 			
-			
 			function preload_symbol(symbol, param_step) {
+				var step;
+				
+				
 				if (typeof(param_step) == "undefined") {
 					step = 1;
 					param_step = 1;
@@ -519,11 +389,14 @@ var svg = d3.select("#test svg");
 					step = param_step;
 				}
 				
+				
 				step++;
 				
-				base64symbol = btoa(symbol).replace(/=/g, "");
+				var base64symbol = btoa(symbol).replace(/=/g, "");
 				
-				callback = "preload_symbol('" + symbol + "', " + step + ")";
+				var callback = function (e) {
+					preload_symbol(symbol, step);
+				}
 				
 				switch (param_step) {
 					case 1:
@@ -532,9 +405,8 @@ var svg = d3.select("#test svg");
 							.attr("data-loaded", 0)
 							.style("opacity", 0)
 							.append("use")
-								.attr("xlink:href", "body_arrow.svg#body_arrow")
-								.attr("onload",
-									callback);
+								.attr("xlink:href", symbol)
+								.on("load", callback);
 						break;
 					case 2:
 						d3.select("#" + base64symbol).attr("data-loaded", 1);
@@ -544,7 +416,7 @@ var svg = d3.select("#test svg");
 			}
 			
 			function is_preload_symbol(symbol) {
-				base64symbol = btoa(symbol).replace(/=/g, "");
+				var base64symbol = btoa(symbol).replace(/=/g, "");
 				
 				if (d3.select("#" + base64symbol).node() === null)
 					return -1;
diff --git a/pandora_console/include/class/Map.class.php b/pandora_console/include/class/Map.class.php
index 87d83267ba..50685103ed 100644
--- a/pandora_console/include/class/Map.class.php
+++ b/pandora_console/include/class/Map.class.php
@@ -96,6 +96,96 @@ abstract class Map {
 	abstract function printJSInit();
 	
 	public function writeJSGraph() {
+		html_debug_print($this->nodes, true);
+		html_debug_print($this->edges, true);
+		html_debug_print(json_encode($this->nodes), true);
+		html_debug_print("", true);
+		html_debug_print(json_encode($this->edges), true);
+		
+$this->nodes = json_decode('[
+{
+	"graph_id": "165",
+	"id": "17",
+	"type": 0,
+	"x": 1033.4,
+	"y": 806.38
+},
+{
+	"graph_id": "166",
+	"id": "198",
+	"type": 1,
+	"x": 1119.5,
+	"y": 847.85
+},
+{
+	"graph_id": 208,
+	"type": 2
+},
+{
+	"graph_id": "169",
+	"id": "207",
+	"type": 1,
+	"x": 947.33,
+	"y": 764.91
+},
+{
+	"graph_id": 209,
+	"type": 2
+},
+{
+	"graph_id": "179",
+	"id": "27",
+	"type": 0,
+	"x": 159.23,
+	"y": 1005.9
+},
+{
+	"graph_id": "180",
+	"id": "223",
+	"type": 1,
+	"x": 218.82,
+	"y": 931.19
+},
+{
+	"graph_id": 210,
+	"type": 2
+},
+{
+	"graph_id": "183",
+	"id": "89",
+	"type": 0,
+	"x": 516.77,
+	"y": 557.57
+},
+{
+	"graph_id": "184",
+	"id": "418",
+	"type": 1,
+	"x": 430.66,
+	"y": 599.03
+},
+{
+	"graph_id": 211,
+	"type": 2
+},
+{
+	"graph_id": "196",
+	"id": "412",
+	"type": 1,
+	"x": 602.88,
+	"y": 516.1
+},
+{
+	"graph_id": 212,
+	"type": 2
+}
+]', true);
+
+//~ $this->edges = json_decode('[{"to":"165","from":"166","graph_id":208},{"to":"165","from":"169","graph_id":209},{"to":"179","from":"180","graph_id":210},{"to":"183","from":"184","graph_id":211},{"to":"183","from":"196","graph_id":212}]', true);
+$this->edges = json_decode('[{"to":"165","from":"166","graph_id":208}, {"to":"165","from":"169","graph_id":209}]', true);
+//~ $this->edges = json_decode('[{"to":"165","from":"166","graph_id":208}]', true);
+		
+		
 		?>
 		<script type="text/javascript">
 			var controller_map = null;
diff --git a/pandora_console/include/class/Networkmap.class.php b/pandora_console/include/class/Networkmap.class.php
index c657d263b9..067d0fa21e 100644
--- a/pandora_console/include/class/Networkmap.class.php
+++ b/pandora_console/include/class/Networkmap.class.php
@@ -135,7 +135,7 @@ class Networkmap extends Map {
 		}
 		
 		foreach ($edges as $i => $edge) {
-			$graph_id = $last_graph_id++;
+			$graph_id = ++$last_graph_id;
 			
 			$nodes[] = array(
 				'graph_id' => $graph_id,
diff --git a/pandora_console/include/javascript/map/MapController.js b/pandora_console/include/javascript/map/MapController.js
index 8eafaf75e4..6c29af588e 100644
--- a/pandora_console/include/javascript/map/MapController.js
+++ b/pandora_console/include/javascript/map/MapController.js
@@ -172,6 +172,19 @@ MapController.prototype.init_map = function() {
 	this.init_events();
 };
 
+MapController.prototype.exists_edge = function(id_graph) {
+	var exists = false;
+	
+	$.each(edges, function(i, e) {
+		if (e.graph_id == id_graph) {
+			exists = true;
+			return false; // jquery.each break;
+		}
+	});
+	
+	return exists; 
+}
+
 /**
 Function paint_nodes
 Return void
@@ -184,9 +197,12 @@ MapController.prototype.paint_nodes = function() {
 		.data(
 			nodes
 				.filter(function(d, i) {
-					if (d.type != ITEM_TYPE_EDGE_NETWORKMAP)
-						return true;
-					else return false;
+						if (d.type != ITEM_TYPE_EDGE_NETWORKMAP) {
+							return true;
+						}
+						else {
+							return false;
+						}
 				}))
 			.enter()
 				.append("g")
@@ -202,19 +218,19 @@ MapController.prototype.paint_nodes = function() {
 						.attr("r", "6");
 	
 	
-	//~ this._viewport.selectAll(".arrow").each(function(d) {
-		//~ console.log(d);
-	//~ });
-	
-	
 	
 	var arrow_layouts = self._viewport.selectAll(".arrow")
 		.data(
 			nodes
 				.filter(function(d, i) {
-					if (d.type == ITEM_TYPE_EDGE_NETWORKMAP)
-						return true;
-					else return false;
+					if (d.type == ITEM_TYPE_EDGE_NETWORKMAP) {
+						if (self.exists_edge(d['graph_id']))
+							return true;
+						else
+							return false;
+					}
+					else
+						return false;
 				}))
 		.enter()
 			.append("g")
@@ -253,8 +269,7 @@ MapController.prototype.paint_nodes = function() {
 			var id_node_to = "node_" + to_node['graph_id'];
 			var id_node_from = "node_" + from_node['graph_id'];
 			
-			//~ console.log("-----------");
-			//~ console.log(id_arrow);
+			
 			arrow_by_pieces(self._target + " svg", id_arrow, id_node_to, id_node_from);
 		});
 	}
@@ -295,12 +310,13 @@ function wait_for_preload_symbols(target, symbols, callback) {
 	
 	
 	for (var i in symbols) {
-		wait(target, symbols[i], callback);
+		if (typeof(symbols[i]) == "string")
+			wait(target, symbols[i], callback);
 	}
 }
 
 function is_preload_symbol(target, symbol) {
-	base64symbol = btoa(symbol).replace(/=/g, "");
+	var base64symbol = btoa(symbol).replace(/=/g, "");
 	
 	if (d3.select(target + " #" + base64symbol).node() === null)
 		return -1;
@@ -309,6 +325,8 @@ function is_preload_symbol(target, symbol) {
 }
 
 function preload_symbol(target, symbol, param_step) {
+	var step;
+	
 	if (typeof(param_step) == "undefined") {
 		step = 1;
 		param_step = 1;
@@ -319,7 +337,7 @@ function preload_symbol(target, symbol, param_step) {
 	
 	step++;
 	
-	base64symbol = btoa(symbol).replace(/=/g, "");
+	var base64symbol = btoa(symbol).replace(/=/g, "");
 	
 	switch (param_step) {
 		case 1:
@@ -329,7 +347,7 @@ function preload_symbol(target, symbol, param_step) {
 				.style("opacity", 0)
 				.append("use")
 					.attr("xlink:href", symbol)
-					.attr("onload",
+					.on("load",
 						function() {
 							preload_symbol(target, symbol, step);
 						});
@@ -341,8 +359,8 @@ function preload_symbol(target, symbol, param_step) {
 }
 
 function get_distance_between_point(point1, point2) {
-	delta_x = Math.abs(point1[0] - point2[0]);
-	delta_y = Math.abs(point1[1] - point1[1]);
+	var delta_x = Math.abs(point1[0] - point2[0]);
+	var delta_y = Math.abs(point1[1] - point1[1]);
 	
 	return Math.sqrt(
 		Math.pow(delta_x, 2) + Math.pow(delta_y, 2));
@@ -372,10 +390,7 @@ function get_angle_of_line(point1, point2) {
 }
 
 function getBBox_Symbol(target, symbol) {
-	base64symbol = btoa(symbol).replace(/=/g, "");
-	
-	console.log(target + " #" + base64symbol);
-	console.log(d3.select(target + " #" + base64symbol).node());
+	var base64symbol = btoa(symbol).replace(/=/g, "");
 	
 	return d3.select(target + " #" + base64symbol).node().getBBox();
 }
@@ -401,12 +416,12 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, step) {
 				.select(target +" #" + id_arrow);
 			
 			arrow_layout.append("g")
-				.attr("id", "body")
+				.attr("class", "body")
 				.append("use")
 					.attr("xlink:href", "images/maps/body_arrow.svg#body_arrow");
 			
 			arrow_layout.append("g")
-					.attr("id", "head")
+					.attr("class", "head")
 					.append("use")
 						.attr("xlink:href", "images/maps/head_arrow.svg#head_arrow");
 			
@@ -420,15 +435,13 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, step) {
 			/*---------------------------------------------*/
 			/*--- Position of layer arrow (body + head) ---*/
 			/*---------------------------------------------*/
-			var arrow_body = arrow_layout.select("#body");
+			var arrow_body = arrow_layout.select(".body");
 			var arrow_body_b = arrow_body.node().getBBox();
 			
 			transform.translate[0] = c_elem1[0];
 			transform.translate[1] = c_elem1[1] - arrow_body_b['height'] / 2;
 			transform.rotate = get_angle_of_line(c_elem1, c_elem2);
 			
-			console.log("Position body");
-			console.log(transform);
 			
 			arrow_layout.attr("transform", transform.toString());
 			
@@ -436,7 +449,7 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, step) {
 			/*-------- Resize the body arrow width --------*/
 			/*---------------------------------------------*/
 			var arrow_body_b = arrow_body.node().getBBox();
-			var arrow_head = arrow_layout.select("#head");
+			var arrow_head = arrow_layout.select(".head");
 			var arrow_head_b = arrow_head.node().getBBox();
 			
 			var body_width = distance - arrow_head_b['width'];
@@ -444,12 +457,6 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, step) {
 			transform = d3.transform();
 			transform.scale[0] = body_width / arrow_body_b['width'];
 			
-			console.log("Resize");
-			console.log(arrow_body_b);
-			console.log(getBBox_Symbol(target, "images/maps/body_arrow.svg#body_arrow"));
-			console.log(body_width);
-			console.log(transform);
-			
 			arrow_body.attr("transform", transform.toString());
 			
 			/*---------------------------------------------*/
@@ -466,9 +473,6 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, step) {
 			transform.translate[0] = x;
 			transform.translate[1] = y;
 			
-			console.log("Position head");
-			console.log(transform);
-			
 			arrow_head.attr("transform", transform.toString());
 			
 			/*---------------------------------------------*/