Mercurial > gemma

changeset 5165:78086edb682a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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);
+          }
         }
       }
     },