Feat/drag region while scrolling

src/__tests__/draggable.test.ts

@@ -42,8 +42,8 @@ describe('makeDraggable', () => {
     const unsubscribe = makeDraggable(el, onDrag, onStart, onEnd, 0)
 
     el.dispatchEvent(new PointerEvent('pointerdown', { clientX: 10, clientY: 10 }))
-    document.dispatchEvent(new PointerEvent('pointermove', { clientX: 20, clientY: 20 }))
-    document.dispatchEvent(new PointerEvent('pointerup', { clientX: 20, clientY: 20 }))
+    window.dispatchEvent(new PointerEvent('pointermove', { clientX: 20, clientY: 20 }))
+    window.dispatchEvent(new PointerEvent('pointerup', { clientX: 20, clientY: 20 }))
 
     expect(onStart).toHaveBeenCalled()
     expect(onDrag).toHaveBeenCalled()

src/draggable.ts

@@ -21,6 +21,7 @@ export function makeDraggable(
 
     let startX = event.clientX
     let startY = event.clientY
+
     let isDragging = false
     const touchStartTime = Date.now()
 
@@ -63,13 +64,6 @@ export function makeDraggable(
       unsubscribeDocument()
     }
 
-    const onPointerLeave = (e: PointerEvent) => {
-      // Listen to events only on the document and not on inner elements
-      if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
-        onPointerUp(e)
-      }
-    }
-
     const onClick = (event: MouseEvent) => {
       if (isDragging) {
         event.stopPropagation()
@@ -83,18 +77,14 @@ export function makeDraggable(
       }
     }
 
-    document.addEventListener('pointermove', onPointerMove)
-    document.addEventListener('pointerup', onPointerUp)
-    document.addEventListener('pointerout', onPointerLeave)
-    document.addEventListener('pointercancel', onPointerLeave)
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', 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', onPointerLeave)
-      document.removeEventListener('pointercancel', onPointerLeave)
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
       document.removeEventListener('touchmove', onTouchMove)
       setTimeout(() => {
         document.removeEventListener('click', onClick, { capture: true })

src/plugins/hover.ts

@@ -121,6 +121,7 @@ class HoverPlugin extends BasePlugin<HoverPluginEvents, HoverPluginOptions> {
 
     this.wavesurfer.on('zoom', onUpdate)
     this.wavesurfer.on('scroll', onUpdate)
+
     this.unsubscribe = () => {
       container.removeEventListener('pointermove', this.onPointerMove)
       container.removeEventListener('pointerleave', this.onPointerLeave)
@@ -132,7 +133,6 @@ class HoverPlugin extends BasePlugin<HoverPluginEvents, HoverPluginOptions> {
   private onPointerMove = (e: PointerEvent) => {
     if (!this.wavesurfer) return
 
-    // Used when zooming
     this.lastPointerMove = e
 
     // Position