Mercurial > gemma

changeset 3794:9156890179e2 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve waterlevel diagram pdf * Change base of calculation back to millimeter. The `pt` was a workround which is not necessary with svg2pdf anymore (since de90ddc9b2e4ea24ea7f835162e86f8dec8b68db). * Adjust arbitrary scaling to have a chance for the svg to be on the page. Right now the size of the svg on the page depends on the size of the svg on screen.
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 03 Jul 2019 17:48:19 +0200
parents d428f283fe10
children b330e014c655
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 21 insertions(+), 37 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Wed Jul 03 17:19:28 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Wed Jul 03 17:48:19 2019 +0200
@@ -252,35 +252,35 @@
     downloadPDF() {
       this.pdf.doc = new jsPDF(
         "l",
-        "pt",
+        "mm",
         this.templateData.properties.paperSize
       );
       // pdf width and height in millimeter (landscape)
       this.pdf.width =
-        this.templateData.properties.paperSize === "a3" ? 420 : 595.28;
+        this.templateData.properties.paperSize === "a3" ? 420 : 297;
       this.pdf.height =
-        this.templateData.properties.paperSize === "a3" ? 841.89 : 595.28;
+        this.templateData.properties.paperSize === "a3" ? 297 : 210;
       // check the template elements
       if (this.templateData) {
         let defaultFontSize = 11,
           defaultColor = "black",
-          defaultWidth = 70 * 2.83,
+          defaultWidth = 70,
           defaultTextColor = "black",
           defaultBorderColor = "white",
           defaultBgColor = "white",
           defaultRounding = 2,
-          defaultPadding = 2;
-        //defaultOffset = { x: 0, y: 0 };
+          defaultPadding = 2,
+          defaultOffset = { x: 0, y: 0 };
         this.templateData.elements.forEach(e => {
           switch (e.type) {
             case "diagram": {
-              this.addDiagram(e.position, this.calculateOffset(e.offset));
+              this.addDiagram(e.position, e.offset || defaultOffset);
               break;
             }
             case "diagramlegend": {
               this.addDiagramLegend(
                 e.position,
-                this.calculateOffset(e.offset),
+                e.offset || defaultOffset,
                 e.color || defaultColor
               );
               break;
@@ -300,7 +300,7 @@
                 this.dateTo.toLocaleDateString();
               this.addDiagramTitle(
                 e.position,
-                this.calculateOffset(e.offset),
+                e.offset || defaultOffset,
                 e.fontsize || defaultFontSize,
                 e.color || defaultColor,
                 gaugeInfo
@@ -310,8 +310,8 @@
             case "text": {
               this.addText(
                 e.position,
-                this.calculateOffset(e.offset),
-                e.width * 2.83 || defaultWidth,
+                e.offset || defaultOffset,
+                e.width || defaultWidth,
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
                 e.text || ""
@@ -323,18 +323,18 @@
                 e.url,
                 e.format || "",
                 e.position,
-                this.calculateOffset(e.offset),
-                e.width * 2.83 || 90 * 2.83,
-                e.height * 2.83 || 60 * 2.83
+                e.offset || defaultOffset,
+                e.width || 90,
+                e.height || 60
               );
               break;
             }
             case "box": {
               this.addBox(
                 e.position,
-                this.calculateOffset(e.offset),
-                e.width * 2.83 || 90 * 2.83,
-                e.height * 2.83 || 60 * 2.83,
+                e.offset || defaultOffset,
+                e.width || 90,
+                e.height || 60,
                 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
                 e.color || defaultBgColor,
                 e.brcolor || defaultBorderColor
@@ -344,9 +344,9 @@
             case "textbox": {
               this.addTextBox(
                 e.position,
-                this.calculateOffset(e.offset),
-                e.width * 2.83,
-                e.height * 2.83,
+                e.offset || defaultOffset,
+                e.width,
+                e.height,
                 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
                 e.padding || defaultPadding,
                 e.fontsize || defaultFontSize,
@@ -364,19 +364,6 @@
         this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
       );
     },
-    calculateOffset(offset) {
-      let tmp;
-      let defaultOffset = { x: 0, y: 0 };
-      if (offset) {
-        tmp = {
-          x: offset.x * 2.83,
-          y: offset.y * 2.83
-        };
-      } else {
-        tmp = defaultOffset;
-      }
-      return tmp;
-    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;
@@ -459,10 +446,7 @@
       svg2pdf(svg, this.pdf.doc, {
         xOffset: x,
         yOffset: y,
-        scale:
-          this.templateData.properties.paperSize === "a3"
-            ? 2 * (25.4 / 72)
-            : 1.5 * (25.4 / 72)
+        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.25
       });
 
       this.containerId = "waterlevel-diagram-container";