tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-27 15:54:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Starting with the multiple selection.

Browse Source
This commit is contained in:
mdtrooper 2016-03-28 16:33:07 +02:00
parent f75348a387
commit f3f302eae2
1 changed files with 155 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,7 @@
/*-----------------------------------------------*/
var MAX_ZOOM_LEVEL = 50;
var RELATION_MINIMAP = 4;
var CONTROL_KEY = 17;
/*-----------------------------------------------*/
/*------------------Constructor------------------*/
@ -36,7 +37,10 @@ MapController.prototype._minimap = null;
MapController.prototype._zoomManager = null;
MapController.prototype._slider = null;
MapController.prototype._relation = null;
MapController.prototype._ctrl_key = 17;
MapController.prototype._start_multiple_selection = false;
MapController.prototype._flag_multiple_selection = false;
MapController.prototype._stop_dragging = false;
MapController.prototype._cache_files = {};
/*-----------------------------------------------*/
/*--------------------Methods--------------------*/
@ -73,14 +77,29 @@ MapController.prototype.init_map = function() {
self.close_all_tooltips();
self.remove_resize_square();
var zoom_level = d3.event.scale;
self._slider.property("value", Math.log(zoom_level));
self._viewport
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
self.zoom_minimap();
if (!self._flag_multiple_selection) {
var zoom_level = d3.event.scale;
self._slider.property("value", Math.log(zoom_level));
self._viewport
.attr("transform",
"translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
self.zoom_minimap();
}
else {
//~ console.log(d3.event);
//~
//~ console.log("---");
//~ console.log(self._viewport.node().getBBox());
//~ console.log(self._viewport.attr("transform"));
//~
//~ self.multiple_selection_dragging(
//~ d3.event.sourceEvent.layerX,
//~ d3.event.sourceEvent.layerY);
}
}
/**
@ -836,6 +855,8 @@ MapController.prototype.remove_resize_square = function(item, wait) {
* This function positioning the square to resize the element
*/
MapController.prototype.positioning_resize_square = function(item) {
var self = this;
var resize_square = d3.select(self._target + " #resize_square");
var item_d3 = d3.select(self._target + " #node_" + item['graph_id']);
@ -1288,19 +1309,22 @@ MapController.prototype.resize_node = function(item, handler, delta_x, delta_y)
MapController.prototype.init_events = function(principalObject) {
var self = this;
d3.select(self._target + " svg")
d3.select("body")
.on("keydown", function() {
// ctrl key
if(d3.event.keyCode === self._ctrl_key) {
console.log("Event", d3.event);
console.log("DOWN");
console.log("CTRL");
if (d3.event.keyCode === CONTROL_KEY) {
console.log("control");
self._flag_multiple_selection = true;
self._stop_dragging = true;
self.multiple_selection_start();
}
})
.on("keyup", function() {
if(d3.event.keyCode === self._ctrl_key) {
console.log("UP");
console.log("CTRL");
if (d3.event.keyCode === CONTROL_KEY) {
console.log("un_control");
self._flag_multiple_selection = false;
self._stop_dragging = false;
}
});
@ -1386,6 +1410,27 @@ MapController.prototype.init_events = function(principalObject) {
d3.selectAll(".draggable").call(drag);
d3.select(self._target + " svg").on("mousedown",
function() {
if (self._flag_multiple_selection) {
self._start_multiple_selection = true;
self.multiple_selection_dragging(
d3.event.offsetX,
d3.event.offsetY, true);
}
});
d3.select(self._target + " svg").on("mousemove",
function() {
if (self._flag_multiple_selection && self._start_multiple_selection) {
self.multiple_selection_dragging(
d3.event.offsetX,
d3.event.offsetY, false);
}
});
/**
* Function dragstarted
* Return void
@ -1442,6 +1487,99 @@ MapController.prototype.init_events = function(principalObject) {
}
}
MapController.prototype.multiple_selection_start = function() {
var self = this;
if (!self._cache_files.hasOwnProperty("selection_box")) {
var selection_box = d3
.select(self._target + " svg")
.append("g").attr("id", "selection_box")
.style("opacity", 0);
d3.xml("images/maps/selection_box.svg", "application/xml", function(xml) {
var nodes = xml
.evaluate("//*[@id='selection_box']/*", xml, null,
XPathResult.ANY_TYPE, null);
self._cache_files["selection_box"] = nodes.iterateNext();
self.multiple_selection_start();
});
}
else {
var selection_box = d3
.select(self._target + " #selection_box");
selection_box
.append(function() {
return self._cache_files["selection_box"]
});
}
}
MapController.prototype.multiple_selection_dragging = function(x, y, first) {
var self = this;
var selection_box = d3
.select(self._target + " #selection_box");
var transform = d3.transform();
if (first) {
transform.translate[0] = x;
transform.translate[1] = y;
selection_box.attr("transform", transform.toString());
selection_box.style("opacity", 1);
selection_box.select("rect")
.attr("width", 0);
selection_box.select("rect")
.attr("height", 0);
selection_box.attr("data-ini_x", x);
selection_box.attr("data-ini_y", y);
}
else {
var delta_x = x - parseInt(selection_box.attr("data-ini_x"));
var delta_y = y - parseInt(selection_box.attr("data-ini_y"));
if (delta_x < 0) {
transform = d3.transform(selection_box.attr("transform"));
transform.translate[0] = x;
selection_box.attr("transform", transform.toString());
selection_box.select("rect")
.attr("width", -delta_x);
}
else {
selection_box.select("rect")
.attr("width", delta_x);
}
if (delta_y < 0) {
transform = d3.transform(selection_box.attr("transform"));
transform.translate[1] = y;
selection_box.attr("transform", transform.toString());
selection_box.select("rect")
.attr("height", -delta_y);
}
else {
selection_box.select("rect")
.attr("height", delta_y);
}
}
}
MapController.prototype.multiple_selection_end = function() {
}
/**
* Function tooltip_map_create
* Return void