Mercurial > gemma
changeset 5167:a5fd84c4f2fe
timeslider: avoid moving cursor to future area (click event)
* move the cursor to "now" instead of 12:00 in case "now" is earlier
when clicking on value of "today" on time slider and
zoom level is for days.
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 07 Apr 2020 15:16:11 +0200 |
parents | bc7855cfb801 |
children | a74390e92c3c |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 21 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Mon Apr 06 15:09:20 2020 +0200 +++ b/client/src/components/TimeSlider.vue Tue Apr 07 15:16:11 2020 +0200 @@ -360,20 +360,36 @@ zoomed() { let newX = d3.event.transform.rescaleX(xScale); currentScaleFactor = d3.event.transform.k; - const isHourly = currentScaleFactor > 400; - if (this.isSelectedTimeHourly != isHourly) - this.isSelectedTimeHourly = isHourly; + this.checkSelectedTimeHourly(); xAxis.scale(newX); d3.select(".axis--x").call(xAxis); d3.select(".line").attr("x", newX(d3.isoParse(this.selectedTime))); d3.select(".future").attr("x", newX(d3.isoParse(new Date()))); }, + checkSelectedTimeHourly() { + const isHourly = currentScaleFactor > 400; + if (this.isSelectedTimeHourly != isHourly) + this.isSelectedTimeHourly = isHourly; + }, onClick() { // Extract the click location let point = d3.mouse(document.getElementById("zoom")), p = { x: point[0], y: point[1] }; d3.select(".line").attr("x", p.x); - this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2)); + const xTime = d3.isoParse(xAxis.scale().invert(p.x + 2)).toDateString(); + const now = new Date(); + // Avoid moving the cursor to future area if the "now" value is earlier than 12:00 + if ( + xTime === now.toDateString() && + !this.isSelectedTimeHourly && + now.getHours() < 12 + ) { + this.isSelectedTimeHourly = true; + this.selectedTime = d3.isoParse(new Date()); + } else { + this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2)); + } + this.checkSelectedTimeHourly(); }, onDrag() { this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2)); @@ -401,9 +417,7 @@ this.isSelectedTimeHourly = true; this.selectedTime = now; d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(now))); - const isHourly = currentScaleFactor > 400; - if (this.isSelectedTimeHourly != isHourly) - this.isSelectedTimeHourly = isHourly; + this.checkSelectedTimeHourly(); } else { d3.select(".line").attr("x", d3.event.x); }