@checksub_team/peaks_timeline 1.4.20 → 1.4.24

package/package.json

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

package/peaks.js

@@ -15419,7 +15419,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,
-            minSegmentSize: 0.2
+            minSegmentSize: 0.2,
+            canMoveSourcesBetweenLines: true
         };
         this.logger = console.error.bind(console);
         return this;
@@ -15561,9 +15562,6 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.allowInteractions = function (forSources, forSegments) {
         return this.view.allowInteractions(forSources, forSegments);
     };
-    Peaks.prototype.checkOverlapping = function (segment, message) {
-        return this.view.getSegmentsGroup().checkOverlapping(segment, message);
-    };
     Peaks.prototype._addWindowResizeHandler = function () {
         this._onResize = this._onResize.bind(this);
         window.addEventListener('resize', this._onResize);
@@ -15992,17 +15990,17 @@ module.exports = function (Utils) {
     };
     Player.prototype.play = function () {
         if (!this._playInterval) {
-            var prevTime = Date.now();
+            var prevTime = performance.now();
             var time;
             var self = this;
             this._isPlaying = true;
             this._peaks.overrideInteractions(true, false);
             this._playInterval = setInterval(function () {
-                time = Date.now();
+                time = performance.now();
                 self._currentTime += (time - prevTime) / 1000 * self._speed;
                 prevTime = time;
                 self._peaks.emit('timeline.update', self._currentTime);
-            }, 10);
+            }, 20);
             this._peaks.emit('timeline.play', this._currentTime);
         }
     };
@@ -16624,7 +16622,7 @@ module.exports = function (Utils) {
         }
         if (options.endTime < 0) {
             options.endTime = 0;
-        } else if (options.endTime < options.startTime + peaks.options.minSegmentSize) {
+        } else if (options.endTime - options.startTime < peaks.options.minSegmentSize) {
             options.endTime = options.startTime + peaks.options.minSegmentSize;
         }
         options.startTime = Utils.roundTime(options.startTime);
@@ -16750,7 +16748,6 @@ module.exports = function (Utils) {
         };
         Utils.extend(opts, options);
         validateSegment(this._peaks, opts, 'update()');
-        this._peaks.checkOverlapping(this, 'overlapping before manual update');
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
         this._labelText = opts.labelText;
@@ -16759,7 +16756,6 @@ module.exports = function (Utils) {
         this._handleTextColor = opts.handleTextColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
-        this._peaks.checkOverlapping(this, 'overlapping after manual update');
         this._peaks.emit('segment.updated', this);
     };
     Segment.prototype.isVisible = function (startTime, endTime) {
@@ -16780,7 +16776,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._segmentShapes = {};
         this._group = new Konva.Group();
         this._updatedSegments = [];
-        this._overlappingSegments = [];
         this._isMagnetized = false;
         this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
         this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
@@ -16830,7 +16825,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
         return activeSegment;
     };
     SegmentsGroup.prototype._onSegmentsUpdate = function (segment) {
-        this._overlappingSegments = [];
         if (this._segments[segment.id]) {
             var redraw = false;
             var segmentShape = this._segmentShapes[segment.id];
@@ -16856,7 +16850,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
     SegmentsGroup.prototype._onSegmentUpdated = function () {
         this._peaks.emit('segments.updated', this._updatedSegments);
         this._updatedSegments = [];
-        this._overlappingSegments = [];
     };
     SegmentsGroup.prototype._onSegmentsAdd = function (segments) {
         var self = this;
@@ -17041,7 +17034,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
         }
     };
     SegmentsGroup.prototype.updateSegment = function (segment, newStartX, newEndX) {
-        this.checkOverlapping(segment, 'overlapping before dragging');
         var newXs = this.manageCollision(segment, newStartX, newEndX);
         if (newXs.startX !== null) {
             segment.startTime = this._view.pixelsToTime(newXs.startX);
@@ -17050,25 +17042,11 @@ module.exports = function (SegmentShape, Utils, Konva) {
             segment.endTime = this._view.pixelsToTime(newXs.endX);
         }
         if (newXs) {
-            this.checkOverlapping(segment, 'overlapping after dragging');
             this._updateSegment(segment);
             this.addToUpdatedSegments(segment);
             this._draw();
         }
     };
-    SegmentsGroup.prototype.checkOverlapping = function (segment, message) {
-        if (this._segments[segment.id].prevSegmentId && this._segments[this._segments[segment.id].prevSegmentId].segment.endTime > segment.startTime || this._segments[segment.id].nextSegmentId && this._segments[this._segments[segment.id].nextSegmentId].segment.startTime < segment.endTime) {
-            if (!this._overlappingSegments.includes(segment.id)) {
-                this._peaks.emit('segments.overlap', {
-                    message: message,
-                    segment: segment,
-                    prevSegment: this._segments[segment.id].prevSegmentId ? this._segments[this._segments[segment.id].prevSegmentId].segment : null,
-                    nextSegment: this._segments[segment.id].nextSegmentId ? this._segments[this._segments[segment.id].nextSegmentId].segment : null
-                });
-                this._overlappingSegments.push(segment.id);
-            }
-        }
-    };
     SegmentsGroup.prototype.manageCollision = function (segment, newStartX, newEndX) {
         var newStartTime = null;
         var newEndTime = null;
@@ -18671,7 +18649,9 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
             endX: newEndX,
             updateWidth: false
         };
-        this.manageVerticalPosition(source, newY);
+        if (this._peaks.options.canMoveSourcesBetweenLines) {
+            this.manageVerticalPosition(source, newY);
+        }
         newXs = this.manageSourceOrder(source, newStartX, newEndX);
         newXs = this.manageCollision(source, newXs.startX, newXs.endX);
         source.updateTimes(newXs.startX !== null ? this._view.pixelsToTime(newXs.startX) : null, newXs.endX !== null ? this._view.pixelsToTime(newXs.endX) : null);

package/src/main.js

@@ -310,7 +310,13 @@ define([
       /**
        * The minimal size of a segment, in seconds
        */
-      minSegmentSize:           0.2
+      minSegmentSize:           0.2,
+
+      /**
+       * Indicates whether or not sources can be dragged
+       * from one line to another
+       */
+      canMoveSourcesBetweenLines: true
     };
 
     /**
@@ -622,12 +628,6 @@ define([
             .allowInteractions(forSources, forSegments);
   };
 
-  Peaks.prototype.checkOverlapping = function(segment, message) {
-    return this.view
-            .getSegmentsGroup()
-            .checkOverlapping(segment, message);
-  };
-
   Peaks.prototype._addWindowResizeHandler = function() {
     this._onResize = this._onResize.bind(this);
     window.addEventListener('resize', this._onResize);

package/src/player.js

@@ -66,7 +66,7 @@ define([
 
   Player.prototype.play = function() {
     if (!this._playInterval) {
-      var prevTime = Date.now();
+      var prevTime = performance.now();
       var time;
       var self = this;
 
@@ -75,11 +75,11 @@ define([
       this._peaks.overrideInteractions(true, false);
 
       this._playInterval = setInterval(function() {
-        time = Date.now();
+        time = performance.now();
         self._currentTime += ((time - prevTime) / 1000) * self._speed;
         prevTime = time;
         self._peaks.emit('timeline.update', self._currentTime);
-      }, 10);
+      }, 20);
 
       this._peaks.emit('timeline.play', this._currentTime);
     }

package/src/segment.js

@@ -24,7 +24,6 @@ define([
 
     options.startTime = Utils.roundTime(options.startTime);
     options.endTime = Utils.roundTime(options.endTime);
-
     if (options.startTime < 0) {
       options.startTime = 0;
     }
@@ -32,20 +31,13 @@ define([
     if (options.endTime < 0) {
       options.endTime = 0;
     }
-    else if (options.endTime < options.startTime + peaks.options.minSegmentSize) {
+    else if (options.endTime - options.startTime < peaks.options.minSegmentSize) {
       options.endTime = options.startTime + peaks.options.minSegmentSize;
     }
 
     options.startTime = Utils.roundTime(options.startTime);
     options.endTime = Utils.roundTime(options.endTime);
 
-    // if (options.endTime <= options.startTime) {
-    //   // eslint-disable-next-line max-len
-    //   throw new RangeError(
-    //     'peaks.segments.' + context + ': endTime should be greater than startTime'
-    //   );
-    // }
-
     if (options.opacity < 0 || options.opacity > 1) {
       // eslint-disable-next-line max-len
       throw new RangeError('peaks.segments.' + context + ': opacity should be between 0 and 1');
@@ -199,8 +191,6 @@ define([
 
     validateSegment(this._peaks, opts, 'update()');
 
-    this._peaks.checkOverlapping(this, 'overlapping before manual update');
-
     this._startTime       = opts.startTime;
     this._endTime         = opts.endTime;
     this._labelText       = opts.labelText;
@@ -210,8 +200,6 @@ define([
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
 
-    this._peaks.checkOverlapping(this, 'overlapping after manual update');
-
     this._peaks.emit('segment.updated', this);
   };
 

package/src/segments-group.js

@@ -41,7 +41,6 @@ define([
     this._group         = new Konva.Group();
 
     this._updatedSegments = [];
-    this._overlappingSegments = [];
 
     this._isMagnetized = false;
 
@@ -114,8 +113,6 @@ define([
   };
 
   SegmentsGroup.prototype._onSegmentsUpdate = function(segment) {
-    this._overlappingSegments = [];
-
     if (this._segments[segment.id]) {
       var redraw = false;
       var segmentShape = this._segmentShapes[segment.id];
@@ -146,7 +143,6 @@ define([
   SegmentsGroup.prototype._onSegmentUpdated = function() {
     this._peaks.emit('segments.updated', this._updatedSegments);
     this._updatedSegments = [];
-    this._overlappingSegments = [];
   };
 
   SegmentsGroup.prototype._onSegmentsAdd = function(segments) {
@@ -445,8 +441,6 @@ define([
   };
 
   SegmentsGroup.prototype.updateSegment = function(segment, newStartX, newEndX) {
-    this.checkOverlapping(segment, 'overlapping before dragging');
-
     var newXs = this.manageCollision(segment, newStartX, newEndX);
 
     if (newXs.startX !== null) {
@@ -458,8 +452,6 @@ define([
     }
 
     if (newXs) {
-      this.checkOverlapping(segment, 'overlapping after dragging');
-
       this._updateSegment(segment);
 
       this.addToUpdatedSegments(segment);
@@ -468,27 +460,6 @@ define([
     }
   };
 
-  SegmentsGroup.prototype.checkOverlapping = function(segment, message) {
-    /* eslint-disable max-len */
-    if ((this._segments[segment.id].prevSegmentId
-        && this._segments[this._segments[segment.id].prevSegmentId].segment.endTime > segment.startTime)
-      || (this._segments[segment.id].nextSegmentId
-        && this._segments[this._segments[segment.id].nextSegmentId].segment.startTime < segment.endTime)) {
-
-      if (!this._overlappingSegments.includes(segment.id)) {
-        this._peaks.emit('segments.overlap', {
-          message: message,
-          segment: segment,
-          prevSegment: this._segments[segment.id].prevSegmentId ? this._segments[this._segments[segment.id].prevSegmentId].segment : null,
-          nextSegment: this._segments[segment.id].nextSegmentId ? this._segments[this._segments[segment.id].nextSegmentId].segment : null
-        });
-        this._overlappingSegments.push(segment.id);
-      }
-
-    }
-    /* eslint-enable max-len */
-  };
-
   SegmentsGroup.prototype.manageCollision = function(segment, newStartX, newEndX) {
     var newStartTime = null;
     var newEndTime = null;
@@ -537,7 +508,11 @@ define([
             }
 
             if (previousSegment.endTime !== newStartTime) {
-              newXs = this.manageCollision(previousSegment, this._view.timeToPixels(previousSegment.startTime), this._view.timeToPixels(newStartTime));
+              newXs = this.manageCollision(
+                previousSegment,
+                this._view.timeToPixels(previousSegment.startTime),
+                this._view.timeToPixels(newStartTime)
+              );
 
               if (newXs.startX !== null) {
                 previousSegment.startTime = this._view.pixelsToTime(newXs.startX);
@@ -591,7 +566,11 @@ define([
             }
 
             if (nextSegment.startTime !== newEndTime) {
-              newXs = this.manageCollision(nextSegment, this._view.timeToPixels(newEndTime), this._view.timeToPixels(nextSegment.endTime));
+              newXs = this.manageCollision(
+                nextSegment,
+                this._view.timeToPixels(newEndTime),
+                this._view.timeToPixels(nextSegment.endTime)
+              );
 
               if (newXs.startX !== null) {
                 nextSegment.startTime = this._view.pixelsToTime(newXs.startX);

package/src/sources-layer.js

@@ -297,7 +297,9 @@ define([
       updateWidth: false
     };
 
-    this.manageVerticalPosition(source, newY);
+    if (this._peaks.options.canMoveSourcesBetweenLines) {
+      this.manageVerticalPosition(source, newY);
+    }
 
     newXs = this.manageSourceOrder(source, newStartX, newEndX);