@checksub_team/peaks_timeline 1.16.0-alpha.0 → 1.16.0-alpha.2

package/src/line-indicator.js

@@ -118,16 +118,6 @@ define([
     this.draw();
   };
 
-  LineIndicator.prototype._showMenu = function(menu) {
-    menu.style.display = 'block';
-    var containerRect = this._stage.container().getBoundingClientRect();
-
-    menu.style.top = containerRect.top
-                      + this._stage.getPointerPosition().y
-                      - menu.offsetHeight + 'px';
-    menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
-  };
-
   LineIndicator.prototype._createIndicator = function(line, type, text) {
     var indicator = new Konva.Group();
     var indicatorHeight = 0;

package/src/line.js

@@ -7,9 +7,10 @@
  */
 
 define([
+  './source-group',
   'konva',
   './utils'
-], function(Konva, Utils) {
+], function(SourceGroup, Konva, Utils) {
   'use strict';
 
   function Line(peaks, view, y, id, position) {
@@ -51,10 +52,10 @@ define([
     return this._id;
   };
 
-  Line.prototype.isEmpty = function() {
+  Line.prototype.countRemainingElements = function() {
     return this.isSegmentsLine() ?
-      this._segmentsGroup.isEmpty() :
-      Object.keys(this._sources).length === 0;
+      this._segmentsGroup.countRemainingElements() :
+      Object.keys(this._sources).length;
   };
 
   Line.prototype.isSegmentsLine = function() {
@@ -93,87 +94,71 @@ define([
     return this._height;
   };
 
-  Line.prototype.changeHeight = function(from, to) {
-    if (this._sourceHeights[from]) {
-      var oldHeight = this._height;
-
-      if (this._sourceHeights[to]) {
-        this._sourceHeights[to] += this._sourceHeights[from];
-      }
-      else {
-        this._sourceHeights[to] = this._sourceHeights[from];
+  Line.prototype._addHeight = function(height) {
+    if (this._sourceHeights[height]) {
+      this._sourceHeights[height]++;
+    }
+    else {
+      this._sourceHeights[height] = 1;
+      if (height > this._height) {
+        this._height = height;
       }
+    }
+  };
 
-      if (to > this._height) {
-        this._height = to;
-      }
-      else if (from === this._height) {
+  Line.prototype._subtractHeight = function(height) {
+    if (Object.keys(this._sources).length === 0) {
+      this._height = this._peaks.options.emptyLineHeight;
+      this._sourceHeights = {};
+    }
+    else {
+      this._sourceHeights[height]--;
+
+      if (this._sourceHeights[height] === 0
+        && height === this._height) {
+        delete this._sourceHeights[height];
         this._height = 0;
-        for (var height in this._sourceHeights) {
-          if (Utils.objectHasProperty(this._sourceHeights, height)) {
-            var parsedHeight = parseInt(height, 10);
+        for (var sourceHeight in this._sourceHeights) {
+          if (Utils.objectHasProperty(this._sourceHeights, sourceHeight)) {
+            var parsedHeight = parseInt(sourceHeight, 10);
 
-            if (parsedHeight !== from) {
-              if (parsedHeight > this._height) {
-                this._height = parsedHeight;
-              }
+            if (parsedHeight > this._height) {
+              this._height = parsedHeight;
             }
           }
         }
       }
-
-      if (this._height !== oldHeight) {
-        this._peaks.emit('line.heightChanged', this._position);
-      }
-
-      delete this._sourceHeights[from];
     }
   };
 
-  Line.prototype.updateLineHeight = function(sourceGroup, action) {
+  Line.prototype.updateLineHeight = function(source, action) {
     var oldHeight = this._height;
+    var sourceGroup = this._sourcesGroup[source.id];
     var sourceGroupHeight;
 
     switch (action) {
       case 'add':
-        sourceGroupHeight = sourceGroup.getCurrentHeight();
+        sourceGroupHeight = sourceGroup ?
+                            sourceGroup.getCurrentHeight() :
+                            SourceGroup.getHeights(source, this._peaks).current;
 
-        if (this._sourceHeights[sourceGroupHeight]) {
-          this._sourceHeights[sourceGroupHeight]++;
-        }
-        else {
-          this._sourceHeights[sourceGroupHeight] = 1;
-          if (sourceGroupHeight > this._height) {
-            this._height = sourceGroupHeight;
-          }
-        }
+        this._addHeight(sourceGroupHeight);
         break;
       case 'remove':
-        if (Object.keys(this._sources).length === 0) {
-          this._height = this._peaks.options.emptyLineHeight;
-          this._sourceHeights = {};
-        }
-        else {
-          sourceGroupHeight = sourceGroup.getCurrentHeight();
+        sourceGroupHeight = sourceGroup ?
+                            sourceGroup.getCurrentHeight() :
+                            SourceGroup.getHeights(source, this._peaks).current;
 
-          this._sourceHeights[sourceGroupHeight]--;
-
-          if (this._sourceHeights[sourceGroupHeight] === 0
-            && sourceGroupHeight === this._height) {
-            delete this._sourceHeights[sourceGroupHeight];
-            this._height = 0;
-            for (var height in this._sourceHeights) {
-              if (Utils.objectHasProperty(this._sourceHeights, height)) {
-                var parsedHeight = parseInt(height, 10);
-
-                if (parsedHeight > this._height) {
-                  this._height = parsedHeight;
-                }
-              }
-            }
-          }
-        }
+        this._subtractHeight(sourceGroupHeight);
         break;
+      default:
+        // wrappingChanged
+        var { unwrapped, wrapped } = sourceGroup ?
+                            sourceGroup.getHeights() :
+                            SourceGroup.getHeights(source, this._peaks);
+
+        this._addHeight(source.wrapped ? wrapped : unwrapped);
+        this._subtractHeight(source.wrapped ? unwrapped : wrapped);
     }
 
     if (this._height !== oldHeight) {
@@ -190,10 +175,16 @@ define([
     layer.add(this._group);
   };
 
-  Line.prototype.addSourceGroup = function(sourceGroup) {
-    var source = sourceGroup.getSource();
-
-    this._sourcesGroup[source.id] = sourceGroup;
+  /**
+   * Adds a source to the line.
+   * @param {Source} source - The source to add.
+   * @param {SourceGroup} sourceGroup - The source group of the source (optional).
+   * @returns {void}
+   */
+  Line.prototype.addSourceGroup = function(source, sourceGroup) {
+    if (sourceGroup) {
+      this._sourcesGroup[source.id] = sourceGroup;
+    }
 
     if (!this._sources[source.id]) {
       var newSource = {
@@ -218,15 +209,15 @@ define([
               ? this._sources[currentSource.prevSourceId].source.endTime
               : 0;
 
-            var newTimes = this._canBePlacedBetween(
+            const { newStartTime, newEndTime } = this._canBePlacedBetween(
               source.startTime,
               source.endTime,
               startLimit,
               currentSource.source.startTime
             );
 
-            if (newTimes) {
-              source.updateTimes(newTimes.start, newTimes.end);
+            if (newStartTime !== null && newEndTime !== null) {
+              source.updateTimes(newStartTime, newEndTime);
 
               if (currentSource.prevSourceId) {
                 this._sources[currentSource.prevSourceId].nextSourceId = source.id;
@@ -265,10 +256,10 @@ define([
         this._sources[source.id] = newSource;
       }
 
-      this.updateLineHeight(sourceGroup, 'add');
+      this.updateLineHeight(source, 'add');
     }
 
-    if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
+    if (sourceGroup && (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group))) {
       sourceGroup.addToGroup(this._group);
     }
   };
@@ -295,32 +286,26 @@ define([
 
   Line.prototype._canBePlacedBetween = function(startTime, endTime, startLimit, endLimit) {
     var timeWidth = Utils.roundTime(endTime - startTime);
-    var newTimes = null;
+    var newStartTime, newEndTime;
 
     if ((!endLimit && startTime > startLimit) || (startTime > startLimit && endTime < endLimit)) {
       // Can be placed at its wanted position with wanted start/end time
-      newTimes = {
-        start: startTime,
-        end: endTime
-      };
+      newStartTime = startTime;
+      newEndTime = endTime;
     }
     else if (Utils.roundTime(endLimit - startLimit) >= timeWidth) {
       // Can be placed at its wanted position but not with its wanted start/end time
       if (startTime > startLimit) {
-        newTimes = {
-          start: Utils.roundTime(endLimit - timeWidth),
-          end: endLimit
-        };
+        newStartTime = Utils.roundTime(endLimit - timeWidth);
+        newEndTime = endLimit;
       }
       else {
-        newTimes = {
-          start: startLimit,
-          end: Utils.roundTime(startLimit + timeWidth)
-        };
+        newStartTime = startLimit;
+        newEndTime = Utils.roundTime(startLimit + timeWidth);
       }
     }
 
-    return newTimes;
+    return { newStartTime, newEndTime };
   };
 
   Line.prototype.removeSourceGroup = function(source, isPermanent) {
@@ -354,7 +339,7 @@ define([
         this._firstSourceId = sourceData.nextSourceId;
       }
 
-      this.updateLineHeight(sourceGroup, 'remove');
+      this.updateLineHeight(source, 'remove');
     }
 
     return sourceGroup;
@@ -384,126 +369,116 @@ define([
     this._group.y(this._group.y() + dy);
   };
 
-  Line.prototype.manageSourceOrder = function(source, newTimes) {
-    var cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
+  Line.prototype.manageOrder = function(sources, startTime, endTime) {
+    const firstSource = sources[0];
+    const lastSource = sources[sources.length - 1];
+    const cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
+    var newStartTime = startTime;
+    var newEndTime = endTime;
     var tmpTimes;
 
-    var sourceDuration = source.endTime - source.startTime;
+    var sourceDuration = Utils.roundTime(endTime - startTime);
 
-    if (newTimes.start !== null && newTimes.end !== null) {
-      if (this._sources[source.id].prevSourceId) {
+    if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
+      if (this._sources[firstSource.id].prevSourceId) {
         // there is another source to the left
-        var previousStartTime = this._sources[this._sources[source.id].prevSourceId].source.startTime;
+        var previousStartTime = this._sources[this._sources[firstSource.id].prevSourceId].source.startTime;
 
-        if (cursorTime + this._view.getTimeOffset() < previousStartTime) {
+        if (Utils.roundTime(cursorTime + this._view.getTimeOffset()) < previousStartTime) {
           // we want to change order
-          tmpTimes = this._changeSourcePosition(
-            source,
+          tmpTimes = this._changeSourcesPosition(
+            sources,
             sourceDuration,
             cursorTime + this._view.getTimeOffset()
           );
 
-          if (tmpTimes) {
-            newTimes.start = tmpTimes.start;
-            newTimes.end = tmpTimes.end;
+          if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
+            newStartTime = tmpTimes.newStartTime;
+            newEndTime = tmpTimes.newEndTime;
           }
         }
       }
 
-      if (this._sources[source.id].nextSourceId) {
+      if (this._sources[lastSource.id].nextSourceId) {
         // there is another source to the right
-        var nextEndTime = this._sources[this._sources[source.id].nextSourceId].source.endTime;
+        var nextEndTime = this._sources[this._sources[lastSource.id].nextSourceId].source.endTime;
 
-        if (cursorTime + this._view.getTimeOffset() > nextEndTime) {
+        if (Utils.roundTime(cursorTime + this._view.getTimeOffset()) > nextEndTime) {
           // we want to change order
-          tmpTimes = this._changeSourcePosition(
-            source,
+          tmpTimes = this._changeSourcesPosition(
+            sources,
             sourceDuration,
             cursorTime + this._view.getTimeOffset()
           );
 
-          if (tmpTimes) {
-            newTimes.start = tmpTimes.start;
-            newTimes.end = tmpTimes.end;
+          if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
+            newStartTime = tmpTimes.newStartTime;
+            newEndTime = tmpTimes.newEndTime;
           }
         }
       }
     }
 
-    if (newTimes.start) {
-      newTimes.start = Utils.roundTime(newTimes.start);
-    }
-    if (newTimes.end) {
-      newTimes.end = Utils.roundTime(newTimes.end);
-    }
-
-    return newTimes;
+    return { newStartTime, newEndTime };
   };
 
-  Line.prototype._changeSourcePosition = function(source, sourceDuration, time) {
-    if (source.orderable && this._firstSourceId) {
-      var currentRange = {
-        start: null,
-        end: null
-      };
-      var startLimit = null;
-      var endLimit = null;
+  Line.prototype._changeSourcesPosition = function(sources, sourceDuration, time) {
+    var currentRange = {
+      start: null,
+      end: null
+    };
+    var startLimit = null;
+    var endLimit = null;
 
-      do {
-        if (!currentRange.end) {
-          currentRange.end = this._sources[this._firstSourceId];
-        }
-        else {
-          currentRange.start = currentRange.end;
-          currentRange.end = this._sources[currentRange.start.nextSourceId];
-        }
+    let newStartTime, newEndTime;
 
-        if (currentRange.start) {
-          startLimit = currentRange.start.source.endTime;
-        }
-        else {
-          startLimit = 0;
-        }
+    do {
+      if (!currentRange.end) {
+        currentRange.end = this._sources[this._firstSourceId];
+      }
+      else {
+        currentRange.start = currentRange.end;
+        currentRange.end = this._sources[currentRange.start.nextSourceId];
+      }
 
-        if (currentRange.end) {
-          endLimit = currentRange.end.source.startTime;
-        }
-        else {
-          endLimit = null;
-        }
+      if (currentRange.start) {
+        startLimit = currentRange.start.source.endTime;
+      }
+      else {
+        startLimit = 0;
+      }
 
-        if (time > startLimit && (endLimit === null || time < endLimit)) {
-          var newTimes = this._canBePlacedBetween(
-            time,
-            time + sourceDuration,
-            startLimit,
-            endLimit
-          );
+      if (currentRange.end) {
+        endLimit = currentRange.end.source.startTime;
+      }
+      else {
+        endLimit = null;
+      }
 
-          if (newTimes) {
-            if (newTimes.start) {
-              newTimes.start = Utils.roundTime(newTimes.start);
-            }
-            if (newTimes.end) {
-              newTimes.end = Utils.roundTime(newTimes.end);
-            }
+      if (time > startLimit && (endLimit === null || time < endLimit)) {
+        ({ newStartTime, newEndTime } = this._canBePlacedBetween(
+          time,
+          time + sourceDuration,
+          startLimit,
+          endLimit
+        ));
 
-            source.updateTimes(
-              newTimes.start,
-              newTimes.end
-            );
-            var prevSourceId = currentRange.start
-                                ? currentRange.start.source.id
-                                : null;
+        if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
+          let prevSourceId = currentRange.start
+                              ? currentRange.start.source.id
+                              : null;
 
+          sources.forEach(function(source) {
             this._moveSource(this._sources[source.id].source, prevSourceId);
-            return newTimes;
-          }
+            prevSourceId = source.id;
+          }.bind(this));
         }
-      } while (currentRange.end);
-    }
 
-    return null;
+        return { newStartTime, newEndTime };
+      }
+    } while (currentRange.end);
+
+    return { newStartTime, newEndTime };
   };
 
   Line.prototype._moveSource = function(source, prevSourceId) {
@@ -544,26 +519,21 @@ define([
     this._sources[source.id] = sourceObj;
   };
 
-  Line.prototype.manageCollision = function(source, newTimes) {
-    var originalStartTime = null;
-    var originalEndTime = null;
-    var newStartTime = null;
-    var newEndTime = null;
+  Line.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
+    var originalStartTime = newStartTime;
+    var originalEndTime = newEndTime;
     var startLimited = false;
     var endLimited = false;
+    const firstSource = sources[0];
+    const lastSource = sources[sources.length - 1];
 
-    newTimes.updateTimelineLength = false;
-
-    if (newTimes.start !== null) {
+    if (typeof newStartTime === 'number') {
       // startMarker changed
-      originalStartTime = newTimes.start;
-      newStartTime = originalStartTime;
-
-      if (source.startTime > newStartTime) {
+      if (firstSource.startTime > newStartTime) {
         // startMarker moved to the left
-        if (this._sources[source.id].prevSourceId) {
+        if (this._sources[firstSource.id].prevSourceId) {
           // there is another source to the left
-          var previousSource = this._sources[this._sources[source.id].prevSourceId]
+          var previousSource = this._sources[this._sources[firstSource.id].prevSourceId]
                                 .source;
 
           if (newStartTime < previousSource.endTime) {
@@ -581,16 +551,13 @@ define([
       }
     }
 
-    if (newTimes.end !== null) {
+    if (typeof newEndTime === 'number') {
       // endMarker changed
-      originalEndTime = newTimes.end;
-      newEndTime = originalEndTime;
-
-      if (source.endTime < newEndTime) {
+      if (lastSource.endTime < newEndTime) {
         // endMarker moved to the right
-        if (this._sources[source.id].nextSourceId) {
+        if (this._sources[lastSource.id].nextSourceId) {
           // there is another source to the right
-          var nextSource = this._sources[this._sources[source.id].nextSourceId]
+          var nextSource = this._sources[this._sources[lastSource.id].nextSourceId]
                             .source;
 
           if (newEndTime > nextSource.startTime) {
@@ -603,7 +570,7 @@ define([
     }
 
     // Update the other edge if dragging and collision
-    if (newStartTime !== null && newEndTime !== null) {
+    if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
       var timeWidth = originalEndTime - originalStartTime;
 
       if (startLimited) {
@@ -616,40 +583,29 @@ define([
     }
 
     // Check for minimal size of source
-    if (newStartTime !== null && newEndTime === null) {
-      if (Utils.roundTime(source.endTime - newStartTime) < source.minSize) {
-        newStartTime = Utils.roundTime(source.endTime - source.minSize);
+    // We assume that only 1 source can be resized at a time
+    if (typeof newStartTime === 'number' && typeof newEndTime !== 'number') {
+      if (Utils.roundTime(sources[0].endTime - newStartTime) < sources[0].minSize) {
+        newStartTime = Utils.roundTime(sources[0].endTime - sources[0].minSize);
       }
     }
-    else if (newEndTime !== null && newStartTime === null) {
-      if (Utils.roundTime(newEndTime - source.startTime) < source.minSize) {
-        newEndTime = Utils.roundTime(source.startTime + source.minSize);
+    else if (typeof newEndTime === 'number' && typeof newStartTime !== 'number') {
+      if (Utils.roundTime(newEndTime - sources[0].startTime) < sources[0].minSize) {
+        newEndTime = Utils.roundTime(sources[0].startTime + sources[0].minSize);
       }
     }
     else {
-      if (Utils.roundTime(newEndTime - newStartTime) < source.minSize) {
-        if (source.endTime !== newEndTime) {
-          newEndTime = Utils.roundTime(newStartTime + source.minSize);
+      if (Utils.roundTime(newEndTime - newStartTime) < sources[0].minSize) {
+        if (sources[0].endTime !== newEndTime) {
+          newEndTime = Utils.roundTime(newStartTime + sources[0].minSize);
         }
-        if (source.startTime !== newStartTime) {
-          newStartTime = Utils.roundTime(newEndTime - source.minSize);
+        if (sources[0].startTime !== newStartTime) {
+          newStartTime = Utils.roundTime(newEndTime - sources[0].minSize);
         }
       }
     }
 
-    if (newStartTime !== null && newStartTime !== originalStartTime) {
-      newTimes.start = newStartTime;
-    }
-
-    if (newEndTime !== null && newEndTime !== originalEndTime) {
-      newTimes.end = newEndTime;
-
-      if (this._sources[source.id].nextSourceId === null) {
-        newTimes.updateTimelineLength = true;
-      }
-    }
-
-    return newTimes;
+    return { newStartTime, newEndTime };
   };
 
   Line.prototype.getSourcesAfter = function(time) {