--- a/client/src/components/fairway/Fairwayprofile.vue	Thu Jul 04 10:15:46 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Thu Jul 04 10:29:48 2019 +0200
@@ -136,7 +136,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
  *
- * Copyright (C) 2018 by via donau
+ * Copyright (C) 2018, 2019 by via donau
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
  *
@@ -148,7 +148,6 @@
 import * as d3 from "d3";
 import { mapState, mapGetters } from "vuex";
 import debounce from "debounce";
-import jsPDF from "jspdf-yworks";
 import canvg from "canvg";
 import { pdfgen } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
@@ -351,113 +350,14 @@
       }
     },
     downloadPDF() {
-      if (this.templateData) {
-        this.pdf.doc = new jsPDF(
-          "l",
-          "mm",
-          this.templateData.properties.paperSize
-        );
-        // pdf width and height in millimeter (landscape)
-        this.pdf.width =
-          this.templateData.properties.paperSize === "a3" ? 420 : 297;
-        this.pdf.height =
-          this.templateData.properties.paperSize === "a3" ? 297 : 210;
-        // default values if some are missing in template
-        let defaultFontSize = 11,
-          defaultWidth = 70,
-          defaultTextColor = "black",
-          defaultBorderColor = "white",
-          defaultBgColor = "white",
-          defaultRounding = 2,
-          defaultPadding = 2,
-          defaultOffset = { x: 0, y: 0 };
-        this.templateData.elements.forEach(e => {
-          switch (e.type) {
-            case "diagram": {
-              this.addDiagram(
-                e.position,
-                e.offset || defaultOffset,
-                e.width,
-                e.height
-              );
-              break;
-            }
-            case "diagramlegend": {
-              this.addDiagramLegend(
-                e.position,
-                e.offset || defaultOffset,
-                e.color || defaultTextColor
-              );
-              break;
-            }
-            case "diagramtitle": {
-              let fairwayInfo =
-                this.selectedBottleneck +
-                " (" +
-                this.selectedSurvey.date_info +
-                ")";
-              this.addDiagramTitle(
-                e.position,
-                e.offset || defaultOffset,
-                e.fontsize || defaultFontSize,
-                e.color || defaultTextColor,
-                fairwayInfo
-              );
-              break;
-            }
-            case "image": {
-              this.addImage(
-                e.url,
-                e.format || "",
-                e.position,
-                e.offset || defaultOffset,
-                e.width || 90,
-                e.height || 60
-              );
-              break;
-            }
-            case "text": {
-              this.addText(
-                e.position,
-                e.offset || defaultOffset,
-                e.width || defaultWidth,
-                e.fontsize || defaultFontSize,
-                e.color || defaultTextColor,
-                e.text || ""
-              );
-              break;
-            }
-            case "box": {
-              this.addBox(
-                e.position,
-                e.offset || defaultOffset,
-                e.width || 90,
-                e.height || 60,
-                e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
-                e.color || defaultBgColor,
-                e.brcolor || defaultBorderColor
-              );
-              break;
-            }
-            case "textbox": {
-              this.addTextBox(
-                e.position,
-                e.offset || defaultOffset,
-                e.width,
-                e.height,
-                e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
-                e.padding || defaultPadding,
-                e.fontsize || defaultFontSize,
-                e.color || defaultTextColor,
-                e.background || defaultBgColor,
-                e.text || "",
-                e.brcolor || defaultBorderColor
-              );
-              break;
-            }
-          }
-        });
-      }
+      let fairwayInfo =
+        this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")";
+
+      this.generatePDF({
+        templateData: this.templateData,
+        diagramTitle: fairwayInfo
+      });
+
       this.pdf.doc.save(
         this.title.replace(/\s/g, "_").replace(/[():,]/g, "") + ".pdf"
       );

--- a/client/src/lib/mixins.js	Thu Jul 04 10:15:46 2019 +0200
+++ b/client/src/lib/mixins.js	Thu Jul 04 10:29:48 2019 +0200
@@ -84,14 +84,12 @@
     },
     generatePDF(params) {
       // creates a new jsPDF object into this.pdf.doc
+      // will call functions that the calling context has to provide
+      // as specified in the templateData
       let templateData = params["templateData"];
       let diagramTitle = params["diagramTitle"];
 
-      this.pdf.doc = new jsPDF(
-        "l",
-        "mm",
-        this.templateData.properties.paperSize
-      );
+      this.pdf.doc = new jsPDF("l", "mm", templateData.properties.paperSize);
       // pdf width and height in millimeter (landscape)
       if (templateData.properties.paperSize === "a3") {
         this.pdf.width = 420;
@@ -189,7 +187,6 @@
         });
       }
     },
-
     // add text at specific coordinates and do line breaks
     addText(position, offset, width, fontSize, color, text) {
       text = this.replacePlaceholders(text);