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

Working in the resize action.

Browse Source
This commit is contained in:
mdtrooper 2016-03-11 12:44:05 +01:00
parent 95b13bf3aa
commit fd0995af96
3 changed files with 246 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pandora_console/images/maps/resize_handle.over.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_over">
<g>
<rect
y="0"
x="0"
height="10"
width="10"
style="
fill:#000000;
fill-opacity:0;"
/>
<circle
style="opacity:1;
fill:#0000ff;
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_over" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 677 B

14
pandora_console/images/maps/square_selection.svg
View File

@ -5,21 +5,12 @@
version="1.1">
<defs>
<symbol id="square_selection">
<g>
<g class="square">
<rect
y="0"
x="0"
height="100"
width="100"
style="
fill:#000000;
fill-opacity:0;"
/>
<rect
y="2"
x="2"
height="98"
width="98"
style="opacity: 1;
fill: #000000;
fill-opacity: 0.5;
@ -30,7 +21,4 @@
</g>
</symbol>
</defs>
<g transform="translate(100,100)">
<use xlink:href="#square_selection" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 691 B

After

Width:  |  Height:  |  Size: 496 B

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

@ -346,6 +346,8 @@ MapController.prototype.remove_resize_square = function(item, wait) {
}
MapController.prototype.paint_resize_square = function(item, wait) {
var self = this;
if (typeof(wait) === "undefined")
wait = 1;
@ -359,68 +361,62 @@ MapController.prototype.paint_resize_square = function(item, wait) {
}
switch (wait) {
/*---------------------------------------------*/
/*-------- Preload head and body arrow --------*/
/*---------------------------------------------*/
case 1:
var resize_square = d3
.select(self._target + " svg")
.append("g").attr("id", "resize_square")
.style("opacity", 1);
.style("opacity", 0);
if (is_buggy_firefox) {
d3.xml("images/maps/square_selection.svg", "application/xml", function(xml) {
var nodes = xml
.evaluate("//*[@id='square_selection']/*", xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
resize_square
.append("g").attr("class", "square_selection")
.append("use")
.attr("xlink:href", "#square_selection");
.append(function() {return result});
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;});
if (is_buggy_firefox) {
resize_square
.append("g").attr("class", "handles")
.selectAll(".handle")
.data(["N", "NE", "E", "SE", "S", "SW", "W", "NW"])
.enter()
.append("g")
.attr("class", function(d) { return "handler handler_" + d;})
.append("use")
.attr("xlink:href", "images/maps/resize_handle.svg#resize_handle")
.attr("class", function(d) { return "handler " + d;});
self.paint_resize_square(item, 0);
}
else {
resize_square
.append("g").attr("class", "handles")
.selectAll(".handle")
.data(["N", "NE", "E", "SE", "S", "SW", "W", "NW"])
.enter()
.append("g")
.attr("class", function(d) { return "handler handler_" + d;})
.append("use")
.attr("xlink:href", "images/maps/resize_handle.svg#resize_handle")
.on("load", function() {
wait_load(function() {
self.paint_resize_square(
item, 0);
});
});
}
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 item_d3 = d3.select(self._target + " #node_" + item['graph_id']);
var bbox_item = item.node().getBBox();
var bbox_item = item_d3.node().getBBox();
var bbox_square = resize_square.node().getBBox();
var transform_item = d3.transform(item.attr("transform"));
var transform_item = d3.transform(item_d3.attr("transform"));
var transform_viewport = d3
.transform(d3.select(self._target + " .viewport").attr("transform"));
@ -448,43 +444,177 @@ MapController.prototype.paint_resize_square = function(item, wait) {
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());
d3.select("#resize_square .square rect")
.attr("width", (bbox_item.width * transform_viewport.scale[0]));
d3.select("#resize_square .square rect")
.attr("height", (bbox_item.height * transform_viewport.scale[1]));
// 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) {});
var bbox_handler = d3
.select(self._target + " .handler").node().getBBox();
var handler_positions = {};
handler_positions['N'] = [];
handler_positions['N'][0] = (bbox_item.width * transform_viewport.scale[0] / 2)
- (bbox_handler.width / 2);
handler_positions['N'][1] = 0 - (bbox_handler.height / 2);
handler_positions['NE'] = [];
handler_positions['NE'][0] = (bbox_item.width * transform_viewport.scale[0])
- (bbox_handler.width / 2);
handler_positions['NE'][1] = handler_positions['N'][1];
handler_positions['E'] = [];
handler_positions['E'][0] = handler_positions['NE'][0];
handler_positions['E'][1] = (bbox_item.height * transform_viewport.scale[1] / 2)
- (bbox_handler.height / 2);
handler_positions['SE'] = [];
handler_positions['SE'][0] = handler_positions['NE'][0];
handler_positions['SE'][1] = (bbox_item.height * transform_viewport.scale[1])
- (bbox_handler.height / 2);
handler_positions['S'] = [];
handler_positions['S'][0] = handler_positions['N'][0];
handler_positions['S'][1] = handler_positions['SE'][1];
handler_positions['SW'] = [];
handler_positions['SW'][0] = 0 - (bbox_handler.width / 2);
handler_positions['SW'][1] = handler_positions['SE'][1];
handler_positions['W'] = [];
handler_positions['W'][0] = handler_positions['SW'][0];
handler_positions['W'][1] = handler_positions['E'][1];
handler_positions['NW'] = [];
handler_positions['NW'][0] = handler_positions['SW'][0];
handler_positions['NW'][1] = handler_positions['N'][1];
d3.selectAll(" .handler").each(function(d) {
var transform = d3.transform();
transform.translate[0] = handler_positions[d][0];
transform.translate[1] = handler_positions[d][1];
d3.select(self._target + " .handler_" + d)
.attr("transform", transform.toString());
d3.select(this)
.on("mouseover", function(d) {
self.change_handler_image("mouseover", d);
//~ console.log("mouseover");
})
.on("mouseout", function(d) {
self.change_handler_image("mouseout", d);
//~ console.log("mouseout");
})
.on("click", function(d) {
console.log("click");
})
//~ .on("dragstart", function(d) {
//~ self.event_resize("dragstart", item, d);
//~ })
//~ .on("drag", function(d) {
//~ self.event_resize("drag", item, d);
//~ })
//~ .on("dragend", function(d) {
//~ self.event_resize("dragend", item, d);
//~ });
});
resize_square.style("opacity", 1);
break;
}
}
MapController.prototype.change_handler_image = function(action, handler, wait) {
//~ console.log("action", action);
//~ var self = this;
//~
//~ if (typeof(wait) === "undefined")
//~ wait = 1;
//~
//~ var count_files = 1;
//~ function wait_load(callback) {
//~ count_files--;
//~
//~ if (count_files == 0) {
//~ callback();
//~ }
//~ }
//~
//~
//~ var handlers_d3 = d3.select(self._target + " .handles");
//~ var handler_d3 = d3.select(self._target + " .handler_" + handler);
//~
//~ console.log("target", self._target);
//~
//~
//~
//~ switch (wait) {
//~ case 1:
//~
//~ handler_d3.select("use").remove();
//~
//~ switch (action) {
//~ case "mouseover":
//~ console.log("__mouseover");
//~
//~
//~
//~ handler_d3.append("use")
//~ .attr("xlink:href", "images/maps/resize_handle.over.svg#resize_handle_over")
//~ .attr("class", function(d) { return "handler " + d;})
//~ .on("load", function() {
//~ wait_load(function() {
//~ self.change_handler_image(
//~ action, handler, 0);
//~ });
//~ });
//~
//~ break;
//~ case "mouseout":
//~ console.log("__mouseout");
//~
//~ handler_d3.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.change_handler_image(
//~ action, handler, 0);
//~ });
//~ });
//~
//~ break;
//~ }
//~ break;
//~ case 0:
//~ handler_d3
//~ .on("mouseover", null)
//~ .on("mouseout", null)
//~ .on("click", null);
//~ handler_d3
//~ .on("mouseover", function(d) {
//~ self.change_handler_image("mouseover", d);
//~ console.log("mouseover");
//~ })
//~ .on("mouseout", function(d) {
//~ self.change_handler_image("mouseout", d);
//~ console.log("mouseout");
//~ })
//~ .on("click", function(d) {
//~ console.log("click");
//~ });
//~ break;
//~ }
}
MapController.prototype.event_resize = function(action, item, handler) {
var self = this;
}
/**
* Function init_events
* Return boolean