Mercurial > gemma

changeset 4807:7cd40008124b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: image-export: render diagram offscreen and use mixins in fairway-diagram
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 28 Oct 2019 16:38:23 +0100
parents a905438a7935
children db450fcc8ed7
files client/src/components/fairway/Fairwayprofile.vue client/src/lib/mixins.js
diffstat 2 files changed, 26 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Oct 28 13:07:01 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Oct 28 16:38:23 2019 +0100
@@ -91,8 +91,8 @@
             <translate>Export to PDF</translate>
           </button>
           <a
-            @click="exportImage"
-            id="downloadimage"
+            @click="downloadImage('fairwaypng')"
+            id="fairwaypng"
             class="btn btn-sm btn-info text-white d-block w-100 mt-2"
             :download="`${fileName}.png`"
           >
@@ -160,7 +160,6 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
-import canvg from "canvg";
 
 const GROUND_COLOR = "#4A2F06";
 const WATER_COLOR = "#005DFF";
@@ -294,17 +293,6 @@
     }
   },
   methods: {
-    exportImage() {
-      const diagramContainer = document.getElementById("pdfContainer");
-      const { clientHeight, clientWidth } = diagramContainer;
-      const svg = document.querySelector("#pdfContainer>svg");
-      svg.setAttribute("height", clientHeight);
-      svg.setAttribute("width", clientWidth);
-      const canvas = document.createElement("canvas");
-      canvg(canvas, svg.outerHTML);
-      const imgData = canvas.toDataURL("image/png");
-      document.getElementById("downloadimage").setAttribute("href", imgData);
-    },
     close() {
       this.$store.commit(
         "application/paneSetup",
--- a/client/src/lib/mixins.js	Mon Oct 28 13:07:01 2019 +0100
+++ b/client/src/lib/mixins.js	Mon Oct 28 16:38:23 2019 +0100
@@ -169,15 +169,35 @@
   },
   methods: {
     downloadImage(elementName) {
-      const diagramContainer = document.getElementById(this.containerId);
+      const offScreen = document.querySelector("#offScreen");
+      const DPI = 96;
+      const svgWidth = this.millimeter2pixels(428, DPI);
+      const svgHeight = this.millimeter2pixels(119, DPI);
+      offScreen.style.width = `${svgWidth}px`;
+      offScreen.style.height = `${svgHeight}px`;
+      let zoomLevel = this.zoomStore;
+      const layout = this.getPrintLayout(svgHeight, svgWidth);
+      this.renderTo({
+        element: offScreen,
+        dimensions: this.getDimensions({
+          svgWidth: svgWidth,
+          svgHeight: svgHeight,
+          ...layout
+        }),
+        zoomLevel // passing the zoom level to draw the diagram on pdf at this point
+      });
+      const diagramContainer = document.getElementById("offScreen");
       const { clientHeight, clientWidth } = diagramContainer;
-      diagramContainer.firstElementChild.setAttribute("width", clientWidth);
-      diagramContainer.firstElementChild.setAttribute("height", clientHeight);
-      const svg = diagramContainer.firstElementChild.outerHTML;
+      diagramContainer.querySelector("svg").setAttribute("width", clientWidth);
+      diagramContainer
+        .querySelector("svg")
+        .setAttribute("height", clientHeight);
+      const svg = diagramContainer.querySelector("svg").outerHTML;
       const canvas = document.createElement("canvas");
       canvg(canvas, svg);
       const imgData = canvas.toDataURL("image/png");
       document.getElementById(elementName).setAttribute("href", imgData);
+      offScreen.removeChild(offScreen.firstChild);
     },
     addDiagram(position, offset, width, height) {
       let x = offset.x,