Fix: [Regions] drag selection on the wrapper element to avoid clip-path (#3371)

Author: katspaugh

cypress/e2e/regions.cy.js

@@ -187,7 +187,7 @@ describe('WaveSurfer Regions plugin tests', () => {
         clientX: 100,
         clientY: 10,
       })
-      win.wavesurfer.getWrapper().querySelector('div').dispatchEvent(pointerDownEvent)
+      win.wavesurfer.getWrapper().dispatchEvent(pointerDownEvent)
       win.document.dispatchEvent(pointerMoveEvent)
       win.document.dispatchEvent(pointerUpEvent)
 

cypress/snapshots/region-with-split-channels.snap.png

@@ -66,13 +66,15 @@ export function makeDraggable(
 
     document.addEventListener('pointermove', onPointerMove)
     document.addEventListener('pointerup', onPointerUp)
+    document.addEventListener('pointerout', onPointerUp)
     document.addEventListener('pointercancel', onPointerUp)
     document.addEventListener('touchmove', onTouchMove, { passive: false })
     document.addEventListener('click', onClick, { capture: true })
 
     unsubscribeDocument = () => {
       document.removeEventListener('pointermove', onPointerMove)
       document.removeEventListener('pointerup', onPointerUp)
+      document.removeEventListener('pointerout', onPointerUp)
       document.removeEventListener('pointercancel', onPointerUp)
       document.removeEventListener('touchmove', onTouchMove)
       setTimeout(() => {

src/draggable.ts

@@ -509,7 +509,7 @@ class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions
    * Returns a function to disable the drag selection.
    */
   public enableDragSelection(options: Omit<RegionParams, 'start' | 'end'>): () => void {
-    const wrapper = this.wavesurfer?.getWrapper()?.querySelector('div.canvases')
+    const wrapper = this.wavesurfer?.getWrapper()
     if (!wrapper || !(wrapper instanceof HTMLElement)) return () => undefined
 
     const initialSize = 5