From 0867b95c4492379cad10afb21c00cd588ca6a012 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Sat, 15 Jun 2024 15:45:11 +0200
Subject: [PATCH] Fix: prevent gaps in zoomed in waveform (#3745)

---
 src/renderer.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer.ts b/src/renderer.ts
index bab500cb9..f1479476b 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -14,7 +14,7 @@ type RendererEvents = {
 }
 
 class Renderer extends EventEmitter<RendererEvents> {
-  private static MAX_CANVAS_WIDTH = 4000
+  private static MAX_CANVAS_WIDTH = 8000
   private static MAX_NODES = 10
   private options: WaveSurferOptions
   private parent: HTMLElement
@@ -524,7 +524,7 @@ class Renderer extends EventEmitter<RendererEvents> {
     }
 
     const totalWidth = width / pixelRatio
-    let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth * 2, totalWidth)
+    let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth)
     let drawnIndexes: Record<number, boolean> = {}
 
     // Adjust width to avoid gaps between canvases when using bars
@@ -568,7 +568,9 @@ class Renderer extends EventEmitter<RendererEvents> {
     const startCanvas = Math.floor(viewPosition * numCanvases)
 
     // Draw the canvases in the viewport first
+    draw(startCanvas - 1)
     draw(startCanvas)
+    draw(startCanvas + 1)
 
     // Subscribe to the scroll event to draw additional canvases
     if (numCanvases > 1) {
@@ -578,6 +580,7 @@ class Renderer extends EventEmitter<RendererEvents> {
         clearCanvases()
         draw(canvasIndex - 1)
         draw(canvasIndex)
+        draw(canvasIndex + 1)
       })
     }
   }