Mercurial > gemma
changeset 5056:2e6f73726879 time-sliding
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: {