From 5f7d65eba17c6bb7e3da55c0ee7fe8046ad37269 Mon Sep 17 00:00:00 2001
From: Arturo Gonzalez <arturo.gonzalez@artica.es>
Date: Tue, 1 Mar 2016 09:45:13 +0100
Subject: [PATCH] New maps in progress... (document arrows code)

---
 extras/cats.html | 105 +++++++++++++++++++++++++++++------------------
 1 file changed, 65 insertions(+), 40 deletions(-)

diff --git a/extras/cats.html b/extras/cats.html
index 558117dc0c..e54dd88125 100644
--- a/extras/cats.html
+++ b/extras/cats.html
@@ -38,7 +38,6 @@ var svg = d3.select("#test svg");
 		<script type="text/javascript">
 			var svg = d3.select("svg #zoom");
 			
-			
 			svg.append("g")
 					.attr("id", "circulo")
 					.attr("transform",
@@ -58,7 +57,6 @@ var svg = d3.select("#test svg");
 						.attr("width", function(d) { return get_size_element("#cat1")[0];})
 						.attr("height", function(d) { return get_size_element("#cat1")[1];});
 						
-			
 			svg.append("g")
 					.attr("transform",
 						function(d) {
@@ -69,13 +67,13 @@ var svg = d3.select("#test svg");
 						.attr("cy", 0)
 						.attr("r", get_radius_element("#cat1"));
 			
-			
-			
-			
-			//~ arrow(svg, get_center_element("#cat1"), get_center_element("#cat2"));
 			arrow_by_pieces("gatete_flecha", "cat1", "cat2");
 			
-			
+			/**
+			* Function get_radius_element
+			* Return float
+			* This method get the element radius
+			*/
 			function get_radius_element(element) {
 				var size = get_size_element(element);
 				
@@ -83,6 +81,11 @@ var svg = d3.select("#test svg");
 					Math.pow(size[0] / 2, 2) + Math.pow(size[1] / 2, 2));
 			}
 			
+			/**
+			* Function get_scale_element
+			* Return float
+			* This method get the element escale
+			*/
 			function get_scale_element(element) {
 				var element_t = d3.transform(d3.select(element).attr("transform"));
 				var element_t_scale = parseFloat(element_t['scale']);
@@ -90,12 +93,22 @@ var svg = d3.select("#test svg");
 				return element_t_scale;
 			}
 			
+			/**
+			* Function get_size_element
+			* Return array[2]
+			* This method get the element size [width, height]
+			*/
 			function get_size_element(element) {
 				var element_b = d3.select(element).node().getBBox();
 				
 				return [element_b['width'], element_b['height']];
 			}
 			
+			/**
+			* Function get_pos_element
+			* Return array[2]
+			* This method get the element position [x, y]
+			*/
 			function get_pos_element(element) {
 				var element_t = d3.transform(d3.select(element).attr("transform"));
 				var element_t_scale = parseFloat(element_t['scale']);
@@ -109,8 +122,12 @@ var svg = d3.select("#test svg");
 				return [box_x, box_y];
 			}
 			
+			/**
+			* Function get_center_element
+			* Return array[2]
+			* This method ge2t the element center point [x, y]
+			*/
 			function get_center_element(element) {
-				
 				var element_t = d3.transform(d3.select(element).attr("transform"));
 				var element_t_scale = parseFloat(element_t['scale']);
 				var element_b = d3.select(element).node().getBBox();
@@ -129,8 +146,12 @@ var svg = d3.select("#test svg");
 				return [c_x, c_y];
 			}
 			
+			/**
+			* Function get_distance_between_point
+			* Return float
+			* This method get the distance betweeen two points
+			*/
 			function get_distance_between_point(point1, point2) {
-				
 				delta_x = Math.abs(point1[0] - point2[0]);
 				delta_y = Math.abs(point1[1] - point1[1]);
 				
@@ -138,14 +159,21 @@ var svg = d3.select("#test svg");
 					Math.pow(delta_x, 2) + Math.pow(delta_y, 2));
 			}
 			
+			/**
+			* Function get_angle_of_line
+			* Return float
+			* This method get the angle of line and x axe
+			*/
 			function get_angle_of_line(point1, point2) {
 				return Math.atan2(point2[1] - point1[1], point2[0] - point1[0]) * 180 / Math.PI;
 			}
 			
+			/**
+			* Function arrow_by_pieces
+			* Return void
+			* This method print the arrow by pieces
+			*/
 			function arrow_by_pieces(id_arrow, element1, element2, step) {
-				//Steps is for avoid the problem of onload external
-				// symbols (that these returns zero values)
-				
 				if (typeof(step) === "undefined")
 					step = 0;
 				
@@ -157,6 +185,12 @@ var svg = d3.select("#test svg");
 					"'" + 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")
@@ -187,42 +221,37 @@ var svg = d3.select("#test svg");
 						
 						var transform = d3.transform();
 					
-					
-						// ---------------------------------------------
-						// -- Position of layer arrow (body + head)
-						// ---------------------------------------------
+						/*---------------------------------------------*/
+						/*--- 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
-						// ---------------------------------------------
-						
+						/*---------------------------------------------*/
+						/*-------- 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
-						// ---------------------------------------------
-						
+						/*---------------------------------------------*/
+						/*---------- Position of head arrow -----------*/
+						/*---------------------------------------------*/
 						transform = d3.transform();
 						
 						var arrow_body_t = d3.transform(arrow_body.attr("transform"));
@@ -235,27 +264,23 @@ var svg = d3.select("#test svg");
 						transform.translate[1] = y;
 						
 						arrow_head.attr("transform", transform.toString());
-						
-						// ---------------------------------------------
-						// -- Show the result in one time
-						// ---------------------------------------------
-						
+
+						/*---------------------------------------------*/
+						/*------- Show the result in one time ---------*/
+						/*---------------------------------------------*/
 						arrow.attr("style", "opacity: 1");
 						break;
 				}
 			}
 			
+			/**
+			* Function arrow
+			* Return void
+			* This method creates the arrow between two elements
+			*/
 			function arrow(svg, element1, element2) {
-				//~ element1 = {center_x, center_y, width, height}
-				//~ element2 = {center_x, center_y, width, height}
-				
-				//~ var line = [[0, 0], [200, 200]];
-				
-				
 				d = get_distance_between_point(element1, element2);
 				
-				
-				
 				x = element1[0];
 				y = element1[1];
 				
@@ -280,4 +305,4 @@ var svg = d3.select("#test svg");
 			}
 		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>