Mercurial > gemma
changeset 5072:51b30f7c64a2 time-sliding
Timeslider proper rescale
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 11 Mar 2020 16:45:13 +0100 |
parents | 45d868476dea |
children | 9bbe9d0a2dfb |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 5 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Wed Mar 11 16:34:03 2020 +0100 +++ b/client/src/components/TimeSlider.vue Wed Mar 11 16:45:13 2020 +0100 @@ -75,6 +75,7 @@ let zoom = null; let xScale = null; let xAxis = null; +let currentScaleFactor = 1; export default { name: "timeslider", @@ -265,7 +266,7 @@ }, zoomed() { let newX = d3.event.transform.rescaleX(xScale); - const currentScaleFactor = d3.event.transform.k; + currentScaleFactor = d3.event.transform.k; const isHourly = currentScaleFactor > 400; if (this.isSelectedTimeHourly != isHourly) this.isSelectedTimeHourly = isHourly; @@ -284,7 +285,7 @@ this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2)); d3.select(".line").attr("x", d3.event.x); }, - rescaleTimeSlider() { + redrawTimeSlider() { const bodyWidth = document.querySelector("body").clientWidth; const timeSelectionWidth = document.querySelector("#timeselection") .clientWidth; @@ -300,10 +301,11 @@ "x", xAxis.scale()(d3.isoParse(this.selectedTime)) ); + this.rescaleSlider(currentScaleFactor); } }, created() { - this.resizeListenerFunction = debounce(this.rescaleTimeSlider, 100); + this.resizeListenerFunction = debounce(this.redrawTimeSlider, 100); window.addEventListener("resize", this.resizeListenerFunction); }, destroyed() {