# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1562919660 -7200
# Node ID f56d14b9d9f1ce3142ba76aceb9248dfa8fdef0e
# Parent  f9de2ea2706ef9d4b79ce23353904b4cba9d53c0
available_fairway_depth_lnwl: leverage mixin

diff -r f9de2ea2706e -r f56d14b9d9f1 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 12 10:17:09 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 12 10:21:00 2019 +0200
@@ -76,13 +76,13 @@
 import { mapState } from "vuex";
 import svg2pdf from "svg2pdf.js";
 import filters from "@/lib/filters.js";
-import { pdfgen, templateLoader } from "@/lib/mixins";
+import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
 
 export default {
-  mixins: [pdfgen, templateLoader],
+  mixins: [diagram, pdfgen, templateLoader],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -262,7 +262,14 @@
         element: offScreen,
         dimensions: this.getDimensions({
           svgWidth: svgWidth,
-          svgHeight: svgHeight
+          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");
@@ -317,26 +324,20 @@
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
-    getDimensions({ svgHeight, svgWidth }) {
-      const mainMargin = { top: 0, right: 20, bottom: 50, left: 20 };
-      const navMargin = {
-        top: svgHeight - mainMargin.top - 65,
-        right: 20,
-        bottom: 30,
-        left: 80
-      };
-      const width = Number(svgWidth) - mainMargin.left - mainMargin.right;
-      const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom;
-      const navHeight = Number(svgHeight) - navMargin.top - navMargin.bottom;
-      return { width, mainHeight, navHeight, mainMargin, navMargin };
-    },
     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
+        svgWidth,
+        main: { top: 0, right: 20, bottom: 50, left: 20 },
+        nav: {
+          top: svgHeight - 65,
+          right: 20,
+          bottom: 30,
+          left: 80
+        }
       });
       d3.select(".diagram-container svg").remove();
       this.renderTo({ element: ".diagram-container", dimensions });