Mercurial > gemma
changeset 3247:35c124338f36
client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions)
* draw the full diagram in case when tow diagrams are showen on screen
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 13 May 2019 12:42:18 +0200 |
parents | 64324aaeb1fb |
children | 3159ee3bcb16 |
files | client/src/components/gauge/HydrologicalConditions.vue |
diffstat | 1 files changed, 23 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Mon May 13 09:41:35 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Mon May 13 12:42:18 2019 +0200 @@ -57,6 +57,10 @@ </div> </div> </div> + <div + id="tmpContainer" + style="position: absolute; z-index: -1; top: 600px;" + ></div> </div> </template> @@ -284,10 +288,29 @@ addDiagram(position, offset, width, height) { let x = offset.x, y = offset.y; + // check if there are tow diagrams on the screen + // draw the diagram in a separated html element to get the full size + if ( + ["GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"].indexOf(this.paneSetup) !== + -1 + ) { + this.containerId = "tmpContainer"; + // set width and height + document.querySelector("#tmpContainer").style.width = + document.querySelector("#hydrologicalconditions-diagram-container") + .clientWidth * + 2 + + "px"; + document.querySelector("#tmpContainer").style.height = + document.querySelector("#hydrologicalconditions-diagram-container") + .clientHeight + "px"; + this.drawDiagram(); + } var svg = document.getElementById(this.containerId).innerHTML; if (svg) { svg = svg.replace(/\r?\n|\r/g, "").trim(); } + this.containerId = "hydrologicalconditions-diagram-container"; var canvas = document.createElement("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight / 2;