Mercurial > gemma

changeset 3682:c086f5176ef2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: diagrams: fixed removal of resize listener listeners were not removed so diagrams were redrawn even if they were closed/not visible/mounted, leading to console errors.
author Markus Kottlaender <markus@intevation.de>
date Tue, 18 Jun 2019 12:53:05 +0200
parents c9e1848a516a
children 4a00ff7e44f0
files client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 5 files changed, 24 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Jun 18 12:43:01 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Jun 18 12:53:05 2019 +0200
@@ -93,6 +93,7 @@
   data() {
     return {
       containerId: "availablefairwaydepth",
+      resizeListenerFunction: null,
       loading: false,
       width: 1000,
       height: 600,
@@ -147,7 +148,11 @@
     };
   },
   created() {
-    window.addEventListener("resize", debounce(this.drawDiagram), 200);
+    this.resizeListenerFunction = debounce(this.drawDiagram, 100);
+    window.addEventListener("resize", this.resizeListenerFunction);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.resizeListenerFunction);
   },
   mounted() {
     this.drawDiagram();
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Tue Jun 18 12:43:01 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Tue Jun 18 12:53:05 2019 +0200
@@ -90,6 +90,7 @@
   data() {
     return {
       containerId: "availablefairwaydepthlnwl",
+      resizeListenerFunction: null,
       loading: false,
       labelPaddingTop: 15,
       scalePaddingLeft: 50,
@@ -138,7 +139,11 @@
     };
   },
   created() {
-    window.addEventListener("resize", debounce(this.drawDiagram), 200);
+    this.resizeListenerFunction = debounce(this.drawDiagram, 100);
+    window.addEventListener("resize", this.resizeListenerFunction);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.resizeListenerFunction);
   },
   mounted() {
     this.drawDiagram();
--- a/client/src/components/fairway/Fairwayprofile.vue	Tue Jun 18 12:43:01 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Tue Jun 18 12:53:05 2019 +0200
@@ -165,6 +165,7 @@
   },
   data() {
     return {
+      resizeListenerFunction: null,
       width: null,
       height: null,
       margin: {
@@ -802,7 +803,8 @@
     }
   },
   created() {
-    window.addEventListener("resize", debounce(this.drawDiagram), 100);
+    this.resizeListenerFunction = debounce(this.drawDiagram, 100);
+    window.addEventListener("resize", this.resizeListenerFunction);
   },
   mounted() {
     this.drawDiagram();
@@ -835,7 +837,7 @@
     this.drawDiagram();
   },
   destroyed() {
-    window.removeEventListener("resize", debounce(this.drawDiagram));
+    window.removeEventListener("resize", this.resizeListenerFunction);
   }
 };
 </script>
--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Jun 18 12:43:01 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Jun 18 12:53:05 2019 +0200
@@ -122,6 +122,7 @@
   data() {
     return {
       containerId: "hydrologicalconditions-diagram-container",
+      resizeListenerFunction: null,
       svg: null,
       diagram: null,
       navigation: null,
@@ -1116,7 +1117,8 @@
     }
   },
   created() {
-    window.addEventListener("resize", debounce(this.drawDiagram), 100);
+    this.resizeListenerFunction = debounce(this.drawDiagram, 100);
+    window.addEventListener("resize", this.resizeListenerFunction);
   },
   mounted() {
     this.drawDiagram();
@@ -1149,7 +1151,7 @@
     this.drawDiagram();
   },
   destroyed() {
-    window.removeEventListener("resize", debounce(this.drawDiagram));
+    window.removeEventListener("resize", this.resizeListenerFunction);
   }
 };
 </script>
--- a/client/src/components/gauge/Waterlevel.vue	Tue Jun 18 12:43:01 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Tue Jun 18 12:53:05 2019 +0200
@@ -126,6 +126,7 @@
   data() {
     return {
       containerId: "waterlevel-diagram-container",
+      resizeListenerFunction: null,
       svg: null,
       diagram: null,
       navigation: null,
@@ -1257,7 +1258,8 @@
     }
   },
   created() {
-    window.addEventListener("resize", debounce(this.drawDiagram), 100);
+    this.resizeListenerFunction = debounce(this.drawDiagram, 100);
+    window.addEventListener("resize", this.resizeListenerFunction);
   },
   mounted() {
     // Nasty but necessary if we don't want to use the updated hook to re-draw
@@ -1295,7 +1297,7 @@
       });
   },
   destroyed() {
-    window.removeEventListener("resize", debounce(this.drawDiagram));
+    window.removeEventListener("resize", this.resizeListenerFunction);
   }
 };
 </script>