IntenseWebs/freeipa
3
0
Fork 0
mirror of https://salsa.debian.org/freeipa-team/freeipa.git synced 2025-01-26 16:16:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add pan and zoom functionality to the topology graph

Browse Source 
Add zooming and panning functionality to the topology graph. Also the page rememberes
the old setting of the graph position and size. So, after refreshing the graph has
the same position and size as it had before.

https://fedorahosted.org/freeipa/ticket/5502

Reviewed-By: Petr Vobornik <pvoborni@redhat.com>
This commit is contained in:
Pavel Vomacka 2016-02-03 15:22:47 +01:00 committed by Petr Vobornik
parent e0b9afded5
commit 18a4053a68
1 changed files with 109 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
install/ui/src/freeipa/topology_graph.js
View File

@ -74,20 +74,44 @@ topology_graph.TopoGraph = declare([Evented], {
* @param {Array} suffixes array of suffixes
*/
update: function(nodes, links, suffixes) {
var curr_trasform = this._get_stored_transformation();
var zoomed = function() {
var translate = d3.event.translate;
var scale = d3.event.scale;
var transform = "translate(" + translate + ")scale(" + scale + ")";
this._svg.selectAll('g.shapes')
.attr("transform", transform);
this._store_current_transformation();
}.bind(this);
// adds zoom behavior to the svg
var zoom = d3.behavior.zoom()
.translate(curr_trasform.translate)
.scale(curr_trasform.scale)
.scaleExtent([0.2, 1])
.on("zoom", zoomed);
// delete all from svg
this._svg.selectAll("*").remove();
this._svg.attr('width', this.width)
.attr('height', this.height);
.attr('height', this.height)
.call(zoom);
this.links = links;
this.nodes = nodes;
this.suffixes = suffixes;
// load saved coordinates
// node.fixed uses integer
// this is useful when you need to store the original value and set
// the node temporarily fixed
for (var i=0,l=nodes.length; i<l; i++) {
var node = nodes[i];
if (this._get_local_storage_attr(node.id, 'fixed') === 'true') {
node.fixed = true;
node.fixed = 0;
if (this._get_local_storage_attr(node.id, 'fixed')) {
node.fixed = 1;
node.x = Number(this._get_local_storage_attr(node.id, 'x'));
node.y = Number(this._get_local_storage_attr(node.id, 'y'));
}
@ -97,8 +121,13 @@ topology_graph.TopoGraph = declare([Evented], {
this._define_shapes();
// handles to link and node element groups
this._path = this._svg.append('svg:g').selectAll('path');
this._circle = this._svg.append('svg:g').selectAll('g');
this._path = this._svg.append('svg:g')
.classed('shapes', true)
.selectAll('path');
this._circle = this._svg.append('svg:g')
.classed('shapes', true)
.selectAll('g');
this._selected_link = null;
this._mouseup_node = null;
@ -137,7 +166,7 @@ topology_graph.TopoGraph = declare([Evented], {
_save_node_info: function(d) {
if (d.fixed) {
this._set_local_storage_attr(d.id, 'fixed', 'true');
this._set_local_storage_attr(d.id, 'fixed', d.fixed + '');
this._set_local_storage_attr(d.id, 'x', d.x);
this._set_local_storage_attr(d.id, 'y', d.y);
} else {
@ -147,6 +176,39 @@ topology_graph.TopoGraph = declare([Evented], {
}
},
_store_current_transformation: function(d) {
var prefix = "graph_";
var translate = d3.event.translate;
var scale = d3.event.scale;
this._set_local_storage_attr(prefix, "translate", translate);
this._set_local_storage_attr(prefix, "scale", scale);
},
_get_stored_transformation: function(d) {
var prefix = "graph_";
var current_translate = this._get_local_storage_attr(prefix, "translate");
var current_scale = this._get_local_storage_attr(prefix, "scale");
if (current_translate) {
var temp_translate = current_translate.split(",");
temp_translate[0] = parseInt(temp_translate[0], 10);
temp_translate[1] = parseInt(temp_translate[1], 10);
current_translate = temp_translate;
} else {
current_translate = [0, 0];
}
if (!current_scale) {
current_scale = 1;
}
return {
translate: current_translate,
scale: current_scale
};
},
/**
* Simulation tick which
*
@ -339,13 +401,43 @@ topology_graph.TopoGraph = declare([Evented], {
}
);
var drag = d3.behavior.drag()
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
// Store the original value of fixed and set the node fixed.
d.fixed = d.fixed << 1;
d.fixed |= 1;
}
function dragged(d) {
d.px = d3.event.x;
d.py = d3.event.y;
var translate = "translate(" + d.x + "," + d.y + ")";
d3.select(this).attr('transform', translate);
self._layout.resume();
}
function dragended(d) {
// Restore old value of fixed.
d.fixed = d.fixed >> 1;
self._layout.resume();
}
// add new nodes
var g = this._circle.enter()
.append('svg:g')
.on("dblclick", function(d) {
d.fixed = !d.fixed;
// Stops propagation dblclick event to the zoom behavior.
d3.event.preventDefault();
d3.event.stopPropagation();
//xor operation switch value of fixed from 1 to 0 and vice versa
d.fixed = d.fixed ^ 1;
})
.call(self._layout.drag);
.call(drag);
g.append('svg:circle')
.attr('class', 'node')
@ -369,6 +461,15 @@ topology_graph.TopoGraph = declare([Evented], {
// remove old nodes
self._circle.exit().remove();
// get previously set position and scale of the graph and move current
// graph to the proper position
var curr_transform = this._get_stored_transformation();
var transform = "translate(" + curr_transform.translate +
")scale(" + curr_transform.scale + ")";
this._svg.selectAll('g.shapes')
.attr("transform", transform);
},
constructor: function(spec) {