Mercurial > gemma
changeset 5165:78086edb682a
timeslider: prevent dragging outside the time-slider(right margin)
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 06 Apr 2020 12:22:04 +0200 |
parents | 600d337fe5f1 |
children | bc7855cfb801 |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 23 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Fri Apr 03 11:54:05 2020 +0200 +++ b/client/src/components/TimeSlider.vue Mon Apr 06 12:22:04 2020 +0200 @@ -377,17 +377,32 @@ }, onDrag() { this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2)); - const startTime = d3.isoParse(xAxis.scale().invert(0)); const now = new Date(); - if (startTime > this.selectedTime) { - this.selectedTime = startTime; - d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(startTime))); + const startTimeOnSlider = d3.isoParse(xAxis.scale().invert(0)); + const endTimeOnSlider = d3.isoParse( + xAxis.scale().invert(xScale.range()[1]) + ); + // Prevent dragging outside the visible area on slider + if (endTimeOnSlider < this.selectedTime) { + this.selectedTime = endTimeOnSlider; + d3.select(".line").attr( + "x", + xAxis.scale()(d3.isoParse(endTimeOnSlider)) + ); } else { - if (this.selectedTime > now) { - this.selectedTime = now; - d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(now))); + if (startTimeOnSlider > this.selectedTime) { + this.selectedTime = startTimeOnSlider; + d3.select(".line").attr( + "x", + xAxis.scale()(d3.isoParse(startTimeOnSlider)) + ); } else { - d3.select(".line").attr("x", d3.event.x); + if (this.selectedTime > now) { + this.selectedTime = now; + d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(now))); + } else { + d3.select(".line").attr("x", d3.event.x); + } } } },