Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
On 03/21/2016 06:57 PM, Pavel Vomacka wrote: 1. -width: 960, -height: 500, Graph even without this patch allows to set initial size in a constructor, e.g.: E.g. so he could also use: this.graph = new topology_graph.TopoGraph({ nodes: data.nodes, links: data.links, suffixes: data.suffixes height: height, width: width }); IMO we should leave some default size there, e.g. the old 960x500 so that the graph is shown even without explicit configuration. Ok, I put the default size back, but into graph specification as you write here. Ah, I badly expressed myself, sorry. I wanted to leave the original code on its place(TopoGraph). The above was just example what is possible with or without the change because it is not obvious from code. Default size is returned back now. ACK pushed to master: * e45f7314e1a2276671435703e190c8dabb320739 Resize topology graph canvas according to window size ipa-4-3: * ffdd64732b0325747b7922b0c9ce5a16a2b5652e Resize topology graph canvas according to window size -- Petr Vobornik -- 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
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
On 03/16/2016 06:34 PM, Petr Vobornik wrote: On 03/11/2016 10:09 AM, Pavel Vomacka wrote: On 03/10/2016 06:08 PM, Petr Vobornik wrote: On 02/25/2016 03:50 PM, Pavel Vomacka wrote: On 02/17/2016 06:29 PM, Petr Vobornik wrote: On 02/15/2016 04:20 PM, Pavel Vomacka wrote: 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 Hi, thanks for the patch. Hi, thank you for reviewing. 1. I don't like the fact that the resize handler registered in initialize method is active forever, even when viewing other facets. I moved the handler to the topology graph facet. It is also removed after hide event is emited. 2. The code will probably fail if there is other svg element present on the page. $('svg') searches for all svg elements in DOM, such search is usually slow and undeterministic. It is better to use a stored reference(if possible) or limit the search to some parent element, e.g. TopoGraph can store and then use its container. Would be funny if there were 2 graphs. Yep, you are right. I avoid using this type of searching in this patch. 3. Why is there the toFixed(1) call? Or more specifically on that position? It hides the fact that toFixed transforms Number to String and then '-' operator with Number on the right casts it back to Number. The toFixed(1) was used just because we don't need so accurate numbers, but in this patch this function is not used any more. 4. width could be just: this._svg.parent().width() The width is now solved by using this.content.width() in topology graph facet. I think that the calculating of width and height should be at the same place. That is why I didn't put calculating of width into the TopoGraph. 5. Your approach for bottom padding works well but I don't like that the component assumes that there is some col-sm-12 element on a page whose right padding is actually equal to space on the left of the svg. I agree, fixed. #1 and #5 makes me think that the resize logic should be moved topology facet. Something like: * register resize handler on facet's 'show' event * unregister resize handler on facet's 'hide' event (will solve #1) * on window resize, compute the size in topology facet, call new .resize(width, height) method of TopoGraph Then, we wouldn't have to search whole DOM for 'svg' elements to check if page is visible. The bottom padding can be obtained by: parseInt(this.content.css('paddingLeft')) where 'this' is facet. I followed these tips and here is a new patch. -- Pavel^3 Vomacka 1. -width: 960, -height: 500, Graph even without this patch allows to set initial size in a constructor, e.g.: E.g. so he could also use: this.graph = new topology_graph.TopoGraph({ nodes: data.nodes, links: data.links, suffixes: data.suffixes height: height, width: width }); IMO we should leave some default size there, e.g. the old 960x500 so that the graph is shown even without explicit configuration. Ok, I put the default size back, but into graph specification as you write here. Ah, I badly expressed myself, sorry. I wanted to leave the original code on its place(TopoGraph). The above was just example what is possible with or without the change because it is not obvious from code. Default size is returned back now. 2. -update: function() { +update: function(height, width) { Update method should not required size params. E.g. if it should trigger only data update. So it should contain at least a doc string that the values are optional. Maybe it should be a single param. These parameters are not required so I add doc string and also changed them to single param. Looks good. -- Pavel^3 Vomacka >From b222b002af92d5008f1f502f29ac02ac9b296aaa Mon Sep 17 00:00:00 2001 From: Pavel Vomacka Date: Thu, 25 Feb 2016 15:02:04 +0100 Subject: [PATCH] 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 --- install/ui/src/freeipa/topology.js | 48 +--- install/ui/src/freeipa/topology_graph.js | 13 + 2 files changed, 57 insertions(+), 4 deletions(-) d
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
On 03/11/2016 10:09 AM, Pavel Vomacka wrote: On 03/10/2016 06:08 PM, Petr Vobornik wrote: On 02/25/2016 03:50 PM, Pavel Vomacka wrote: On 02/17/2016 06:29 PM, Petr Vobornik wrote: On 02/15/2016 04:20 PM, Pavel Vomacka wrote: 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 Hi, thanks for the patch. Hi, thank you for reviewing. 1. I don't like the fact that the resize handler registered in initialize method is active forever, even when viewing other facets. I moved the handler to the topology graph facet. It is also removed after hide event is emited. 2. The code will probably fail if there is other svg element present on the page. $('svg') searches for all svg elements in DOM, such search is usually slow and undeterministic. It is better to use a stored reference(if possible) or limit the search to some parent element, e.g. TopoGraph can store and then use its container. Would be funny if there were 2 graphs. Yep, you are right. I avoid using this type of searching in this patch. 3. Why is there the toFixed(1) call? Or more specifically on that position? It hides the fact that toFixed transforms Number to String and then '-' operator with Number on the right casts it back to Number. The toFixed(1) was used just because we don't need so accurate numbers, but in this patch this function is not used any more. 4. width could be just: this._svg.parent().width() The width is now solved by using this.content.width() in topology graph facet. I think that the calculating of width and height should be at the same place. That is why I didn't put calculating of width into the TopoGraph. 5. Your approach for bottom padding works well but I don't like that the component assumes that there is some col-sm-12 element on a page whose right padding is actually equal to space on the left of the svg. I agree, fixed. #1 and #5 makes me think that the resize logic should be moved topology facet. Something like: * register resize handler on facet's 'show' event * unregister resize handler on facet's 'hide' event (will solve #1) * on window resize, compute the size in topology facet, call new .resize(width, height) method of TopoGraph Then, we wouldn't have to search whole DOM for 'svg' elements to check if page is visible. The bottom padding can be obtained by: parseInt(this.content.css('paddingLeft')) where 'this' is facet. I followed these tips and here is a new patch. -- Pavel^3 Vomacka 1. -width: 960, -height: 500, Graph even without this patch allows to set initial size in a constructor, e.g.: E.g. so he could also use: this.graph = new topology_graph.TopoGraph({ nodes: data.nodes, links: data.links, suffixes: data.suffixes height: height, width: width }); IMO we should leave some default size there, e.g. the old 960x500 so that the graph is shown even without explicit configuration. Ok, I put the default size back, but into graph specification as you write here. Ah, I badly expressed myself, sorry. I wanted to leave the original code on its place(TopoGraph). The above was just example what is possible with or without the change because it is not obvious from code. 2. -update: function() { +update: function(height, width) { Update method should not required size params. E.g. if it should trigger only data update. So it should contain at least a doc string that the values are optional. Maybe it should be a single param. These parameters are not required so I add doc string and also changed them to single param. Looks good. -- Pavel^3 Vomacka -- Petr Vobornik -- 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
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
On 03/10/2016 06:08 PM, Petr Vobornik wrote: On 02/25/2016 03:50 PM, Pavel Vomacka wrote: On 02/17/2016 06:29 PM, Petr Vobornik wrote: On 02/15/2016 04:20 PM, Pavel Vomacka wrote: 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 Hi, thanks for the patch. Hi, thank you for reviewing. 1. I don't like the fact that the resize handler registered in initialize method is active forever, even when viewing other facets. I moved the handler to the topology graph facet. It is also removed after hide event is emited. 2. The code will probably fail if there is other svg element present on the page. $('svg') searches for all svg elements in DOM, such search is usually slow and undeterministic. It is better to use a stored reference(if possible) or limit the search to some parent element, e.g. TopoGraph can store and then use its container. Would be funny if there were 2 graphs. Yep, you are right. I avoid using this type of searching in this patch. 3. Why is there the toFixed(1) call? Or more specifically on that position? It hides the fact that toFixed transforms Number to String and then '-' operator with Number on the right casts it back to Number. The toFixed(1) was used just because we don't need so accurate numbers, but in this patch this function is not used any more. 4. width could be just: this._svg.parent().width() The width is now solved by using this.content.width() in topology graph facet. I think that the calculating of width and height should be at the same place. That is why I didn't put calculating of width into the TopoGraph. 5. Your approach for bottom padding works well but I don't like that the component assumes that there is some col-sm-12 element on a page whose right padding is actually equal to space on the left of the svg. I agree, fixed. #1 and #5 makes me think that the resize logic should be moved topology facet. Something like: * register resize handler on facet's 'show' event * unregister resize handler on facet's 'hide' event (will solve #1) * on window resize, compute the size in topology facet, call new .resize(width, height) method of TopoGraph Then, we wouldn't have to search whole DOM for 'svg' elements to check if page is visible. The bottom padding can be obtained by: parseInt(this.content.css('paddingLeft')) where 'this' is facet. I followed these tips and here is a new patch. -- Pavel^3 Vomacka 1. -width: 960, -height: 500, Graph even without this patch allows to set initial size in a constructor, e.g.: E.g. so he could also use: this.graph = new topology_graph.TopoGraph({ nodes: data.nodes, links: data.links, suffixes: data.suffixes height: height, width: width }); IMO we should leave some default size there, e.g. the old 960x500 so that the graph is shown even without explicit configuration. Ok, I put the default size back, but into graph specification as you write here. 2. -update: function() { +update: function(height, width) { Update method should not required size params. E.g. if it should trigger only data update. So it should contain at least a doc string that the values are optional. Maybe it should be a single param. These parameters are not required so I add doc string and also changed them to single param. -- Pavel^3 Vomacka >From e1082c7290a52a44bc68043129571173e85b6c67 Mon Sep 17 00:00:00 2001 From: Pavel Vomacka Date: Thu, 25 Feb 2016 15:02:04 +0100 Subject: [PATCH] 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 --- install/ui/src/freeipa/topology.js | 52 +--- install/ui/src/freeipa/topology_graph.js | 15 +++-- 2 files changed, 60 insertions(+), 7 deletions(-) diff --git a/install/ui/src/freeipa/topology.js b/install/ui/src/freeipa/topology.js index 6e67484cc7542765056f0887928a64e4dc576836..3e6602fa50457f0ebeee70ae3dafbd77b172bbd1 100644 --- a/install/ui/src/freeipa/topology.js +++ b/install/ui/src/freeipa/topology.js @@ -431,14 +431,39 @@ topology.TopologyGraphFacet = declare([Facet, ActionMixin, HeaderMixin], {
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
On 02/25/2016 03:50 PM, Pavel Vomacka wrote: On 02/17/2016 06:29 PM, Petr Vobornik wrote: On 02/15/2016 04:20 PM, Pavel Vomacka wrote: 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 Hi, thanks for the patch. Hi, thank you for reviewing. 1. I don't like the fact that the resize handler registered in initialize method is active forever, even when viewing other facets. I moved the handler to the topology graph facet. It is also removed after hide event is emited. 2. The code will probably fail if there is other svg element present on the page. $('svg') searches for all svg elements in DOM, such search is usually slow and undeterministic. It is better to use a stored reference(if possible) or limit the search to some parent element, e.g. TopoGraph can store and then use its container. Would be funny if there were 2 graphs. Yep, you are right. I avoid using this type of searching in this patch. 3. Why is there the toFixed(1) call? Or more specifically on that position? It hides the fact that toFixed transforms Number to String and then '-' operator with Number on the right casts it back to Number. The toFixed(1) was used just because we don't need so accurate numbers, but in this patch this function is not used any more. 4. width could be just: this._svg.parent().width() The width is now solved by using this.content.width() in topology graph facet. I think that the calculating of width and height should be at the same place. That is why I didn't put calculating of width into the TopoGraph. 5. Your approach for bottom padding works well but I don't like that the component assumes that there is some col-sm-12 element on a page whose right padding is actually equal to space on the left of the svg. I agree, fixed. #1 and #5 makes me think that the resize logic should be moved topology facet. Something like: * register resize handler on facet's 'show' event * unregister resize handler on facet's 'hide' event (will solve #1) * on window resize, compute the size in topology facet, call new .resize(width, height) method of TopoGraph Then, we wouldn't have to search whole DOM for 'svg' elements to check if page is visible. The bottom padding can be obtained by: parseInt(this.content.css('paddingLeft')) where 'this' is facet. I followed these tips and here is a new patch. -- Pavel^3 Vomacka 1. -width: 960, -height: 500, Graph even without this patch allows to set initial size in a constructor, e.g.: E.g. so he could also use: this.graph = new topology_graph.TopoGraph({ nodes: data.nodes, links: data.links, suffixes: data.suffixes height: height, width: width }); IMO we should leave some default size there, e.g. the old 960x500 so that the graph is shown even without explicit configuration. 2. -update: function() { +update: function(height, width) { Update method should not required size params. E.g. if it should trigger only data update. So it should contain at least a doc string that the values are optional. Maybe it should be a single param. -- Petr Vobornik -- 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
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
On 02/17/2016 06:29 PM, Petr Vobornik wrote: On 02/15/2016 04:20 PM, Pavel Vomacka wrote: 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 Hi, thanks for the patch. Hi, thank you for reviewing. 1. I don't like the fact that the resize handler registered in initialize method is active forever, even when viewing other facets. I moved the handler to the topology graph facet. It is also removed after hide event is emited. 2. The code will probably fail if there is other svg element present on the page. $('svg') searches for all svg elements in DOM, such search is usually slow and undeterministic. It is better to use a stored reference(if possible) or limit the search to some parent element, e.g. TopoGraph can store and then use its container. Would be funny if there were 2 graphs. Yep, you are right. I avoid using this type of searching in this patch. 3. Why is there the toFixed(1) call? Or more specifically on that position? It hides the fact that toFixed transforms Number to String and then '-' operator with Number on the right casts it back to Number. The toFixed(1) was used just because we don't need so accurate numbers, but in this patch this function is not used any more. 4. width could be just: this._svg.parent().width() The width is now solved by using this.content.width() in topology graph facet. I think that the calculating of width and height should be at the same place. That is why I didn't put calculating of width into the TopoGraph. 5. Your approach for bottom padding works well but I don't like that the component assumes that there is some col-sm-12 element on a page whose right padding is actually equal to space on the left of the svg. I agree, fixed. #1 and #5 makes me think that the resize logic should be moved topology facet. Something like: * register resize handler on facet's 'show' event * unregister resize handler on facet's 'hide' event (will solve #1) * on window resize, compute the size in topology facet, call new .resize(width, height) method of TopoGraph Then, we wouldn't have to search whole DOM for 'svg' elements to check if page is visible. The bottom padding can be obtained by: parseInt(this.content.css('paddingLeft')) where 'this' is facet. I followed these tips and here is a new patch. -- Pavel^3 Vomacka >From 597997b97bd48d1ec92c977fc5429c5c2711a8c1 Mon Sep 17 00:00:00 2001 From: Pavel Vomacka Date: Thu, 25 Feb 2016 15:02:04 +0100 Subject: [PATCH] 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 --- install/ui/src/freeipa/topology.js | 41 install/ui/src/freeipa/topology_graph.js | 15 ++-- 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/install/ui/src/freeipa/topology.js b/install/ui/src/freeipa/topology.js index 6e67484cc7542765056f0887928a64e4dc576836..a01296ee4b9a991c4655a004f947177bee6bc64f 100644 --- a/install/ui/src/freeipa/topology.js +++ b/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.height, size.width); + +$(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() - th
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
On 02/15/2016 04:20 PM, Pavel Vomacka wrote: 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 Hi, thanks for the patch. 1. I don't like the fact that the resize handler registered in initialize method is active forever, even when viewing other facets. 2. The code will probably fail if there is other svg element present on the page. $('svg') searches for all svg elements in DOM, such search is usually slow and undeterministic. It is better to use a stored reference(if possible) or limit the search to some parent element, e.g. TopoGraph can store and then use its container. Would be funny if there were 2 graphs. 3. Why is there the toFixed(1) call? Or more specifically on that position? It hides the fact that toFixed transforms Number to String and then '-' operator with Number on the right casts it back to Number. 4. width could be just: this._svg.parent().width() 5. Your approach for bottom padding works well but I don't like that the component assumes that there is some col-sm-12 element on a page whose right padding is actually equal to space on the left of the svg. #1 and #5 makes me think that the resize logic should be moved topology facet. Something like: * register resize handler on facet's 'show' event * unregister resize handler on facet's 'hide' event (will solve #1) * on window resize, compute the size in topology facet, call new .resize(width, height) method of TopoGraph Then, we wouldn't have to search whole DOM for 'svg' elements to check if page is visible. The bottom padding can be obtained by: parseInt(this.content.css('paddingLeft')) where 'this' is facet. -- Petr Vobornik -- 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
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
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 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
Re: [Freeipa-devel] [PATCH] 0005 webui: topology graph: canvas resizes itself according to the window size
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 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