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
>From 8a64ce902f3d38d060271f9891bb7702a6427484 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 | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/install/ui/src/freeipa/topology_graph.js b/install/ui/src/freeipa/topology_graph.js
index 8d8876f9063abe20c4fbb7f13a490a6b9c12569b..961d4d668439c1d59f4d20f6d96812de20e73982 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,15 @@ 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 () {
+                that._recalculate_svg_size();
+            }, 100);
+        });
+
         this._create_svg(container);
         this.update(this.nodes, this.links, this.suffixes);
         return;
@@ -131,8 +138,25 @@ 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);
+            classed('col-sm-12', true);
+
+        this._recalculate_svg_size();
+    },
+
+    _recalculate_svg_size: function() {
+        var right_padding = parseInt($('svg').css('paddingRight'), 10);
+
+        // The right padding of svg is substracted from the height because we want to have
+        // the same space at the bottom as on the both sides.
+        this.height = $(window).height() - $('svg').offset().top - right_padding;
+        this.width = $(window).width() - $('svg').offset().left.toFixed(1) - right_padding;
+
+        // 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