--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Jun 24 10:28:01 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Wed Jul 10 14:27:40 2019 +0200
@@ -61,24 +61,22 @@
  * 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
  *
  * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- * Markus Kottländer <markus.kottlaender@intevation.de>
- * Fadi Abbud <fadi.abbud@intevation.de>
+ * * Thomas Junk <thomas.junk@intevation.de>
+ * * Markus Kottländer <markus.kottlaender@intevation.de>
+ * * Fadi Abbud <fadi.abbud@intevation.de>
  */
 import * as d3 from "d3";
 import app from "@/main";
 import debounce from "debounce";
-import { diagram } from "@/lib/mixins";
 import { mapState } from "vuex";
 import filters from "@/lib/filters.js";
-import jsPDF from "jspdf";
-import canvg from "canvg";
-import { pdfgen } from "@/lib/mixins";
+import svg2pdf from "svg2pdf.js";
+import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { FREQUENCIES } from "@/store/fairwayavailability";
@@ -86,7 +84,7 @@
 const hoursInDays = x => x / 24;
 
 export default {
-  mixins: [diagram, pdfgen],
+  mixins: [diagram, pdfgen, templateLoader],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -120,7 +118,7 @@
           {
             type: "diagram",
             position: "topleft",
-            offset: { x: 20, y: 60 },
+            offset: { x: 20, y: 30 },
             width: 290,
             height: 100
           },
@@ -134,7 +132,7 @@
           {
             type: "diagramlegend",
             position: "topleft",
-            offset: { x: 30, y: 160 },
+            offset: { x: 30, y: 170 },
             color: "black"
           }
         ]
@@ -269,14 +267,16 @@
         return;
       }
       if (this.form.template) {
-        HTTP.get("/templates/diagram/" + this.form.template.name, {
-          headers: {
-            "X-Gemma-Auth": localStorage.getItem("token"),
-            "Content-type": "text/xml; charset=UTF-8"
-          }
-        })
+        this.loadTemplates("/templates/diagram/" + this.form.template.name)
           .then(response => {
-            this.templateData = response.data.template_data;
+            this.prepareImages(response.data.template_data.elements).then(
+              values => {
+                values.forEach(v => {
+                  response.data.template_data.elements[v.index].url = v.url;
+                });
+                this.templateData = response.data.template_data;
+              }
+            );
           })
           .catch(e => {
             const { status, data } = e.response;
@@ -288,119 +288,18 @@
       }
     },
     downloadPDF() {
-      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;
-      if (this.templateData) {
-        // default values if some are missing in template
-        let defaultFontSize = 11,
-          defaultColor = "black",
-          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 "diagramtitle": {
-              let title = `Available Fairway Depth: ${this.featureName}`;
-              this.addDiagramTitle(
-                e.position,
-                e.offset || defaultOffset,
-                e.fontsize || defaultFontSize,
-                e.color || defaultColor,
-                title
-              );
-              break;
-            }
-            case "diagramlegend": {
-              this.addDiagramLegend(
-                e.position,
-                e.offset || defaultOffset,
-                e.color || defaultColor
-              );
-              break;
-            }
-            case "text": {
-              this.addText(
-                e.position,
-                e.offset || defaultOffset,
-                e.width || defaultWidth,
-                e.fontsize || defaultFontSize,
-                e.color || defaultTextColor,
-                e.text || ""
-              );
-              break;
-            }
-            case "image": {
-              this.addImage(
-                e.url,
-                e.format || "",
-                e.position,
-                e.offset || defaultOffset,
-                e.width || 90,
-                e.height || 60
-              );
-              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 title = `Available Fairway Depth: ${this.featureName}`;
+      this.generatePDF({
+        templateData: this.templateData,
+        diagramTitle: title
+      });
       this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`);
     },
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
-      var svg = this.$refs.diagramContainer.innerHTML;
-      if (svg) {
-        svg = svg.replace(/\r?\n|\r/g, "").trim();
-      }
+      var svgElement = this.$refs.diagramContainer.firstElementChild;
+
       // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
@@ -414,16 +313,12 @@
       if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
         y = this.pdf.height - offset.y - height;
       }
-      var canvas = document.createElement("canvas");
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight / 2;
-      canvg(canvas, svg, {
-        ignoreMouse: true,
-        ignoreAnimation: true,
-        ignoreDimensions: true
+
+      svg2pdf(svgElement, this.pdf.doc, {
+        xOffset: x,
+        yOffset: y,
+        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 // TODO depend on the size and aspect ration on paper
       });
-      var imgData = canvas.toDataURL("image/png");
-      this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
     },
     addDiagramLegend(position, offset, color) {
       let x = offset.x,
@@ -648,7 +543,7 @@
         .attr("y", this.dimensions.mainHeight + this.paddingTop - 5)
         .attr("x", this.widthPerItem / 2)
         .attr("text-anchor", "middle")
-        .attr("font-size", "smaller");
+        .attr("font-size", "9");
     },
     drawScaleLabel() {
       this.diagram
@@ -657,10 +552,10 @@
         .attr("text-anchor", "middle")
         .attr("x", 0)
         .attr("y", 0)
-        .attr("dy", "1.5em")
+	.attr("dy", "10")
         .attr(
           "transform",
-          `translate(0, ${(this.dimensions.mainHeight + this.paddingTop) /
+          `translate(2, ${(this.dimensions.mainHeight + this.paddingTop) /
             2}), rotate(-90)`
         );
     },