@checksub_team/peaks_timeline 1.6.6 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.6.6",
+  "version": "1.8.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) {
@@ -15685,9 +15691,10 @@ module.exports = function (Utils, SourceGroup, Konva) {
     'use strict';
     var TIME_X_OFFSET = 20;
     var TIME_Y_OFFSET = 10;
-    function ModeLayer(peaks, view, stage, initialMode) {
+    function ModeLayer(peaks, view, playheadLayer, stage, initialMode) {
         this._peaks = peaks;
         this._view = view;
+        this._playheadLayer = playheadLayer;
         this._stage = stage;
         this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
         this._prepareDefaultMode();
@@ -15805,37 +15812,37 @@ module.exports = function (Utils, SourceGroup, Konva) {
         this._cutGroup.visible(true);
         this._layer.draw();
     };
-    ModeLayer.prototype._updateCursorTime = function (mousePosition) {
+    ModeLayer.prototype._updateCursorTime = function (position) {
         var hoveredElement = this._view.getHoveredElement();
         if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
-            this._timeLabel.text(Utils.formatTime(this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()), false));
+            this._timeLabel.text(Utils.formatTime(this._view.pixelsToTime(position.x + this._view.getFrameOffset()), false));
             this._timeBackground.width(this._timeLabel.width() + 8);
-            this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
-            if (mousePosition.y > this._view.getHeight() - this._timeBackground.height() - TIME_Y_OFFSET) {
-                this._cursorTime.y(mousePosition.y - TIME_Y_OFFSET);
+            this._cursorTime.x(position.x + TIME_X_OFFSET);
+            if (position.y > this._view.getHeight() - this._timeBackground.height() - TIME_Y_OFFSET) {
+                this._cursorTime.y(position.y - TIME_Y_OFFSET);
             } else {
-                this._cursorTime.y(mousePosition.y + TIME_Y_OFFSET);
+                this._cursorTime.y(position.y + TIME_Y_OFFSET);
             }
             this._cursorTime.visible(true);
         } else {
             this._cursorTime.visible(false);
         }
     };
-    ModeLayer.prototype._updateCuttingLine = function (mousePosition) {
+    ModeLayer.prototype._updateCuttingLine = function (position) {
         var hoveredElement = this._view.getHoveredElement();
         if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
             var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
             if (hoveredElement.getWidth() >= 2 * minSize) {
                 var height = hoveredElement.getCurrentHeight();
                 var y = hoveredElement.getY();
-                if (mousePosition.x < hoveredElement.x() + minSize) {
+                if (position.x < hoveredElement.x() + minSize) {
                     this._cuttingLine.points([
                         hoveredElement.x() + minSize,
                         y,
                         hoveredElement.x() + minSize,
                         y + height
                     ]);
-                } else if (mousePosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
+                } else if (position.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
                     this._cuttingLine.points([
                         hoveredElement.x() + hoveredElement.getWidth() - minSize,
                         y,
@@ -15844,9 +15851,9 @@ module.exports = function (Utils, SourceGroup, Konva) {
                     ]);
                 } else {
                     this._cuttingLine.points([
-                        mousePosition.x,
+                        position.x,
                         y,
-                        mousePosition.x,
+                        position.x,
                         y + height
                     ]);
                 }
@@ -15864,8 +15871,17 @@ module.exports = function (Utils, SourceGroup, Konva) {
     ModeLayer.prototype._onMouseMoveInCutMode = function () {
         var mousePosition = this._stage.getPointerPosition();
         mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
-        this._updateCursorTime(mousePosition);
-        this._updateCuttingLine(mousePosition);
+        var cuttingPosition = mousePosition;
+        var hoveredElement = this._view.getHoveredElement();
+        if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
+            var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
+            var playheadIsOnHoveredElement = playheadPositionX >= hoveredElement.x() && playheadPositionX <= hoveredElement.x() + hoveredElement.getWidth();
+            if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
+                cuttingPosition.x = playheadPositionX;
+            }
+        }
+        this._updateCursorTime(cuttingPosition);
+        this._updateCuttingLine(cuttingPosition);
         this._layer.draw();
     };
     ModeLayer.prototype._onMouseLeaveInCutMode = function () {
@@ -15877,22 +15893,28 @@ module.exports = function (Utils, SourceGroup, Konva) {
         mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
         var hoveredElement = this._view.getHoveredElement();
         if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
+            var cuttingPosition = mousePosition;
+            var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
+            var playheadIsOnHoveredElement = playheadPositionX >= hoveredElement.x() && playheadPositionX <= hoveredElement.x() + hoveredElement.getWidth();
+            if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
+                cuttingPosition.x = playheadPositionX;
+            }
             var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
             if (hoveredElement.getWidth() >= 2 * minSize) {
                 var cuttingPixel;
-                if (mousePosition.x < hoveredElement.x() + minSize) {
+                if (cuttingPosition.x < hoveredElement.x() + minSize) {
                     cuttingPixel = hoveredElement.x() + minSize;
-                } else if (mousePosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
+                } else if (cuttingPosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
                     cuttingPixel = hoveredElement.x() + hoveredElement.getWidth() - minSize;
                 } else {
-                    cuttingPixel = mousePosition.x;
+                    cuttingPixel = cuttingPosition.x;
                 }
                 cuttingPixel -= hoveredElement.x();
                 this._cuttingLine.visible(false);
                 this._peaks.emit('source.cut', hoveredElement.getSource(), this._view.pixelsToTime(cuttingPixel));
                 this._view.setHoveredElement(null);
-                this._updateCursorTime(mousePosition);
-                this._updateCuttingLine(mousePosition);
+                this._updateCursorTime(cuttingPosition);
+                this._updateCuttingLine(cuttingPosition);
                 this._layer.draw();
             }
         }
@@ -19911,7 +19933,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         var time = self._peaks.player.getCurrentTime();
         self._syncPlayhead(time);
         self._hoveredElement = null;
-        self._modeLayer = new ModeLayer(peaks, self, self._stage, 'default');
+        self._modeLayer = new ModeLayer(peaks, self, self._playheadLayer, self._stage, 'default');
         self._modeLayer.addToStage(self._stage);
         self._mouseDragHandler = new MouseDragHandler(self._stage, {
             onMouseDown: function (mousePosX, mousePosY) {

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/mode-layer.js

@@ -27,9 +27,10 @@ define([
    * @param {String} initialMode
    */
 
-  function ModeLayer(peaks, view, stage, initialMode) {
+  function ModeLayer(peaks, view, playheadLayer, stage, initialMode) {
     this._peaks = peaks;
     this._view = view;
+    this._playheadLayer = playheadLayer;
     this._stage = stage;
 
     this._layer = new Konva.Layer({
@@ -182,27 +183,27 @@ define([
     this._layer.draw();
   };
 
-  ModeLayer.prototype._updateCursorTime = function(mousePosition) {
+  ModeLayer.prototype._updateCursorTime = function(position) {
     var hoveredElement = this._view.getHoveredElement();
 
     if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
       this._timeLabel.text(
         Utils.formatTime(
-          this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()),
+          this._view.pixelsToTime(position.x + this._view.getFrameOffset()),
           false
         )
       );
 
       this._timeBackground.width(this._timeLabel.width() + 8);
 
-      this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
+      this._cursorTime.x(position.x + TIME_X_OFFSET);
 
-      if (mousePosition.y > this._view.getHeight()
+      if (position.y > this._view.getHeight()
                             - this._timeBackground.height() - TIME_Y_OFFSET) {
-        this._cursorTime.y(mousePosition.y - TIME_Y_OFFSET);
+        this._cursorTime.y(position.y - TIME_Y_OFFSET);
       }
       else {
-        this._cursorTime.y(mousePosition.y + TIME_Y_OFFSET);
+        this._cursorTime.y(position.y + TIME_Y_OFFSET);
       }
 
       this._cursorTime.visible(true);
@@ -212,7 +213,7 @@ define([
     }
   };
 
-  ModeLayer.prototype._updateCuttingLine = function(mousePosition) {
+  ModeLayer.prototype._updateCuttingLine = function(position) {
     var hoveredElement = this._view.getHoveredElement();
 
     if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
@@ -222,7 +223,7 @@ define([
         var height = hoveredElement.getCurrentHeight();
         var y = hoveredElement.getY();
 
-        if (mousePosition.x < hoveredElement.x() + minSize) {
+        if (position.x < hoveredElement.x() + minSize) {
           this._cuttingLine.points([
             hoveredElement.x() + minSize,
             y,
@@ -230,7 +231,7 @@ define([
             y + height
           ]);
         }
-        else if (mousePosition.x
+        else if (position.x
           > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
           this._cuttingLine.points([
             hoveredElement.x() + hoveredElement.getWidth() - minSize,
@@ -240,7 +241,7 @@ define([
           ]);
         }
         else {
-          this._cuttingLine.points([mousePosition.x, y, mousePosition.x, y + height]);
+          this._cuttingLine.points([position.x, y, position.x, y + height]);
         }
         this._cuttingLine.visible(true);
       }
@@ -262,8 +263,22 @@ define([
 
     mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
 
-    this._updateCursorTime(mousePosition);
-    this._updateCuttingLine(mousePosition);
+    var cuttingPosition = mousePosition;
+    var hoveredElement = this._view.getHoveredElement();
+
+    if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
+      var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
+      var playheadIsOnHoveredElement =
+        playheadPositionX >= hoveredElement.x() &&
+        playheadPositionX <= (hoveredElement.x() + hoveredElement.getWidth());
+
+      if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
+        cuttingPosition.x = playheadPositionX;
+      }
+    }
+
+    this._updateCursorTime(cuttingPosition);
+    this._updateCuttingLine(cuttingPosition);
 
     this._layer.draw();
   };
@@ -282,21 +297,32 @@ define([
     var hoveredElement = this._view.getHoveredElement();
 
     if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
+      var cuttingPosition = mousePosition;
+      var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
+
+      var playheadIsOnHoveredElement =
+        playheadPositionX >= hoveredElement.x() &&
+        playheadPositionX <= (hoveredElement.x() + hoveredElement.getWidth());
+
+      if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
+        cuttingPosition.x = playheadPositionX;
+      }
+
       var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
 
       if (hoveredElement.getWidth() >= 2 * minSize) {
         var cuttingPixel;
 
-        if (mousePosition.x < hoveredElement.x() + minSize) {
+        if (cuttingPosition.x < hoveredElement.x() + minSize) {
           cuttingPixel = hoveredElement.x() + minSize;
         }
-        else if (mousePosition.x
+        else if (cuttingPosition.x
           > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
           cuttingPixel = hoveredElement.x()
                           + hoveredElement.getWidth() - minSize;
         }
         else {
-          cuttingPixel = mousePosition.x;
+          cuttingPixel = cuttingPosition.x;
         }
 
         // Relative cuttingPixel
@@ -312,8 +338,8 @@ define([
 
         this._view.setHoveredElement(null);
 
-        this._updateCursorTime(mousePosition);
-        this._updateCuttingLine(mousePosition);
+        this._updateCursorTime(cuttingPosition);
+        this._updateCuttingLine(cuttingPosition);
 
         this._layer.draw();
       }

package/src/timeline-zoomview.js

@@ -146,7 +146,7 @@ define([
 
     self._hoveredElement = null;
 
-    self._modeLayer = new ModeLayer(peaks, self, self._stage, 'default');
+    self._modeLayer = new ModeLayer(peaks, self, self._playheadLayer, self._stage, 'default');
     self._modeLayer.addToStage(self._stage);
 
     self._mouseDragHandler = new MouseDragHandler(self._stage, {