@checksub_team/peaks_timeline 1.12.1 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -17677,6 +17677,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._wrappedHeight = this._peaks.options.wrappedLineHeight;
         this._borderWidth = this._source.borderWidth || 0;
         this._height = this._unwrappedHeight;
+        this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
         this._previewList = [];
         this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
@@ -17744,14 +17745,21 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         };
     };
     SourceGroup.prototype.update = function () {
-        var startPixel = this._view.timeToPixels(this._source.startTime);
-        var endPixel = this._view.timeToPixels(this._source.endTime);
-        var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+        const startPixel = this._view.timeToPixels(this._source.startTime);
+        const endPixel = this._view.timeToPixels(this._source.endTime);
+        const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+        const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
         this._group.x(startPixel - frameOffset);
         this._x = startPixel;
-        var newWidth = endPixel - startPixel;
+        const newWidth = endPixel - startPixel;
         if (newWidth !== this._width) {
             this._width = newWidth;
+            if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
+                this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
+                this._updateMarkers();
+                this._rightHandle.x(this._width - this._rightHandle.width());
+            }
+            this._updateVolumeSlider();
             this.updatePreviews();
         }
     };
@@ -18393,12 +18401,47 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }.bind(this));
         return markersGroup;
     };
+    SourceGroup.prototype._updateMarkers = function () {
+        const self = this;
+        if (this._markersGroup) {
+            this._markersGroup.getChildren().forEach(function (markerLine, index) {
+                const marker = self._source.markers[index];
+                const markerX = self._view.timeToPixels(marker - self._source.mediaStartTime);
+                markerLine.points([
+                    markerX,
+                    0,
+                    markerX,
+                    self._unwrappedHeight
+                ]);
+            });
+        }
+    };
     SourceGroup.prototype._getYFromVolume = function (volume) {
         return this._borderWidth + (this._height - 2 * this._borderWidth) * (this._source.volumeRange[1] - volume) / (this._source.volumeRange[1] - this._source.volumeRange[0]);
     };
     SourceGroup.prototype._getVolumeFromY = function (y) {
         return this._source.volumeRange[1] - (y - this._borderWidth) / (this._height - 2 * this._borderWidth) * (this._source.volumeRange[1] - this._source.volumeRange[0]);
     };
+    SourceGroup.prototype._updateVolumeSlider = function () {
+        const width = this._width;
+        if (this._volumeSliderGroup) {
+            this._volumeSliderGroup.getChildren().forEach(function (child) {
+                if (child instanceof Konva.Group) {
+                    child.width(width);
+                    child.getChildren().forEach(function (node) {
+                        if (node instanceof Konva.Line) {
+                            node.points([
+                                0,
+                                0,
+                                width,
+                                0
+                            ]);
+                        }
+                    });
+                }
+            });
+        }
+    };
     SourceGroup.prototype._getVolumeSlider = function () {
         if (!this._volumeSliderGroup) {
             this._volumeSliderGroup = this._createVolumeSlider();
@@ -18410,9 +18453,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var volumeY = this._getYFromVolume(this._source.volume);
         var volumeGroup = new Konva.Group({
             x: 0,
-            y: 0,
-            width: this._width,
-            height: this._height
+            y: 0
         });
         var volumeText = new Konva.Text({
             x: 0,

package/src/source-group.js

@@ -54,6 +54,7 @@ define([
     this._wrappedHeight = this._peaks.options.wrappedLineHeight;
     this._borderWidth = this._source.borderWidth || 0;
     this._height = this._unwrappedHeight;
+    this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
 
     this._previewList = [];
 
@@ -164,19 +165,31 @@ define([
   };
 
   SourceGroup.prototype.update = function() {
-    var startPixel = this._view.timeToPixels(this._source.startTime);
-    var endPixel   = this._view.timeToPixels(this._source.endTime);
-    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+    const startPixel = this._view.timeToPixels(this._source.startTime);
+    const endPixel   = this._view.timeToPixels(this._source.endTime);
+    const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+    const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
 
     this._group.x(startPixel - frameOffset);
 
     this._x = startPixel;
 
-    var newWidth = endPixel - startPixel;
+    const newWidth = endPixel - startPixel;
 
     if (newWidth !== this._width) {
       this._width = newWidth;
 
+      // the zoom was changed
+      if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
+        this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
+
+        this._updateMarkers();
+
+        this._rightHandle.x(this._width - this._rightHandle.width());
+      }
+
+      this._updateVolumeSlider();
+
       // update unwrap
       this.updatePreviews();
     }
@@ -1025,6 +1038,19 @@ define([
     return markersGroup;
   };
 
+  SourceGroup.prototype._updateMarkers = function() {
+    const self = this;
+
+    if (this._markersGroup) {
+      this._markersGroup.getChildren().forEach(function(markerLine, index) {
+        const marker = self._source.markers[index];
+        const markerX = self._view.timeToPixels(marker - self._source.mediaStartTime);
+
+        markerLine.points([markerX, 0, markerX, self._unwrappedHeight]);
+      });
+    }
+  };
+
   SourceGroup.prototype._getYFromVolume = function(volume) {
     return this._borderWidth + (this._height - 2 * this._borderWidth) * (
       this._source.volumeRange[1] - volume
@@ -1041,6 +1067,23 @@ define([
     );
   };
 
+  SourceGroup.prototype._updateVolumeSlider = function() {
+    const width = this._width;
+
+    if (this._volumeSliderGroup) {
+      this._volumeSliderGroup.getChildren().forEach(function(child) {
+        if (child instanceof Konva.Group) {
+          child.width(width);
+          child.getChildren().forEach(function(node) {
+            if (node instanceof Konva.Line) {
+              node.points([0, 0, width, 0]);
+            }
+          });
+        }
+      });
+    }
+  };
+
   SourceGroup.prototype._getVolumeSlider = function() {
     if (!this._volumeSliderGroup) {
       this._volumeSliderGroup = this._createVolumeSlider();
@@ -1056,9 +1099,7 @@ define([
 
     var volumeGroup = new Konva.Group({
       x: 0,
-      y: 0,
-      width: this._width,
-      height: this._height
+      y: 0
     });
 
     var volumeText = new Konva.Text({