@checksub_team/peaks_timeline 1.16.0-alpha.2 → 1.16.0

package/src/source.js

@@ -121,16 +121,34 @@ define([
       );
     }
 
+    if (Utils.isNullOrUndefined(options.selectedBackgroundColor)) {
+      options.selectedBackgroundColor = options.backgroundColor;
+    }
+    else if (!Utils.isValidColor(options.selectedBackgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': selectedBackgroundColor should be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.hoverBackgroundColor)) {
+      options.hoverBackgroundColor = Utils.shadeColor(options.backgroundColor, 30);
+    }
+    else if (!Utils.isValidColor(options.hoverBackgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': hoverBackgroundColor should be a valid CSS color'
+      );
+    }
+
     if (!Utils.isValidColor(options.borderColor)) {
       options.borderColor = options.color;
     }
 
-    if (Utils.isNullOrUndefined(options.selectedColor)) {
-      options.selectedColor = null;
+    if (Utils.isNullOrUndefined(options.selectedBorderColor)) {
+      options.selectedBorderColor = Utils.shadeColor(options.borderColor, 30);
     }
-    else if (!Utils.isValidColor(options.selectedColor)) {
+    else if (!Utils.isValidColor(options.selectedBorderColor)) {
       throw new TypeError(
-        'peaks.sources.' + context + ': selectedColor should be a valid CSS color'
+        'peaks.sources.' + context + ': selectedBorderColor should be a valid CSS color'
       );
     }
 
@@ -377,7 +395,7 @@ define([
    * @param {String} color Primary color of the source representation.
    * @param {String} backgroundColor Background color of the source.
    * @param {String} borderColor Border color of the source.
-   * @param {String} selectedColor Color when the source is selected.
+   * @param {String} selectedBorderColor Color when the source is selected.
    * @param {String} warningColor Color used for warning states.
    * @param {String} volumeSliderColor Color of the volume slider.
    * @param {Number} volumeSliderWidth Width of the volume slider.
@@ -412,11 +430,11 @@ define([
 
   function Source(peaks, id, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth,
-    volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition,
-    textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable,
-    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor,
-    markerWidth, volume, volumeRange, loading, ...customParams) {
+    hoverBackgroundColor, selectedBackgroundColor, borderColor, selectedBorderColor, warningColor, warningWidth,
+    volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor,
+    textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable,
+    orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers,
+    buttons, markerColor, markerWidth, volume, volumeRange, loading, ...customParams) {
     var opts = {
       title: title,
       titleAlignments: titleAlignments,
@@ -432,8 +450,10 @@ define([
       mediaEndTime: mediaEndTime,
       color: color,
       backgroundColor: backgroundColor,
+      hoverBackgroundColor: hoverBackgroundColor,
+      selectedBackgroundColor: selectedBackgroundColor,
       borderColor: borderColor,
-      selectedColor: selectedColor,
+      selectedBorderColor: selectedBorderColor,
       warningColor: warningColor,
       warningWidth: warningWidth,
       textFont: textFont,
@@ -487,8 +507,10 @@ define([
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
     this._backgroundColor = opts.backgroundColor;
+    this._hoverBackgroundColor = opts.hoverBackgroundColor;
+    this._selectedBackgroundColor = opts.selectedBackgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._warningColor = opts.warningColor;
     this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;
@@ -664,6 +686,26 @@ define([
         this._backgroundColor = backgroundColor;
       }
     },
+    hoverBackgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._hoverBackgroundColor;
+      },
+
+      set: function(hoverBackgroundColor) {
+        this._hoverBackgroundColor = hoverBackgroundColor;
+      }
+    },
+    selectedBackgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedBackgroundColor;
+      },
+
+      set: function(selectedBackgroundColor) {
+        this._selectedBackgroundColor = selectedBackgroundColor;
+      }
+    },
     borderColor: {
       enumerable: true,
       get: function() {
@@ -674,14 +716,14 @@ define([
         this._borderColor = borderColor;
       }
     },
-    selectedColor: {
+    selectedBorderColor: {
       enumerable: true,
       get: function() {
-        return this._selectedColor;
+        return this._selectedBorderColor;
       },
 
-      set: function(selectedColor) {
-        this._selectedColor = selectedColor;
+      set: function(selectedBorderColor) {
+        this._selectedBorderColor = selectedBorderColor;
       }
     },
     warningColor: {
@@ -1089,8 +1131,10 @@ define([
       mediaEndTime: this.mediaEndTime,
       color: this.color,
       backgroundColor: this.backgroundColor,
+      hoverBackgroundColor: this.hoverBackgroundColor,
+      selectedBackgroundColor: this.selectedBackgroundColor,
       borderColor: this.borderColor,
-      selectedColor: this.selectedColor,
+      selectedBorderColor: this.selectedBorderColor,
       warningColor: this.warningColor,
       warningWidth: this.warningWidth,
       volumeSliderColor: this.volumeSliderColor,
@@ -1142,8 +1186,10 @@ define([
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
     this._backgroundColor = opts.backgroundColor;
+    this._hoverBackgroundColor = opts.hoverBackgroundColor;
+    this._selectedBackgroundColor = opts.selectedBackgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._warningColor = opts.warningColor;
     this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;

package/src/sources-layer.js

@@ -56,7 +56,9 @@ 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));
   }
 
@@ -98,14 +100,34 @@ define([
     return this._allowEditing;
   };
 
-  SourcesLayer.prototype.refresh = function() {
-    var frameOffset = this._view.getFrameOffset();
-    var width = this._view.getWidth();
+  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
+    var positions = [];
 
-    this.updateSources(
-      this._view.pixelsToTime(frameOffset),
-      this._view.pixelsToTime(frameOffset + width)
-    );
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        var source = this._sourcesGroup[sourceId].getSource();
+
+        if (!positions.includes(source.position)) {
+          this._lines.changeLineHeight(
+            oldHeight,
+            this._peaks.options.lineHeight
+          );
+          positions.push(source.position);
+        }
+        this._removeSource(source);
+        this._addSourceGroup(source);
+      }
+    }
+
+    if (positions) {
+      var frameOffset = this._view.getFrameOffset();
+      var width = this._view.getWidth();
+
+      this.updateSources(
+        this._view.pixelsToTime(frameOffset),
+        this._view.pixelsToTime(frameOffset + width)
+      );
+    }
   };
 
   SourcesLayer.prototype._onSourceUpdate = function(source) {
@@ -143,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;
 
@@ -220,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();
@@ -250,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) {
@@ -285,6 +321,8 @@ define([
     // Update sources in visible time range.
     var sources = this.findSources(startTime, endTime);
 
+    // Should implement virtualization on Y
+
     var count = sources.length;
 
     sources.forEach(this._updateSource.bind(this));
@@ -300,37 +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
     );
 
-    if (shouldDragSelectedElements) {
-      this._draggedElements = Object.values(selectedElements).sort((a, b) => a.startTime - b.startTime);
-    }
-    else {
-      this._draggedElements = [this._sourcesGroup[draggedElementId].getSource()];
-      this._view.deselectAll();
-    }
-
-    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;
+    this._nonSelectedElement = shouldDragSelectedElements ?
+      null :
+      [this._sourcesGroup[draggedElementId].getSource()];
 
-      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];
 
@@ -345,6 +374,8 @@ define([
     this._view.drawSourcesLayer();
     this._view.updateTimelineLength();
 
+    this._activeElements = {};
+
     this._peaks.emit('sources.updated', updatedSources);
   };
 
@@ -366,24 +397,41 @@ define([
       )
     );
 
-    const timeDiff = this._view.pixelsToTime(mousePos - this._mouseDownX);
+    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 + timeDiff,
-      initialEndTime + timeOffsetDiff + timeDiff,
-      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) {
@@ -397,68 +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
-  ) {
-    newStartTime = typeof newStartTime === 'number' ? Utils.roundTime(newStartTime) : newStartTime;
-    newEndTime = typeof newEndTime === 'number' ? Utils.roundTime(newEndTime) : newEndTime;
-
-    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(sources[sources.length - 1].endTime) + 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);
   };
 
   /**
@@ -671,7 +695,9 @@ 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();
   };