Mercurial > gemma

changeset 1312:3c37017f5eb8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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).
author Markus Kottlaender <markus@intevation.de>
date Fri, 23 Nov 2018 13:57:31 +0100
parents d5eda9f79610
children e4e35fb2d995
files client/src/components/map/Main.vue client/src/components/map/fairway/Fairwayprofile.vue
diffstat 2 files changed, 23 insertions(+), 30 deletions(-) [+]
line wrap: on
line diff
--- 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>
--- 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>