@checksub_team/peaks_timeline 1.16.0-alpha.2 → 1.16.0

package/src/lines.js

@@ -22,15 +22,12 @@ define([
     this._peaks = peaks;
     this._view = view;
     this._layer = layer;
+    this._linesBySourceId = {};
     this._linesByPosition = {};
     this._autoAddToLayer = false;
     this._areSourceInteractionsAllowed = true;
     this._areSegmentInteractionsAllowed = true;
 
-    this._automaticallyCreatedLineId = null;
-    this._automaticLineCreationPosition = null;
-    this._automaticLineCreationTimeout = null;
-
     this._segmentsGroups = {};
     this._segmentsGroupToLine = {};
 
@@ -43,11 +40,9 @@ define([
     );
 
     this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
+    this._peaks.on('line.add', this._onLineAdd.bind(this));
     this._peaks.on('line.remove', this._onLineRemove.bind(this));
 
-    this._peaks.on('sources.show', this._onSourcesWrappingChanged.bind(this));
-    this._peaks.on('sources.hide', this._onSourcesWrappingChanged.bind(this));
-
     this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
     this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
     this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
@@ -103,27 +98,38 @@ define([
     this._view.updateTimeline();
   };
 
-  Lines.prototype._onLineRemove = function(position) {
-    this._removeLine(position);
+  Lines.prototype._onLineAdd = function(position) {
+    this._createLine(position);
+    this._setInteractions(position);
     this._updateLinesPosition(position);
   };
 
-  Lines.prototype._onSourcesWrappingChanged = function(sources) {
-    sources.forEach(function(source) {
-      if (this._linesByPosition[source.position]) {
-        this._linesByPosition[source.position].updateLineHeight(source, 'wrappingChanged');
+  Lines.prototype._onLineRemove = function(position) {
+    var oldLine = this.removeLine(position);
+    var lineNewY = oldLine.getY();
+
+    this._updateLinesPosition(position, lineNewY);
+  };
+
+  Lines.prototype.changeLineHeight = function(from, to) {
+    for (var position in this._linesByPosition) {
+      if (Utils.objectHasProperty(this._linesByPosition, position)) {
+        if (!this._linesByPosition[position].isSegmentsLine()) {
+          this._linesByPosition[position].changeHeight(from, to);
+        }
       }
-    }.bind(this));
+    }
   };
 
-  Lines.prototype.addSourceGroup = function(source, sourceGroup, position) {
+  Lines.prototype.addSourceGroup = function(sourceGroup, position) {
     if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
       this._createLine(position);
       this._setInteractions(position);
     }
 
-    source.position = position;
-    this._linesByPosition[position].addSourceGroup(source, sourceGroup);
+    sourceGroup.getSource().position = position;
+    this._linesByPosition[position].addSourceGroup(sourceGroup);
+    this._linesBySourceId[sourceGroup.getSource().id] = this._linesByPosition[position];
   };
 
   Lines.prototype.addSegments = function(lineId, position) {
@@ -140,37 +146,30 @@ define([
   };
 
   Lines.prototype.removeSourceGroup = function(source, isPermanent) {
-    if (!this._linesByPosition[source.position]) {
-      return null;
-    }
-
     var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, isPermanent);
 
     if (isPermanent) {
+      delete this._linesBySourceId[source.id];
       this._updateLinesPosition(source.position);
     }
 
     return sourceGroup;
   };
 
-  Lines.prototype._removeLine = function(pos) {
+  Lines.prototype.removeLine = function(pos) {
     var oldLine = this._linesByPosition[pos];
-    var lineId = oldLine.getId();
 
-    if (this._automaticallyCreatedLineId === lineId) {
-      this._automaticallyCreatedLineId = null;
-    }
     oldLine.destroy();
 
     delete this._linesByPosition[pos];
 
-    this._lineIndicator.removeIndicator(lineId, false);
+    this._lineIndicator.removeIndicator(oldLine.getId(), false);
 
     return oldLine;
   };
 
   Lines.prototype.isLineVisible = function(position) {
-    return this._linesByPosition[position] ? this._linesByPosition[position].isVisible() : false;
+    return this._linesByPosition[position].isVisible();
   };
 
   Lines.prototype.getVisibleLines = function() {
@@ -208,22 +207,16 @@ define([
     this._updateLinesPosition(position);
   };
 
-  Lines.prototype._updateLinesPosition = function(position) {
+  Lines.prototype._updateLinesPosition = function(position, forceNewY) {
     var line = this._linesByPosition[position];
     var dy = null;
     var newY;
 
-    if (line) {
-      newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
+    if (forceNewY) {
+      newY = forceNewY;
     }
     else {
-      var previousLine;
-
-      while ((previousLine === undefined || previousLine === null) && position > 0) {
-        previousLine = this._linesByPosition[--position];
-      }
-
-      newY = previousLine ? previousLine.getY() + previousLine.lineHeight() + this._peaks.options.interline : 0;
+      newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
     }
 
     for (var pos in this._linesByPosition) {
@@ -242,7 +235,8 @@ define([
 
     this._lineIndicator.updateIndicators();
     this._lineIndicator.draw();
-    this._view.refresh();
+
+    this._view.drawSourcesLayer();
   };
 
   Lines.prototype.setOffsetY = function(frameOffset) {
@@ -288,112 +282,25 @@ define([
     return length;
   };
 
-  Lines.prototype.stopAutomaticLineCreation = function() {
-    if (this._automaticLineCreationTimeout) {
-      clearTimeout(this._automaticLineCreationTimeout);
-    }
-    this._automaticLineCreationTimeout = null;
-    this._automaticLineCreationPosition = null;
-    this._automaticallyCreatedLineId = null;
-  };
-
-  Lines.prototype.manageAutomaticLineCreation = function(newLinePosition, initialPosition, sources) {
-    if (this._automaticallyCreatedLineId !== null) {
-      return;
-    }
-    else if (
-      this._automaticLineCreationPosition !== null
-      && this._automaticLineCreationPosition !== newLinePosition
-    ) {
-      this.stopAutomaticLineCreation();
-    }
-
-    if (this._automaticLineCreationTimeout) {
-      return;
-    }
-
-    this._automaticLineCreationPosition = newLinePosition;
-    this._automaticLineCreationTimeout = setTimeout(function() {
-      this._automaticLineCreationTimeout = null;
-
-      var currentLine = this._linesByPosition[initialPosition];
-
-      if (currentLine.countRemainingElements() === sources.length) {
-        this.stopAutomaticLineCreation();
-        return;
-      }
-
-      this._automaticallyCreatedLineId = this._createLine(newLinePosition);
-      this._setInteractions(newLinePosition);
-      this.moveSourcesToPosition(sources, currentLine.getPosition(), newLinePosition);
-    }.bind(this), this._peaks.options.automaticLineCreationDelay);
-  };
-
-  Lines.prototype.manageVerticalPosition = function(sources, startTime, endTime, mouseX, mouseY) {
-    if (mouseX === null || mouseX === undefined) {
-      return;
-    }
-
-    const position = sources[0].position;
-    const linePos = this.getLinesUnderY(mouseY);
+  Lines.prototype.manageVerticalPosition = function(source, newY) {
+    if (newY !== null && newY !== undefined) {
+      var pos = this.getLineOnPosition(newY);
 
-    if (linePos[0] !== linePos[1]) {
-      this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
-    }
-    else {
-      this.stopAutomaticLineCreation();
-
-      if (
-        mouseX !== null && mouseX !== undefined
-        && linePos[0] !== position
-        && !this._linesByPosition[linePos[0]].isSegmentsLine()
-      ) {
-        var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
-        var sourceDuration = Utils.roundTime(endTime - startTime);
-
-        if (this._hasSpaceForSourceAt(linePos[0], mouseTime, sourceDuration)) {
-          this.moveSourcesToPosition(sources, position, linePos[0]);
-        }
+      if (pos[0] === pos[1]
+        && pos[0] !== source.position
+        && !this._linesByPosition[pos[0]].isSegmentsLine()) {
+        this.moveSourceToPosition(source, pos[0]);
       }
     }
   };
 
-  Lines.prototype._hasSpaceForSourceAt = function(linePosition, mouseTime, sourceDuration) {
-    var line = this._linesByPosition[linePosition];
-
-    if (!line || line.isSegmentsLine()) {
-      return false;
-    }
-
-    var sourcesAround = line.getSourcesAround(mouseTime);
-
-    if (sourcesAround.overlapping) {
-      return false;
-    }
-    else if (!sourcesAround.right) {
-      return true;
-    }
-    else {
-      var leftLimit = sourcesAround.left ? sourcesAround.left.endTime : 0;
-      var rightLimit = sourcesAround.right.startTime;
-
-      return sourceDuration <= Utils.roundTime(rightLimit - leftLimit);
-    }
-  };
-
   Lines.prototype.getLineByPosition = function(pos) {
     return this._linesByPosition[pos];
   };
 
-  Lines.prototype.getLastPosition = function() {
-    var keys = Object.keys(this._linesByPosition);
-
-    return keys.pop();
-  };
-
-  Lines.prototype.getLinesUnderY = function(y) {
+  Lines.prototype.getLineOnPosition = function(y) {
     var height;
-    var pos = [-1, this.getLastPosition() + 1];
+    var pos = [-1, Number.MAX_VALUE];
 
     for (var position in this._linesByPosition) {
       if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -412,18 +319,16 @@ define([
     return pos;
   };
 
-  Lines.prototype.moveSourcesToPosition = function(sources, initialPosition, targetPosition) {
-    sources.forEach(function(source) {
-      var sourceGroup = this._linesByPosition[initialPosition].removeSourceGroup(source, true);
+  Lines.prototype.moveSourceToPosition = function(source, pos) {
+    var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, true);
 
-      if (sourceGroup) {
-        sourceGroup.moveTo(this._linesByPosition[targetPosition].getKonvaGroup());
-      }
+    delete this._linesBySourceId[source.id];
+
+    sourceGroup.moveTo(this._linesByPosition[pos].getKonvaGroup());
 
-      this.addSourceGroup(source, sourceGroup, targetPosition);
-    }.bind(this));
+    this._updateLinesPosition(source.position);
 
-    this._updateLinesPosition(initialPosition);
+    this.addSourceGroup(sourceGroup, pos);
   };
 
   Lines.prototype._getNextLineId = function() {
@@ -443,17 +348,9 @@ define([
           y += this._linesByPosition[pos].lineHeight() + this._peaks.options.interline;
         }
         else {
-          // This code assumes that lines are ordered in ascending order of position
-          // This is the case as the keys are integers
-          if (Utils.objectHasProperty(this._linesByPosition, position)) {
-            var newPosition = currentPos + 1;
-
-            this._linesByPosition[currentPos].updatePosition(newPosition);
-            newLinesByPosition[newPosition] = this._linesByPosition[currentPos];
-
-            if (!this._linesByPosition[newPosition]) {
-              break;
-            }
+          if (this._linesByPosition[position]) {
+            this._linesByPosition[currentPos].updatePosition(currentPos + 1);
+            newLinesByPosition[currentPos + 1] = this._linesByPosition[currentPos];
           }
         }
       }
@@ -469,8 +366,6 @@ define([
 
     newLinesByPosition[position] = line;
     this._linesByPosition = newLinesByPosition;
-
-    return line.getId();
   };
 
   Lines.prototype.updateSegments = function(frameStartTime, frameEndTime) {
@@ -481,13 +376,12 @@ define([
     }
   };
 
-  Lines.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
-    return this._linesByPosition[sources[0].position].manageCollision(sources, newStartTime, newEndTime);
+  Lines.prototype.manageCollision = function(source, newTimes) {
+    return this._linesBySourceId[source.id].manageCollision(source, newTimes);
   };
 
-  Lines.prototype.manageOrder = function(sources, startTime, endTime) {
-    // Assuming all ordered elements have the same position
-    return this._linesByPosition[sources[0].position].manageOrder(sources, startTime, endTime);
+  Lines.prototype.manageSourceOrder = function(source, newTimes) {
+    return this._linesBySourceId[source.id].manageSourceOrder(source, newTimes);
   };
 
   Lines.prototype._setInteractions = function(position) {

package/src/main.js

@@ -409,13 +409,7 @@ define([
        * Indicates whether or not sources can be dragged
        * from one line to another
        */
-      canMoveSourcesBetweenLines: true,
-
-      /**
-       * Delay in milliseconds before a new line is created
-       * when dragging a source between 2 lines.
-       */
-      automaticLineCreationDelay: 100
+      canMoveSourcesBetweenLines: true
     };
 
     /**
@@ -777,6 +771,13 @@ define([
     window.removeEventListener('resize', this._onResize);
   };
 
+  Peaks.prototype.setLineHeight = function(newLineHeight) {
+    var oldHeight = this.options.lineHeight;
+
+    this.options.lineHeight = newLineHeight;
+    this.emit('options.set.line_height', oldHeight);
+  };
+
   Peaks.prototype.zoomIn = function() {
     this.view.setZoom(
       this.view.getTimeToPixelsScale() + Math.floor(this.view.getTimeToPixelsScale() / 10) + 1

package/src/segments-group.js

@@ -72,10 +72,6 @@ define([
     return Object.keys(this._segments).length === 0;
   };
 
-  SegmentsGroup.prototype.countRemainingElements = function() {
-    return Object.keys(this._segments).length;
-  };
-
   /**
    * Adds the group to the given {Konva.Group}.
    *

package/src/source-group.js

@@ -47,13 +47,15 @@ define([
     var self = this;
 
     this._x = this._view.timeToPixels(source.startTime);
+    this._roundedX = Math.round(this._x);
     this._width = this._view.timeToPixels(source.endTime - source.startTime);
-    var heights = SourceGroup.getHeights(source, peaks);
-
-    this._unwrappedHeight = heights.unwrapped;
-    this._wrappedHeight = heights.wrapped;
-    this._height = heights.current;
+    this._roundedWidth = Math.round(this._width);
+    this._unwrappedHeight = source.binaryHeight && source.previewHeight ?
+                            source.binaryHeight + source.previewHeight :
+                            this._peaks.options.lineHeight;
+    this._wrappedHeight = this._peaks.options.wrappedLineHeight;
     this._borderWidth = this._source.borderWidth || 0;
+    this._height = this._unwrappedHeight;
     this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
     this._selected = this._source.selected;
     this._isDragged = false;
@@ -79,6 +81,7 @@ define([
 
     this._cursor = null;
     this._group.on('mouseenter', function() {
+      self._hovered = true;
       self._view.setHoveredElement(self);
       if (!self._source.loading) {
         self._showButtons();
@@ -86,6 +89,7 @@ define([
     });
 
     this._group.on('mouseleave', function() {
+      self._hovered = false;
       self._view.setHoveredElement(null);
       self._hideButtons();
     });
@@ -172,8 +176,8 @@ define([
 
     this._view.updateWithAutoScroll(
       function() {
-        if (this._layer.manageSourceMovements(
-          [this._source],
+        if (this._layer.updateSource(
+          this._source,
           leftHandle ? start + diff + timeOffsetDiff : null,
           leftHandle ? null : end + diff + timeOffsetDiff
         )) {
@@ -182,6 +186,10 @@ define([
       }.bind(this)
     );
 
+    this._view.setTimelineLength(
+      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
+    );
+
     return {
       x: draggedElement.absolutePosition().x,
       y: draggedElement.absolutePosition().y
@@ -197,11 +205,13 @@ define([
     this._group.x(startPixel - frameOffset);
 
     this._x = startPixel;
+    this._roundedX = Math.round(this._x);
 
     const newWidth = endPixel - startPixel;
 
     if (newWidth !== this._width) {
       this._width = newWidth;
+      this._roundedWidth = Math.round(this._width);
 
       // the zoom was changed
       if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
@@ -269,13 +279,11 @@ define([
       start: this._source.startTime,
       end: this._source.endTime
     };
-    this._isDragged = true;
 
     this._hideButtons();
   };
 
   SourceGroup.prototype._onHandleDragEnd = function() {
-    this._isDragged = false;
     this._showButtons();
   };
 
@@ -380,7 +388,7 @@ define([
     Math.max(
       1,
       Math.min(
-        this._width / 2,
+        this._roundedWidth / 2,
         Math.min(
           CORNER_RADIUS,
           this._height / 2
@@ -389,66 +397,76 @@ define([
     );
     var x = Math.max(
       0,
-      this._view.getFrameOffset() - this._x - 2 * radius
+      this._view.getFrameOffset() - this._roundedX - radius
     );
     var width = Math.min(
-      this._width - x,
-      this._view.getWidth() + 4 * radius - Math.max(
+      this._roundedWidth - x,
+      this._view.getWidth() + radius - Math.max(
         0,
-        this._x - this._view.getFrameOffset()
+        this._roundedX - this._view.getFrameOffset()
       )
     );
     var xWidth = x + width;
 
-    if (width > 0) {
-      ctx.beginPath();
-      ctx.moveTo(x + radius, offset);
-      ctx.lineTo(xWidth - radius, offset);
-      ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
-      ctx.lineTo(xWidth - offset, this._height - radius);
-      ctx.quadraticCurveTo(
-        xWidth - offset,
-        this._height - offset,
-        xWidth - radius,
-        this._height - offset
-      );
-      ctx.lineTo(x + radius, this._height - offset);
-      ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
-      ctx.lineTo(x + offset, radius);
-      ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
-      ctx.closePath();
-
-      if (fill) {
-        if (this._source.shouldShowWarning()) {
-          var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
+    ctx.beginPath();
+    ctx.moveTo(x + radius, offset);
+    ctx.lineTo(xWidth - radius, offset);
+    ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
+    ctx.lineTo(xWidth - offset, this._height - radius);
+    ctx.quadraticCurveTo(
+      xWidth - offset,
+      this._height - offset,
+      xWidth - radius,
+      this._height - offset
+    );
+    ctx.lineTo(x + radius, this._height - offset);
+    ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
+    ctx.lineTo(x + offset, radius);
+    ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
+    ctx.closePath();
 
-          if (this._source.mediaEndTime < this._source.duration) {
-            var rightStopPosition = Math.max(1 - (this._source.warningWidth / this._width), 0.5);
+    if (fill) {
+      var backgroundColor;
 
-            gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
-            gradient.addColorStop(1, this._source.warningColor);
-          }
+      if (this._selected) {
+        backgroundColor = this._source.selectedBackgroundColor;
+      }
+      else if (this._hovered) {
+        backgroundColor = this._source.hoverBackgroundColor;
+      }
+      else {
+        backgroundColor = this._source.backgroundColor;
+      }
 
-          if (this._source.mediaStartTime > 0) {
-            var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
+      if (this._source.shouldShowWarning()) {
+        var gradient = ctx.createLinearGradient(0, 0, this._roundedWidth, 0);
 
-            gradient.addColorStop(0, this._source.warningColor);
-            gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
-          }
+        if (this._source.mediaEndTime < this._source.duration) {
+          var rightStopPosition = Math.max(1 - (this._source.warningWidth / this._roundedWidth), 0.5);
 
-          ctx.fillStyle = gradient;
-          ctx.fill();
+          gradient.addColorStop(rightStopPosition, backgroundColor);
+          gradient.addColorStop(1, this._source.warningColor);
         }
-        else {
-          ctx.fillStyle = this._source.backgroundColor;
-          ctx.fill();
+
+        if (this._source.mediaStartTime > 0) {
+          var leftStopPosition = Math.min(this._source.warningWidth / this._roundedWidth, 0.5);
+
+          gradient.addColorStop(0, this._source.warningColor);
+          gradient.addColorStop(leftStopPosition, backgroundColor);
         }
-      }
 
-      if (shape) {
-        ctx.fillStrokeShape(shape);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+      }
+      else {
+        ctx.fillStyle = backgroundColor;
+        ctx.fill();
       }
     }
+
+    if (shape) {
+      ctx.fillStrokeShape(shape);
+    }
   };
 
   SourceGroup.prototype._addUnwrap = function(forceCreate) {
@@ -878,7 +896,7 @@ define([
     this._selected = this._source.selected;
     if (this._border) {
       if (this._selected) {
-        this._border.fill(this._source.selectedColor);
+        this._border.fill(this._source.selectedBorderColor);
         this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
       }
       else {
@@ -895,7 +913,7 @@ define([
 
         if (unwrap_background) {
           if (this._selected) {
-            unwrap_background.stroke(this._source.selectedColor);
+            unwrap_background.stroke(this._source.selectedBorderColor);
             unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
           else {
@@ -912,7 +930,7 @@ define([
 
         if (wrap_background) {
           if (this._selected) {
-            wrap_background.stroke(this._source.selectedColor);
+            wrap_background.stroke(this._source.selectedBorderColor);
             wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
           else {
@@ -1113,14 +1131,6 @@ define([
     return this._height;
   };
 
-  SourceGroup.prototype.getHeights = function() {
-    return {
-      unwrapped: this._unwrappedHeight,
-      wrapped: this._wrappedHeight,
-      current: this._height
-    };
-  };
-
   SourceGroup.prototype.setVisible = function(boolean) {
     this._group.visible(boolean);
   };
@@ -1621,25 +1631,5 @@ define([
     this._group.destroy();
   };
 
-  /**
-   * Static method to get height for a source
-   * @param {Source} source - The source object
-   * @param {Object} peaks - The peaks instance (for options)
-   * @returns {number} The calculated height
-   */
-  SourceGroup.getHeights = function(source, peaks) {
-    var unwrappedHeight = source.binaryHeight && source.previewHeight ?
-                          source.binaryHeight + source.previewHeight :
-                          peaks.options.lineHeight;
-    var wrappedHeight = peaks.options.wrappedLineHeight;
-    var height = source.wrapped ? wrappedHeight : unwrappedHeight;
-
-    return {
-      unwrapped: unwrappedHeight,
-      wrapped: wrappedHeight,
-      current: height
-    };
-  };
-
   return SourceGroup;
 });