@checksub_team/peaks_timeline 1.4.19 → 1.4.20

package/package.json

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

package/peaks.js

@@ -15561,6 +15561,9 @@ 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);
@@ -16747,6 +16750,7 @@ 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;
@@ -16755,6 +16759,7 @@ 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) {
@@ -16775,6 +16780,7 @@ 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));
@@ -16824,6 +16830,7 @@ 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];
@@ -16849,6 +16856,7 @@ 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;
@@ -17033,6 +17041,7 @@ 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);
@@ -17041,11 +17050,25 @@ 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;

package/src/main.js

@@ -622,6 +622,12 @@ 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/segment.js

@@ -199,6 +199,8 @@ 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;
@@ -208,6 +210,8 @@ 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,6 +41,7 @@ define([
     this._group         = new Konva.Group();
 
     this._updatedSegments = [];
+    this._overlappingSegments = [];
 
     this._isMagnetized = false;
 
@@ -113,6 +114,8 @@ define([
   };
 
   SegmentsGroup.prototype._onSegmentsUpdate = function(segment) {
+    this._overlappingSegments = [];
+
     if (this._segments[segment.id]) {
       var redraw = false;
       var segmentShape = this._segmentShapes[segment.id];
@@ -143,6 +146,7 @@ define([
   SegmentsGroup.prototype._onSegmentUpdated = function() {
     this._peaks.emit('segments.updated', this._updatedSegments);
     this._updatedSegments = [];
+    this._overlappingSegments = [];
   };
 
   SegmentsGroup.prototype._onSegmentsAdd = function(segments) {
@@ -441,6 +445,8 @@ 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) {
@@ -452,6 +458,8 @@ define([
     }
 
     if (newXs) {
+      this.checkOverlapping(segment, 'overlapping after dragging');
+
       this._updateSegment(segment);
 
       this.addToUpdatedSegments(segment);
@@ -460,6 +468,27 @@ 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;