# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1542977851 -3600
# Node ID 3c37017f5eb85a122e013a7d5c550c8025d11cba
# Parent  d5eda9f79610ba4f3ceec6e2c983f039e2ea81e4
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
The recalculation of the available space (scaleFairwayProfile) needs to be done after removing the current diagram (in drawDiagram).

diff -r d5eda9f79610 -r 3c37017f5eb8 client/src/components/map/Main.vue
--- a/client/src/components/map/Main.vue	Fri Nov 23 13:52:34 2018 +0100
+++ b/client/src/components/map/Main.vue	Fri Nov 23 13:57:31 2018 +0100
@@ -3,8 +3,6 @@
         <Maplayer :split="showSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
         <FairwayProfile
             :additionalSurveys="additionalSurveys"
-            :height="height"
-            :width="width"
             :xScale="xAxis"
             :yScaleLeft="yAxisLeft"
             :yScaleRight="yAxisRight"
@@ -32,7 +30,6 @@
 import Maplayer from "./Maplayer";
 import FairwayProfile from "./fairway/Fairwayprofile";
 import { mapState } from "vuex";
-import debounce from "debounce";
 
 export default {
   name: "mainview",
@@ -97,30 +94,6 @@
         y: this.totalLength
       };
     }
-  },
-  created() {
-    window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100);
-    window.addEventListener("onbeforeprint", this.test);
-  },
-  updated() {
-    this.scaleFairwayProfile();
-  },
-  destroyed() {
-    window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
-  },
-  methods: {
-    test(evt) {
-      console.log("test: ", evt);
-    },
-    scaleFairwayProfile() {
-      if (!document.querySelector(".fairwayprofile")) return;
-      const clientHeight = document.querySelector(".fairwayprofile")
-        .clientHeight;
-      const clientWidth = document.querySelector(".fairwayprofile").clientWidth;
-      if (!clientHeight || !clientWidth) return;
-      this.height = clientHeight;
-      this.width = clientWidth;
-    }
   }
 };
 </script>
diff -r d5eda9f79610 -r 3c37017f5eb8 client/src/components/map/fairway/Fairwayprofile.vue
--- a/client/src/components/map/fairway/Fairwayprofile.vue	Fri Nov 23 13:52:34 2018 +0100
+++ b/client/src/components/map/fairway/Fairwayprofile.vue	Fri Nov 23 13:57:31 2018 +0100
@@ -155,14 +155,13 @@
 import { displayError, displayInfo } from "../../../lib/errors.js";
 import Feature from "ol/Feature";
 import LineString from "ol/geom/LineString";
+import debounce from "debounce";
 
 const GROUND_COLOR = "#4A2F06";
 
 export default {
   name: "fairwayprofile",
   props: [
-    "width",
-    "height",
     "xScale",
     "yScaleLeft",
     "yScaleRight",
@@ -175,7 +174,9 @@
       coordinatesInput: "",
       coordinatesSelect: null,
       cutLabel: "",
-      showLabelInput: false
+      showLabelInput: false,
+      width: null,
+      height: null
     };
   },
   computed: {
@@ -304,6 +305,7 @@
       this.coordinatesSelect = null;
       const chartDiv = document.querySelector(".fairwayprofile");
       d3.select(".fairwayprofile svg").remove();
+      this.scaleFairwayProfile();
       let svg = d3.select(chartDiv).append("svg");
       svg.attr("width", this.width);
       svg.attr("height", this.height);
@@ -514,6 +516,15 @@
           .attr("d", profileLine);
       }
     },
+    scaleFairwayProfile() {
+      if (!document.querySelector(".fairwayprofile")) return;
+      const clientHeight = document.querySelector(".fairwayprofile")
+        .clientHeight;
+      const clientWidth = document.querySelector(".fairwayprofile").clientWidth;
+      if (!clientHeight || !clientWidth) return;
+      this.height = clientHeight;
+      this.width = clientWidth;
+    },
     onCopyCoordinates() {
       displayInfo({
         title: "Success",
@@ -580,8 +591,17 @@
       });
     }
   },
+  created() {
+    window.addEventListener("resize", debounce(this.drawDiagram), 100);
+  },
   mounted() {
     this.drawDiagram();
+  },
+  updated() {
+    this.scaleFairwayProfile();
+  },
+  destroyed() {
+    window.removeEventListener("resize", debounce(this.drawDiagram));
   }
 };
 </script>