From f072a45c37befe0a6e1a24f97e2d4d42076328a8 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Sun, 26 Nov 2023 20:35:17 +0100
Subject: [PATCH] Fix: add stopPropagation to draggable

7.4.8

Fix: timeout to prevent clicks

Fix: lower drag theshold

7.4.9

Fix: prevent click only when dragging
---
 package.json     |  2 +-
 src/draggable.ts | 21 ++++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index e76aed7df..45a8c55d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.4.7",
+  "version": "7.4.9",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Navigable audio waveform player",
diff --git a/src/draggable.ts b/src/draggable.ts
index 5e79f5c13..71b2f1aef 100644
--- a/src/draggable.ts
+++ b/src/draggable.ts
@@ -3,20 +3,27 @@ export function makeDraggable(
   onDrag: (dx: number, dy: number, x: number, y: number) => void,
   onStart?: (x: number, y: number) => void,
   onEnd?: () => void,
-  threshold = 5,
+  threshold = 3,
+  mouseButton = 0,
 ): () => void {
   if (!element) return () => void 0
 
   let unsubscribeDocument = () => void 0
 
   const onPointerDown = (event: PointerEvent) => {
-    if (event.button !== 0) return
+    if (event.button !== mouseButton) return
+
+    event.preventDefault()
+    event.stopPropagation()
 
     let startX = event.clientX
     let startY = event.clientY
     let isDragging = false
 
     const onPointerMove = (event: PointerEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+
       const x = event.clientX
       const y = event.clientY
       const dx = x - startX
@@ -46,8 +53,10 @@ export function makeDraggable(
     }
 
     const onClick = (event: MouseEvent) => {
-      event.stopPropagation()
-      event.preventDefault()
+      if (isDragging) {
+        event.stopPropagation()
+        event.preventDefault()
+      }
     }
 
     const onTouchMove = (event: TouchEvent) => {
@@ -67,7 +76,9 @@ export function makeDraggable(
       document.removeEventListener('pointerup', onPointerUp)
       document.removeEventListener('pointercancel', onPointerUp)
       document.removeEventListener('touchmove', onTouchMove)
-      element.removeEventListener('click', onClick, { capture: true })
+      setTimeout(() => {
+        element.removeEventListener('click', onClick, { capture: true })
+      }, 10)
     }
   }