Mercurial > gemma

changeset 3941:7b3935a8d9ee

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactor addDiagram to mixin and remove code duplication
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 12 Jul 2019 11:02:46 +0200
parents f56d14b9d9f1
children cd8ba6599a99
files client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js
diffstat 6 files changed, 98 insertions(+), 236 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 12 10:21:00 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 12 11:02:46 2019 +0200
@@ -75,7 +75,6 @@
 import debounce from "debounce";
 import { mapState } from "vuex";
 import filters from "@/lib/filters.js";
-import svg2pdf from "svg2pdf.js";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -251,43 +250,6 @@
       });
       this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`);
     },
-    addDiagram(position, offset, width, height) {
-      let x = offset.x,
-        y = offset.y;
-      const svgWidth = this.millimeter2pixels(width, 80);
-      const svgHeight = this.millimeter2pixels(height, 80);
-      // draw the diagram in a separated html element to get the full size
-      const offScreen = document.querySelector("#offScreen");
-      offScreen.style.width = `${svgWidth}px`;
-      offScreen.style.height = `${svgHeight}px`;
-      this.renderTo({
-        element: offScreen,
-        dimensions: this.getDimensions({
-          svgWidth: svgWidth,
-          svgHeight: svgHeight,
-          main: { top: 0, right: 20, bottom: 50, left: 20 },
-          nav: {
-            top: svgHeight - 65,
-            right: 20,
-            bottom: 30,
-            left: 80
-          }
-        })
-      });
-      var svg = offScreen.querySelector("svg");
-      if (["topright", "bottomright"].indexOf(position) !== -1) {
-        x = this.pdf.width - offset.x - width;
-      }
-      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
-        y = this.pdf.height - offset.y - height;
-      }
-      svg2pdf(svg, this.pdf.doc, {
-        xOffset: x,
-        yOffset: y,
-        scale: 0.354
-      });
-      offScreen.removeChild(svg);
-    },
     addDiagramLegend(position, offset, color) {
       let x = offset.x,
         y = offset.y;
@@ -335,13 +297,8 @@
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
-    drawDiagram() {
-      const elem = document.querySelector("#" + this.containerId);
-      const svgWidth = elem != null ? elem.clientWidth : 0;
-      const svgHeight = elem != null ? elem.clientHeight : 0;
-      const dimensions = this.getDimensions({
-        svgHeight,
-        svgWidth,
+    getPrintLayout(svgHeight) {
+      return {
         main: { top: 0, right: 20, bottom: 50, left: 20 },
         nav: {
           top: svgHeight - 65,
@@ -349,6 +306,17 @@
           bottom: 30,
           left: 80
         }
+      };
+    },
+    drawDiagram() {
+      const elem = document.querySelector("#" + this.containerId);
+      const svgWidth = elem != null ? elem.clientWidth : 0;
+      const svgHeight = elem != null ? elem.clientHeight : 0;
+      const layout = this.getPrintLayout(svgHeight);
+      const dimensions = this.getDimensions({
+        svgHeight,
+        svgWidth,
+        ...layout
       });
       d3.select(".diagram-container svg").remove();
       this.renderTo({ element: ".diagram-container", dimensions });
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 12 10:21:00 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 12 11:02:46 2019 +0200
@@ -74,7 +74,6 @@
 import app from "@/main";
 import debounce from "debounce";
 import { mapState } from "vuex";
-import svg2pdf from "svg2pdf.js";
 import filters from "@/lib/filters.js";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
@@ -249,43 +248,6 @@
       });
       this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`);
     },
-    addDiagram(position, offset, width, height) {
-      let x = offset.x,
-        y = offset.y;
-      const svgWidth = this.millimeter2pixels(width, 80);
-      const svgHeight = this.millimeter2pixels(height, 80);
-      // draw the diagram in a separated html element to get the full size
-      const offScreen = document.querySelector("#offScreen");
-      offScreen.style.width = `${svgWidth}px`;
-      offScreen.style.height = `${svgHeight}px`;
-      this.renderTo({
-        element: offScreen,
-        dimensions: this.getDimensions({
-          svgWidth: svgWidth,
-          svgHeight: svgHeight,
-          main: { top: 0, right: 20, bottom: 50, left: 20 },
-          nav: {
-            top: svgHeight - 65,
-            right: 20,
-            bottom: 30,
-            left: 80
-          }
-        })
-      });
-      var svg = offScreen.querySelector("svg");
-      if (["topright", "bottomright"].indexOf(position) !== -1) {
-        x = this.pdf.width - offset.x - width;
-      }
-      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
-        y = this.pdf.height - offset.y - height;
-      }
-      svg2pdf(svg, this.pdf.doc, {
-        xOffset: x,
-        yOffset: y,
-        scale: 0.354
-      });
-      offScreen.removeChild(svg);
-    },
     addDiagramLegend(position, offset, color) {
       let x = offset.x,
         y = offset.y;
@@ -324,13 +286,8 @@
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
-    drawDiagram() {
-      const elem = document.querySelector("#" + this.containerId);
-      const svgWidth = elem != null ? elem.clientWidth : 0;
-      const svgHeight = elem != null ? elem.clientHeight : 0;
-      const dimensions = this.getDimensions({
-        svgHeight,
-        svgWidth,
+    getPrintLayout(svgHeight) {
+      return {
         main: { top: 0, right: 20, bottom: 50, left: 20 },
         nav: {
           top: svgHeight - 65,
@@ -338,6 +295,17 @@
           bottom: 30,
           left: 80
         }
+      };
+    },
+    drawDiagram() {
+      const elem = document.querySelector("#" + this.containerId);
+      const svgWidth = elem != null ? elem.clientWidth : 0;
+      const svgHeight = elem != null ? elem.clientHeight : 0;
+      const layout = this.getPrintLayout(svgHeight);
+      const dimensions = this.getDimensions({
+        svgHeight,
+        svgWidth,
+        ...layout
       });
       d3.select(".diagram-container svg").remove();
       this.renderTo({ element: ".diagram-container", dimensions });
--- a/client/src/components/fairway/Fairwayprofile.vue	Fri Jul 12 10:21:00 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Fri Jul 12 11:02:46 2019 +0200
@@ -149,7 +149,6 @@
 import * as d3 from "d3";
 import { mapState, mapGetters } from "vuex";
 import debounce from "debounce";
-import svg2pdf from "svg2pdf.js";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -339,49 +338,7 @@
         this.title.replace(/\s/g, "_").replace(/[():,]/g, "") + ".pdf"
       );
     },
-    addDiagram(position, offset, width, height) {
-      let x = offset.x,
-        y = offset.y;
-      const resolution = this.templateData.properties.resolution || 80;
-      const svgWidth = this.millimeter2pixels(width, resolution);
-      const svgHeight = this.millimeter2pixels(height, resolution);
-      const offScreen = document.querySelector("#offScreen");
-      offScreen.style.width = `${svgWidth}px`;
-      offScreen.style.height = `${svgHeight}px`;
-      this.renderTo({
-        element: offScreen,
-        dimensions: this.getDimensions({
-          svgWidth: svgWidth,
-          svgHeight: svgHeight,
-          main: {
-            top: 20,
-            right: 80,
-            bottom: 60,
-            left: 80
-          }
-        })
-      });
-      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;
-      }
-      if (!height) {
-        height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
-      }
-      if (["topright", "bottomright"].indexOf(position) !== -1) {
-        x = this.pdf.width - offset.x - width;
-      }
-      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
-        y = this.pdf.height - offset.y - height;
-      }
-      svg2pdf(svg, this.pdf.doc, {
-        xOffset: x,
-        yOffset: y,
-        scale: 0.353
-      });
-      offScreen.removeChild(svg);
-    },
+
     // Diagram legend
     addDiagramLegend(position, offset, color) {
       let x = offset.x,
@@ -430,21 +387,27 @@
       this.pdf.doc.circle(x, y + 25, 2, "FD");
       this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)");
     },
+    getPrintLayout() {
+      return {
+        main: {
+          top: 20,
+          right: 80,
+          bottom: 60,
+          left: 80
+        }
+      };
+    },
     drawDiagram() {
       d3.select(".diagram-container svg").remove();
       this.scaleFairwayProfile();
       if (!this.height || !this.width) return; // do not try to render when height and width are unknown
+      const layout = this.getPrintLayout(this.height);
       this.renderTo({
         element: ".diagram-container",
         dimensions: this.getDimensions({
           svgWidth: this.width,
           svgHeight: this.height,
-          main: {
-            top: 20,
-            right: 80,
-            bottom: 60,
-            left: 80
-          }
+          ...layout
         })
       });
     },
--- a/client/src/components/gauge/HydrologicalConditions.vue	Fri Jul 12 10:21:00 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Fri Jul 12 11:02:46 2019 +0200
@@ -104,7 +104,6 @@
 import * as d3 from "d3";
 import debounce from "debounce";
 import { startOfYear, endOfYear } from "date-fns";
-import svg2pdf from "svg2pdf.js";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -214,43 +213,6 @@
           " Hydrological-condition Diagram.pdf"
       );
     },
-    addDiagram(position, offset, width, height) {
-      let x = offset.x,
-        y = offset.y;
-      const svgWidth = this.millimeter2pixels(width, 80);
-      const svgHeight = this.millimeter2pixels(height, 80);
-      // draw the diagram in a separated html element to get the full size
-      const offScreen = document.querySelector("#offScreen");
-      offScreen.style.width = `${svgWidth}px`;
-      offScreen.style.height = `${svgHeight}px`;
-      this.renderTo({
-        element: offScreen,
-        dimensions: this.getDimensions({
-          svgWidth: svgWidth,
-          svgHeight: svgHeight,
-          main: { top: 20, right: 50, bottom: 110, left: 80 },
-          nav: {
-            top: svgHeight - 85,
-            right: 20,
-            bottom: 30,
-            left: 80
-          }
-        })
-      });
-      var svg = offScreen.querySelector("svg");
-      if (["topright", "bottomright"].indexOf(position) !== -1) {
-        x = this.pdf.width - offset.x - width;
-      }
-      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
-        y = this.pdf.height - offset.y - height;
-      }
-      svg2pdf(svg, this.pdf.doc, {
-        xOffset: x,
-        yOffset: y,
-        scale: 0.353
-      });
-      offScreen.removeChild(svg);
-    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;
@@ -312,6 +274,17 @@
       this.pdf.doc.circle(x, y + 20, 2, "FD");
       this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude");
     },
+    getPrintLayout(svgHeight) {
+      return {
+        main: { top: 20, right: 50, bottom: 110, left: 80 },
+        nav: {
+          top: svgHeight - 85,
+          right: 20,
+          bottom: 30,
+          left: 80
+        }
+      };
+    },
     drawDiagram() {
       // remove old diagram
       d3.select("#" + this.containerId + " svg").remove();
@@ -320,18 +293,13 @@
         return;
       const svgWidth = el.clientWidth;
       const svgHeight = el.clientHeight;
+      const layout = this.getPrintLayout(svgHeight);
       this.renderTo({
         element: `#${this.containerId}`,
         dimensions: this.getDimensions({
           svgWidth: svgWidth,
           svgHeight: svgHeight,
-          main: { top: 20, right: 50, bottom: 110, left: 80 },
-          nav: {
-            top: svgHeight - 85,
-            right: 20,
-            bottom: 30,
-            left: 80
-          }
+          ...layout
         })
       });
     },
--- a/client/src/components/gauge/Waterlevel.vue	Fri Jul 12 10:21:00 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Jul 12 11:02:46 2019 +0200
@@ -109,7 +109,6 @@
 import { lineChunked } from "d3-line-chunked";
 import { endOfDay } from "date-fns";
 import debounce from "debounce";
-import svg2pdf from "svg2pdf.js";
 import { saveAs } from "file-saver";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
@@ -250,49 +249,6 @@
           });
       }
     },
-    addDiagram(position, offset, width, height) {
-      let x = offset.x,
-        y = offset.y;
-      const svgWidth = this.millimeter2pixels(
-        width,
-        this.templateData.properties.resolution || 80
-      );
-      const svgHeight = this.millimeter2pixels(
-        height,
-        this.templateData.properties.resolution || 80
-      );
-      // draw the diagram in a separated html element to get the full size
-      const offScreen = document.querySelector("#offScreen");
-      offScreen.style.width = `${svgWidth}px`;
-      offScreen.style.height = `${svgHeight}px`;
-      this.renderTo({
-        element: offScreen,
-        dimensions: this.getDimensions({
-          svgWidth: svgWidth,
-          svgHeight: svgHeight,
-          main: { top: 20, right: 50, bottom: 110, left: 80 },
-          nav: {
-            top: svgHeight - 85,
-            right: 20,
-            bottom: 30,
-            left: 80
-          }
-        })
-      });
-      var svg = offScreen.querySelector("svg");
-      if (["topright", "bottomright"].indexOf(position) !== -1) {
-        x = this.pdf.width - offset.x - width;
-      }
-      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
-        y = this.pdf.height - offset.y - height;
-      }
-      svg2pdf(svg, this.pdf.doc, {
-        xOffset: x,
-        yOffset: y,
-        scale: 0.353
-      });
-      offScreen.removeChild(svg);
-    },
     // Diagram legend
     addDiagramLegend(position, offset, color) {
       let x = offset.x;
@@ -323,25 +279,31 @@
       this.pdf.doc.circle(x, y + 5, 0.6, "FD");
       this.pdf.doc.text(x + 3, y + 6, "Prediction");
     },
+    getPrintLayout(svgHeight) {
+      return {
+        main: { top: 20, right: 50, bottom: 110, left: 80 },
+        nav: {
+          top: svgHeight - 85,
+          right: 20,
+          bottom: 30,
+          left: 80
+        }
+      };
+    },
     drawDiagram() {
       // remove old diagram and exit if necessary data is missing
       d3.select("#" + this.containerId + " svg").remove();
       const elem = document.querySelector("#" + this.containerId);
       const svgWidth = elem.clientWidth;
       const svgHeight = elem.clientHeight;
+      const layout = this.getPrintLayout(svgHeight);
       if (!this.selectedGauge || !this.waterlevels.length || !elem) return;
       this.renderTo({
         element: `#${this.containerId}`,
         dimensions: this.getDimensions({
           svgWidth: svgWidth,
           svgHeight: svgHeight,
-          main: { top: 20, right: 50, bottom: 110, left: 80 },
-          nav: {
-            top: svgHeight - 85,
-            right: 20,
-            bottom: 30,
-            left: 80
-          }
+          ...layout
         })
       });
     },
--- a/client/src/lib/mixins.js	Fri Jul 12 10:21:00 2019 +0200
+++ b/client/src/lib/mixins.js	Fri Jul 12 11:02:46 2019 +0200
@@ -14,6 +14,7 @@
  * * Bernhard Reiter <bernhard.reiter@intevation.de>
  */
 import jsPDF from "jspdf-yworks";
+import svg2pdf from "svg2pdf.js";
 import locale2 from "locale2";
 import { mapState } from "vuex";
 import { HTTP } from "@/lib/http";
@@ -133,6 +134,38 @@
     ...mapState("user", ["user"])
   },
   methods: {
+    addDiagram(position, offset, width, height) {
+      let x = offset.x,
+        y = offset.y;
+      const svgWidth = this.millimeter2pixels(width, 80);
+      const svgHeight = this.millimeter2pixels(height, 80);
+      // draw the diagram in a separated html element to get the full size
+      const offScreen = document.querySelector("#offScreen");
+      offScreen.style.width = `${svgWidth}px`;
+      offScreen.style.height = `${svgHeight}px`;
+      const layout = this.getPrintLayout(svgHeight);
+      this.renderTo({
+        element: offScreen,
+        dimensions: this.getDimensions({
+          svgWidth: svgWidth,
+          svgHeight: svgHeight,
+          ...layout
+        })
+      });
+      var svg = offScreen.querySelector("svg");
+      if (["topright", "bottomright"].indexOf(position) !== -1) {
+        x = this.pdf.width - offset.x - width;
+      }
+      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
+        y = this.pdf.height - offset.y - height;
+      }
+      svg2pdf(svg, this.pdf.doc, {
+        xOffset: x,
+        yOffset: y,
+        scale: 0.354
+      });
+      offScreen.removeChild(svg);
+    },
     getPaperDimensions(format) {
       const dims = {
         A3: {