@checksub_team/peaks_timeline 1.16.0-alpha.1 → 1.16.0

package/src/sources-layer.js

@@ -56,6 +56,7 @@ define([
     this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
     this._peaks.on('source.update', this._onSourceUpdate.bind(this));
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
+    this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
     this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
     this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
     this._peaks.on('source.setIndicators', this.setIndicators.bind(this));
@@ -119,18 +120,14 @@ define([
     }
 
     if (positions) {
-      this.refresh();
-    }
-  };
+      var frameOffset = this._view.getFrameOffset();
+      var width = this._view.getWidth();
 
-  SourcesLayer.prototype.refresh = function() {
-    var frameOffset = this._view.getFrameOffset();
-    var width = this._view.getWidth();
-
-    this.updateSources(
-      this._view.pixelsToTime(frameOffset),
-      this._view.pixelsToTime(frameOffset + width)
-    );
+      this.updateSources(
+        this._view.pixelsToTime(frameOffset),
+        this._view.pixelsToTime(frameOffset + width)
+      );
+    }
   };
 
   SourcesLayer.prototype._onSourceUpdate = function(source) {
@@ -168,6 +165,16 @@ define([
     this.draw();
   };
 
+  SourcesLayer.prototype._onSourcesShow = function(sources) {
+    var self = this;
+
+    sources.forEach(function(source) {
+      self._sourcesGroup[source.id].setWrapping(false, true);
+    });
+
+    this._layer.draw();
+  };
+
   SourcesLayer.prototype._onSourcesAdd = function(sources) {
     var self = this;
 
@@ -245,6 +252,10 @@ define([
     }
   };
 
+  SourcesLayer.prototype._onSourcesRefresh = function() {
+    this._layer.draw();
+  };
+
   SourcesLayer.prototype._onSegmentsShow = function(lineId, position) {
     this._lines.addSegments(lineId, position);
     this._view.updateTimelineLength();
@@ -275,7 +286,7 @@ define([
     var sourceGroup = this._createSourceGroup(source);
 
     this._sourcesGroup[source.id] = sourceGroup;
-    this._lines.addSourceGroup(source, sourceGroup, source.position);
+    this._lines.addSourceGroup(sourceGroup, source.position);
 
     // After creating and referencing the new group, we can start data retrieval
     if (startDataRetrieval) {
@@ -310,7 +321,7 @@ define([
     // Update sources in visible time range.
     var sources = this.findSources(startTime, endTime);
 
-    // TODO: Should implement virtualization on Y
+    // Should implement virtualization on Y
 
     var count = sources.length;
 
@@ -327,33 +338,28 @@ define([
   SourcesLayer.prototype.onSourcesGroupDragStart = function(element) {
     this._initialTimeOffset = this._view.getTimeOffset();
     this._mouseDownX = this._view.getPointerPosition().x;
+    this._activeElements = {};
 
     const draggedElementId = element.currentTarget.attrs.sourceId;
-
-    var selectedElements = this._view.getSelectedElements();
-    const shouldDragSelectedElements = Object.keys(selectedElements).includes(
+    const shouldDragSelectedElements = Object.keys(this._view.getSelectedElements()).includes(
       draggedElementId
     );
 
-    this._draggedElements = shouldDragSelectedElements ?
-      Object.values(selectedElements).sort((a, b) => a.startTime - b.startTime) :
+    this._nonSelectedElement = shouldDragSelectedElements ?
+      null :
       [this._sourcesGroup[draggedElementId].getSource()];
 
-    this._draggedElementsData = this._draggedElements.reduce(function(bounds, source) {
-      bounds.initialStartTime = Math.min(source.startTime, bounds.initialStartTime);
-      bounds.initialEndTime = Math.max(source.endTime, bounds.initialEndTime);
-      bounds.orderable = source.orderable && bounds.orderable;
-
-      return bounds;
-    }, {
-      initialStartTime: Infinity,
-      initialEndTime: -Infinity,
-      orderable: true
-    });
+    this._isDraggable = true;
+    (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function(source) {
+      if (!source.draggable) {
+        this._isDraggable = false;
+        return;
+      }
+    }.bind(this));
   };
 
   SourcesLayer.prototype.onSourcesGroupDragEnd = function() {
-    const updatedSources = this._draggedElements.map(
+    const updatedSources = (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).map(
       function(source) {
         const sourceGroup = this._sourcesGroup[source.id];
 
@@ -368,6 +374,8 @@ define([
     this._view.drawSourcesLayer();
     this._view.updateTimelineLength();
 
+    this._activeElements = {};
+
     this._peaks.emit('sources.updated', updatedSources);
   };
 
@@ -391,22 +399,39 @@ define([
 
     const diff = this._view.pixelsToTime(mousePos - this._mouseDownX);
     const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
-    const mousePosX = this._view.getPointerPosition().x;
     const mousePosY = this._view.getPointerPosition().y;
-    const { initialStartTime, initialEndTime, orderable } = this._draggedElementsData;
-
-    const shouldRedraw = this.manageSourceMovements(
-      this._draggedElements,
-      initialStartTime + timeOffsetDiff + diff,
-      initialEndTime + timeOffsetDiff + diff,
-      orderable,
-      mousePosX,
-      mousePosY
-    );
+    var newEnd = 0;
+    var shouldRedraw = false;
+
+    (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function(source) {
+      if (!this._activeElements[source.id]) {
+        this._activeElements[source.id] = {
+          initialStartTime: source.startTime,
+          initialEndTime: source.endTime
+        };
+      }
+
+      const { initialStartTime, initialEndTime } = this._activeElements[source.id];
+
+      newEnd = Math.max(newEnd, source.endTime);
+
+      if (this._isDraggable) {
+        shouldRedraw = this.updateSource(
+          source,
+          initialStartTime + diff + timeOffsetDiff,
+          initialEndTime + diff + timeOffsetDiff,
+          mousePosY
+        ) || shouldRedraw;
+      }
+    }.bind(this));
 
     if (shouldRedraw) {
       this.draw();
     }
+
+    this._view.setTimelineLength(
+      this._view.timeToPixels(newEnd) + this._view.getWidth()
+    );
   };
 
   SourcesLayer.prototype.findSources = function(startTime, endTime) {
@@ -420,65 +445,44 @@ define([
     );
   };
 
-  SourcesLayer.prototype._applyTimeChangesToSources = function(sources, initialStartTime, newStartTime,
-    newEndTime
-  ) {
-    if (sources.length === 1) {
-      sources[0].updateTimes(
-        newStartTime,
-        newEndTime
-      );
-    }
-    else {
-      // We cannot have more than 1 source being resized at a time
-      // Reaching this point implies that that we are only dragging, not resizing
-      // So, we can safely assume that the difference between the initial times and the new times is the same
-      const timeDiff = Utils.roundTime(newStartTime - initialStartTime);
-
-      if (timeDiff !== 0) {
-        sources.forEach(function(source) {
-          source.updateTimes(
-            Utils.roundTime(source.startTime + timeDiff),
-            Utils.roundTime(source.endTime + timeDiff)
-          );
-        });
-      }
-    }
-
-    this.refresh();
-  };
-
-  SourcesLayer.prototype.manageSourceMovements = function(sources, newStartTime, newEndTime, orderable, mouseX,
-    mouseY
-  ) {
-    if (this._peaks.options.canMoveSourcesBetweenLines && typeof mouseY === 'number') {
-      this.manageVerticalPosition(sources, newStartTime, newEndTime, mouseX, mouseY);
-    }
+  SourcesLayer.prototype.updateSource = function(source, startTime, endTime, newY) {
+    var newTimes = {
+      start: startTime,
+      end: endTime
+    };
 
-    if (orderable) {
-      ({ newStartTime, newEndTime } = this.manageOrder(sources, newStartTime, newEndTime));
+    if (this._peaks.options.canMoveSourcesBetweenLines) {
+      this.manageVerticalPosition(source, newY);
     }
-    ({ newStartTime, newEndTime } = this.manageCollision(sources, newStartTime, newEndTime));
 
-    this._applyTimeChangesToSources(sources, sources[0].startTime, newStartTime, newEndTime);
+    newTimes = this.manageSourceOrder(source, newTimes);
+    newTimes = this.manageCollision(source, newTimes);
 
-    this._view.setTimelineLength(
-      this._view.timeToPixels(newEndTime) + this._view.getWidth()
+    source.updateTimes(
+      newTimes.start,
+      newTimes.end
     );
 
-    return true;
+    if (newTimes) {
+      this._updateSource(
+        source
+      );
+
+      return true;
+    }
+    return false;
   };
 
-  SourcesLayer.prototype.manageVerticalPosition = function(sources, startTime, endTime, mouseX, mouseY) {
-    return this._lines.manageVerticalPosition(sources, startTime, endTime, mouseX, mouseY);
+  SourcesLayer.prototype.manageVerticalPosition = function(source, newY) {
+    return this._lines.manageVerticalPosition(source, newY);
   };
 
-  SourcesLayer.prototype.manageOrder = function(sources, startTime, endTime) {
-    return this._lines.manageOrder(sources, startTime, endTime);
+  SourcesLayer.prototype.manageSourceOrder = function(source, newTimes) {
+    return this._lines.manageSourceOrder(source, newTimes);
   };
 
-  SourcesLayer.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
-    return this._lines.manageCollision(sources, newStartTime, newEndTime);
+  SourcesLayer.prototype.manageCollision = function(source, newTimes) {
+    return this._lines.manageCollision(source, newTimes);
   };
 
   /**
@@ -691,6 +695,7 @@ define([
     this._peaks.off('sources.hide', this._onSourcesHide);
     this._peaks.off('source.update', this._onSourceUpdate);
     this._peaks.off('data.retrieved', this._onDataRetrieved);
+    this._peaks.off('sources.refresh', this._onSourcesRefresh);
     this._peaks.off('segments.show', this._onSegmentsShow);
     this._peaks.off('options.set.line_height', this._onOptionsLineHeightChange);
     this._peaks.off('source.setIndicators', this.setIndicators);

package/src/timeline-sources.js

@@ -80,8 +80,10 @@ define([
       mediaEndTime: originalMediaEndTime,
       color: sourceToCut.color,
       backgroundColor: sourceToCut.backgroundColor,
+      hoverBackgroundColor: sourceToCut.hoverBackgroundColor,
+      selectedBackgroundColor: sourceToCut.selectedBackgroundColor,
       borderColor: sourceToCut.borderColor,
-      selectedColor: sourceToCut.selectedColor,
+      selectedBorderColor: sourceToCut.selectedBorderColor,
       warningColor: sourceToCut.warningColor,
       warningWidth: sourceToCut.warningWidth,
       volumeSliderColor: sourceToCut.volumeSliderColor,
@@ -191,8 +193,10 @@ define([
       options.mediaEndTime,
       options.color,
       options.backgroundColor,
+      options.hoverBackgroundColor,
+      options.selectedBackgroundColor,
       options.borderColor,
-      options.selectedColor,
+      options.selectedBorderColor,
       options.warningColor,
       options.warningWidth,
       options.volumeSliderColor,
@@ -482,10 +486,9 @@ define([
    */
 
   TimelineSources.prototype.showById = function(sourceId) {
-    if (this._sourcesById[sourceId].wrapped === false) {
-      return;
-    }
-
+    // var indexes = this._findSource(function(source) {
+    //   return source.id === sourceId;
+    // })
     this._sourcesById[sourceId].wrapped = false;
 
     this._peaks.emit('sources.show', [this._sourcesById[sourceId]]);
@@ -499,10 +502,9 @@ define([
    */
 
   TimelineSources.prototype.hideById = function(sourceId) {
-    if (this._sourcesById[sourceId].wrapped === true) {
-      return;
-    }
-
+    // var indexes = this._findSource(function(source) {
+    //   return source.id === sourceId;
+    // })
     this._sourcesById[sourceId].wrapped = true;
 
     this._peaks.emit('sources.hide', [this._sourcesById[sourceId]]);

package/src/timeline-zoomview.js

@@ -430,10 +430,6 @@ define([
     this._sourcesLayer.draw();
   };
 
-  TimelineZoomView.prototype.refresh = function() {
-    this._sourcesLayer.refresh();
-  };
-
   TimelineZoomView.prototype.getSegmentsGroup = function() {
     return this._sourcesLayer.getSegmentsGroup();
   };