@checksub_team/peaks_timeline 1.6.5 → 1.7.0

package/package.json

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

package/peaks.js

@@ -15631,6 +15631,12 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
         this.options.lineHeight = newLineHeight;
         this.emit('options.set.line_height', oldHeight);
     };
+    Peaks.prototype.zoomIn = function () {
+        this.view.setZoom(this.view.getTimeToPixelsScale() + Math.floor(this.view.getTimeToPixelsScale() / 10) + 1);
+    };
+    Peaks.prototype.zoomOut = function () {
+        this.view.setZoom(this.view.getTimeToPixelsScale() - Math.floor(this.view.getTimeToPixelsScale() / 10) + 1);
+    };
     Peaks.prototype.destroy = function () {
         this._removeWindowResizeHandler();
         if (this.keyboardHandler) {
@@ -20770,18 +20776,18 @@ module.exports = function (Utils, Konva) {
     WaveformShape.prototype._sceneFunc = function (context) {
         var width = this._view.getWidth();
         var waveformData = this._layer.getLoadedData(this._url).data;
-        var startPixels = 0, startOffset = 0;
+        var startPixel = 0, startOffset = 0;
         if (this._source) {
-            startPixels = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0);
+            startPixel = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0);
             startOffset = this._view.timeToPixels(this._source.mediaStartTime);
         }
-        var endPixels = width;
+        var endPixel = width;
         if (this._source) {
-            endPixels = Math.min(this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0), waveformData.length);
+            endPixel = Math.min(this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0), waveformData.length);
         }
-        this._drawWaveform(context, waveformData, startPixels, startOffset, endPixels, this._height);
+        this._drawWaveform(context, waveformData, startPixel, startOffset, endPixel, this._height);
     };
-    WaveformShape.prototype._drawWaveform = function (context, waveformData, startPixels, startOffset, endPixels, height) {
+    WaveformShape.prototype._drawWaveform = function (context, waveformData, startPixel, startOffset, endPixel, height) {
         var channels = waveformData.channels;
         var waveformTop = 0;
         var waveformHeight = Math.floor(height / channels);
@@ -20789,19 +20795,19 @@ module.exports = function (Utils, Konva) {
             if (i === channels - 1) {
                 waveformHeight = height - (channels - 1) * waveformHeight;
             }
-            this._drawChannel(context, waveformData.channel(i), startPixels, startOffset, endPixels, waveformTop, waveformHeight);
+            this._drawChannel(context, waveformData.channel(i), startPixel, startOffset, endPixel, waveformTop, waveformHeight);
             waveformTop += waveformHeight;
         }
     };
-    WaveformShape.prototype._drawChannel = function (context, channel, startPixels, startOffset, endPixels, top, height) {
+    WaveformShape.prototype._drawChannel = function (context, channel, startPixel, startOffset, endPixel, top, height) {
         var x, val;
         var amplitudeScale = this._view.getAmplitudeScale();
         context.beginPath();
-        for (x = startPixels; x < endPixels; x++) {
+        for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
             val = channel.min_sample(x);
             context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
         }
-        for (x = endPixels - 1; x >= startPixels; x--) {
+        for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
             val = channel.max_sample(x);
             context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
         }

package/src/main.js

@@ -745,6 +745,18 @@ define([
     this.emit('options.set.line_height', oldHeight);
   };
 
+  Peaks.prototype.zoomIn = function() {
+    this.view.setZoom(
+      this.view.getTimeToPixelsScale() + Math.floor(this.view.getTimeToPixelsScale() / 10) + 1
+    );
+  };
+
+  Peaks.prototype.zoomOut = function() {
+    this.view.setZoom(
+      this.view.getTimeToPixelsScale() - Math.floor(this.view.getTimeToPixelsScale() / 10) + 1
+    );
+  };
+
   /**
    * Cleans up a Peaks instance after use.
    */

package/src/waveform-shape.js

@@ -71,10 +71,10 @@ define(['./utils', 'konva'], function(Utils, Konva) {
     var width = this._view.getWidth();
     var waveformData = this._layer.getLoadedData(this._url).data;
 
-    var startPixels = 0, startOffset = 0;
+    var startPixel = 0, startOffset = 0;
 
     if (this._source) {
-      startPixels = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
+      startPixel = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
         this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
         0
       );
@@ -82,10 +82,10 @@ define(['./utils', 'konva'], function(Utils, Konva) {
       startOffset = this._view.timeToPixels(this._source.mediaStartTime);
     }
 
-    var endPixels = width;
+    var endPixel = width;
 
     if (this._source) {
-      endPixels = Math.min(
+      endPixel = Math.min(
         this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
           this._view.timeToPixels(this._source.endTime)
             - this._view.getFrameOffset()
@@ -99,9 +99,9 @@ define(['./utils', 'konva'], function(Utils, Konva) {
     this._drawWaveform(
       context,
       waveformData,
-      startPixels,
+      startPixel,
       startOffset,
-      endPixels,
+      endPixel,
       this._height
     );
   };
@@ -122,7 +122,7 @@ define(['./utils', 'konva'], function(Utils, Konva) {
    */
 
   WaveformShape.prototype._drawWaveform = function(context, waveformData,
-    startPixels, startOffset, endPixels, height) {
+    startPixel, startOffset, endPixel, height) {
     var channels = waveformData.channels;
 
     var waveformTop = 0;
@@ -136,9 +136,9 @@ define(['./utils', 'konva'], function(Utils, Konva) {
       this._drawChannel(
         context,
         waveformData.channel(i),
-        startPixels,
+        startPixel,
         startOffset,
-        endPixels,
+        endPixel,
         waveformTop,
         waveformHeight
       );
@@ -148,20 +148,20 @@ define(['./utils', 'konva'], function(Utils, Konva) {
   };
 
   WaveformShape.prototype._drawChannel = function(context, channel,
-    startPixels, startOffset, endPixels, top, height) {
+    startPixel, startOffset, endPixel, top, height) {
     var x, val;
 
     var amplitudeScale = this._view.getAmplitudeScale();
 
     context.beginPath();
 
-    for (x = startPixels; x < endPixels; x++) {
+    for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
       val = channel.min_sample(x);
 
       context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
     }
 
-    for (x = endPixels - 1; x >= startPixels; x--) {
+    for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
       val = channel.max_sample(x);
 
       context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);