On 02/12/2016 01:52 PM, Pavel Vomacka wrote:


On 02/11/2016 12:31 PM, Pavel Vomacka wrote:
Hello,

The canvas of the graph had static size. This patch fixes this issue and from now the graph canvas is resized according to the window size.

Pavel Vomacka


Because of changes in previous patch I'm sending also this one again. Plus I fixed some jslint warnings.

And again a link to the ticket: https://fedorahosted.org/freeipa/ticket/5647 .

--
Pavel^3 Vomacka


And another change in the code. This patch adds checking whether a svg element even exists. And don't add 'col-sm-12' class to the svg element any more. This class just added useless paddings to the element.

--
Pavel^3 Vomacka
>From 81fc60c8e7f0fee81c59ee77c62f5b2e2c6205be Mon Sep 17 00:00:00 2001
From: Pavel Vomacka <pvoma...@redhat.com>
Date: Tue, 9 Feb 2016 16:17:08 +0100
Subject: [PATCH] Resize topology graph canvas according to window size.

Calculate proper size of the svg element which contains the topology graph.
The svg element size is recalculated when the window is resized.

https://fedorahosted.org/freeipa/ticket/5647
---
 install/ui/src/freeipa/topology_graph.js | 37 +++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/install/ui/src/freeipa/topology_graph.js b/install/ui/src/freeipa/topology_graph.js
index 8d8876f9063abe20c4fbb7f13a490a6b9c12569b..0243ecbd2d0e1b95e629038c63b0a978041f5e3c 100644
--- a/install/ui/src/freeipa/topology_graph.js
+++ b/install/ui/src/freeipa/topology_graph.js
@@ -27,8 +27,6 @@ var topology_graph = {
  * @class
  */
 topology_graph.TopoGraph = declare([Evented], {
-    width: 960,
-    height: 500,
     _colors: d3.scale.category10(),
     _svg : null,
     _path: null,
@@ -62,6 +60,18 @@ topology_graph.TopoGraph = declare([Evented], {
      * @param  {HTMLElement} container container where to put the graph svg element
      */
     initialize: function(container) {
+        var that = this;
+
+        $(window).on('resize', function () {
+            window.clearTimeout(this.delay);
+            this.delay = window.setTimeout( function () {
+                // Check whether a svg element exists.
+                if ($('svg').length) {
+                    that._recalculate_svg_size();
+                }
+            }, 100);
+        });
+
         this._create_svg(container);
         this.update(this.nodes, this.links, this.suffixes);
         return;
@@ -130,9 +140,26 @@ topology_graph.TopoGraph = declare([Evented], {
 
     _create_svg: function(container) {
         this._svg = d3.select(container[0]).
-            append('svg').
-            attr('width', this.width).
-            attr('height', this.height);
+            append('svg');
+
+        this._recalculate_svg_size();
+    },
+
+    _recalculate_svg_size: function() {
+        var space = parseInt($('.col-sm-12').css('paddingRight'), 10);
+
+        // The right padding of col-sm-12 class is substracted from the height and the width
+        // because we want to have the same space at the bottom and on the right side
+        // as on the left side of the svg element.
+        this.height = $(window).height() - $('svg').offset().top - space;
+        this.width = $(window).width() - $('svg').offset().left.toFixed(1) - space;
+
+        // Negative numbers cause exceptions in counting position of the graph.
+        if (this.height >= 0 && this.width >= 0) {
+        this._svg
+            .attr("width", this.width)
+            .attr("height", this.height);
+        }
     },
 
     _init_layout: function() {
-- 
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