Mercurial > gemma

changeset 3820:ee0066dcfb93 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Move hydrological conditions to svg2pdf Added experimental aspectratio for A4. ToDO: Find better values.
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 05 Jul 2019 13:16:53 +0200
parents 27bfa6b0c194
children 252dc1d98a08
files client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 4 files changed, 13 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 05 12:54:27 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 05 13:16:53 2019 +0200
@@ -316,7 +316,7 @@
       svg2pdf(svgElement, this.pdf.doc, {
         xOffset: x,
         yOffset: y,
-        scale: 0.4 // TODO depend on the size and aspect ration on paper
+        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 // TODO depend on the size and aspect ration on paper
       });
     },
     addDiagramLegend(position, offset, color) {
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 05 12:54:27 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 05 13:16:53 2019 +0200
@@ -317,7 +317,7 @@
       svg2pdf(svgElement, this.pdf.doc, {
         xOffset: x,
         yOffset: y,
-        scale: 0.4 // TODO depend on the size and aspect ration on paper
+        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 // TODO depend on the size and aspect ration on paper
       });
     },
     addDiagramLegend(position, offset, color) {
--- a/client/src/components/gauge/HydrologicalConditions.vue	Fri Jul 05 12:54:27 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Fri Jul 05 13:16:53 2019 +0200
@@ -108,7 +108,7 @@
 import * as d3 from "d3";
 import debounce from "debounce";
 import { startOfYear, endOfYear } from "date-fns";
-import canvg from "canvg";
+import svg2pdf from "svg2pdf.js";
 import { pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -273,20 +273,10 @@
             .clientHeight + "px";
         this.drawDiagram();
       }
-      var svg = document.getElementById(this.containerId).innerHTML;
-      if (svg) {
-        svg = svg.replace(/\r?\n|\r/g, "").trim();
-      }
+      var svg = document
+        .getElementById(this.containerId)
+        .getElementsByTagName("svg")[0];
       this.containerId = "hydrologicalconditions-diagram-container";
-      var canvas = document.createElement("canvas");
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight / 2;
-      canvg(canvas, svg, {
-        ignoreMouse: true,
-        ignoreAnimation: true,
-        ignoreDimensions: true
-      });
-      var imgData = canvas.toDataURL("image/png");
       // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
@@ -300,7 +290,12 @@
       if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
         y = this.pdf.height - offset.y - height;
       }
-      this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
+      svg2pdf(svg, this.pdf.doc, {
+        xOffset: x,
+        yOffset: y,
+        // TODO depend on the size and aspect ration on paper
+        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18
+      });
     },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
--- a/client/src/components/gauge/Waterlevel.vue	Fri Jul 05 12:54:27 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Jul 05 13:16:53 2019 +0200
@@ -315,7 +315,7 @@
         xOffset: x,
         yOffset: y,
         // TODO depend on the size and aspect ration on paper
-        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.25
+        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18
       });
 
       this.containerId = "waterlevel-diagram-container";