From e65c334d9c62660b6f285cf0e21b040182d66a58 Mon Sep 17 00:00:00 2001
From: Chris Needham <chris@chrisneedham.com>
Date: Mon, 16 Sep 2024 20:54:30 +0100
Subject: [PATCH] Fixed point/segment display on resize

---
 demo/custom-markers/index.html |  9 +++++++--
 demo/custom-markers/main.js    | 26 +++++++++++++++++++++++++-
 src/waveform-overview.js       |  2 +-
 src/waveform-view.js           | 19 ++++++++++++-------
 src/waveform-zoomview.js       |  7 +++----
 5 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/demo/custom-markers/index.html b/demo/custom-markers/index.html
index 4280417b..43c81951 100644
--- a/demo/custom-markers/index.html
+++ b/demo/custom-markers/index.html
@@ -65,8 +65,6 @@ <h2>Demo: Custom Point and Segment Markers</h2>
           <input type="range" id="amplitude-scale" min="0" max="10" step="1">
           <input type="checkbox" id="auto-scroll" checked>
           <label for="auto-scroll">Auto-scroll</label>
-          <button data-action="resize">Resize</button>
-          <button data-action="destroy">Destroy</button>
         </div>
         <div>
           <input type="checkbox" id="enable-seek" checked>
@@ -87,6 +85,13 @@ <h2>Demo: Custom Point and Segment Markers</h2>
             <option value="compress">Compress</option>
           </select>
         </div>
+        <div>
+          <button data-action="resize-width">Resize width</button>
+          <button data-action="resize-height">Resize height</button>
+        </div>
+        <div>
+          <button data-action="destroy">Destroy</button>
+        </div>
       </div>
     </div>
 
diff --git a/demo/custom-markers/main.js b/demo/custom-markers/main.js
index b42986f1..bf8f1754 100644
--- a/demo/custom-markers/main.js
+++ b/demo/custom-markers/main.js
@@ -286,7 +286,31 @@ Peaks.init(options, function(err, peaksInstance) {
     peaksInstance.views.getView('overview').setAmplitudeScale(scale);
   });
 
-  document.querySelector('button[data-action="resize"]').addEventListener('click', function(event) {
+  document.querySelector('button[data-action="resize-width"]').addEventListener('click', function(event) {
+    document.querySelectorAll('.waveform-container').forEach(function(container) {
+      container.style.width = container.offsetWidth === 1000 ? "700px" : "1000px";
+    });
+
+    const zoomview = peaksInstance.views.getView('zoomview');
+
+    if (zoomview) {
+      zoomview.fitToContainer();
+    }
+
+    const scrollbar = peaksInstance.views.getScrollbar();
+
+    if (scrollbar) {
+      scrollbar.fitToContainer();
+    }
+
+    const overview = peaksInstance.views.getView('overview');
+
+    if (overview) {
+      overview.fitToContainer();
+    }
+  });
+
+  document.querySelector('button[data-action="resize-height"]').addEventListener('click', function(event) {
     const zoomviewContainer = document.getElementById('zoomview-container');
     const overviewContainer = document.getElementById('overview-container');
 
diff --git a/src/waveform-overview.js b/src/waveform-overview.js
index 0cb0794a..1236be66 100644
--- a/src/waveform-overview.js
+++ b/src/waveform-overview.js
@@ -121,7 +121,7 @@ WaveformOverview.prototype.removeHighlightRect = function() {
   this._highlightLayer.removeHighlight();
 };
 
-WaveformOverview.prototype.updateWaveform = function() {
+WaveformOverview.prototype.updateWaveform = function(/* frameOffset, forceUpdate */) {
   this._waveformLayer.draw();
   this._axisLayer.draw();
 
diff --git a/src/waveform-view.js b/src/waveform-view.js
index 74576b0c..c53a2dfd 100644
--- a/src/waveform-view.js
+++ b/src/waveform-view.js
@@ -444,13 +444,24 @@ WaveformView.prototype.fitToContainer = function() {
     updateWaveform = this.containerWidthChange();
   }
 
+  let heightChanged = false;
+
   if (this._container.clientHeight !== this._height) {
     this._height = this._container.clientHeight;
-    this._stage.height(this._height);
+    this._stage.setHeight(this._height);
 
     this._waveformShape.fitToView();
     this._playheadLayer.fitToView();
 
+    this.containerHeightChange();
+
+    heightChanged = true;
+  }
+
+  if (updateWaveform) {
+    this.updateWaveform(this._frameOffset, true);
+  }
+  else if (heightChanged) {
     if (this._segmentsLayer) {
       this._segmentsLayer.fitToView();
     }
@@ -458,12 +469,6 @@ WaveformView.prototype.fitToContainer = function() {
     if (this._pointsLayer) {
       this._pointsLayer.fitToView();
     }
-
-    this.containerHeightChange();
-  }
-
-  if (updateWaveform) {
-    this.updateWaveform(this._frameOffset);
   }
 };
 
diff --git a/src/waveform-zoomview.js b/src/waveform-zoomview.js
index 6fa9c0a3..6eef5c67 100644
--- a/src/waveform-zoomview.js
+++ b/src/waveform-zoomview.js
@@ -495,6 +495,8 @@ WaveformZoomView.prototype.scrollWaveform = function(options) {
  * Updates the region of waveform shown in the view.
  *
  * @param {Number} frameOffset The new frame offset, in pixels.
+ * @param {Boolean} forceUpdate Forces the waveform view to be redrawn, if the
+ *   frameOffset is unchanged.
  */
 
 WaveformZoomView.prototype.updateWaveform = function(frameOffset, forceUpdate) {
@@ -564,8 +566,6 @@ WaveformZoomView.prototype.setMinSegmentDragWidth = function(width) {
 };
 
 WaveformZoomView.prototype.containerWidthChange = function() {
-  let updateWaveform = false;
-
   let resample = false;
   let resampleOptions;
 
@@ -581,14 +581,13 @@ WaveformZoomView.prototype.containerWidthChange = function() {
   if (resample) {
     try {
       this._resampleData(resampleOptions);
-      updateWaveform = true;
     }
     catch (error) {
       // Ignore, and leave this._data as it was
     }
   }
 
-  return updateWaveform;
+  return true;
 };
 
 WaveformZoomView.prototype.containerHeightChange = function() {