Some fixes in the arrows.
This commit is contained in:
mdtrooper
parent
0fe433ab5d
commit
c6f65455e7
216
extras/cats.html
216
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
||||
/*---------------------------------------------*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue