Mercurial > gemma

changeset 5072:51b30f7c64a2 time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Timeslider proper rescale
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 11 Mar 2020 16:45:13 +0100
parents 45d868476dea
children 9bbe9d0a2dfb
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 5 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Wed Mar 11 16:34:03 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Wed Mar 11 16:45:13 2020 +0100
@@ -75,6 +75,7 @@
 let zoom = null;
 let xScale = null;
 let xAxis = null;
+let currentScaleFactor = 1;
 
 export default {
   name: "timeslider",
@@ -265,7 +266,7 @@
     },
     zoomed() {
       let newX = d3.event.transform.rescaleX(xScale);
-      const currentScaleFactor = d3.event.transform.k;
+      currentScaleFactor = d3.event.transform.k;
       const isHourly = currentScaleFactor > 400;
       if (this.isSelectedTimeHourly != isHourly)
         this.isSelectedTimeHourly = isHourly;
@@ -284,7 +285,7 @@
       this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2));
       d3.select(".line").attr("x", d3.event.x);
     },
-    rescaleTimeSlider() {
+    redrawTimeSlider() {
       const bodyWidth = document.querySelector("body").clientWidth;
       const timeSelectionWidth = document.querySelector("#timeselection")
         .clientWidth;
@@ -300,10 +301,11 @@
         "x",
         xAxis.scale()(d3.isoParse(this.selectedTime))
       );
+      this.rescaleSlider(currentScaleFactor);
     }
   },
   created() {
-    this.resizeListenerFunction = debounce(this.rescaleTimeSlider, 100);
+    this.resizeListenerFunction = debounce(this.redrawTimeSlider, 100);
     window.addEventListener("resize", this.resizeListenerFunction);
   },
   destroyed() {