Continue grab zoom when cursor leaves element (#257)

Mechanical-Advantage · Oct 28, 2024 · 4bb9ecb · 4bb9ecb
1 parent 31b06c1
commit 4bb9ecb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/src/hub/Timeline.ts b/src/hub/Timeline.ts
@@ -14,18 +14,25 @@ export default class Timeline {
   private grabZoomActive = false;
   private grabZoomStartTime = 0;
   private lastCursorX: number | null = null;
+  private lastCursorInRect = false;
 
   constructor(container: HTMLElement) {
     this.CONTAINER = container;
     this.CANVAS = container.getElementsByClassName("timeline-canvas")[0] as HTMLCanvasElement;
     this.SCROLL_OVERLAY = container.getElementsByClassName("timeline-scroll")[0] as HTMLCanvasElement;
 
     // Hover handling
+    window.addEventListener("mousemove", (event) => {
+      if (this.CONTAINER.hidden || !this.grabZoomActive) return;
+      this.lastCursorX = event.clientX - this.SCROLL_OVERLAY.getBoundingClientRect().x;
+    });
     this.SCROLL_OVERLAY.addEventListener("mousemove", (event) => {
       this.lastCursorX = event.clientX - this.SCROLL_OVERLAY.getBoundingClientRect().x;
+      this.lastCursorInRect = true;
     });
     this.SCROLL_OVERLAY.addEventListener("mouseleave", () => {
       this.lastCursorX = null;
+      this.lastCursorInRect = false;
       window.selection.setHoveredTime(null);
     });
 
@@ -38,22 +45,22 @@ export default class Timeline {
         this.grabZoomStartTime = hoveredTime;
       }
     });
-    this.SCROLL_OVERLAY.addEventListener("mousemove", () => {
+    window.addEventListener("mousemove", () => {
+      if (this.CONTAINER.hidden) return;
       let hoveredTime = window.selection.getHoveredTime();
       if (this.grabZoomActive && hoveredTime !== null) {
         window.selection.setGrabZoomRange([this.grabZoomStartTime, hoveredTime]);
       }
     });
-    this.SCROLL_OVERLAY.addEventListener("mouseup", () => {
+    window.addEventListener("mouseup", () => {
+      if (this.CONTAINER.hidden) return;
       if (this.grabZoomActive) {
         window.selection.finishGrabZoom();
         this.grabZoomActive = false;
-      }
-    });
-    this.SCROLL_OVERLAY.addEventListener("mouseleave", () => {
-      if (this.grabZoomActive) {
-        window.selection.setGrabZoomRange(null);
-        this.grabZoomActive = false;
+        if (!this.lastCursorInRect) {
+          this.lastCursorX = null;
+          window.selection.setHoveredTime(null);
+        }
       }
     });
     this.SCROLL_OVERLAY.addEventListener("click", (event) => {

diff --git a/src/shared/renderers/LineGraphRenderer.ts b/src/shared/renderers/LineGraphRenderer.ts
@@ -20,6 +20,7 @@ export default class LineGraphRenderer implements TabRenderer {
   private grabZoomStartTime = 0;
   private lastCursorX: number | null = null;
   private lastHoveredTime: number | null = null;
+  private lastCursorInRect = false;
   private didClearHoveredTime = false;
 
   constructor(root: HTMLElement, hasController: boolean) {
@@ -29,11 +30,17 @@ export default class LineGraphRenderer implements TabRenderer {
     this.SCROLL_OVERLAY = root.getElementsByClassName("line-graph-scroll")[0] as HTMLCanvasElement;
 
     // Hover handling
+    window.addEventListener("mousemove", (event) => {
+      if (this.ROOT.hidden || !this.grabZoomActive) return;
+      this.lastCursorX = event.clientX - this.ROOT.getBoundingClientRect().x;
+    });
     this.SCROLL_OVERLAY.addEventListener("mousemove", (event) => {
       this.lastCursorX = event.clientX - this.ROOT.getBoundingClientRect().x;
+      this.lastCursorInRect = true;
     });
     this.SCROLL_OVERLAY.addEventListener("mouseleave", () => {
       this.lastCursorX = null;
+      this.lastCursorInRect = false;
       window.selection.setHoveredTime(null);
     });
 
@@ -45,21 +52,21 @@ export default class LineGraphRenderer implements TabRenderer {
         this.grabZoomStartTime = this.lastHoveredTime;
       }
     });
-    this.SCROLL_OVERLAY.addEventListener("mousemove", () => {
+    window.addEventListener("mousemove", () => {
+      if (this.ROOT.hidden) return;
       if (this.grabZoomActive && this.lastHoveredTime !== null) {
         window.selection.setGrabZoomRange([this.grabZoomStartTime, this.lastHoveredTime]);
       }
     });
-    this.SCROLL_OVERLAY.addEventListener("mouseup", () => {
+    window.addEventListener("mouseup", () => {
+      if (this.ROOT.hidden) return;
       if (this.grabZoomActive) {
         window.selection.finishGrabZoom();
         this.grabZoomActive = false;
-      }
-    });
-    this.SCROLL_OVERLAY.addEventListener("mouseleave", () => {
-      if (this.grabZoomActive) {
-        window.selection.setGrabZoomRange(null);
-        this.grabZoomActive = false;
+        if (!this.lastCursorInRect) {
+          this.lastCursorX = null;
+          window.selection.setHoveredTime(null);
+        }
       }
     });
     this.SCROLL_OVERLAY.addEventListener("click", (event) => {