@checksub_team/peaks_timeline 1.16.0-alpha.1 → 2.0.0-alpha.0

package/src/{line.js → components/line-group.js}

@@ -1,35 +1,32 @@
 /**
  * @file
  *
- * Defines the {@link line} class.
+ * Defines the {@link lineGroup} class.
  *
- * @module line
+ * @module lineGroup
  */
 
 define([
   './source-group',
-  'konva',
-  './utils'
-], function(SourceGroup, Konva, Utils) {
+  '../utils',
+  'konva'
+], function(SourceGroup, Utils, Konva) {
   'use strict';
 
-  function Line(peaks, view, y, id, position) {
+  function LineGroup(peaks, view, line) {
     this._peaks = peaks;
     this._view = view;
 
-    this._id = id;
-    this._position = position;
+    this._line = line;
+    this._position = null;
 
     this._firstSourceId = null;
     this._sources = {};
 
     this._sourcesGroup = {};
     this._wrapped = false;
-    this._y = y;
 
     this._group = new Konva.Group({
-      x: 0,
-      y: y - this._view.getFrameOffsetY(),
       draggable: true,
       dragBoundFunc: function() {
         return {
@@ -44,37 +41,35 @@ define([
     this._unwrappedCount = 0;
   }
 
-  Line.prototype.getPosition = function() {
+  LineGroup.prototype.getPosition = function() {
     return this._position;
   };
 
-  Line.prototype.getId = function() {
-    return this._id;
+  LineGroup.prototype.getId = function() {
+    return this._line.id;
   };
 
-  Line.prototype.isEmpty = function() {
-    return this.isSegmentsLine() ?
-      this._segmentsGroup.isEmpty() :
-      Object.keys(this._sources).length === 0;
+  LineGroup.prototype.getLine = function() {
+    return this._line;
   };
 
-  Line.prototype.countRemainingElements = function() {
+  LineGroup.prototype.countRemainingElements = function() {
     return this.isSegmentsLine() ?
       this._segmentsGroup.countRemainingElements() :
       Object.keys(this._sources).length;
   };
 
-  Line.prototype.isSegmentsLine = function() {
+  LineGroup.prototype.isSegmentsLine = function() {
     return Boolean(this._segmentsGroup);
   };
 
-  Line.prototype.updateSegments = function(frameStartTime, frameEndTime) {
+  LineGroup.prototype.updateSegments = function(frameStartTime, frameEndTime) {
     if (this.isSegmentsLine()) {
       this._segmentsGroup.updateSegments(frameStartTime, frameEndTime);
     }
   };
 
-  Line.prototype.lineLength = function() {
+  LineGroup.prototype.lineLength = function() {
     var length = 0;
 
     if (this.isSegmentsLine()) {
@@ -96,48 +91,11 @@ define([
     return length;
   };
 
-  Line.prototype.lineHeight = function() {
+  LineGroup.prototype.lineHeight = function() {
     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];
-      }
-
-      if (to > this._height) {
-        this._height = to;
-      }
-      else if (from === this._height) {
-        this._height = 0;
-        for (var height in this._sourceHeights) {
-          if (Utils.objectHasProperty(this._sourceHeights, height)) {
-            var parsedHeight = parseInt(height, 10);
-
-            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._addHeight = function(height) {
+  LineGroup.prototype._addHeight = function(height) {
     if (this._sourceHeights[height]) {
       this._sourceHeights[height]++;
     }
@@ -149,7 +107,7 @@ define([
     }
   };
 
-  Line.prototype._subtractHeight = function(height) {
+  LineGroup.prototype._subtractHeight = function(height) {
     if (Object.keys(this._sources).length === 0) {
       this._height = this._peaks.options.emptyLineHeight;
       this._sourceHeights = {};
@@ -174,7 +132,7 @@ define([
     }
   };
 
-  Line.prototype.updateLineHeight = function(source, action) {
+  LineGroup.prototype.updateLineHeight = function(source, action) {
     var oldHeight = this._height;
     var sourceGroup = this._sourcesGroup[source.id];
     var sourceGroupHeight;
@@ -205,16 +163,16 @@ define([
     }
 
     if (this._height !== oldHeight) {
-      this._peaks.emit('line.heightChanged', this._position);
+      this._peaks.emit('line.heightChanged', this._line);
     }
   };
 
-  Line.prototype.isVisible = function() {
-    return this._y < this._view.getFrameOffsetY() + this._view.getHeight()
-            && this._view.getFrameOffsetY() < this._y + this._height;
+  LineGroup.prototype.isVisible = function() {
+    return this.y() < this._view.getHeight()
+            && this.y() + this._height > 0;
   };
 
-  Line.prototype.addToLayer = function(layer) {
+  LineGroup.prototype.addToLayer = function(layer) {
     layer.add(this._group);
   };
 
@@ -224,110 +182,128 @@ define([
    * @param {SourceGroup} sourceGroup - The source group of the source (optional).
    * @returns {void}
    */
-  Line.prototype.addSourceGroup = function(source, sourceGroup) {
+  LineGroup.prototype.addSource = function(source, sourceGroup, sourcesAround) {
     if (sourceGroup) {
       this._sourcesGroup[source.id] = sourceGroup;
+      if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
+        sourceGroup.moveTo(this._group);
+      }
     }
 
     if (!this._sources[source.id]) {
-      var newSource = {
+      var sourceData = {
         source: source,
         prevSourceId: null,
         nextSourceId: null
       };
 
-      if (this._firstSourceId) {
-        var currentSource = null;
+      if (Utils.isNullOrUndefined(this._firstSourceId)) {
+        this._firstSourceId = source.id;
+        this._sources[source.id] = sourceData;
+      }
+      else if (Utils.isNullOrUndefined(sourcesAround)) {
+        this._addSourceWherePossible(sourceData);
+      }
+      else {
+        if (sourcesAround.left) {
+          this._sources[sourcesAround.left.id].nextSourceId = source.id;
+          sourceData.prevSourceId = sourcesAround.left.id;
+        }
+        else {
+          this._firstSourceId = source.id;
+        }
+        if (sourcesAround.right) {
+          this._sources[sourcesAround.right.id].prevSourceId = source.id;
+          sourceData.nextSourceId = sourcesAround.right.id;
+        }
+        this._sources[source.id] = sourceData;
+      }
+
+      this.updateLineHeight(source, 'add');
+    }
+  };
+
+  LineGroup.prototype._addSourceWherePossible = function(sourceData) {
+    const source = sourceData.source;
+    var currentSource = null;
+
+    do {
+      if (!currentSource) {
+        currentSource = this._sources[this._firstSourceId];
+      }
+      else {
+        currentSource = this._sources[currentSource.nextSourceId];
+      }
+
+      if (source.endTime <= currentSource.source.startTime) {
+        var startLimit = currentSource.prevSourceId
+          ? this._sources[currentSource.prevSourceId].source.endTime
+          : 0;
 
-        do {
-          if (!currentSource) {
-            currentSource = this._sources[this._firstSourceId];
+        const { newStartTime, newEndTime } = this._canBePlacedBetween(
+          source.startTime,
+          source.endTime,
+          startLimit,
+          currentSource.source.startTime
+        );
+
+        if (!Utils.isNullOrUndefined(newStartTime) && !Utils.isNullOrUndefined(newEndTime)) {
+          source.updateTimes(newStartTime, newEndTime);
+
+          if (currentSource.prevSourceId) {
+            this._sources[currentSource.prevSourceId].nextSourceId = source.id;
+            sourceData.prevSourceId = currentSource.prevSourceId;
           }
           else {
-            currentSource = this._sources[currentSource.nextSourceId];
+            this._firstSourceId = source.id;
           }
 
-          if (source.endTime <= currentSource.source.startTime) {
-            var startLimit = currentSource.prevSourceId
-              ? this._sources[currentSource.prevSourceId].source.endTime
-              : 0;
-
-            const { newStartTime, newEndTime } = this._canBePlacedBetween(
-              source.startTime,
-              source.endTime,
-              startLimit,
-              currentSource.source.startTime
-            );
-
-            if (newStartTime !== null && newEndTime !== null) {
-              source.updateTimes(newStartTime, newEndTime);
-
-              if (currentSource.prevSourceId) {
-                this._sources[currentSource.prevSourceId].nextSourceId = source.id;
-                newSource.prevSourceId = currentSource.prevSourceId;
-              }
-              else {
-                this._firstSourceId = source.id;
-              }
-
-              currentSource.prevSourceId = source.id;
-              newSource.nextSourceId = currentSource.source.id;
-
-              this._sources[source.id] = newSource;
-              break;
-            }
-          }
-        } while (currentSource.nextSourceId);
-
-        if (!newSource.prevSourceId && !newSource.nextSourceId) {
-          if (source.startTime < currentSource.source.endTime) {
-            // Overlapping with last source
-            var timeWidth = source.endTime - source.startTime;
+          currentSource.prevSourceId = source.id;
+          sourceData.nextSourceId = currentSource.source.id;
 
-            source.updateTimes(
-              currentSource.source.endTime,
-              currentSource.source.endTime + timeWidth
-            );
-          }
-          currentSource.nextSourceId = source.id;
-          newSource.prevSourceId = currentSource.source.id;
-          this._sources[source.id] = newSource;
+          this._sources[source.id] = sourceData;
+          break;
         }
       }
-      else {
-        this._firstSourceId = source.id;
-        this._sources[source.id] = newSource;
-      }
+    } while (currentSource.nextSourceId);
 
-      this.updateLineHeight(source, 'add');
-    }
+    if (!sourceData.prevSourceId && !sourceData.nextSourceId) {
+      if (source.startTime < currentSource.source.endTime) {
+        // Overlapping with last source
+        var timeWidth = source.endTime - source.startTime;
 
-    if (sourceGroup && (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group))) {
-      sourceGroup.addToGroup(this._group);
+        source.updateTimes(
+          currentSource.source.endTime,
+          currentSource.source.endTime + timeWidth
+        );
+      }
+      currentSource.nextSourceId = source.id;
+      sourceData.prevSourceId = currentSource.source.id;
+      this._sources[source.id] = sourceData;
     }
   };
 
-  Line.prototype.addSegments = function(segmentsGroup) {
+  LineGroup.prototype.addSegments = function(segmentsGroup) {
     this._segmentsGroup = segmentsGroup;
 
     this._height = this._segmentsGroup.getCurrentHeight();
 
-    segmentsGroup.addToGroup(this._group);
+    segmentsGroup.moveTo(this._group);
   };
 
-  Line.prototype.refreshSegmentsHeight = function() {
+  LineGroup.prototype.refreshSegmentsHeight = function() {
     if (this.isSegmentsLine) {
       var oldHeight = this._height;
 
       this._height = this._segmentsGroup.getCurrentHeight();
 
       if (this._height !== oldHeight) {
-        this._peaks.emit('line.heightChanged', this._position);
+        this._peaks.emit('line.heightChanged', this._line);
       }
     }
   };
 
-  Line.prototype._canBePlacedBetween = function(startTime, endTime, startLimit, endLimit) {
+  LineGroup.prototype._canBePlacedBetween = function(startTime, endTime, startLimit, endLimit) {
     var timeWidth = Utils.roundTime(endTime - startTime);
     var newStartTime, newEndTime;
 
@@ -351,88 +327,87 @@ define([
     return { newStartTime, newEndTime };
   };
 
-  Line.prototype.removeSourceGroup = function(source, isPermanent) {
-    var sourceGroup = this._sourcesGroup[source.id];
+  LineGroup.prototype.removeSourceGroup = function(source) {
+    const sourceGroup = this._sourcesGroup[source.id];
 
     delete this._sourcesGroup[source.id];
 
-    if (isPermanent) {
-      var sourceData = this._sources[source.id];
+    if (sourceGroup) {
+      sourceGroup.hideButKeepFocus();
+    }
 
-      delete this._sources[source.id];
+    return sourceGroup;
+  };
 
-      if (Object.keys(this._sources).length === 0) {
-        setTimeout(function() {
-          this._peaks.emit('line.remove', this._position);
-        }.bind(this), 0);
-        return sourceGroup;
-      }
+  LineGroup.prototype.removeSource = function(source) {
+    const sourceGroup = this.removeSourceGroup(source);
 
-      if (sourceData.prevSourceId) {
-        this._sources[sourceData.prevSourceId].nextSourceId
-          = sourceData.nextSourceId;
-      }
+    var sourceData = this._sources[source.id];
 
-      if (sourceData.nextSourceId) {
-        this._sources[sourceData.nextSourceId].prevSourceId
-          = sourceData.prevSourceId;
-      }
+    delete this._sources[source.id];
 
-      if (this._firstSourceId === source.id) {
-        this._firstSourceId = sourceData.nextSourceId;
-      }
+    if (Object.keys(this._sources).length === 0) {
+      this._peaks.destroyLine(this._line.id, true);
+      return sourceGroup;
+    }
 
-      this.updateLineHeight(source, 'remove');
+    if (sourceData.prevSourceId) {
+      this._sources[sourceData.prevSourceId].nextSourceId
+        = sourceData.nextSourceId;
     }
 
-    return sourceGroup;
-  };
+    if (sourceData.nextSourceId) {
+      this._sources[sourceData.nextSourceId].prevSourceId
+        = sourceData.prevSourceId;
+    }
 
-  Line.prototype.getKonvaGroup = function() {
-    return this._group;
-  };
+    if (this._firstSourceId === source.id) {
+      this._firstSourceId = sourceData.nextSourceId;
+    }
 
-  Line.prototype.getY = function() {
-    return this._group.y();
-  };
+    this.updateLineHeight(source, 'remove');
 
-  Line.prototype.getInitialY = function() {
-    return this._y;
+    return sourceGroup;
   };
 
-  Line.prototype.y = function(value, changeInitialY) {
-    this._group.y(value);
-    if (changeInitialY) {
-      this._y = value;
-    }
+  LineGroup.prototype.getKonvaGroup = function() {
+    return this._group;
   };
 
-  Line.prototype.moveOnY = function(dy) {
-    this._y += dy;
-    this._group.y(this._group.y() + dy);
+  LineGroup.prototype.y = function(value) {
+    if (typeof value !== 'number') {
+      return this._group.y();
+    }
+    this._group.y(value);
   };
 
-  Line.prototype.manageOrder = function(sources, startTime, endTime) {
+  LineGroup.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 = endTime - startTime;
+    var sourceDuration = Utils.roundTime(endTime - startTime);
 
-    if (newStartTime !== null && newEndTime !== null) {
+    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[firstSource.id].prevSourceId].source.startTime;
 
-        if (cursorTime + this._view.getTimeOffset() < previousStartTime) {
+        if (Utils.roundTime(cursorTime + this._view.getTimeOffset()) < previousStartTime) {
           // we want to change order
-          ({ newStartTime, newEndTime } = this._changeSourcesPosition(
+          tmpTimes = this._changeSourcesPosition(
             sources,
             sourceDuration,
             cursorTime + this._view.getTimeOffset()
-          ));
+          );
+
+          if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
+            newStartTime = tmpTimes.newStartTime;
+            newEndTime = tmpTimes.newEndTime;
+          }
         }
       }
 
@@ -440,13 +415,18 @@ define([
         // there is another source to the right
         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
-          ({ newStartTime, newEndTime } = this._changeSourcesPosition(
+          tmpTimes = this._changeSourcesPosition(
             sources,
             sourceDuration,
             cursorTime + this._view.getTimeOffset()
-          ));
+          );
+
+          if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
+            newStartTime = tmpTimes.newStartTime;
+            newEndTime = tmpTimes.newEndTime;
+          }
         }
       }
     }
@@ -454,7 +434,7 @@ define([
     return { newStartTime, newEndTime };
   };
 
-  Line.prototype._changeSourcesPosition = function(sources, sourceDuration, time) {
+  LineGroup.prototype._changeSourcesPosition = function(sources, sourceDuration, time) {
     var currentRange = {
       start: null,
       end: null
@@ -495,7 +475,7 @@ define([
           endLimit
         ));
 
-        if (newStartTime !== null && newEndTime !== null) {
+        if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
           let prevSourceId = currentRange.start
                               ? currentRange.start.source.id
                               : null;
@@ -513,7 +493,7 @@ define([
     return { newStartTime, newEndTime };
   };
 
-  Line.prototype._moveSource = function(source, prevSourceId) {
+  LineGroup.prototype._moveSource = function(source, prevSourceId) {
     // Remove source from the list
     var sourceObj = this._sources[source.id];
     var prevSource = this._sources[sourceObj.prevSourceId];
@@ -551,7 +531,7 @@ define([
     this._sources[source.id] = sourceObj;
   };
 
-  Line.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
+  LineGroup.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
     var originalStartTime = newStartTime;
     var originalEndTime = newEndTime;
     var startLimited = false;
@@ -561,48 +541,42 @@ define([
 
     if (typeof newStartTime === 'number') {
       // startMarker changed
-      if (firstSource.startTime > newStartTime) {
-        // startMarker moved to the left
-        if (this._sources[firstSource.id].prevSourceId) {
-          // there is another source to the left
-          var previousSource = this._sources[this._sources[firstSource.id].prevSourceId]
-                                .source;
-
-          if (newStartTime < previousSource.endTime) {
-            // there is collision
-            newStartTime = previousSource.endTime;
-            startLimited = true;
-          }
+      if (this._sources[firstSource.id].prevSourceId) {
+        // there is another source to the left
+        var previousSource = this._sources[this._sources[firstSource.id].prevSourceId]
+                              .source;
+
+        if (newStartTime < previousSource.endTime) {
+          // there is collision
+          newStartTime = previousSource.endTime;
+          startLimited = true;
         }
-        else {
-          if (newStartTime < 0) {
-            newStartTime = 0;
-            startLimited = true;
-          }
+      }
+      else {
+        if (newStartTime < 0) {
+          newStartTime = 0;
+          startLimited = true;
         }
       }
     }
 
     if (typeof newEndTime === 'number') {
       // endMarker changed
-      if (lastSource.endTime < newEndTime) {
-        // endMarker moved to the right
-        if (this._sources[lastSource.id].nextSourceId) {
-          // there is another source to the right
-          var nextSource = this._sources[this._sources[lastSource.id].nextSourceId]
-                            .source;
-
-          if (newEndTime > nextSource.startTime) {
-            // there is collision
-            newEndTime = nextSource.startTime;
-            endLimited = true;
-          }
+      if (this._sources[lastSource.id].nextSourceId) {
+        // there is another source to the right
+        var nextSource = this._sources[this._sources[lastSource.id].nextSourceId]
+                          .source;
+
+        if (newEndTime > nextSource.startTime) {
+          // there is collision
+          newEndTime = nextSource.startTime;
+          endLimited = true;
         }
       }
     }
 
     // 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,12 +590,12 @@ define([
 
     // Check for minimal size of source
     // We assume that only 1 source can be resized at a time
-    if (newStartTime !== null && newEndTime === null) {
+    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) {
+    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);
       }
@@ -640,37 +614,37 @@ define([
     return { newStartTime, newEndTime };
   };
 
-  Line.prototype.getSourcesAfter = function(time) {
+  LineGroup.prototype.getSourcesAfter = function(time) {
     const sources = [];
     var currentId = this._firstSourceId;
 
     while (currentId) {
-      var lineSource = this._sources[currentId];
+      var sourceData = this._sources[currentId];
 
-      if (lineSource.source.startTime >= time) {
+      if (sourceData.source.startTime >= time) {
         while (currentId) {
-          lineSource = this._sources[currentId];
+          sourceData = this._sources[currentId];
 
-          sources.push(lineSource.source);
-          currentId = lineSource.nextSourceId;
+          sources.push(sourceData.source);
+          currentId = sourceData.nextSourceId;
         }
         break;
       }
-      currentId = lineSource.nextSourceId;
+      currentId = sourceData.nextSourceId;
     }
 
     return sources;
   };
 
-  Line.prototype.getSourcesAround = function(time) {
+  LineGroup.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;
+      var sourceData = this._sources[currentId];
+      var source = sourceData.source;
 
       if (time < source.startTime) {
         right = source;
@@ -683,7 +657,7 @@ define([
       else {
         left = source;
       }
-      currentId = lineSource.nextSourceId;
+      currentId = sourceData.nextSourceId;
     }
 
     if (overlapping) {
@@ -694,26 +668,25 @@ define([
     }
   };
 
-  Line.prototype.updatePosition = function(pos) {
-    for (var sourceId in this._sources) {
-      if (Utils.objectHasProperty(this._sources, sourceId)) {
-        this._sources[sourceId].source.position = pos;
-      }
-    }
-
+  LineGroup.prototype.updatePosition = function(pos) {
+    this._line.position = pos;
     this._position = pos;
   };
 
-  Line.prototype.destroy = function() {
+  LineGroup.prototype.hasSource = function(sourceId) {
+    return Boolean(this._sources[sourceId]);
+  };
+
+  LineGroup.prototype.destroy = function() {
     this._firstSourceId = null;
     this._sources = {};
     this._sourcesGroup = {};
     this._group.destroy();
   };
 
-  Line.prototype.allowInteractions = function(bool) {
+  LineGroup.prototype.allowInteractions = function(bool) {
     this._group.listening(bool);
   };
 
-  return Line;
+  return LineGroup;
 });