changeset 5164:600d337fe5f1

timeslider: prevent selecting values outside the visible area while dragging
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 03 Apr 2020 11:54:05 +0200
parents 745c7d8aadbe
children 78086edb682a
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 10 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Fri Apr 03 10:56:54 2020 +0200
+++ b/client/src/components/TimeSlider.vue	Fri Apr 03 11:54:05 2020 +0200
@@ -377,12 +377,18 @@
     },
     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 (this.selectedTime > now) {
-        this.selectedTime = now;
-        d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(now)));
+      if (startTime > this.selectedTime) {
+        this.selectedTime = startTime;
+        d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(startTime)));
       } 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);
+        }
       }
     },
     redrawTimeSlider() {