From fd0995af963397387cf00af8917884633ecff642 Mon Sep 17 00:00:00 2001 From: mdtrooper Date: Fri, 11 Mar 2016 12:44:05 +0100 Subject: [PATCH] Working in the resize action. --- .../images/maps/resize_handle.over.svg | 38 +++ .../images/maps/square_selection.svg | 14 +- .../include/javascript/map/MapController.js | 284 +++++++++++++----- 3 files changed, 246 insertions(+), 90 deletions(-) create mode 100644 pandora_console/images/maps/resize_handle.over.svg diff --git a/pandora_console/images/maps/resize_handle.over.svg b/pandora_console/images/maps/resize_handle.over.svg new file mode 100644 index 0000000000..c2d6b3240b --- /dev/null +++ b/pandora_console/images/maps/resize_handle.over.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + diff --git a/pandora_console/images/maps/square_selection.svg b/pandora_console/images/maps/square_selection.svg index 7970eaae64..c67ffd52f3 100644 --- a/pandora_console/images/maps/square_selection.svg +++ b/pandora_console/images/maps/square_selection.svg @@ -5,21 +5,12 @@ version="1.1"> - + - - - diff --git a/pandora_console/include/javascript/map/MapController.js b/pandora_console/include/javascript/map/MapController.js index 35daf9e7b1..fb73a2d0c7 100644 --- a/pandora_console/include/javascript/map/MapController.js +++ b/pandora_console/include/javascript/map/MapController.js @@ -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