Feat(Zoom): Add mobile device pinch-to-zoom gesture support to Zoom plugin (#4225)

* Add pinch-to-zoom gesture support for mobile devices

* Revert "Add pinch-to-zoom gesture support for mobile devices"

This reverts commit dca8d8a.

* Added pinch-to-zoom logic to zoom plugin

- Mobile device pinch-to-zoom gesture support is added to Zoom plugin.
- Modified draggable.ts to avoid interruption of pinch-to-zoom.
- Modified rendered.ts CSS so event target is always .wrapper when .canvas is destroyed due to rerender.

* Addressed PR comments

- draggable.ts: moved activePointers inside the module to avoid concurrency issues
- zoom.ts: added `capture: true` for `touchcancel` event listener init.

* Cleanup - remove temp comments

Author: vitar

src/draggable.ts

@@ -9,24 +9,28 @@ export function makeDraggable(
 ): () => void {
   if (!element) return () => void 0
 
+  const activePointers = new Map<number, PointerEvent>()
   const isTouchDevice = matchMedia('(pointer: coarse)').matches
 
   let unsubscribeDocument = () => void 0
 
   const onPointerDown = (event: PointerEvent) => {
     if (event.button !== mouseButton) return
 
-    event.preventDefault()
-    event.stopPropagation()
+    activePointers.set(event.pointerId, event)
+    if (activePointers.size > 1) {
+      return
+    }
 
     let startX = event.clientX
     let startY = event.clientY
     let isDragging = false
     const touchStartTime = Date.now()
 
     const onPointerMove = (event: PointerEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
+      if (event.defaultPrevented || activePointers.size > 1) {
+        return
+      }
 
       if (isTouchDevice && Date.now() - touchStartTime < touchDelay) return
 
@@ -36,6 +40,9 @@ export function makeDraggable(
       const dy = y - startY
 
       if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
+        event.preventDefault()
+        event.stopPropagation()
+
         const rect = element.getBoundingClientRect()
         const { left, top } = rect
 
@@ -52,6 +59,7 @@ export function makeDraggable(
     }
 
     const onPointerUp = (event: PointerEvent) => {
+      activePointers.delete(event.pointerId)
       if (isDragging) {
         const x = event.clientX
         const y = event.clientY
@@ -64,7 +72,7 @@ export function makeDraggable(
     }
 
     const onPointerLeave = (e: PointerEvent) => {
-      // Listen to events only on the document and not on inner elements
+      activePointers.delete(e.pointerId)
       if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
         onPointerUp(e)
       }
@@ -78,6 +86,9 @@ export function makeDraggable(
     }
 
     const onTouchMove = (event: TouchEvent) => {
+      if (event.defaultPrevented || activePointers.size > 1) {
+        return
+      }
       if (isDragging) {
         event.preventDefault()
       }
@@ -107,5 +118,6 @@ export function makeDraggable(
   return () => {
     unsubscribeDocument()
     element.removeEventListener('pointerdown', onPointerDown)
+    activePointers.clear()
   }
 }

src/plugins/zoom.ts

@@ -6,7 +6,8 @@
  * @author HoodyHuo (https://github.com/HoodyHuo)
  * @author Chris Morbitzer (https://github.com/cmorbitzer)
  * @author Sam Hulick (https://github.com/ffxsam)
- * @autor Gustav Sollenius (https://github.com/gustavsollenius)
+ * @author Gustav Sollenius (https://github.com/gustavsollenius)
+ * @author Viktor Jevdokimov (https://github.com/vitar)
  *
  * @example
  * // ... initialising wavesurfer with the plugin
@@ -65,12 +66,19 @@ class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions> {
   protected options: ZoomPluginOptions & typeof defaultOptions
   private wrapper: HTMLElement | undefined = undefined
   private container: HTMLElement | null = null
+  
+  // State for wheel zoom
   private accumulatedDelta = 0
   private pointerTime: number = 0
   private oldX: number = 0
   private endZoom: number = 0
   private startZoom: number = 0
 
+  // State for proportional pinch-to-zoom
+  private isPinching = false
+  private initialPinchDistance = 0
+  private initialZoom = 0
+
   constructor(options?: ZoomPluginOptions) {
     super(options || {})
     this.options = Object.assign({}, defaultOptions, options)
@@ -86,7 +94,12 @@ class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions> {
       return
     }
     this.container = this.wrapper.parentElement as HTMLElement
+
     this.container.addEventListener('wheel', this.onWheel)
+    this.container.addEventListener('touchstart', this.onTouchStart, { passive: false, capture: true })
+    this.container.addEventListener('touchmove', this.onTouchMove, { passive: false, capture: true })
+    this.container.addEventListener('touchend', this.onTouchEnd, { passive: false, capture: true })
+    this.container.addEventListener('touchcancel', this.onTouchEnd, { passive: false, capture: true })
 
     if (typeof this.options.maxZoom === 'undefined') {
       this.options.maxZoom = this.container.clientWidth
@@ -156,9 +169,91 @@ class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions> {
     return Math.min(newZoom, this.options.maxZoom!)
   }
 
+  private getTouchDistance(e: TouchEvent): number {
+    const touch1 = e.touches[0]
+    const touch2 = e.touches[1]
+    return Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2))
+  }
+
+  private getTouchCenterX(e: TouchEvent): number {
+    const touch1 = e.touches[0]
+    const touch2 = e.touches[1]
+    return (touch1.clientX + touch2.clientX) / 2
+  }
+
+  private onTouchStart = (e: TouchEvent) => {
+    if (!this.wavesurfer || !this.container) return
+    // Check if two fingers are used
+    if (e.touches.length === 2) {
+      e.preventDefault()
+      this.isPinching = true
+
+      // Store initial pinch distance
+      this.initialPinchDistance = this.getTouchDistance(e)
+
+      // Store initial zoom level
+      const duration = this.wavesurfer.getDuration()
+      this.initialZoom =
+        this.wavesurfer.options.minPxPerSec === 0
+          ? this.wavesurfer.getWrapper().scrollWidth / duration
+          : this.wavesurfer.options.minPxPerSec
+
+      // Store anchor point for zooming
+      const x = this.getTouchCenterX(e) - this.container.getBoundingClientRect().left
+      const scrollX = this.wavesurfer.getScroll()
+      this.pointerTime = (scrollX + x) / this.initialZoom
+      this.oldX = x // Use oldX to store the anchor X position
+    }
+  }
+
+  private onTouchMove = (e: TouchEvent) => {
+    if (!this.isPinching || e.touches.length !== 2 || !this.wavesurfer || !this.container) {
+      return
+    }
+    e.preventDefault()
+
+    // Calculate new zoom level
+    const newDistance = this.getTouchDistance(e)
+    const scaleFactor = newDistance / this.initialPinchDistance
+    let newMinPxPerSec = this.initialZoom * scaleFactor
+
+    // Constrain the zoom
+    newMinPxPerSec = Math.min(newMinPxPerSec, this.options.maxZoom!)
+
+    // Calculate minimum zoom (fit to width)
+    const duration = this.wavesurfer.getDuration()
+    const width = this.container.clientWidth
+    const minZoom = width / duration
+    if (newMinPxPerSec < minZoom) {
+      newMinPxPerSec = minZoom
+    }
+
+    // Apply zoom and scroll
+    const newLeftSec = (width / newMinPxPerSec) * (this.oldX / width)
+    if (newMinPxPerSec === minZoom) {
+      this.wavesurfer.zoom(minZoom)
+      this.container.scrollLeft = 0
+    } else {
+      this.wavesurfer.zoom(newMinPxPerSec)
+      this.container.scrollLeft = (this.pointerTime - newLeftSec) * newMinPxPerSec
+    }
+  }
+
+  private onTouchEnd = (e: TouchEvent) => {
+    if (this.isPinching && e.touches.length < 2) {
+      this.isPinching = false
+      this.initialPinchDistance = 0
+      this.initialZoom = 0
+    }
+  }
+
   destroy() {
     if (this.container) {
       this.container.removeEventListener('wheel', this.onWheel)
+      this.container.removeEventListener('touchstart', this.onTouchStart)
+      this.container.removeEventListener('touchmove', this.onTouchMove)
+      this.container.removeEventListener('touchend', this.onTouchEnd)
+      this.container.removeEventListener('touchcancel', this.onTouchEnd)
     }
     super.destroy()
   }

src/renderer.ts

@@ -193,6 +193,7 @@ class Renderer extends EventEmitter<RendererEvents> {
         }
         :host .canvases {
           min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
+          pointer-events: none;
         }
         :host .canvases > div {
           position: relative;