Mercurial > gemma

changeset 5060:ed1d963017e7 time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve behavior of time-slider during the use of date/time picker
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 09 Mar 2020 12:52:37 +0100
parents c4f90dcd7c15
children 37371727f704
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 11 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Mon Mar 09 12:41:47 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Mon Mar 09 12:52:37 2020 +0100
@@ -99,12 +99,7 @@
         if (!value) return;
         const date = new Date(value);
         this.$store.commit("application/setSelectedTime", date);
-        zoom.translateTo(
-          d3.select(".zoom"),
-          this.getScale()(d3.isoParse(this.selectedTime.toISOString())),
-          0
-        );
-        zoom.scaleTo(d3.select(".zoom"), 50);
+        this.rescaleSlider(50);
       }
     },
     timeSelection: {
@@ -118,12 +113,7 @@
         date = setHours(date, value.split(":")[0]);
         date = setMinutes(date, value.split(":")[1]);
         this.$store.commit("application/setSelectedTime", date);
-        zoom.scaleTo(d3.select(".zoom"), 800);
-        zoom.translateTo(
-          d3.select(".zoom"),
-          this.getScale()(d3.isoParse(this.selectedTime.toISOString())),
-          0
-        );
+        this.rescaleSlider(800);
       }
     },
     selectedTime: {
@@ -139,6 +129,15 @@
     close() {
       this.$store.commit("application/showTimeSlider", false);
     },
+    rescaleSlider(scaleFactor) {
+      const tx =
+        -scaleFactor *
+          this.getScale()(d3.isoParse(this.selectedTime.toISOString())) +
+        document.getElementById("sliderContainer").clientWidth / 2;
+      var t = d3.zoomIdentity.translate(tx, 0).scale(scaleFactor);
+      this.getScale().domain(t.rescaleX(this.getScale()));
+      d3.select(".zoom").call(zoom.transform, t);
+    },
     redrawSlider() {
       this.createSlider();
       zoom.translateTo(