From e289699c483d57744612caf5d061a81f5a2395c1 Mon Sep 17 00:00:00 2001 From: mdtrooper Date: Thu, 7 Apr 2016 12:07:34 +0200 Subject: [PATCH] Some changes for working with hudge maps. --- .../include/class/Networkmap.class.php | 3 + .../javascript/map/NetworkmapController.js | 273 ++++++++++++++++-- 2 files changed, 245 insertions(+), 31 deletions(-) diff --git a/pandora_console/include/class/Networkmap.class.php b/pandora_console/include/class/Networkmap.class.php index b36474eb94..5b2d3edc7c 100644 --- a/pandora_console/include/class/Networkmap.class.php +++ b/pandora_console/include/class/Networkmap.class.php @@ -61,6 +61,9 @@ class Networkmap extends Map { } protected function generateDot($graph, $positions) { + //html_debug($graph, true); + //html_debug($positions, true); + $graph = preg_replace('/^graph .*/', '', $graph); $nodes_and_edges = explode("];", $graph); diff --git a/pandora_console/include/javascript/map/NetworkmapController.js b/pandora_console/include/javascript/map/NetworkmapController.js index 7ff54c08d1..3bd8202577 100644 --- a/pandora_console/include/javascript/map/NetworkmapController.js +++ b/pandora_console/include/javascript/map/NetworkmapController.js @@ -25,6 +25,9 @@ var NetworkmapController = function(target) { NetworkmapController.prototype = Object.create(MapController.prototype); NetworkmapController.prototype.constructor = NetworkmapController; +NetworkmapController.prototype._first_paint_arrows = true; +NetworkmapController.prototype._cache_elements = {}; + /*-----------------------------------------------*/ /*--------------------Methods--------------------*/ /*-----------------------------------------------*/ @@ -279,39 +282,30 @@ NetworkmapController.prototype.get_arrow_AF_or_FF = function(id_to, id_from) { * Return array (arrow) * This function returns an AA arrow */ -NetworkmapController.prototype.get_arrow_AA = function(id_to, id_from) { +NetworkmapController.prototype.get_arrow_AA = function(graph_id, id_to, id_from) { var self = this; var arrow_AA; - var found = false; - $.each(edges, function(i, edge) { - if (self.get_node_type(id_to) == self.get_node_type(id_from)) { - if (self.get_node_type(id_to) == ITEM_TYPE_AGENT_NETWORKMAP) { - var arrow = self.get_arrow(id_to, id_from); - - arrow_AA = {}; - arrow_AA['type'] = 'AA'; - arrow_AA['graph_id'] = arrow['arrow']['graph_id']; - arrow_AA['to'] = arrow['nodes']['to']; - arrow_AA['to_module'] = null; - arrow_AA['to_status'] = null; - arrow_AA['to_title'] = null; - arrow_AA['from'] = arrow['nodes']['from']; - arrow_AA['from_module'] = null; - arrow_AA['from_status'] = null; - arrow_AA['from_title'] = null; - - found = true; - } + if (self.get_node_type(id_to) == self.get_node_type(id_from)) { + if (self.get_node_type(id_to) == ITEM_TYPE_AGENT_NETWORKMAP) { + + arrow_AA = {}; + arrow_AA['type'] = 'AA'; + arrow_AA['graph_id'] = graph_id; + arrow_AA['to'] = self.get_node(id_to); + arrow_AA['to_module'] = null; + arrow_AA['to_status'] = null; + arrow_AA['to_title'] = null; + arrow_AA['from'] = self.get_node(id_from); + arrow_AA['from_module'] = null; + arrow_AA['from_status'] = null; + arrow_AA['from_title'] = null; + + return arrow_AA; } - }); + } - if (found) { - return arrow_AA; - } - else { - return null; - } + return null; } /** @@ -513,7 +507,7 @@ NetworkmapController.prototype.paint_arrows = function() { } } - var arrow_AA = self.get_arrow_AA(edge['to'], edge['from']); + var arrow_AA = self.get_arrow_AA(edge['graph_id'], edge['to'], edge['from']); if (arrow_AA !== null) { if (!self.exists_arrow(clean_arrows, arrow_AA)) { clean_arrows.push(arrow_AA); @@ -559,6 +553,8 @@ NetworkmapController.prototype.paint_arrows = function() { arrow_layouts.each(function(d) { self.arrow_by_pieces(self._target + " svg", d); }); + + self._first_paint_arrows = true; } /** @@ -581,8 +577,7 @@ NetworkmapController.prototype.arrow_by_pieces = function (target, arrow_data, w switch (arrow_data['type']) { case 'AF_or_FF': case 'AA': - MapController.prototype.arrow_by_pieces.call( - this, self._target + " svg", arrow_data, wait); + self.arrow_by_pieces_AA(self._target + " svg", arrow_data, wait); break; case 'AMMA': self.arrow_by_pieces_AMMA(self._target + " svg", arrow_data, wait); @@ -907,6 +902,211 @@ NetworkmapController.prototype.arrow_by_pieces_AMMA = function (target, arrow_da } } +/** +* Function arrow_by_pieces +* Return void +* This function print the arrow by pieces (3 steps) +*/ +//~ MapController.prototype.arrow_by_pieces = function(target, id_arrow, id_node_to, id_node_from, wait) { +NetworkmapController.prototype.arrow_by_pieces_AA = function(target, arrow_data, wait) { + var self = this; + + if (typeof(wait) === "undefined") + wait = 1; + + var count_files = 1; + function wait_load(callback) { + count_files--; + + if (count_files == 0) { + callback(); + } + } + + var arrow_layout = d3 + .select(target +" #arrow_" + arrow_data['graph_id']); + + switch (wait) { + /*---------------------------------------------*/ + /*-------- Preload head and body arrow --------*/ + /*---------------------------------------------*/ + 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"); + + if (is_buggy_firefox) { + arrow_layout.append("g") + .attr("class", "body") + .append("use") + .attr("xlink:href", "#body_arrow"); + + self.arrow_by_pieces(target, arrow_data, 0); + } + else { + arrow_layout.append("g") + .attr("class", "body") + .append("use") + .attr("xlink:href", "images/maps/body_arrow.svg#body_arrow") + .on("load", function() { + wait_load(function() { + self.arrow_by_pieces(target, arrow_data, 0); + }); + }); + } + break; + /*---------------------------------------------*/ + /*---- Print head and body arrow by steps -----*/ + /*---------------------------------------------*/ + case 0: + if (arrow_data['temp']) { + switch (arrow_data['type']) { + case 'parent': + var id_node_to = null; + var id_node_from = "node_" + arrow_data['from']['graph_id']; + + var c_elem2 = arrow_data['mouse']; + var c_elem1 = get_center_element(self._target +" #" + id_node_from); + + var radius_to = 5; + var radius_from = parseFloat(get_radius_element("#" + id_node_from)); + break; + case 'children': + var id_node_to = "node_" + arrow_data['to']['graph_id']; + var id_node_from = null; + + var c_elem2 = get_center_element(self._target +" #" + id_node_to); + var c_elem1 = arrow_data['mouse']; + + var radius_to = parseFloat(get_radius_element("#" + id_node_to)); + var radius_from = 5; + break; + } + + } + else { + var id_node_to = "node_" + arrow_data['to']['graph_id']; + var id_node_from = "node_" + arrow_data['from']['graph_id']; + + + if (self._first_paint_arrows) { + if (self.cache_is_element("center" + id_node_to)) { + var c_elem2 = self._cache_elements["center" + id_node_to]; + } + else { + var c_elem2 = get_center_element(self._target +" #" + id_node_to); + self._cache_elements["center" + id_node_to] = c_elem2; + } + } + else { + var c_elem2 = get_center_element(self._target +" #" + id_node_to); + } + + if (self._first_paint_arrows) { + if (self.cache_is_element("center" + id_node_from)) { + var c_elem1 = self._cache_elements["center" + id_node_from]; + } + else { + var c_elem1 = get_center_element(self._target +" #" + id_node_from); + self._cache_elements["center" + id_node_from] = c_elem1; + } + } + else { + var c_elem1 = get_center_element(self._target +" #" + id_node_from); + } + + if (self._first_paint_arrows) { + if (self.cache_is_element("radius" + id_node_to)) { + var radius_to = self._cache_elements["radius" + id_node_to]; + } + else { + var radius_to = parseFloat(get_radius_element("#" + id_node_to)); + self._cache_elements["radius" + id_node_to] = radius_to; + } + } + else { + var radius_to = parseFloat(get_radius_element("#" + id_node_to)); + } + + + if (self._first_paint_arrows) { + if (self.cache_is_element("radius" + id_node_from)) { + var radius_from = self._cache_elements["radius" + id_node_from]; + } + else { + var radius_from = parseFloat(get_radius_element("#" + id_node_from)); + self._cache_elements["radius" + id_node_from] = radius_from; + } + } + else { + var radius_from = parseFloat(get_radius_element("#" + id_node_from)); + } + } + + var distance = get_distance_between_point(c_elem1, c_elem2); + + var transform = d3.transform(); + + /*---------------------------------------------*/ + /*--- Position of layer arrow (body + head) ---*/ + /*---------------------------------------------*/ + + var arrow_body = arrow_layout.select(".body"); + + if (self._first_paint_arrows) { + if (self.cache_is_element("arrow_body_b")) { + var arrow_body_b = self._cache_elements["arrow_body_b"]; + } + else { + var arrow_body_b = arrow_body.node().getBBox(); + self._cache_elements["arrow_body_b"] = arrow_body_b; + } + } + else { + 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']); + + var arrow_body = arrow_layout.select(".body"); + 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']); + + 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 --------*/ + /*---------------------------------------------*/ + var arrow_head_width = 0; + + var body_width = distance - arrow_head_width - radius_to - radius_from; + + transform = d3.transform(); + transform.scale[0] = body_width / arrow_body_width; + + arrow_body.attr("transform", transform.toString()); + + /*---------------------------------------------*/ + /*------- Show the result in one time ---------*/ + /*---------------------------------------------*/ + arrow_layout.attr("style", "opacity: 1"); + break; + } +} + /** * Function arrow_by_pieces_AMA * Return void @@ -1693,3 +1893,14 @@ NetworkmapController.prototype.refresh_arrows = function() { } }); } + +NetworkmapController.prototype.cache_is_element = function(element) { + var self = this; + + if (typeof(self._cache_elements[element]) == "undefined") { + return false; + } + else { + return true; + } +} \ No newline at end of file