# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1583762421 -3600
# Node ID 37371727f704026bcf2d62d4c33c673aa8cca22a
# Parent  ed1d963017e78e4e3e14b8e1764bbd093b7ab4cd
client: improve time-slider code

diff -r ed1d963017e7 -r 37371727f704 client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Mon Mar 09 12:52:37 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Mon Mar 09 15:00:21 2020 +0100
@@ -64,6 +64,9 @@
 import { format, setHours, setMinutes } from "date-fns";
 
 let zoom = null;
+let xScale = null;
+let xAxis = null;
+
 export default {
   name: "timeslider",
   data() {
@@ -129,6 +132,7 @@
     close() {
       this.$store.commit("application/showTimeSlider", false);
     },
+
     rescaleSlider(scaleFactor) {
       const tx =
         -scaleFactor *
@@ -154,7 +158,9 @@
         marginLeft = 0;
 
       d3.timeFormatDefaultLocale(localeDateString);
+      xScale = this.getScale();
       this.newX = this.getScale();
+      xAxis = this.getAxes();
       d3.select(".sliderContainer svg").remove();
       let svg = d3
         .select(".sliderContainer")
@@ -173,7 +179,7 @@
         .append("g")
         .attr("class", "axis--x")
         .attr("transform", `translate(${marginLeft}, ${marginTop})`)
-        .call(this.getAxes());
+        .call(xAxis);
 
       // create rectanlge on the slider area to capture mouse events
       const eventRect = svg
@@ -252,9 +258,9 @@
         .tickFormat(axesFormat);
     },
     zoomed() {
-      let scale = this.getScale();
-      this.newX = d3.event.transform.rescaleX(scale);
-      d3.select(".axis--x").call(this.getAxes());
+      this.newX = d3.event.transform.rescaleX(xScale);
+      xAxis.scale(this.newX);
+      d3.select(".axis--x").call(xAxis);
       d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime)));
     },
     onClick() {