From b6aba10c9b4a72ac63c493cf519245d7b72dc912 Mon Sep 17 00:00:00 2001 From: mdtrooper Date: Mon, 7 Mar 2016 14:51:58 +0100 Subject: [PATCH] Fixed some things in the arrows. --- pandora_console/images/maps/body_arrow.svg | 18 ++++- pandora_console/images/maps/head_arrow.svg | 19 ++++- pandora_console/include/class/Map.class.php | 6 ++ .../include/javascript/map/MapController.js | 76 +++++++++---------- 4 files changed, 74 insertions(+), 45 deletions(-) diff --git a/pandora_console/images/maps/body_arrow.svg b/pandora_console/images/maps/body_arrow.svg index ea916cabcf..e387ee7989 100644 --- a/pandora_console/images/maps/body_arrow.svg +++ b/pandora_console/images/maps/body_arrow.svg @@ -7,8 +7,19 @@ xmlns:xlink="http://www.w3.org/1999/xlink"> - + + + + fill-opacity:1; stroke:#00ff00; stroke-width: 20;" /> + - \ No newline at end of file diff --git a/pandora_console/images/maps/head_arrow.svg b/pandora_console/images/maps/head_arrow.svg index 6f7a8aa48e..1f4939c6fe 100644 --- a/pandora_console/images/maps/head_arrow.svg +++ b/pandora_console/images/maps/head_arrow.svg @@ -7,11 +7,28 @@ xmlns:xlink="http://www.w3.org/1999/xlink"> - + + + + \ No newline at end of file diff --git a/pandora_console/include/class/Map.class.php b/pandora_console/include/class/Map.class.php index cc570e67b6..3d416ffcaf 100644 --- a/pandora_console/include/class/Map.class.php +++ b/pandora_console/include/class/Map.class.php @@ -294,6 +294,12 @@ $this->edges = json_decode( {"to":"222","from":"214","graph_id":407} ]', true); + +//~ $this->edges = json_decode( +//~ '[ +//~ {"to":"215","from":"214","graph_id":400} +//~ ]', true); + $this->edges = json_decode( '[ {"to":"215","from":"214","graph_id":400}, diff --git a/pandora_console/include/javascript/map/MapController.js b/pandora_console/include/javascript/map/MapController.js index 53ca50f40c..8be7140d06 100644 --- a/pandora_console/include/javascript/map/MapController.js +++ b/pandora_console/include/javascript/map/MapController.js @@ -252,7 +252,7 @@ MapController.prototype.paint_nodes = function() { .append("g") .attr("class", "arrow") .attr("id", function(d) { return "arrow_" + d['graph_id'];}) - + .attr("data-id", function(d) { return d['id'];}) .attr("data-to", function(d) { return self.node_from_edge(d['graph_id'])["to"];}) @@ -336,6 +336,20 @@ function getBBox_Symbol(target, symbol) { return d3.select(target + " #" + base64symbol).node().getBBox(); } +function get_size_element(element) { + var element_b = d3.select(element).node().getBBox(); + + + return [element_b['width'], element_b['height']]; +} + +function get_radius_element(element) { + var size = get_size_element(element); + + return Math.sqrt( + Math.pow(size[0] / 2, 2) + Math.pow(size[1] / 2, 2)); +} + function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, wait) { if (typeof(wait) === "undefined") @@ -353,10 +367,15 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, wait) { var arrow_layout = d3 .select(target +" #" + id_arrow); - - switch (wait) { case 1: + arrow_layout = arrow_layout.append("g") + .attr("class", "arrow_position_rotation") + .append("g") + .attr("class", "arrow_translation") + .append("g") + .attr("class", "arrow_container"); + arrow_layout.append("g") .attr("class", "body") .append("use") @@ -385,8 +404,10 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, wait) { //~ console.log("centro", c_elem2, c_elem1); var distance = get_distance_between_point(c_elem1, c_elem2); //~ console.log("distance", distance); - var radius_to = parseInt(d3.select("#" + id_node_to).select("circle").attr("r")); - var radius_from = parseInt(d3.select("#" + id_node_from).select("circle").attr("r")); + + var radius_to = parseFloat(get_radius_element("#" + id_node_to)); + var radius_from = parseFloat(get_radius_element("#" + id_node_from)); + var transform = d3.transform(); /*---------------------------------------------*/ @@ -396,41 +417,16 @@ function arrow_by_pieces(target, id_arrow, id_node_to, id_node_from, wait) { var arrow_body_b = arrow_body.node().getBBox(); var arrow_body_height = (arrow_body_b['height'] + arrow_body_b['y']); var arrow_body_width = (arrow_body_b['width'] + arrow_body_b['x']); - console.log("---------------------------"); - console.log("c_elem1 (FROM)", c_elem1); - console.log("c_elem2 (TO)", c_elem2); - console.log("---------------------------"); - if ((c_elem1[0] < c_elem2[0]) && (c_elem1[1] == c_elem2[1])) { - transform.translate[0] = c_elem1[0] + radius_from; - transform.translate[1] = c_elem1[1] - (arrow_body_height/2); - transform.rotate = get_angle_of_line(c_elem1, c_elem2) + - " 0 " + (arrow_body_height / 2); - } - else if ((c_elem1[0] > c_elem2[0]) && (c_elem1[1] == c_elem2[1])) { - transform.translate[0] = c_elem1[0] - radius_from; - transform.translate[1] = c_elem1[1] - (arrow_body_height/2); - transform.rotate = get_angle_of_line(c_elem1, c_elem2) + - " 0 " + (arrow_body_height / 2); - } - else if ((c_elem1[1] < c_elem2[1]) && (c_elem1[0] == c_elem2[0])) { - transform.translate[0] = c_elem1[0]; - transform.translate[1] = c_elem1[1] - (arrow_body_height/2) + radius_from; - transform.rotate = get_angle_of_line(c_elem1, c_elem2) + - " 0 " + (arrow_body_height / 2); - } - else if ((c_elem1[1] > c_elem2[1]) && (c_elem1[0] == c_elem2[0])) { - transform.translate[0] = c_elem1[0]; - transform.translate[1] = c_elem1[1] - (arrow_body_height/2) - radius_from; - transform.rotate = get_angle_of_line(c_elem1, c_elem2) + - " 0 " + (arrow_body_height / 2); - } - else { - transform.translate[0] = c_elem1[0]; - transform.translate[1] = c_elem1[1] - (arrow_body_height/2); - transform.rotate = get_angle_of_line(c_elem1, c_elem2) + - " 0 " + (arrow_body_height / 2); - } - arrow_layout.attr("transform", transform.toString()); + + transform.translate[0] = c_elem1[0]; + transform.translate[1] = c_elem1[1]; + transform.rotate = get_angle_of_line(c_elem1, c_elem2); + + arrow_layout.select(".arrow_position_rotation").attr("transform", transform.toString()); + transform = d3.transform(); + transform.translate[0] = radius_from; + transform.translate[1] = - (arrow_body_height / 2); + arrow_layout.select(".arrow_translation").attr("transform", transform.toString()); /*---------------------------------------------*/ /*-------- Resize the body arrow width --------*/