Resize topology graph canvas according to window size

The size of svg element is calculated when the topology graph facet is load
and then every time when the window is resized. The resize event listener
is removed after the topology graph facet emits hide event.

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

Reviewed-By: Petr Vobornik <pvoborni@redhat.com>

install/ui/src/freeipa/topology.js

@@ -431,14 +431,39 @@ topology.TopologyGraphFacet = declare([Facet, ActionMixin, HeaderMixin], {
     init: function(spec) {
         this.inherited(arguments);
         var graph = this.get_widget('topology-graph');
+        var listener = this.resize_listener.bind(this, graph);
 
         on(this, 'show', lang.hitch(this, function(args) {
-            graph.update();
+            var size = this.calculate_canvas_size();
+            graph.update(size);
+
+            $(window).on('resize', null, listener);
         }));
 
         on(graph, 'link-selected', lang.hitch(this, function(data) {
             this.set_selected_link(data.link);
         }));
+
+        on(this, 'hide', function () {
+            $(window).off('resize', null, listener);
+        });
+    },
+
+    resize_listener: function(graph) {
+        var size = this.calculate_canvas_size();
+
+        graph.resize(size.height, size.width);
+    },
+
+    calculate_canvas_size: function() {
+        var space = parseInt(this.content.css('paddingLeft'), 10);
+        var height = $(window).height() - this.content.offset().top - space;
+        var width = this.content.width();
+
+        return {
+            height: height,
+            width: width
+        };
     },
 
     set_selected_link: function(link) {
@@ -448,7 +473,8 @@ topology.TopologyGraphFacet = declare([Facet, ActionMixin, HeaderMixin], {
 
     refresh: function() {
         var graph = this.get_widget('topology-graph');
-        graph.update();
+        var size = this.calculate_canvas_size();
+        graph.update(size);
     }
 });
 
@@ -802,7 +828,10 @@ topology.TopologyGraphWidget = declare([Stateful, Evented], {
         return deferred.promise;
     },
 
-    update: function() {
+    /**
+     * @param {Object} size - dict contains height and width value. (optional)
+     */
+    update: function(size) {
         this._update_view();
 
         if (IPA.domain_level < topology.required_domain_level) return;
@@ -815,9 +844,14 @@ topology.TopologyGraphWidget = declare([Stateful, Evented], {
                     suffixes: data.suffixes
                 });
                 this._bind_graph_events(this.graph);
+                if (size) {
+                    this.resize(size.height, size.width);
+                }
                 this.graph.initialize(this.visualization_cnt_el);
-
             } else {
+                if (size) {
+                    this.resize(size.height, size.width);
+                }
                 this.graph.update(data.nodes, data.links, data.suffixes);
             }
         }), function(error) {
@@ -897,6 +931,12 @@ topology.TopologyGraphWidget = declare([Stateful, Evented], {
         return this.topology_view_el;
     },
 
+    resize: function(height, width) {
+        if (this.graph) {
+            this.graph.resize(height, width);
+        }
+    },
+
     _init_widgets: function() {
     },
 

install/ui/src/freeipa/topology_graph.js

@@ -488,6 +488,19 @@ topology_graph.TopoGraph = declare([Evented], {
             .attr("transform", transform);
     },
 
+    resize: function(height, width) {
+        if (!(isNaN(height) || isNaN(width))) {
+            this.height = height < 0 ? 0 : height;
+            this.width = width < 0 ? 0 : width;
+
+            if (this._svg) {
+                this._svg
+                    .attr('width', this.width)
+                    .attr('height', this.height);
+            }
+        }
+    },
+
     constructor: function(spec) {
         lang.mixin(this, spec);
     }