tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed some things in the arrows.

This commit is contained in:
mdtrooper 2016-03-07 14:51:58 +01:00
parent ab1d7f99fc
commit b6aba10c9b
4 changed files with 74 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pandora_console/images/maps/body_arrow.svg
View File

@ -7,8 +7,19 @@ xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="body_arrow">
<rect
vector-effect="non-scaling-stroke"
<g>
<rect
y="0"
x="0"
height="60"
width="110"
style="
fill:#000000;
fill-opacity:0;"
/>
<rect
y="10"
x="10"
height="40"
@ -18,12 +29,11 @@ xmlns:xlink="http://www.w3.org/1999/xlink">
fill-opacity:1;
stroke:#00ff00;
stroke-width: 20;" />
</g>
</symbol>
</defs>
<!--
<g class="body" transform="translate(100,0)">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#body_arrow" />
</g>
-->
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 619 B

After

Width:  |  Height:  |  Size: 758 B

19
pandora_console/images/maps/head_arrow.svg
View File

@ -7,11 +7,28 @@ xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="head_arrow">
<path
<g>
<rect
y="0"
x="0"
height="100"
width="50"
style="
fill:#000000;
fill-opacity:0;"
/>
<path
vector-effect="non-scaling-stroke"
d="M 0 0 L 0 100 L 50 50 Z"
style="fill:#ff0000;
stroke-width:0;" />
</g>
</symbol>
</defs>
<!--
<g class="body" transform="translate(100,0)">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#head_arrow" />
</g>
-->
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 664 B

6
pandora_console/include/class/Map.class.php
View File

@ -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},

76
pandora_console/include/javascript/map/MapController.js
View File

@ -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 --------*/