tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-28 08:14:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Some work on the drag and drop

Browse Source
This commit is contained in:
mdtrooper 2016-02-24 13:59:39 +01:00
parent f203070e5e
commit b345467fa0
2 changed files with 79 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pandora_console/include/class/Map.class.php
View File

@ -130,7 +130,7 @@ abstract class Map {
?> ?>
<div id="map" data-id="<?php echo $this->id;?>" style="border: 1px red solid;"> <div id="map" data-id="<?php echo $this->id;?>" style="border: 1px red solid;">
<div class="zoom_box" style=""> <div class="zoom_box" style="position: absolute;">
<style type="text/css"> <style type="text/css">
.zoom_controller { .zoom_controller {
width: 30px; width: 30px;
@ -138,7 +138,7 @@ abstract class Map {
background: blue; background: blue;
border-radius: 15px; border-radius: 15px;
top: 100px; top: 50px;
left: 10px; left: 10px;
position: absolute; position: absolute;
} }
@ -173,7 +173,7 @@ abstract class Map {
} }
.home_zoom { .home_zoom {
top: 360px; top: 310px;
left: 10px; left: 10px;
display: table-cell; display: table-cell;
@ -195,7 +195,7 @@ abstract class Map {
left: 10px; left: 10px;
display: table-cell; display: table-cell;
position: relative; position: absolute;
font-weight: bolder; font-weight: bolder;
font-size: 20px; font-size: 20px;
background: blue; background: blue;
@ -209,7 +209,7 @@ abstract class Map {
} }
.zoom_out { .zoom_out {
top: 320px; top: 270px;
left: 10px; left: 10px;
display: table-cell; display: table-cell;

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

@ -188,7 +188,7 @@ MapController.prototype.paint_nodes = function() {
.attr("transform", .attr("transform",
function(d) { return "translate(" + d['x'] + " " + d['y'] + ")";}) function(d) { return "translate(" + d['x'] + " " + d['y'] + ")";})
.attr("class", "draggable node") .attr("class", "draggable node")
.attr("id", function(d) { return "node_" + d['id'];}) .attr("id", function(d) { return "node_" + d['graph_id'];})
.attr("data-id", function(d) { return d['id'];}) .attr("data-id", function(d) { return d['id'];})
.attr("data-graph_id", function(d) { return d['graph_id'];}) .attr("data-graph_id", function(d) { return d['graph_id'];})
.attr("data-type", function(d) { return d['type'];}) .attr("data-type", function(d) { return d['type'];})
@ -203,7 +203,54 @@ Return boolean
This function init click events in the map This function init click events in the map
*/ */
MapController.prototype.init_events = function(principalObject) { MapController.prototype.init_events = function(principalObject) {
$(this._target + " svg *, " + this._target + " svg").on("mousedown", {map: this}, this.click_event); self = this;
$(this._target + " svg *, " + this._target + " svg")
.on("mousedown", {map: this}, this.click_event);
d3.selectAll(".node")
.on("mouseover", function(d) {
d3.select("#node_" + d['graph_id'])
.select("circle")
.attr("style", "fill: rgb(128, 50, 50);");
})
.on("mouseout", function(d) {
d3.select("#node_" + d['graph_id'])
.select("circle")
.attr("style", "fill: rgb(50, 50, 128);");
});
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
d3.selectAll(".draggable").call(drag);
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
}
function dragged(d) {
console.log("dragged");
var delta_x = d3.event.dx;
var delta_y = d3.event.dy;
var translation = d3.transform(d3.select(this).attr("transform"));
scale = 1;
var x = translation.translate[0] + delta_x;
var y = translation.translate[1] + delta_y;
d3.select(this).attr("transform",
"translate(" + x + " " + y + ")");
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}
} }
/** /**
@ -303,21 +350,24 @@ Function nodeData
Return array(data) Return array(data)
This function returns the data of the node This function returns the data of the node
*/ */
MapController.prototype.nodeData = function(id/*, type, id_map*/) { MapController.prototype.nodeData = function() {
var params = {}; /*
params["getNodeData"] = 1; $.ajax({
params["id_node"] = id; url: ,
/*params["type"] = type; type: 'POST',
params["id_map"] = id_map;*/ dataType: 'json',
params["page"] = "include/ajax/map.ajax"; data: {
getNodeData: 1,
},
complete: function(xhr, textStatus) {
},
success: function(data, textStatus, xhr) {
},
error: function(xhr, textStatus, errorThrown) {
jQuery.ajax ({
data: params,
dataType: "json",
type: "POST",
url: "ajax.php",
success: function (data) {
return data;
} }
}); });
*/
} }