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
>From 648037bf3952d6cb55c1951d55fad6b05f11f4b7 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 the 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 1c29c14a42470623fd34e446715eb20a2e98bca8..4d34b7f521b169164a580bb3606792b3ce9fa153 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 () {
+ clearTimeout(this.delay);
+ this.delay = 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') );
+
+ // 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
