@checksub_team/peaks_timeline 1.16.0-alpha.2 → 1.16.0

package/src/line-indicator.js

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