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

Uploaded some code about resize action

This commit is contained in:
mdtrooper 2016-03-10 12:42:25 +01:00
parent 9ceb3c15e4
commit 9befc1c65e
3 changed files with 177 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pandora_console/images/maps/resize_handle.svg Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<defs>
<symbol id="resize_handle">
<g>
<rect
y="0"
x="0"
height="10"
width="10"
style="
fill:#000000;
fill-opacity:0;"
/>
<circle
style="opacity:1;
fill:#ff0000;
fill-opacity:1;"
cy="5"
cx="5"
r="5" />
<circle
style="opacity:1;
fill:#ffff00;
fill-opacity:1;"
cx="5"
cy="5"
r="2.5" />
</g>
</symbol>
</defs>
<g transform="translate(0 0)">
<use xlink:href="#resize_handle" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 667 B

6
pandora_console/include/ajax/map.ajax.php
View File

@ -248,7 +248,7 @@ if (is_ajax ()) {
"{title}",
modules_get_agentmodule_name($id_node_data),
$details);
ob_start();
?>
<span>
@ -261,14 +261,14 @@ if (is_ajax ()) {
</span> <br/>
<?php
$body = ob_get_clean();
$details = str_replace(
"{body}",
$body,
$details);
break;
}
echo json_encode($details);
return;
}

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

@ -62,6 +62,7 @@ MapController.prototype.init_map = function() {
*/
function zoom() {
self.close_all_tooltips();
self.remove_resize_square();
var zoom_level = d3.event.scale;
@ -340,6 +341,10 @@ MapController.prototype.move_arrow = function (id_from_any_point_arrow) {
});
}
MapController.prototype.remove_resize_square = function(item, wait) {
d3.select(self._target + " svg #resize_square").remove();
}
MapController.prototype.paint_resize_square = function(item, wait) {
if (typeof(wait) === "undefined")
wait = 1;
@ -358,12 +363,128 @@ MapController.prototype.paint_resize_square = function(item, wait) {
/*-------- Preload head and body arrow --------*/
/*---------------------------------------------*/
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");
var resize_square = d3
.select(self._target + " svg")
.append("g").attr("id", "resize_square")
.style("opacity", 1);
if (is_buggy_firefox) {
resize_square
.append("g").attr("class", "square_selection")
.append("use")
.attr("xlink:href", "#square_selection");
resize_square
.append("g").attr("class", "handles")
.selectAll(".handle")
.data(["N", "NE", "E", "SE", "S", "SW", "W", "NW"])
.enter()
.append("use")
.attr("xlink:href", "images/maps/resize_handle.svg#resize_handle")
.attr("class", function(d) { return "handler " + d;});
paint_resize_square(item, 0);
}
else {
resize_square
.append("g").attr("class", "square_selection")
.append("use")
.attr("xlink:href", "images/maps/square_selection.svg#square_selection")
.on("load", function() {
wait_load(function() {
self.paint_resize_square(
item, 0);
});
});
resize_square
.append("g").attr("class", "handles")
.selectAll(".handle")
.data(["N", "NE", "E", "SE", "S", "SW", "W", "NW"])
.enter()
.append("use")
.attr("xlink:href", "images/maps/resize_handle.svg#resize_handle")
.attr("class", function(d) { return "handler " + d;})
.on("load", function() {
wait_load(function() {
self.paint_resize_square(
item, 0);
});
});
}
break;
case 0:
var resize_square = d3.select(self._target + " #resize_square");
var item = d3.select(self._target + " #node_" + item['graph_id']);
var bbox_item = item.node().getBBox();
var bbox_square = resize_square.node().getBBox();
var transform_item = d3.transform(item.attr("transform"));
var transform_viewport = d3
.transform(d3.select(self._target + " .viewport").attr("transform"));
var transform = d3.transform();
var x = (bbox_item.x +
transform_item.translate[0] +
transform_viewport.translate[0]
) * transform_viewport.scale[0];
var y = (bbox_item.y +
transform_item.translate[1] +
transform_viewport.translate[1]
) * transform_viewport.scale[1];
console.log("transform_viewport", transform_viewport);
console.log("bbox_item", bbox_item);
console.log("bbox_square", bbox_square);
x = (bbox_item.x +
transform_item.translate[0]) * transform_viewport.scale[0] +
transform_viewport.translate[0];
y = (bbox_item.y +
transform_item.translate[1]) * transform_viewport.scale[1] +
transform_viewport.translate[1];
transform.translate[0] = x;
transform.translate[1] = y;
resize_square
.attr("transform", transform.toString());
transform = d3.transform();
var scale_x = bbox_item.width / bbox_square.width;
var scale_y = bbox_item.height / bbox_square.height;
//~
//~ transform.scale[0] = scale_x;
//~ transform.scale[1] = scale_y;
//~
//~ console.log(bbox_item);
//~ console.log(bbox_square);
//~
//~ resize_square.select(".square_selection")
//~ .attr("transform", transform.toString());
transform.scale[0] = scale_x * transform_viewport.scale[0];
transform.scale[1] = scale_y * transform_viewport.scale[1];
resize_square.select(".square_selection")
.attr("transform", transform.toString());
// Set the handlers
//~ var bbox_handler = d3
//~ .select(self._target + " .handler").node().getBBox();
//~ var handler_positions = {};
//~ handler_positions['N'] = [];
//~ handler_positions['N'][0] = (bbox_item.width / 2)
//~ - (bbox_handler.width / 2);
//~ handler_positions['N'][1] = 0 - (bbox_handler.width / 2);
//~
//~ d3.selectAll(" .handler").each(function(d) {});
break;
}
}
@ -402,7 +523,7 @@ MapController.prototype.init_events = function(principalObject) {
}
}
];
var map_menu = [
{
title: 'Edit map',
@ -417,12 +538,12 @@ MapController.prototype.init_events = function(principalObject) {
}
}
];
d3.select("#map").on("contextmenu", d3.contextMenu(map_menu));
$(this._target + " svg *, " + this._target + " svg")
.off("mousedown", {map: this}, this.click_event);
d3.selectAll(".node")
.on("mouseover", function(d) {
d3.select("#node_" + d['graph_id'])
@ -439,7 +560,7 @@ MapController.prototype.init_events = function(principalObject) {
d3.event.stopPropagation();
d3.event.preventDefault();
}
if (d3.event.defaultPrevented) return;
self.tooltip_map_create(self, this);
@ -468,6 +589,8 @@ MapController.prototype.init_events = function(principalObject) {
$("#node_" + d['graph_id']).tooltipster('destroy');
}
self.remove_resize_square();
d3.select(this).classed("dragging", true);
}
@ -500,6 +623,8 @@ MapController.prototype.init_events = function(principalObject) {
if ($("#node_" + d['graph_id']).hasClass("tooltipstered")) {
$("#node_" + d['graph_id']).tooltipster('destroy');
}
self.remove_resize_square();
}
}