@checksub_team/peaks_timeline 1.4.18 → 1.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.4.18",
+  "version": "1.4.21",
   "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);
@@ -16560,6 +16563,7 @@ module.exports = function (Konva, SegmentMarker) {
     };
     SegmentShape.prototype._onSegmentDragStart = function () {
         this._view.setCursor('grab');
+        this._group.checkOverlapping(this._segment, 'overlapping before dragging');
         this._mouseDownX = this._view.getPointerPosition().x;
         this._initialStartTime = this._segment.startTime;
         this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
@@ -16569,6 +16573,7 @@ module.exports = function (Konva, SegmentMarker) {
     };
     SegmentShape.prototype._onSegmentDragEnd = function () {
         this._view.setCursor('pointer');
+        this._group.checkOverlapping(this._segment, 'overlapping after dragging');
         this._peaks.emit('segments.dragend', this._segment);
     };
     SegmentShape.prototype._onSegmentHandleDrag = function () {
@@ -16576,10 +16581,12 @@ module.exports = function (Konva, SegmentMarker) {
     };
     SegmentShape.prototype._onSegmentHandleDragStart = function (segmentMarker) {
         var startMarker = segmentMarker.isStartMarker();
+        this._group.checkOverlapping(this._segment, 'overlapping before dragging');
         this._peaks.emit('segments.dragstart', this._segment, startMarker);
     };
     SegmentShape.prototype._onSegmentHandleDragEnd = function (segmentMarker) {
         var startMarker = segmentMarker.isStartMarker();
+        this._group.checkOverlapping(this._segment, 'overlapping after dragging');
         this._peaks.emit('segments.dragend', this._segment, startMarker);
     };
     SegmentShape.prototype.fitToView = function () {
@@ -16621,7 +16628,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);
@@ -16747,6 +16754,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 +16763,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 +16784,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 +16834,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 +16860,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;
@@ -17046,12 +17058,25 @@ module.exports = function (SegmentShape, Utils, Konva) {
             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;
         var startLimited = false;
         var endLimited = false;
-        var segmentMagnetThreshold, width;
+        var segmentMagnetThreshold, width, previousSegment, nextSegment, newXs;
         if (this._isMagnetized) {
             segmentMagnetThreshold = this._view.pixelsToTime(this._peaks.options.segmentMagnetThreshold);
             if (newStartX !== null && newEndX !== null) {
@@ -17061,7 +17086,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         if (newStartX !== null) {
             newStartTime = this._view.pixelsToTime(newStartX);
             if (this._segments[segment.id].prevSegmentId) {
-                var previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
+                previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
                 if (this._isMagnetized) {
                     if (newStartTime < previousSegment.endTime + segmentMagnetThreshold) {
                         newStartX = this._view.timeToPixels(previousSegment.endTime);
@@ -17073,14 +17098,20 @@ module.exports = function (SegmentShape, Utils, Konva) {
                             endX: newEndX
                         };
                     }
-                } else if (segment.startTime > newStartTime) {
+                } else if (segment.startTime >= newStartTime) {
                     if (newStartTime < previousSegment.endTime) {
                         if (previousSegment.startTime + previousSegment.minSize > newStartTime) {
                             newStartTime = previousSegment.startTime + previousSegment.minSize;
                             startLimited = true;
                         }
                         if (previousSegment.endTime !== newStartTime) {
-                            previousSegment.endTime = 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);
+                            }
+                            if (newXs.endX !== null) {
+                                previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
+                            }
                             this._updateSegment(previousSegment);
                             this.addToUpdatedSegments(previousSegment);
                         }
@@ -17096,7 +17127,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         if (newEndX !== null) {
             newEndTime = this._view.pixelsToTime(newEndX);
             if (this._segments[segment.id].nextSegmentId) {
-                var nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
+                nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
                 if (this._isMagnetized) {
                     if (newEndTime > nextSegment.startTime - segmentMagnetThreshold) {
                         newEndX = this._view.timeToPixels(nextSegment.startTime);
@@ -17108,14 +17139,20 @@ module.exports = function (SegmentShape, Utils, Konva) {
                             endX: newEndX
                         };
                     }
-                } else if (segment.endTime < newEndTime) {
+                } else if (segment.endTime <= newEndTime) {
                     if (newEndTime > nextSegment.startTime) {
                         if (nextSegment.endTime - nextSegment.minSize < newEndTime) {
                             newEndTime = nextSegment.endTime - nextSegment.minSize;
                             endLimited = true;
                         }
                         if (nextSegment.startTime !== newEndTime) {
-                            nextSegment.startTime = newEndTime;
+                            newXs = this.manageCollision(nextSegment, this._view.timeToPixels(newEndTime), this._view.timeToPixels(nextSegment.endTime));
+                            if (newXs.startX !== null) {
+                                nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
+                            }
+                            if (newXs.endX !== null) {
+                                nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
+                            }
                             this._updateSegment(nextSegment);
                             this.addToUpdatedSegments(nextSegment);
                         }
@@ -17125,7 +17162,15 @@ module.exports = function (SegmentShape, Utils, Konva) {
             }
         }
         if (newStartTime !== null && newEndTime !== null) {
-            if (newEndTime - newStartTime < segment.minSize) {
+            if (Utils.roundTime(newEndTime - newStartTime) < segment.minSize) {
+                if (previousSegment && nextSegment) {
+                    if (Utils.roundTime(nextSegment.startTime - previousSegment.endTime) < segment.minSize) {
+                        return {
+                            startX: null,
+                            endX: null
+                        };
+                    }
+                }
                 if (startLimited) {
                     newEndTime = newStartTime + segment.minSize;
                 } else if (endLimited) {
@@ -17133,11 +17178,11 @@ module.exports = function (SegmentShape, Utils, Konva) {
                 }
             }
         } else if (newStartTime !== null) {
-            if (segment.endTime - newStartTime < segment.minSize) {
+            if (Utils.roundTime(segment.endTime - newStartTime) < segment.minSize) {
                 newStartTime = segment.endTime - segment.minSize;
             }
         } else if (newEndTime !== null) {
-            if (newEndTime - segment.startTime < segment.minSize) {
+            if (Utils.roundTime(newEndTime - segment.startTime) < segment.minSize) {
                 newEndTime = segment.startTime + segment.minSize;
             }
         }

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-shape.js

@@ -272,6 +272,8 @@ define([
   SegmentShape.prototype._onSegmentDragStart = function() {
     this._view.setCursor('grab');
 
+    this._group.checkOverlapping(this._segment, 'overlapping before dragging');
+
     this._mouseDownX = this._view.getPointerPosition().x;
     this._initialStartTime = this._segment.startTime;
     this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
@@ -284,6 +286,8 @@ define([
   SegmentShape.prototype._onSegmentDragEnd = function() {
     this._view.setCursor('pointer');
 
+    this._group.checkOverlapping(this._segment, 'overlapping after dragging');
+
     this._peaks.emit('segments.dragend', this._segment);
   };
 
@@ -302,6 +306,8 @@ define([
   SegmentShape.prototype._onSegmentHandleDragStart = function(segmentMarker) {
     var startMarker = segmentMarker.isStartMarker();
 
+    this._group.checkOverlapping(this._segment, 'overlapping before dragging');
+
     this._peaks.emit('segments.dragstart', this._segment, startMarker);
   };
 
@@ -312,6 +318,8 @@ define([
   SegmentShape.prototype._onSegmentHandleDragEnd = function(segmentMarker) {
     var startMarker = segmentMarker.isStartMarker();
 
+    this._group.checkOverlapping(this._segment, 'overlapping after dragging');
+
     this._peaks.emit('segments.dragend', this._segment, startMarker);
   };
 

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,6 +191,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 +202,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) {
@@ -460,12 +464,31 @@ 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;
     var startLimited = false;
     var endLimited = false;
-    var segmentMagnetThreshold, width;
+    var segmentMagnetThreshold, width, previousSegment, nextSegment, newXs;
 
     if (this._isMagnetized) {
       segmentMagnetThreshold = this._view.pixelsToTime(
@@ -483,7 +506,7 @@ define([
 
       if (this._segments[segment.id].prevSegmentId) {
         // there is another segment to the left
-        var previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
+        previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
 
         if (this._isMagnetized) {
           if (newStartTime < previousSegment.endTime + segmentMagnetThreshold) {
@@ -498,7 +521,7 @@ define([
             };
           }
         }
-        else if (segment.startTime > newStartTime) {
+        else if (segment.startTime >= newStartTime) {
           // startMarker moved to the left
           if (newStartTime < previousSegment.endTime) {
             // there is collision
@@ -508,7 +531,19 @@ define([
             }
 
             if (previousSegment.endTime !== newStartTime) {
-              previousSegment.endTime = 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);
+              }
+
+              if (newXs.endX !== null) {
+                previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
+              }
               this._updateSegment(previousSegment);
               this.addToUpdatedSegments(previousSegment);
             }
@@ -529,7 +564,7 @@ define([
 
       if (this._segments[segment.id].nextSegmentId) {
         // there is another segment to the right
-        var nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
+        nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
 
         if (this._isMagnetized) {
           if (newEndTime > nextSegment.startTime - segmentMagnetThreshold) {
@@ -544,7 +579,7 @@ define([
             };
           }
         }
-        else if (segment.endTime < newEndTime) {
+        else if (segment.endTime <= newEndTime) {
           // endMarker moved to the right
           if (newEndTime > nextSegment.startTime) {
             // there is collision
@@ -554,7 +589,19 @@ define([
             }
 
             if (nextSegment.startTime !== newEndTime) {
-              nextSegment.startTime = newEndTime;
+              newXs = this.manageCollision(
+                nextSegment,
+                this._view.timeToPixels(newEndTime),
+                this._view.timeToPixels(nextSegment.endTime)
+              );
+
+              if (newXs.startX !== null) {
+                nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
+              }
+
+              if (newXs.endX !== null) {
+                nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
+              }
               this._updateSegment(nextSegment);
               this.addToUpdatedSegments(nextSegment);
             }
@@ -568,7 +615,16 @@ define([
 
     // Check for minimal size of segment
     if (newStartTime !== null && newEndTime !== null) {
-      if (newEndTime - newStartTime < segment.minSize) {
+      if (Utils.roundTime(newEndTime - newStartTime) < segment.minSize) {
+        if (previousSegment && nextSegment) {
+          if (Utils.roundTime(nextSegment.startTime - previousSegment.endTime) < segment.minSize) {
+            return {
+              startX: null,
+              endX: null
+            };
+          }
+        }
+
         if (startLimited) {
           newEndTime = newStartTime + segment.minSize;
         }
@@ -578,12 +634,12 @@ define([
       }
     }
     else if (newStartTime !== null) {
-      if (segment.endTime - newStartTime < segment.minSize) {
+      if (Utils.roundTime(segment.endTime - newStartTime) < segment.minSize) {
         newStartTime = segment.endTime - segment.minSize;
       }
     }
     else if (newEndTime !== null) {
-      if (newEndTime - segment.startTime < segment.minSize) {
+      if (Utils.roundTime(newEndTime - segment.startTime) < segment.minSize) {
         newEndTime = segment.startTime + segment.minSize;
       }
     }