feat: LEAP-1896: Add scrollbar support to Visualizer

web/libs/editor/src/lib/AudioUltra/Common/Utils.ts

@@ -212,3 +212,28 @@ export const getCursorTime = (e: MouseEvent, visualizer: Visualizer, duration: n
 export const isTimeSimilar = (a: number, b: number) => Math.abs(a - b) < TIME_TOLERANCE;
 export const isTimeRelativelySimilar = (a: number, b: number, observedDuration: number) =>
   isTimeSimilar(a / observedDuration, b / observedDuration);
+
+/**
+ * A constant representing the thickness of the scrollbar's handle in pixels.
+ * This value is calculated dynamically by creating a temporary DOM element
+ * with a scrollable area and comparing its offset width to its client width.
+ * Useful for making precise layout adjustments that depend on the width of the scrollbar.
+ *
+ * Note: The calculation is performed immediately when the variable is defined
+ * and retains its value for the duration of runtime.
+ *
+ * @constant {number}
+ */
+export const BROWSER_SCROLLBAR_WIDTH = ((): number => {
+  const scrollDiv = document.createElement("div");
+  scrollDiv.style.width = "100px";
+  scrollDiv.style.height = "100px";
+  scrollDiv.style.overflow = "scroll";
+  scrollDiv.style.position = "absolute";
+  scrollDiv.style.top = "-9999px";
+  scrollDiv.style.scrollbarGutter = "stable";
+  document.body.appendChild(scrollDiv);
+  const scrollSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return scrollSize;
+})();

web/libs/editor/src/lib/AudioUltra/Visual/Visualizer.ts

@@ -1,5 +1,5 @@
 import type { WaveformAudio } from "../Media/WaveformAudio";
-import { averageMinMax, clamp, debounce, defaults, warn } from "../Common/Utils";
+import { averageMinMax, BROWSER_SCROLLBAR_WIDTH, clamp, debounce, defaults, warn } from "../Common/Utils";
 import type { Waveform, WaveformOptions } from "../Waveform";
 import { type CanvasCompositeOperation, Layer, type RenderingContext } from "./Layer";
 import { Events } from "../Common/Events";
@@ -48,6 +48,7 @@ export type VisualizerOptions = Pick<
 
 export class Visualizer extends Events<VisualizerEvents> {
   private wrapper!: HTMLElement;
+  private scrollFiller!: HTMLElement;
   private layers = new Map<string, Layer>();
   private observer!: ResizeObserver;
   private currentTime = 0;
@@ -183,6 +184,7 @@ export class Visualizer extends Events<VisualizerEvents> {
     }
 
     this.getSamplesPerPx();
+    this.updateScrollFiller();
 
     this.wf.invoke("zoom", [this.zoom]);
     this.draw();
@@ -193,6 +195,11 @@ export class Visualizer extends Events<VisualizerEvents> {
   }
 
   setScrollLeft(value: number, redraw = true, forceDraw = false) {
+    this.wrapper.scrollLeft = value * this.fullWidth;
+    this._setScrollLeft(value, redraw, forceDraw);
+  }
+
+  _setScrollLeft(value: number, redraw = true, forceDraw = false) {
     this.scrollLeft = value;
 
     if (redraw) {
@@ -274,13 +281,13 @@ export class Visualizer extends Events<VisualizerEvents> {
 
   centerToCurrentTime() {
     if (this.zoom === 1) {
-      this.scrollLeft = 0;
+      this.setScrollLeft(0);
       return;
     }
 
     const offset = this.width / 2 / this.zoomedWidth;
 
-    this.scrollLeft = clamp(this.currentTime - offset, 0, 1);
+    this.setScrollLeft(clamp(this.currentTime - offset, 0, 1));
   }
 
   /**
@@ -639,17 +646,47 @@ export class Visualizer extends Events<VisualizerEvents> {
     this.wrapper = document.createElement("div");
     this.wrapper.style.height = "100%";
 
-    this.createLayer({ name: "main" });
+    const mainLayer = this.createLayer({ name: "main" });
     this.createLayer({ name: "background", offscreen: true, zIndex: 0, isVisible: false });
     this.createLayer({ name: "waveform", offscreen: true, zIndex: 100 });
     this.createLayerGroup({ name: "regions", offscreen: true, zIndex: 101, compositeOperation: "source-over" });
     const controlsLayer = this.createLayer({ name: "controls", offscreen: true, zIndex: 1000 });
 
     this.playhead.setLayer(controlsLayer);
-    this.layers.get("main")?.appendTo(this.wrapper);
+    this.initScrollBar();
+    mainLayer.appendTo(this.wrapper);
     container.appendChild(this.wrapper);
   }
 
+  initScrollBar() {
+    this.wrapper.style.position = "relative";
+    this.wrapper.style.overflowX = "scroll";
+    this.wrapper.style.overflowY = "hidden";
+    this.wrapper.style.scrollbarGutter = "stable";
+
+    const mainLayer = this.getLayer("main") as Layer;
+    // The parent element scrolls natively, and the canvas is redrawn accordingly.
+    // To maintain its position during scrolling, the element must use "sticky" positioning.
+    mainLayer.canvas.style.position = "sticky";
+    mainLayer.canvas.style.top = "0";
+    mainLayer.canvas.style.left = "0";
+    mainLayer.canvas.style.zIndex = "2";
+    // Adds a scroll filler element to adjust the size of the scrollable area
+    this.scrollFiller = document.createElement("div");
+    this.scrollFiller.style.position = "absolute";
+    this.scrollFiller.style.width = "100%";
+    this.scrollFiller.style.height = `${BROWSER_SCROLLBAR_WIDTH}px`;
+    this.scrollFiller.style.top = "100%";
+    this.scrollFiller.style.minHeight = "1px";
+    mainLayer.canvas.style.zIndex = "1";
+    this.wrapper.appendChild(this.scrollFiller);
+  }
+
+  updateScrollFiller() {
+    const { fullWidth } = this;
+    this.scrollFiller.style.width = `${fullWidth}px`;
+  }
+
   reserveSpace({ height }: { height: number }) {
     this.reservedSpace = height;
   }
@@ -792,6 +829,12 @@ export class Visualizer extends Events<VisualizerEvents> {
     this.wrapper.addEventListener("click", this.handleSeek);
     this.wrapper.addEventListener("mousedown", this.handleMouseDown);
 
+    this.wrapper.addEventListener("scroll", (e) => {
+      const scrollLeft = this.wrapper.scrollLeft / this.fullWidth;
+      this.wf.invoke("scroll", [scrollLeft]);
+      this._setScrollLeft(scrollLeft);
+    });
+
     // Cursor events
     this.on("mouseMove", this.playHeadMove);
 
@@ -850,6 +893,8 @@ export class Visualizer extends Events<VisualizerEvents> {
   };
 
   private handleSeek = (e: MouseEvent) => {
+    if (e.offsetY > this.height) return;
+
     const mainLayer = this.getLayer("main");
 
     if (!this.wf.loaded || this.seekLocked || !(e.target && mainLayer?.canvas?.contains(e.target))) return;
@@ -864,6 +909,7 @@ export class Visualizer extends Events<VisualizerEvents> {
   };
 
   private handleMouseDown = (e: MouseEvent) => {
+    if (e.offsetY > this.height) return;
     if (!this.wf.loaded) return;
     this.playhead.invoke("mouseDown", [e]);
   };
@@ -938,7 +984,7 @@ export class Visualizer extends Events<VisualizerEvents> {
   };
 
   private setContainerHeight() {
-    this.container.style.height = `${this.height}px`;
+    this.container.style.height = `${this.height + BROWSER_SCROLLBAR_WIDTH}px`;
   }
 
   private updateSize() {
@@ -958,6 +1004,8 @@ export class Visualizer extends Events<VisualizerEvents> {
       this.wf.renderTimeline();
       this.resetWaveformRender();
       this.draw(false, true);
+      this.updateScrollFiller();
+      this.setScrollLeft(this.scrollLeft);
     });
   };
 

web/libs/editor/src/tags/object/AudioUltra/model.js

@@ -137,6 +137,9 @@ export const AudioModel = types.compose(
       _wfFrame: null,
     }))
     .views((self) => ({
+      get isReady() {
+        return !!self._ws;
+      },
       get hasStates() {
         const states = self.states();
 

web/libs/editor/tests/integration/e2e/audio/audio_regions.cy.ts

@@ -12,17 +12,17 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     AudioView.clickAtRelative(0.38, 0.5);
-    const selectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const selectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     selectedRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
     });
     // unselecting
     cy.get("body").type("{esc}");
-    const unselectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const unselectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
     unselectedRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);
     });
@@ -38,19 +38,19 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // moving the cursor
     AudioView.seekCurrentTimebox(38);
-    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     activeRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
     });
 
     // deactivating
     AudioView.seekCurrentTimebox(0);
-    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     inactiveRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);
@@ -67,7 +67,7 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // highlighting in relations mode
     Labels.select("Music");
@@ -77,7 +77,7 @@ describe("Audio regions", () => {
 
     AudioView.hoverAtRelative(0.4, 0.5);
 
-    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     highlightedRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
@@ -86,7 +86,7 @@ describe("Audio regions", () => {
     // unhighlighting
     AudioView.container.trigger("mouseleave");
 
-    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     unhighlightedRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);
@@ -103,7 +103,7 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // highlighting in relations mode
     Labels.select("Music");
@@ -113,15 +113,15 @@ describe("Audio regions", () => {
 
     AudioView.hoverAtRelative(0.4, 0.5);
 
-    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     highlightedRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
     });
 
     // moving the cursor
     AudioView.seekCurrentTimebox(38);
-    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     activeRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
@@ -130,7 +130,7 @@ describe("Audio regions", () => {
 
     // deactivating
     AudioView.seekCurrentTimebox(0);
-    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // should still be highlighted
     inactiveRegionColor.then((color) => {
@@ -141,7 +141,7 @@ describe("Audio regions", () => {
     // unhighlighting
     AudioView.container.trigger("mouseleave");
 
-    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     unhighlightedRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);

web/libs/frontend-test/src/helpers/LSF/AudioView.ts

@@ -1,6 +1,7 @@
 import TriggerOptions = Cypress.TriggerOptions;
 import ObjectLike = Cypress.ObjectLike;
 import ClickOptions = Cypress.ClickOptions;
+import { LabelStudio } from "@humansignal/frontend-test/helpers/LSF/LabelStudio";
 
 type MouseInteractionOptions = Partial<TriggerOptions & ObjectLike & MouseEvent>;
 
@@ -36,7 +37,9 @@ export const AudioView = {
     return this.root.get("loading-progress-bar", { timeout: 10000 });
   },
   isReady() {
+    LabelStudio.waitForObjectsReady();
     this.loadingBar.should("not.exist");
+    cy.wait(32); // wait for render
   },
   get playButton() {
     return cy.get(`[data-testid="playback-button:play"]`);