Fix: [Regions] grabbing cursor on mousedown

README.md

@@ -107,6 +107,7 @@ However, please keep in mind that this forum is dedicated to wavesurfer-specific
   If you're using a VBR (variable bit rate) audio file, there might be a mismatch between the audio and the waveform. This can be fixed by converting your file to CBR (constant bit rate).
   <p>Alternatively, you can use the <a href="https://wavesurfer.xyz/examples/?webaudio-shim.js">Web Audio shim</a> which is more accurate.</p>
 </details>
+
 ## v7 – a new TypeScript version
 
 Wavesurfer.js v7 is a TypeScript rewrite of wavesurfer.js that brings several improvements:

src/plugins/regions.ts

@@ -207,6 +207,11 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     this.element.style.right = `${end * 100}%`
   }
 
+  private toggleCursor(toggle: boolean) {
+    if (!this.drag) return
+    this.element.style.cursor = toggle ? 'grabbing' : 'grab'
+  }
+
   private initMouseEvents() {
     const { element } = this
     if (!element) return
@@ -215,27 +220,21 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     element.addEventListener('mouseenter', (e) => this.emit('over', e))
     element.addEventListener('mouseleave', (e) => this.emit('leave', e))
     element.addEventListener('dblclick', (e) => this.emit('dblclick', e))
+    element.addEventListener('pointerdown', () => this.toggleCursor(true))
+    element.addEventListener('pointerup', () => this.toggleCursor(false))
 
     // Drag
     makeDraggable(
       element,
       (dx) => this.onMove(dx),
-      () => this.onStartMoving(),
-      () => this.onEndMoving(),
+      () => this.toggleCursor(true),
+      () => {
+        this.toggleCursor(false)
+        this.drag && this.emit('update-end')
+      },
     )
   }
 
-  private onStartMoving() {
-    if (!this.drag) return
-    this.element.style.cursor = 'grabbing'
-  }
-
-  private onEndMoving() {
-    if (!this.drag) return
-    this.element.style.cursor = 'grab'
-    this.emit('update-end')
-  }
-
   public _onUpdate(dx: number, side?: 'start' | 'end') {
     if (!this.element.parentElement) return
     const deltaSeconds = (dx / this.element.parentElement.clientWidth) * this.totalDuration