--- 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 });