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

package/src/lines.js

@@ -43,9 +43,11 @@ 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));
@@ -101,35 +103,27 @@ define([
     this._view.updateTimeline();
   };
 
-  Lines.prototype._onLineAdd = function(position) {
-    this._createLine(position);
-    this._setInteractions(position);
-    this._updateLinesPosition(position);
-  };
-
   Lines.prototype._onLineRemove = function(position) {
-    this.removeLine(position);
+    this._removeLine(position);
     this._updateLinesPosition(position);
   };
 
-  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);
-        }
+  Lines.prototype._onSourcesWrappingChanged = function(sources) {
+    sources.forEach(function(source) {
+      if (this._linesByPosition[source.position]) {
+        this._linesByPosition[source.position].updateLineHeight(source, 'wrappingChanged');
       }
-    }
+    }.bind(this));
   };
 
-  Lines.prototype.addSourceGroup = function(sourceGroup, position) {
+  Lines.prototype.addSourceGroup = function(source, sourceGroup, position) {
     if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
       this._createLine(position);
       this._setInteractions(position);
     }
 
-    sourceGroup.getSource().position = position;
-    this._linesByPosition[position].addSourceGroup(sourceGroup);
+    source.position = position;
+    this._linesByPosition[position].addSourceGroup(source, sourceGroup);
   };
 
   Lines.prototype.addSegments = function(lineId, position) {
@@ -159,7 +153,7 @@ define([
     return sourceGroup;
   };
 
-  Lines.prototype.removeLine = function(pos) {
+  Lines.prototype._removeLine = function(pos) {
     var oldLine = this._linesByPosition[pos];
     var lineId = oldLine.getId();
 
@@ -303,50 +297,62 @@ define([
     this._automaticallyCreatedLineId = null;
   };
 
-  Lines.prototype.manageAutomaticLineCreation = function(pos, source) {
+  Lines.prototype.manageAutomaticLineCreation = function(newLinePosition, initialPosition, sources) {
     if (this._automaticallyCreatedLineId !== null) {
       return;
     }
     else if (
       this._automaticLineCreationPosition !== null
-      && this._automaticLineCreationPosition !== pos
+      && this._automaticLineCreationPosition !== newLinePosition
     ) {
       this.stopAutomaticLineCreation();
     }
-    else if (this._automaticLineCreationTimeout) {
+
+    if (this._automaticLineCreationTimeout) {
       return;
     }
 
-    this._automaticLineCreationPosition = pos;
+    this._automaticLineCreationPosition = newLinePosition;
     this._automaticLineCreationTimeout = setTimeout(function() {
       this._automaticLineCreationTimeout = null;
-      this._automaticallyCreatedLineId = this._createLine(pos);
-      this._setInteractions(pos);
-      this.moveSourceToPosition(source, pos);
+
+      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(source, mouseX, mouseY) {
-    if (mouseY !== null && mouseY !== undefined) {
-      var linePos = this.getLinesUnderY(mouseY);
+  Lines.prototype.manageVerticalPosition = function(sources, startTime, endTime, mouseX, mouseY) {
+    if (mouseX === null || mouseX === undefined) {
+      return;
+    }
 
-      if (linePos[0] !== linePos[1]) {
-        this.manageAutomaticLineCreation(linePos[0] + 1, source);
-      }
-      else {
-        this.stopAutomaticLineCreation();
+    const position = sources[0].position;
+    const linePos = this.getLinesUnderY(mouseY);
 
-        if (
-          mouseX !== null && mouseX !== undefined
-          && linePos[0] !== source.position
-          && !this._linesByPosition[linePos[0]].isSegmentsLine()
-        ) {
-          var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
-          var sourceDuration = Utils.roundTime(source.endTime - source.startTime);
+    if (linePos[0] !== linePos[1]) {
+      this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
+    }
+    else {
+      this.stopAutomaticLineCreation();
 
-          if (this._hasSpaceForSourceAt(linePos[0], mouseTime, sourceDuration)) {
-            this.moveSourceToPosition(source, linePos[0]);
-          }
+      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]);
         }
       }
     }
@@ -406,14 +412,18 @@ define([
     return pos;
   };
 
-  Lines.prototype.moveSourceToPosition = function(source, pos) {
-    var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, true);
+  Lines.prototype.moveSourcesToPosition = function(sources, initialPosition, targetPosition) {
+    sources.forEach(function(source) {
+      var sourceGroup = this._linesByPosition[initialPosition].removeSourceGroup(source, true);
 
-    sourceGroup.moveTo(this._linesByPosition[pos].getKonvaGroup());
+      if (sourceGroup) {
+        sourceGroup.moveTo(this._linesByPosition[targetPosition].getKonvaGroup());
+      }
 
-    this._updateLinesPosition(source.position);
+      this.addSourceGroup(source, sourceGroup, targetPosition);
+    }.bind(this));
 
-    this.addSourceGroup(sourceGroup, pos);
+    this._updateLinesPosition(initialPosition);
   };
 
   Lines.prototype._getNextLineId = function() {
@@ -471,12 +481,13 @@ define([
     }
   };
 
-  Lines.prototype.manageCollision = function(source, newTimes) {
-    return this._linesByPosition[source.position].manageCollision(source, newTimes);
+  Lines.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
+    return this._linesByPosition[sources[0].position].manageCollision(sources, newStartTime, newEndTime);
   };
 
-  Lines.prototype.manageSourceOrder = function(source, newTimes) {
-    return this._linesByPosition[source.position].manageSourceOrder(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._setInteractions = function(position) {

package/src/main.js

@@ -777,13 +777,6 @@ 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,6 +72,10 @@ 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,15 +47,13 @@ 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);
-    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;
+    var heights = SourceGroup.getHeights(source, peaks);
+
+    this._unwrappedHeight = heights.unwrapped;
+    this._wrappedHeight = heights.wrapped;
+    this._height = heights.current;
     this._borderWidth = this._source.borderWidth || 0;
-    this._height = this._unwrappedHeight;
     this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
     this._selected = this._source.selected;
     this._isDragged = false;
@@ -174,8 +172,8 @@ define([
 
     this._view.updateWithAutoScroll(
       function() {
-        if (this._layer.updateSource(
-          this._source,
+        if (this._layer.manageSourceMovements(
+          [this._source],
           leftHandle ? start + diff + timeOffsetDiff : null,
           leftHandle ? null : end + diff + timeOffsetDiff
         )) {
@@ -184,10 +182,6 @@ define([
       }.bind(this)
     );
 
-    this._view.setTimelineLength(
-      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
-    );
-
     return {
       x: draggedElement.absolutePosition().x,
       y: draggedElement.absolutePosition().y
@@ -203,13 +197,11 @@ 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) {
@@ -277,11 +269,13 @@ define([
       start: this._source.startTime,
       end: this._source.endTime
     };
+    this._isDragged = true;
 
     this._hideButtons();
   };
 
   SourceGroup.prototype._onHandleDragEnd = function() {
+    this._isDragged = false;
     this._showButtons();
   };
 
@@ -386,7 +380,7 @@ define([
     Math.max(
       1,
       Math.min(
-        this._roundedWidth / 2,
+        this._width / 2,
         Math.min(
           CORNER_RADIUS,
           this._height / 2
@@ -395,63 +389,65 @@ define([
     );
     var x = Math.max(
       0,
-      this._view.getFrameOffset() - this._roundedX - radius
+      this._view.getFrameOffset() - this._x - 2 * radius
     );
     var width = Math.min(
-      this._roundedWidth - x,
-      this._view.getWidth() + radius - Math.max(
+      this._width - x,
+      this._view.getWidth() + 4 * radius - Math.max(
         0,
-        this._roundedX - this._view.getFrameOffset()
+        this._x - this._view.getFrameOffset()
       )
     );
     var xWidth = x + width;
 
-    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 (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._roundedWidth, 0);
+      if (fill) {
+        if (this._source.shouldShowWarning()) {
+          var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
 
-        if (this._source.mediaEndTime < this._source.duration) {
-          var rightStopPosition = Math.max(1 - (this._source.warningWidth / this._roundedWidth), 0.5);
+          if (this._source.mediaEndTime < this._source.duration) {
+            var rightStopPosition = Math.max(1 - (this._source.warningWidth / this._width), 0.5);
 
-          gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
-          gradient.addColorStop(1, this._source.warningColor);
-        }
+            gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
+            gradient.addColorStop(1, this._source.warningColor);
+          }
 
-        if (this._source.mediaStartTime > 0) {
-          var leftStopPosition = Math.min(this._source.warningWidth / this._roundedWidth, 0.5);
+          if (this._source.mediaStartTime > 0) {
+            var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
 
-          gradient.addColorStop(0, this._source.warningColor);
-          gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
-        }
+            gradient.addColorStop(0, this._source.warningColor);
+            gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
+          }
 
-        ctx.fillStyle = gradient;
-        ctx.fill();
-      }
-      else {
-        ctx.fillStyle = this._source.backgroundColor;
-        ctx.fill();
+          ctx.fillStyle = gradient;
+          ctx.fill();
+        }
+        else {
+          ctx.fillStyle = this._source.backgroundColor;
+          ctx.fill();
+        }
       }
-    }
 
-    if (shape) {
-      ctx.fillStrokeShape(shape);
+      if (shape) {
+        ctx.fillStrokeShape(shape);
+      }
     }
   };
 
@@ -1117,6 +1113,14 @@ 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);
   };
@@ -1617,5 +1621,25 @@ 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;
 });