Mercurial > gemma
changeset 3857:6ce80daf8413
Hydrological conditions: render svg in offscreen element
Although one might create a dynamic element via document.createElement()
rendering to this dynamically element results in malformed PDF output.
Therefore the approach of an element within the DOM was chosen.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 09 Jul 2019 14:35:01 +0200 |
parents | 0b8b62fd8cea |
children | 55e503270f38 |
files | client/src/components/App.vue client/src/components/gauge/HydrologicalConditions.vue |
diffstat | 2 files changed, 13 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/App.vue Tue Jul 09 14:22:01 2019 +0200 +++ b/client/src/components/App.vue Tue Jul 09 14:35:01 2019 +0200 @@ -29,6 +29,10 @@ <vue-snotify /> <Popup /> <KeyboardHandler /> + <div + id="offScreen" + style="position: absolute; z-index: -1; top: 600px;" + ></div> </div> </template>
--- a/client/src/components/gauge/HydrologicalConditions.vue Tue Jul 09 14:22:01 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Tue Jul 09 14:35:01 2019 +0200 @@ -81,10 +81,6 @@ </div> </div> </div> - <div - id="tmpContainer" - style="position: absolute; z-index: -1; top: 600px;" - ></div> </div> </template> @@ -256,15 +252,11 @@ 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 - this.containerId = "tmpContainer"; - // set width and height - document.querySelector("#tmpContainer").style.width = "1550px"; - document.querySelector("#tmpContainer").style.height = "400px"; - this.drawDiagram(); - var svg = document - .getElementById(this.containerId) - .getElementsByTagName("svg")[0]; - this.containerId = "hydrologicalconditions-diagram-container"; + const offScreen = document.querySelector("#offScreen"); + offScreen.style.width = "1550px"; + offScreen.style.height = "400px"; + this.renderTo(offScreen); + var svg = offScreen.querySelector("svg"); // use default width,height if they are missing in the template definition if (!width) { width = this.templateData.properties.paperSize === "a3" ? 380 : 290; @@ -350,6 +342,9 @@ // remove old diagram d3.select("#" + this.containerId + " svg").remove(); if (!this.selectedGauge || !this.longtermWaterlevels.length) return; + this.renderTo("#" + this.containerId); + }, + renderTo(element) { // PREPARE HELPERS // HDC/LDC/MW for the selected gauge @@ -373,7 +368,7 @@ // create svg this.svg = d3 - .select("#" + this.containerId) + .select(element) .append("svg") .attr("width", "100%") .attr("height", "100%");