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

Merge branch 'feature/new_networkmap' of https://github.com/pandorafms/pandorafms into feature/new_networkmap 

Conflicts:
	pandora_console/include/javascript/map/MapController.js
This commit is contained in:
mdtrooper 2016-02-10 14:02:43 +01:00
parent df25018631 ce1779d2ff
commit 211f2d0832
1 changed files with 103 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,10 +17,14 @@ var MapController = function(target) {
this._target = target;
this._id = $(target).data('id');
this._dialogNodeMargin = 10;
this._marginConstant = 50;
}
// Atributes
MapController.prototype._id = null;
MapController.prototype._dialogNodeMargin = 0; //To be beauty
MapController.prototype._marginConstant = 0; //To be beauty
// Methods
@ -52,13 +56,45 @@ MapController.prototype.init_map = function() {
.attr("r", "10");
svg.append("g").append("circle")
.attr("id", "node_12")
.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");
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();
};
@ -86,15 +122,75 @@ MapController.prototype.click_event = function(event) {
}
MapController.prototype.popup_map = function(self, event) {
//console.log($(self._target + " svg"));
//console.log(event);
var xPos = event.pageX;
var YPos = event.pageY;
// Node position and dimension
nodeX = parseInt($(event.currentTarget).attr("cx"));
nodeY = parseInt($(event.currentTarget).attr("cy"));
nodeR = parseInt($(event.currentTarget).attr("r"));
// Map dimensions in pixels
var map_width_with_px = $(self._target + " svg").attr("width");
var map_height_with_px = $(self._target + " svg").attr("height");
// Map dimensions in numbers
var map_width = parseInt(map_width_with_px.slice(0, map_width_with_px.length - 2));
var map_height = parseInt(map_height_with_px.slice(0, map_height_with_px.length - 2));
// Dialog dimensions
var dialog_width = 300;
var dialog_height = 200;
//To know the position of the dialog box
if (self.xOffset(map_width, nodeX, dialog_width) && self.yOffset(map_height, nodeY, dialog_height)) {
var xPos = event.pageX - dialog_width + nodeR;
var yPos = event.clientY - dialog_height - nodeR - self._dialogNodeMargin;
}
else if (self.yOffset(map_height, nodeY, dialog_height)) {
var xPos = event.pageX - nodeR;
var yPos = event.clientY + -dialog_height - nodeR - self._dialogNodeMargin;
}
else if (self.xOffset(map_width, nodeX, dialog_width)) {
var xPos = event.pageX - dialog_width + nodeR;
var yPos = event.clientY + nodeR + self._dialogNodeMargin;
}
else {
var xPos = event.pageX - nodeR;
var yPos = event.clientY + nodeR + self._dialogNodeMargin;
}
$(self._target + " svg").after($("<div>").attr("id", "dialog_popup"));
$("#dialog_popup").dialog({
modal: false,
title: "Ventana Modarrrrl!!",
closeOnEscape: true,
show: {effect: 'fade', speed: 1000},
title: "Ventana Modarrl!!",
resizable: false,
position: [xPos,YPos]
position: [xPos,yPos],
height: dialog_height,
width: dialog_width
});
}
/*
Function xOffset
Return boolean
This function returns true if dialog cuts map's x axis
*/
MapController.prototype.xOffset = function(map_w, node_x, dialog_w) {
if ((map_w - node_x - this._marginConstant) < dialog_w) {
return true;
}
return false;
}
/*
Function yOffset
Return boolean
This function returns true if dialog cuts map's y axis
*/
MapController.prototype.yOffset = function(map_h, node_y, dialog_h) {
if ((map_h - node_y - this._marginConstant) < dialog_h) {
return true;
}
return false;
}