Fixed point/segment display on resize

Author: chrisn

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>
 

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');
 

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();
 

src/waveform-view.js

@@ -444,26 +444,31 @@ 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();
     }
 
     if (this._pointsLayer) {
       this._pointsLayer.fitToView();
     }
-
-    this.containerHeightChange();
-  }
-
-  if (updateWaveform) {
-    this.updateWaveform(this._frameOffset);
   }
 };
 

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() {