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 <pvoma...@redhat.com>
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<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) {
-- 
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

Reply via email to