Re: [Freeipa-devel] [PATCH] 0004 webui: topology graph: Add pan and zoom functionality
On 02/22/2016 05:34 PM, Pavel Vomacka wrote:
On 02/18/2016 06:21 PM, Petr Vobornik wrote:
On 02/03/2016 03:37 PM, Pavel Vomacka wrote:
Hello,
I'm sending a patch for review. This patch adds pan and zoom
functionality to the topology graph. The page remembers old position and
size of the graph. So, it keeps these settings after refreshing the
page.
The patch is in atachement.
Pavel Vomacka
1. if node.fixed should be number then, we can store number in local
storage as well(only as string, e.g. num + '') instead of 'true' so
that we make the logic more straightforward/consistent.
Fixed.
2. following lines are too long: .attr("transform", "translate(" +
d3.event.translate + ")scale(" + d3.event.scale + ")");
.attr('transform', 'translate(' + trans.translate + ')scale(' +
trans.scale + ')');
These two and one more line are now split into more lines which are
short enough.
3. 'svg_' prefix for translate and scale keys is too generic, would
use e.g. topo_graph
'svg_' prefix is changed to the 'graph' prefix.
There is also change in using 'this' and 'that' variables. Instead of
declaring 'that' variable there is used the bind() method.
ACK
Pushed to:
master: 18a4053a687ac51c43cb594debe02409537647cf
ipa-4-3: b59e49feb9c3b820256a006f1202e4abd82ed691
--
Petr Vobornik
--
Manage your subscription for the Freeipa-devel mailing list:
https://www.redhat.com/mailman/listinfo/freeipa-devel
Contribute to FreeIPA: http://www.freeipa.org/page/Contribute/Code
Re: [Freeipa-devel] [PATCH] 0004 webui: topology graph: Add pan and zoom functionality
On 02/18/2016 06:21 PM, Petr Vobornik wrote:
On 02/03/2016 03:37 PM, Pavel Vomacka wrote:
Hello,
I'm sending a patch for review. This patch adds pan and zoom
functionality to the topology graph. The page remembers old position and
size of the graph. So, it keeps these settings after refreshing the
page.
The patch is in atachement.
Pavel Vomacka
1. if node.fixed should be number then, we can store number in local
storage as well(only as string, e.g. num + '') instead of 'true' so
that we make the logic more straightforward/consistent.
Fixed.
2. following lines are too long: .attr("transform", "translate(" +
d3.event.translate + ")scale(" + d3.event.scale + ")");
.attr('transform', 'translate(' + trans.translate + ')scale(' +
trans.scale + ')');
These two and one more line are now split into more lines which are
short enough.
3. 'svg_' prefix for translate and scale keys is too generic, would
use e.g. topo_graph
'svg_' prefix is changed to the 'graph' prefix.
There is also change in using 'this' and 'that' variables. Instead of
declaring 'that' variable there is used the bind() method.
--
Pavel^3 Vomacka
>From cc837771a7b44c992457064138a5f26ef3adba82 Mon Sep 17 00:00:00 2001
From: Pavel Vomacka
Date: Wed, 3 Feb 2016 15:22:47 +0100
Subject: [PATCH] Add pan and zoom functionality to the topology graph
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
---
install/ui/src/freeipa/topology_graph.js | 117 ---
1 file changed, 109 insertions(+), 8 deletions(-)
diff --git a/install/ui/src/freeipa/topology_graph.js b/install/ui/src/freeipa/topology_graph.js
index 23c7f6221a1e54770dcf08b3ebfc0b0a42810700..3ca00f6f6fee5fbb0706b7dbb86d746a89a74209 100644
--- a/install/ui/src/freeipa/topology_graph.js
+++ b/install/ui/src/freeipa/topology_graph.js
@@ -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> 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) {
--
2.5.0
--
Manage your subscription for the Freeipa-devel mailing list:
https://www.redhat.com/mailman/listinfo/freeipa-devel
Contribute to FreeIPA: http://www.freeipa.org/page/Contribute/Code
Re: [Freeipa-devel] [PATCH] 0004 webui: topology graph: Add pan and zoom functionality
On 02/03/2016 03:37 PM, Pavel Vomacka wrote:
Hello,
I'm sending a patch for review. This patch adds pan and zoom
functionality to the topology graph. The page remembers old position and
size of the graph. So, it keeps these settings after refreshing the page.
The patch is in atachement.
Pavel Vomacka
1. if node.fixed should be number then, we can store number in local
storage as well(only as string, e.g. num + '') instead of 'true' so that
we make the logic more straightforward/consistent.
2. following lines are too long: .attr("transform", "translate(" +
d3.event.translate + ")scale(" + d3.event.scale + ")");
.attr('transform', 'translate(' + trans.translate + ')scale(' +
trans.scale + ')');
3. 'svg_' prefix for translate and scale keys is too generic, would use
e.g. topo_graph
--
Petr Vobornik
--
Manage your subscription for the Freeipa-devel mailing list:
https://www.redhat.com/mailman/listinfo/freeipa-devel
Contribute to FreeIPA: http://www.freeipa.org/page/Contribute/Code
Re: [Freeipa-devel] [PATCH] 0004 webui: topology graph: Add pan and zoom functionality
On 02/03/2016 03:37 PM, Pavel Vomacka wrote:
Hello,
I'm sending a patch for review. This patch adds pan and zoom
functionality to the topology graph. The page remembers old position
and size of the graph. So, it keeps these settings after refreshing
the page.
The patch is in atachement.
Pavel Vomacka
Hello,
I found one small bug during developing another features so I'm sending
a new patch. There were situations when you turned off the fixed state
of node by doubleclick but the node stayed at the same place. This
behaviour was caused by missing layout.resume() in the dragended event
handler.
I also forgot to add a link to the ticket. So, here it is:
https://fedorahosted.org/freeipa/ticket/5502 .
The new patch is in atachement.
--
Pavel^3 Vomacka
>From 58e89820a1df635f5ec3ee1bbbaabb3f237b478c Mon Sep 17 00:00:00 2001
From: Pavel Vomacka
Date: Wed, 3 Feb 2016 15:22:47 +0100
Subject: [PATCH] Add pan and zoom functionality to the topology graph
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
---
install/ui/src/freeipa/topology_graph.js | 97 ++--
1 file changed, 91 insertions(+), 6 deletions(-)
diff --git a/install/ui/src/freeipa/topology_graph.js b/install/ui/src/freeipa/topology_graph.js
index 23c7f6221a1e54770dcf08b3ebfc0b0a42810700..8d8876f9063abe20c4fbb7f13a490a6b9c12569b 100644
--- a/install/ui/src/freeipa/topology_graph.js
+++ b/install/ui/src/freeipa/topology_graph.js
@@ -74,20 +74,42 @@ topology_graph.TopoGraph = declare([Evented], {
* @param {Array} suffixes array of suffixes
*/
update: function(nodes, links, suffixes) {
+var that = this;
+
+var curr_trasform = this._get_stored_transformation();
+
+// 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);
+
+function zoomed() {
+that._svg.selectAll('g.shapes')
+.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+that._store_current_transformation();
+}
this.links = links;
this.nodes = nodes;
this.suffixes = suffixes;
// load saved coordinates
+// node.fixed internally uses numbers instead of booleans
+// 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> 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 +448,12 @@ 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 trans = self._get_stored_transformation();
+self._svg.selectAll('g.shapes')
+.attr('transform', 'translate(' + trans.translate + ')scale(' + trans.scale + ')');
},
constructor: function(spec) {
--
2.5.0
--
Manage your subscription for the Freeipa-devel mailing list:
https://www.redhat.com/mailman/listinfo/freeipa-devel
Contribute to FreeIPA: http://www.freeipa.org/page/Contribute/Code
[Freeipa-devel] [PATCH] 0004 webui: topology graph: Add pan and zoom functionality
Hello,
I'm sending a patch for review. This patch adds pan and zoom
functionality to the topology graph. The page remembers old position and
size of the graph. So, it keeps these settings after refreshing the page.
The patch is in atachement.
Pavel Vomacka
>From e09fff3ce2dfee77741bed6110f35542c67d300a Mon Sep 17 00:00:00 2001
From: Pavel Vomacka
Date: Wed, 3 Feb 2016 15:22:47 +0100
Subject: [PATCH] Add pan and zoom functionality to the topology graph
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
---
install/ui/src/freeipa/topology_graph.js | 96 ++--
1 file changed, 90 insertions(+), 6 deletions(-)
diff --git a/install/ui/src/freeipa/topology_graph.js b/install/ui/src/freeipa/topology_graph.js
index 23c7f6221a1e54770dcf08b3ebfc0b0a42810700..1c29c14a42470623fd34e446715eb20a2e98bca8 100644
--- a/install/ui/src/freeipa/topology_graph.js
+++ b/install/ui/src/freeipa/topology_graph.js
@@ -74,20 +74,42 @@ topology_graph.TopoGraph = declare([Evented], {
* @param {Array} suffixes array of suffixes
*/
update: function(nodes, links, suffixes) {
+var that = this;
+
+var curr_trasform = this._get_stored_transformation();
+
+// 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);
+
+function zoomed() {
+that._svg.selectAll('g.shapes')
+.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+that._store_current_transformation();
+}
this.links = links;
this.nodes = nodes;
this.suffixes = suffixes;
// load saved coordinates
+// node.fixed internally uses numbers instead of booleans
+// 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> 1;
+}
+
// 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 +447,12 @@ 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 trans = self._get_stored_transformation();
+self._svg.selectAll('g.shapes')
+.attr('transform', 'translate(' + trans.translate + ')scale(' + trans.scale + ')');
},
constructor: function(spec) {
--
2.5.0
--
Manage your subscription for the Freeipa-devel mailing list:
https://www.redhat.com/mailman/listinfo/freeipa-devel
Contribute to FreeIPA: http://www.freeipa.org/page/Contribute/Code
