diff --git a/src/hub/Timeline.ts b/src/hub/Timeline.ts index f1a36f2d..ecc27231 100644 --- a/src/hub/Timeline.ts +++ b/src/hub/Timeline.ts @@ -14,6 +14,7 @@ export default class Timeline { private grabZoomActive = false; private grabZoomStartTime = 0; private lastCursorX: number | null = null; + private lastCursorInRect = false; constructor(container: HTMLElement) { this.CONTAINER = container; @@ -21,11 +22,17 @@ export default class Timeline { 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 index e46cdd8b..faf4f33f 100644 --- 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) => {