mirror of
https://github.com/pandorafms/pandorafms.git
synced 2025-04-08 18:55:09 +02:00
Some changes needs for the zoom.
This commit is contained in:
mdtrooper
parent
400620a11f
commit
646a90211e
pandora_console/include
@ -34,8 +34,8 @@ abstract class Map {
|
||||
protected $width = null;
|
||||
protected $height = null;
|
||||
|
||||
protected $nodes = null;
|
||||
protected $edges = null;
|
||||
protected $nodes = array();
|
||||
protected $edges = array();
|
||||
|
||||
protected $requires_js = null;
|
||||
|
||||
@ -93,6 +93,13 @@ abstract class Map {
|
||||
echo "var nodes = " . json_encode($this->nodes) . ";";
|
||||
echo "var edges = " . json_encode($this->edges) . ";";
|
||||
?>
|
||||
var temp = [];
|
||||
for (var i in nodes) { temp[parseInt(i)] = nodes[i];}
|
||||
nodes = temp;
|
||||
|
||||
temp = [];
|
||||
for (var i in edges) { temp[parseInt(i)] = edges[i];}
|
||||
edges = temp;
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
@ -149,97 +156,6 @@ abstract class Map {
|
||||
}
|
||||
?>
|
||||
</script>
|
||||
|
||||
<!--
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
svg {
|
||||
font: 10px sans-serif;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: #ddd;
|
||||
}
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
|
||||
var margin = {top: 20, right: 20, bottom: 30, left: 40},
|
||||
width = 960 - margin.left - margin.right,
|
||||
height = 500 - margin.top - margin.bottom;
|
||||
|
||||
var x = d3.scale.linear()
|
||||
.domain([-width / 2, width / 2])
|
||||
.range([0, width]);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.domain([-height / 2, height / 2])
|
||||
.range([height, 0]);
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
.tickSize(-height);
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
.ticks(5)
|
||||
.tickSize(-width);
|
||||
|
||||
var zoom = d3.behavior.zoom()
|
||||
.x(x)
|
||||
.y(y)
|
||||
.scaleExtent([1, 32])
|
||||
.on("zoom", zoomed);
|
||||
|
||||
var svg = d3.select("#test").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
|
||||
.call(zoom);
|
||||
|
||||
svg.append("rect")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis);
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_10")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "20")
|
||||
.attr("cy", "20")
|
||||
.attr("style", "fill: rgb(128, 186, 39);")
|
||||
.attr("r", "5");
|
||||
|
||||
function zoomed() {
|
||||
svg.select(".x.axis").call(xAxis);
|
||||
svg.select(".y.axis").call(yAxis);
|
||||
}
|
||||
|
||||
</script>
|
||||
-->
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
@ -27,91 +27,112 @@ MapController.prototype._id = null;
|
||||
MapController.prototype._tooltipsID = null;
|
||||
|
||||
/*--------------------Methods----------------------*/
|
||||
|
||||
var svg;
|
||||
function zoom() {
|
||||
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
|
||||
}
|
||||
|
||||
/*
|
||||
Function init_map
|
||||
Return void
|
||||
This function init the map
|
||||
*/
|
||||
MapController.prototype.init_map = function() {
|
||||
svg = d3.select("#map svg");
|
||||
var svg = d3.select(this._target + " svg");
|
||||
|
||||
svg
|
||||
var viewport = svg
|
||||
.call(d3.behavior.zoom().scaleExtent([1/100, 100]).on("zoom", zoom))
|
||||
.append("g");
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_10")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "20")
|
||||
.attr("cy", "20")
|
||||
.attr("style", "fill: rgb(128, 186, 39);")
|
||||
.attr("r", "5");
|
||||
function zoom() {
|
||||
viewport
|
||||
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
|
||||
}
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_11")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "20")
|
||||
.attr("cy", "780")
|
||||
.attr("style", "fill: rgb(255, 0, 0);")
|
||||
.attr("r", "10");
|
||||
this.paint_nodes(viewport);
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_12")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "780")
|
||||
.attr("cy", "780")
|
||||
.attr("style", "fill: rgb(255, 255, 0);")
|
||||
.attr("r", "10");
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_13")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "780")
|
||||
.attr("cy", "30")
|
||||
.attr("style", "fill: rgb(255, 0, 255);")
|
||||
.attr("r", "10");
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_14")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "50")
|
||||
.attr("cy", "50")
|
||||
.attr("style", "fill: rgb(112, 51, 51);")
|
||||
.attr("r", "7");
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_10")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "20")
|
||||
//~ .attr("cy", "20")
|
||||
//~ .attr("style", "fill: rgb(128, 186, 39);")
|
||||
//~ .attr("r", "5");
|
||||
//~
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_11")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "20")
|
||||
//~ .attr("cy", "780")
|
||||
//~ .attr("style", "fill: rgb(255, 0, 0);")
|
||||
//~ .attr("r", "10");
|
||||
//~
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_12")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "780")
|
||||
//~ .attr("cy", "780")
|
||||
//~ .attr("style", "fill: rgb(255, 255, 0);")
|
||||
//~ .attr("r", "10");
|
||||
//~
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_13")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "780")
|
||||
//~ .attr("cy", "30")
|
||||
//~ .attr("style", "fill: rgb(255, 0, 255);")
|
||||
//~ .attr("r", "10");
|
||||
//~
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_14")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "50")
|
||||
//~ .attr("cy", "50")
|
||||
//~ .attr("style", "fill: rgb(112, 51, 51);")
|
||||
//~ .attr("r", "7");
|
||||
//~
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_15")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "600")
|
||||
//~ .attr("cy", "600")
|
||||
//~ .attr("style", "fill: rgb(98, 149, 54);")
|
||||
//~ .attr("r", "8");
|
||||
//~
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_16")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "490")
|
||||
//~ .attr("cy", "490")
|
||||
//~ .attr("style", "fill: rgb(250, 103, 18);")
|
||||
//~ .attr("r", "6");
|
||||
//~
|
||||
//~ viewport.append("g").append("circle")
|
||||
//~ .attr("id", "node_17")
|
||||
//~ .attr("class", "node")
|
||||
//~ .attr("cx", "400")
|
||||
//~ .attr("cy", "600")
|
||||
//~ .attr("style", "fill: rgb(50, 50, 128);")
|
||||
//~ .attr("r", "6");
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_15")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "600")
|
||||
.attr("cy", "600")
|
||||
.attr("style", "fill: rgb(98, 149, 54);")
|
||||
.attr("r", "8");
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_16")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "490")
|
||||
.attr("cy", "490")
|
||||
.attr("style", "fill: rgb(250, 103, 18);")
|
||||
.attr("r", "6");
|
||||
|
||||
svg.append("g").append("circle")
|
||||
.attr("id", "node_17")
|
||||
.attr("class", "node")
|
||||
.attr("cx", "400")
|
||||
.attr("cy", "600")
|
||||
.attr("style", "fill: rgb(50, 50, 128);")
|
||||
.attr("r", "6");
|
||||
|
||||
this.init_events();
|
||||
};
|
||||
|
||||
MapController.prototype.paint_nodes = function(viewport) {
|
||||
console.log(nodes);
|
||||
|
||||
viewport.selectAll(".node")
|
||||
.data(nodes)
|
||||
.enter()
|
||||
.append("g").append("circle")
|
||||
.attr("id", function(d) { return "node_" + d['id'];})
|
||||
.attr("class", "node")
|
||||
.attr("cx", function(d) { return d['x'];})
|
||||
.attr("cy", function(d) { return d['y'];})
|
||||
.attr("style", "fill: rgb(50, 50, 128);")
|
||||
.attr("r", "6");
|
||||
|
||||
//~ ITEM_TYPE_AGENT_NETWORKMAP
|
||||
}
|
||||
|
||||
/*
|
||||
Function init_events
|
||||
Return boolean
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user