Mercurial > gemma

changeset 3857:6ce80daf8413

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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%");