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

package/src/sources-layer.js

@@ -57,7 +57,6 @@ define([
     this._peaks.on('source.update', this._onSourceUpdate.bind(this));
     this._peaks.on('data.retrieved', this._onDataRetrieved.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));
   }
 
@@ -99,30 +98,6 @@ define([
     return this._allowEditing;
   };
 
-  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
-    var positions = [];
-
-    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) {
-      this.refresh();
-    }
-  };
-
   SourcesLayer.prototype.refresh = function() {
     var frameOffset = this._view.getFrameOffset();
     var width = this._view.getWidth();
@@ -168,16 +143,6 @@ 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;
 
@@ -285,7 +250,7 @@ define([
     var sourceGroup = this._createSourceGroup(source);
 
     this._sourcesGroup[source.id] = sourceGroup;
-    this._lines.addSourceGroup(sourceGroup, source.position);
+    this._lines.addSourceGroup(source, sourceGroup, source.position);
 
     // After creating and referencing the new group, we can start data retrieval
     if (startDataRetrieval) {
@@ -320,8 +285,6 @@ define([
     // Update sources in visible time range.
     var sources = this.findSources(startTime, endTime);
 
-    // TODO: Should implement virtualization on Y
-
     var count = sources.length;
 
     sources.forEach(this._updateSource.bind(this));
@@ -337,20 +300,37 @@ 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;
-    const shouldDragSelectedElements = Object.keys(this._view.getSelectedElements()).includes(
+
+    var selectedElements = this._view.getSelectedElements();
+    const shouldDragSelectedElements = Object.keys(selectedElements).includes(
       draggedElementId
     );
 
-    this._nonSelectedElement = shouldDragSelectedElements ?
-      null :
-      [this._sourcesGroup[draggedElementId].getSource()];
+    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;
+
+      return bounds;
+    }, {
+      initialStartTime: Infinity,
+      initialEndTime: -Infinity,
+      orderable: true
+    });
   };
 
   SourcesLayer.prototype.onSourcesGroupDragEnd = function() {
-    const updatedSources = (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).map(
+    const updatedSources = this._draggedElements.map(
       function(source) {
         const sourceGroup = this._sourcesGroup[source.id];
 
@@ -365,8 +345,6 @@ define([
     this._view.drawSourcesLayer();
     this._view.updateTimelineLength();
 
-    this._activeElements = {};
-
     this._peaks.emit('sources.updated', updatedSources);
   };
 
@@ -388,41 +366,24 @@ define([
       )
     );
 
-    const diff = this._view.pixelsToTime(mousePos - this._mouseDownX);
+    const timeDiff = 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;
-    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);
-
-      shouldRedraw = this.updateSource(
-        source,
-        initialStartTime + diff + timeOffsetDiff,
-        initialEndTime + diff + timeOffsetDiff,
-        mousePosX,
-        mousePosY
-      ) || shouldRedraw;
-    }.bind(this));
+    const { initialStartTime, initialEndTime, orderable } = this._draggedElementsData;
+
+    const shouldRedraw = this.manageSourceMovements(
+      this._draggedElements,
+      initialStartTime + timeOffsetDiff + timeDiff,
+      initialEndTime + timeOffsetDiff + timeDiff,
+      orderable,
+      mousePosX,
+      mousePosY
+    );
 
     if (shouldRedraw) {
       this.draw();
     }
-
-    this._view.setTimelineLength(
-      this._view.timeToPixels(newEnd) + this._view.getWidth()
-    );
   };
 
   SourcesLayer.prototype.findSources = function(startTime, endTime) {
@@ -436,44 +397,68 @@ define([
     );
   };
 
-  SourcesLayer.prototype.updateSource = function(source, startTime, endTime, mouseX, mouseY) {
-    var newTimes = {
-      start: startTime,
-      end: endTime
-    };
-
-    if (this._peaks.options.canMoveSourcesBetweenLines) {
-      this.manageVerticalPosition(source, mouseX, mouseY);
+  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)
+          );
+        });
+      }
     }
 
-    newTimes = this.manageSourceOrder(source, newTimes);
-    newTimes = this.manageCollision(source, newTimes);
+    this.refresh();
+  };
 
-    source.updateTimes(
-      newTimes.start,
-      newTimes.end
-    );
+  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 (newTimes) {
-      this._updateSource(
-        source
-      );
+    if (this._peaks.options.canMoveSourcesBetweenLines && typeof mouseY === 'number') {
+      this.manageVerticalPosition(sources, newStartTime, newEndTime, mouseX, mouseY);
+    }
 
-      return true;
+    if (orderable) {
+      ({ newStartTime, newEndTime } = this.manageOrder(sources, newStartTime, newEndTime));
     }
-    return false;
+    ({ newStartTime, newEndTime } = this.manageCollision(sources, newStartTime, newEndTime));
+
+    this._applyTimeChangesToSources(sources, sources[0].startTime, newStartTime, newEndTime);
+
+    this._view.setTimelineLength(
+      this._view.timeToPixels(sources[sources.length - 1].endTime) + this._view.getWidth()
+    );
+
+    return true;
   };
 
-  SourcesLayer.prototype.manageVerticalPosition = function(source, mouseX, mouseY) {
-    return this._lines.manageVerticalPosition(source, mouseX, mouseY);
+  SourcesLayer.prototype.manageVerticalPosition = function(sources, startTime, endTime, mouseX, mouseY) {
+    return this._lines.manageVerticalPosition(sources, startTime, endTime, mouseX, mouseY);
   };
 
-  SourcesLayer.prototype.manageSourceOrder = function(source, newTimes) {
-    return this._lines.manageSourceOrder(source, newTimes);
+  SourcesLayer.prototype.manageOrder = function(sources, startTime, endTime) {
+    return this._lines.manageOrder(sources, startTime, endTime);
   };
 
-  SourcesLayer.prototype.manageCollision = function(source, newTimes) {
-    return this._lines.manageCollision(source, newTimes);
+  SourcesLayer.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
+    return this._lines.manageCollision(sources, newStartTime, newEndTime);
   };
 
   /**
@@ -687,7 +672,6 @@ define([
     this._peaks.off('source.update', this._onSourceUpdate);
     this._peaks.off('data.retrieved', this._onDataRetrieved);
     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

@@ -482,9 +482,10 @@ define([
    */
 
   TimelineSources.prototype.showById = function(sourceId) {
-    // var indexes = this._findSource(function(source) {
-    //   return source.id === sourceId;
-    // })
+    if (this._sourcesById[sourceId].wrapped === false) {
+      return;
+    }
+
     this._sourcesById[sourceId].wrapped = false;
 
     this._peaks.emit('sources.show', [this._sourcesById[sourceId]]);
@@ -498,9 +499,10 @@ define([
    */
 
   TimelineSources.prototype.hideById = function(sourceId) {
-    // var indexes = this._findSource(function(source) {
-    //   return source.id === sourceId;
-    // })
+    if (this._sourcesById[sourceId].wrapped === true) {
+      return;
+    }
+
     this._sourcesById[sourceId].wrapped = true;
 
     this._peaks.emit('sources.hide', [this._sourcesById[sourceId]]);