Mercurial > gemma

changeset 5056:2e6f73726879 time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve time-slider behavior * Set suitable zoom level to the selected date/time
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 06 Mar 2020 12:45:28 +0100
parents 8741fae4babd
children abe3a70526a6
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 12 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Fri Mar 06 12:41:13 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Fri Mar 06 12:45:28 2020 +0100
@@ -88,7 +88,12 @@
       set(value) {
         const date = new Date(value);
         this.$store.commit("application/setSelectedTime", date);
-        this.$nextTick(this.redrawSlider);
+        zoom.translateTo(
+          d3.select(".zoom"),
+          this.getScale()(d3.isoParse(this.selectedTime.toISOString())),
+          0
+        );
+        zoom.scaleTo(d3.select(".zoom"), 50);
       }
     },
     timeSelection: {
@@ -101,7 +106,12 @@
         date = setHours(date, value.split(":")[0]);
         date = setMinutes(date, value.split(":")[1]);
         this.$store.commit("application/setSelectedTime", date);
-        this.$nextTick(this.redrawSlider);
+        zoom.scaleTo(d3.select(".zoom"), 800);
+        zoom.translateTo(
+          d3.select(".zoom"),
+          this.getScale()(d3.isoParse(this.selectedTime.toISOString())),
+          0
+        );
       }
     },
     selectedTime: {