Mercurial > gemma
changeset 5060:ed1d963017e7 time-sliding
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(