@checksub_team/peaks_timeline 2.4.0 → 2.5.0-alpha.1

package/peaks.js.d.ts

@@ -267,6 +267,12 @@ declare module 'peaks.js' {
   interface PeaksInstance {
     setSource: (options: SetSourceOptions, callback: SetSourceCallback) => void;
     destroy: () => void;
+    getSelectedElements: () => object[];
+    selectSourceById: (sourceId: string) => void;
+    selectSourcesOnLineAfter: (lineId: string, time: number) => void;
+    selectSegmentById: (segmentId: string) => void;
+    selectSegmentsOnLineAfter: (lineId: string | number, time: number) => void;
+    deselectAll: (notify?: boolean) => void;
     /** Player API */
     player: {
       play: () => void;

package/src/components/line-group.js

@@ -646,6 +646,20 @@ define([
     return sources;
   };
 
+  /**
+   * Returns all segments on this line whose start time is at or after the given time.
+   *
+   * @param {Number} time
+   * @returns {Array<Segment>}
+   */
+  LineGroup.prototype.getSegmentsAfter = function(time) {
+    if (!this.isSegmentsLine()) {
+      return [];
+    }
+
+    return this._segmentsGroup.getSegmentsAfter(time);
+  };
+
   LineGroup.prototype.getSourcesAround = function(time) {
     var left = null;
     var right = null;

package/src/components/line-groups.js

@@ -120,8 +120,13 @@ define([
     this._segmentsGroups[segment.line].onSegmentsUpdate(segment);
   };
 
-  LineGroups.prototype._onSegmentUpdated = function(segment) {
-    this._segmentsGroups[segment.line].onSegmentUpdated();
+  LineGroups.prototype._onSegmentUpdated = function() {
+    for (var lineId in this._segmentsGroups) {
+      if (Utils.objectHasProperty(this._segmentsGroups, lineId)
+        && this._segmentsGroups[lineId].hasUpdatedSegments()) {
+        this._segmentsGroups[lineId].onSegmentUpdated();
+      }
+    }
   };
 
   LineGroups.prototype._onSegmentsRemove = function(segments) {
@@ -232,6 +237,23 @@ define([
     return this._lineGroupsById[lineId].getSourcesAfter(time);
   };
 
+  /**
+   * Returns all segments in the given segment group or displayed line whose start time is at or after the given time.
+   *
+   * @param {String|Number} lineId A rendered line identifier or a segment group identifier.
+   * @param {Number} time
+   * @returns {Array<Segment>}
+   */
+  LineGroups.prototype.getSegmentsOnLineAfter = function(lineId, time) {
+    const lineGroup = this._lineGroupsById[lineId] || this._segmentsGroupToLine[lineId];
+
+    if (!lineGroup) {
+      return [];
+    }
+
+    return lineGroup.getSegmentsAfter(time);
+  };
+
   LineGroups.prototype.getSegmentsGroups = function() {
     return this._segmentsGroups;
   };

package/src/components/mode-layer.js

@@ -93,6 +93,12 @@ define([
     stage.add(this._layer);
   };
 
+  /**
+   * Selects the given elements.
+   *
+   * @param {Array<Source|Segment>} elements Elements to select.
+   * @param {Boolean} notify When <code>true</code>, selection events are emitted.
+   */
   ModeLayer.prototype.selectElements = function(elements, notify) {
     const sources = [];
     const segments = [];
@@ -232,12 +238,11 @@ define([
     const hoveredKonvaElement = this._view.getHoveredElement();
 
     if (hoveredKonvaElement) {
-      if (hoveredKonvaElement instanceof SourceGroup) {
-        this.selectElements([hoveredKonvaElement.getSource()], true);
-      }
-      else {
-        this.selectElements([hoveredKonvaElement.getSegment()], true);
-      }
+      const element = hoveredKonvaElement instanceof SourceGroup ?
+        hoveredKonvaElement.getSource() :
+        hoveredKonvaElement.getSegment();
+
+      this.selectElements([element], true);
     }
     else {
       this.deselectDifference([], true);

package/src/components/segment-marker.js

@@ -84,50 +84,8 @@ define([
     }
   };
 
-  SegmentMarker.prototype._dragBoundFunc = function(pos) {
-    if (this._startMarker) {
-      var newStartX;
-
-      if (this._segment.duration) {
-        newStartX = Math.max(
-          pos.x + this._view.getFrameOffset(),
-          this._view.timeToPixels(this._segment.endTime - this._segment.duration)
-        );
-      }
-      else {
-        newStartX = pos.x + this._view.getFrameOffset();
-      }
-
-      this._segmentShape.getSegmentsGroup().updateSegment(
-        this._segment,
-        newStartX,
-        null
-      );
-    }
-    else {
-      var newEndX;
-
-      if (this._segment.duration) {
-        newEndX = Math.min(
-          pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth(),
-          this._view.timeToPixels(this._segment.startTime + this._segment.duration)
-        );
-      }
-      else {
-        newEndX = pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth();
-      }
-
-      this._segmentShape.getSegmentsGroup().updateSegment(
-        this._segment,
-        null,
-        newEndX
-      );
-    }
-
-    return {
-      x: this._group.getAbsolutePosition().x,
-      y: this._group.getAbsolutePosition().y
-    };
+  SegmentMarker.prototype._dragBoundFunc = function() {
+    return this._view._sourcesLayer.onSegmentHandleDrag(this);
   };
 
   SegmentMarker.prototype.moveTo = function(group) {
@@ -142,6 +100,10 @@ define([
     return this._group.getX();
   };
 
+  SegmentMarker.prototype.getAbsolutePosition = function() {
+    return this._group.getAbsolutePosition();
+  };
+
   SegmentMarker.prototype.getWidth = function() {
     return this._group.getWidth();
   };
@@ -162,6 +124,10 @@ define([
     this._group.setX(x);
   };
 
+  SegmentMarker.prototype.stopDrag = function() {
+    this._group.stopDrag();
+  };
+
   SegmentMarker.prototype.timeUpdated = function(time) {
     if (this._marker.timeUpdated) {
       this._marker.timeUpdated(time);

package/src/components/segment-shape.js

@@ -105,16 +105,7 @@ define([
     this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
     this._onSegmentHandleDragEnd   = this._onSegmentHandleDragEnd.bind(this);
 
-    this._label = this._peaks.options.createSegmentLabel({
-      x:        this._view.timeToPixels(segment.startTime),
-      y:        this._segmentY,
-      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
-      height:   this._segmentHeight,
-      segment:  segment,
-      view:     this._view.getName(),
-      group:    this._group,
-      fontSize: 12
-    });
+    this._createLabel();
 
     this._createMarkers();
 
@@ -125,20 +116,7 @@ define([
   }
 
   SegmentShape.prototype._onShapeGroupDrag = function(draggedElement) {
-    const diff = this._view.getPointerPosition().x - this._mouseDownX;
-
-    this._group.updateSegment(
-      this._segment,
-      this._initialStartPixel + diff, this._initialEndPixel + diff
-    );
-
-    this._startMarker.timeUpdated(this._segment.startTime);
-    this._endMarker.timeUpdated(this._segment.endTime);
-
-    return {
-      x: draggedElement.absolutePosition().x,
-      y: draggedElement.absolutePosition().y
-    };
+    return this._view._sourcesLayer.onSegmentDrag(draggedElement);
   };
 
   SegmentShape.prototype._cornerRadius = function() {
@@ -147,9 +125,67 @@ define([
       SEGMENT_CORNER_RADIUS;
   };
 
+  SegmentShape.prototype._createLabel = function() {
+    this._label = this._peaks.options.createSegmentLabel({
+      x:        this._view.timeToPixels(this._segment.startTime),
+      y:        this._segmentY,
+      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+      height:   this._segmentHeight,
+      segment:  this._segment,
+      view:     this._view.getName(),
+      group:    this._group,
+      fontSize: 12
+    });
+  };
+
+  SegmentShape.prototype._rebuildSelectionDependentNodes = function() {
+    var group = this._shapeGroup.getParent();
+
+    if (this._label) {
+      this._label.destroy();
+      this._label = null;
+    }
+
+    if (this._startMarker) {
+      this._startMarker.destroy();
+      this._startMarker = null;
+    }
+
+    if (this._endMarker) {
+      this._endMarker.destroy();
+      this._endMarker = null;
+    }
+
+    this._createLabel();
+    this._createMarkers();
+
+    if (group) {
+      if (this._label) {
+        this._label.moveTo(group);
+      }
+
+      if (this._startMarker) {
+        this._startMarker.moveTo(group);
+      }
+
+      if (this._endMarker) {
+        this._endMarker.moveTo(group);
+      }
+    }
+  };
+
   SegmentShape.prototype.update = function() {
-    var startPixel  = this._view.timeToPixels(this._segment.startTime);
-    var endPixel    = this._view.timeToPixels(this._segment.endTime);
+    this._applyDisplayTimes(this._segment.startTime, this._segment.endTime);
+  };
+
+  SegmentShape.prototype.setSelected = function() {
+    this._rebuildSelectionDependentNodes();
+    this.update();
+  };
+
+  SegmentShape.prototype._applyDisplayTimes = function(startTime, endTime) {
+    var startPixel  = this._view.timeToPixels(startTime);
+    var endPixel    = this._view.timeToPixels(endTime);
     var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
 
     this._shapeGroup.x(startPixel - frameOffset);
@@ -186,12 +222,12 @@ define([
 
     if (this._startMarker) {
       this._startMarker.setX(startPixel - frameOffset);
-      this._startMarker.timeUpdated(this._segment.startTime);
+      this._startMarker.timeUpdated(startTime);
     }
 
     if (this._endMarker) {
       this._endMarker.setX(endPixel - this._endMarker.getHandleWidth() - frameOffset);
-      this._endMarker.timeUpdated(this._segment.endTime);
+      this._endMarker.timeUpdated(endTime);
     }
 
     if (this._label) {
@@ -224,6 +260,10 @@ define([
     return this._endMarker;
   };
 
+  SegmentShape.prototype.stopDrag = function() {
+    this._shapeGroup.stopDrag();
+  };
+
   SegmentShape.prototype.moveTo = function(group, segmentsGroup) {
     if (segmentsGroup) {
       this._segmentsGroup = segmentsGroup;
@@ -412,19 +452,13 @@ define([
   SegmentShape.prototype._onSegmentDragStart = function() {
     this._view.setCursor('grab');
 
-    this._mouseDownX = this._view.getPointerPosition().x;
-    this._initialStartTime = this._segment.startTime;
-    this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
-    this._initialEndTime = this._segment.endTime;
-    this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
-
-    this._peaks.emit('segments.dragstart', this._segment);
+    this._view._sourcesLayer.onSegmentDragStart(this);
   };
 
   SegmentShape.prototype._onSegmentDragEnd = function() {
     this._view.setCursor('pointer');
 
-    this._peaks.emit('segments.dragend', this._segment);
+    this._view._sourcesLayer.onSegmentDragEnd(this);
   };
 
   /**
@@ -440,9 +474,7 @@ define([
    */
 
   SegmentShape.prototype._onSegmentHandleDragStart = function(segmentMarker) {
-    var startMarker = segmentMarker.isStartMarker();
-
-    this._peaks.emit('segments.dragstart', this._segment, startMarker);
+    this._view._sourcesLayer.onSegmentHandleDragStart(segmentMarker);
   };
 
   /**
@@ -450,9 +482,7 @@ define([
    */
 
   SegmentShape.prototype._onSegmentHandleDragEnd = function(segmentMarker) {
-    var startMarker = segmentMarker.isStartMarker();
-
-    this._peaks.emit('segments.dragend', this._segment, startMarker);
+    this._view._sourcesLayer.onSegmentHandleDragEnd(segmentMarker);
   };
 
   SegmentShape.prototype.fitToView = function() {

package/src/components/segments-group.js

@@ -392,6 +392,35 @@ define([
     return visibleSegments;
   };
 
+  /**
+   * Returns all segments on this line whose start time is at or after the given time.
+   *
+   * @param {Number} time
+   * @returns {Array<Segment>}
+   */
+  SegmentsGroup.prototype.getSegmentsAfter = function(time) {
+    const segments = [];
+    var currentId = this._firstSegmentId;
+
+    while (currentId) {
+      var segmentData = this._segments[currentId];
+
+      if (segmentData.segment.startTime >= time) {
+        while (currentId) {
+          segmentData = this._segments[currentId];
+
+          segments.push(segmentData.segment);
+          currentId = segmentData.nextSegmentId;
+        }
+        break;
+      }
+
+      currentId = segmentData.nextSegmentId;
+    }
+
+    return segments;
+  };
+
   SegmentsGroup.prototype._draw = function() {
     this._view.batchDrawSourcesLayer();
   };
@@ -504,6 +533,10 @@ define([
     return this._isMagnetized;
   };
 
+  SegmentsGroup.prototype.markSegmentsUpdated = function(segments) {
+    segments.forEach(this.addToUpdatedSegments.bind(this));
+  };
+
   SegmentsGroup.prototype.setIndicators = function(segment) {
     var segmentShape = this._segmentShapes[segment.id];
 
@@ -513,21 +546,144 @@ define([
     }
   };
 
+  SegmentsGroup.prototype.setSelected = function(segment) {
+    var segmentShape = this._segmentShapes[segment.id];
+
+    if (segmentShape) {
+      segmentShape.setSelected();
+      this._draw();
+    }
+  };
+
   SegmentsGroup.prototype.addToUpdatedSegments = function(segment) {
     if (this._updatedSegments.indexOf(segment) === -1) {
       this._updatedSegments.push(segment);
     }
   };
 
-  SegmentsGroup.prototype.updateSegment = function(segment, newStartX, newEndX) {
+  SegmentsGroup.prototype.hasUpdatedSegments = function() {
+    return this._updatedSegments.length > 0;
+  };
+
+  /**
+   * Returns the allowed drag offset bounds for a set of segments that move together.
+   *
+   * @param {Array<Segment>} segments
+   * @param {Object<String, {startTime: Number, endTime: Number}>} initialPositions
+   * @returns {{minTimeOffset: Number, maxTimeOffset: Number}}
+   */
+  SegmentsGroup.prototype.getSegmentsDragTimeLimits = function(segments, initialPositions) {
+    var selectedIds = {};
+    var minTimeOffset = -Infinity;
+    var maxTimeOffset = Infinity;
+
+    segments.forEach(function(segment) {
+      selectedIds[segment.id] = true;
+    });
+
+    segments.forEach(function(segment) {
+      var segmentData = this._segments[segment.id];
+      var initialPosition = initialPositions[segment.id];
+      var previousSegmentId = segmentData.prevSegmentId;
+      var nextSegmentId = segmentData.nextSegmentId;
+
+      while (previousSegmentId && selectedIds[previousSegmentId]) {
+        previousSegmentId = this._segments[previousSegmentId].prevSegmentId;
+      }
+
+      while (nextSegmentId && selectedIds[nextSegmentId]) {
+        nextSegmentId = this._segments[nextSegmentId].nextSegmentId;
+      }
+
+      if (previousSegmentId) {
+        minTimeOffset = Math.max(
+          minTimeOffset,
+          this._segments[previousSegmentId].segment.endTime - initialPosition.startTime
+        );
+      }
+      else {
+        minTimeOffset = Math.max(minTimeOffset, -initialPosition.startTime);
+      }
+
+      if (nextSegmentId) {
+        maxTimeOffset = Math.min(
+          maxTimeOffset,
+          this._segments[nextSegmentId].segment.startTime - initialPosition.endTime
+        );
+      }
+    }.bind(this));
+
+    return {
+      minTimeOffset: minTimeOffset,
+      maxTimeOffset: maxTimeOffset
+    };
+  };
+
+  /**
+   * Updates a set of dragged segments by the same time offset and refreshes only the visible slice.
+   *
+   * @param {Array<Segment>} segments
+   * @param {Object<String, {startTime: Number, endTime: Number}>} initialPositions
+   * @param {Number} timeOffset
+   */
+  SegmentsGroup.prototype.dragSegmentsByTimeOffset = function(segments, initialPositions, timeOffset) {
+    var hasChanges = false;
+
+    segments.forEach(function(segment) {
+      var initialPosition = initialPositions[segment.id];
+      var newStartTime = Utils.roundTime(initialPosition.startTime + timeOffset);
+      var newEndTime = Utils.roundTime(initialPosition.endTime + timeOffset);
+
+      if (segment.startTime !== newStartTime || segment.endTime !== newEndTime) {
+        segment.updateTimes(newStartTime, newEndTime);
+        hasChanges = true;
+      }
+    });
+
+    if (hasChanges) {
+      this._updateVisibleSegmentsInView();
+    }
+  };
+
+  /**
+   * Returns the current visible time range for the view.
+   *
+   * @returns {{startTime: Number, endTime: Number}}
+   */
+  SegmentsGroup.prototype._getVisibleTimeRange = function() {
+    var frameOffset = this._view.getFrameOffset();
+    var width = this._view.getWidth();
+
+    return {
+      startTime: this._view.pixelsToTime(frameOffset),
+      endTime: this._view.pixelsToTime(frameOffset + width)
+    };
+  };
+
+  /**
+   * Refreshes the rendered segments for the current viewport without forcing an immediate draw.
+   */
+  SegmentsGroup.prototype._updateVisibleSegmentsInView = function() {
+    var visibleTimeRange = this._getVisibleTimeRange();
+
+    this.find(visibleTimeRange.startTime, visibleTimeRange.endTime)
+      .forEach(this._updateSegment.bind(this));
+    this._removeInvisibleSegments(visibleTimeRange.startTime, visibleTimeRange.endTime);
+  };
+
+  SegmentsGroup.prototype.updateSegment = function(segment, newStartX, newEndX, shouldDraw) {
     var newXs = this.manageCollision(segment, newStartX, newEndX);
 
+    if (Utils.isNullOrUndefined(shouldDraw)) {
+      shouldDraw = true;
+    }
+
     if (!Utils.isNullOrUndefined(newXs.startX)) {
-      segment.startTime = this._view.pixelsToTime(newXs.startX);
+      segment.updateTimes(this._view.pixelsToTime(newXs.startX), null);
     }
 
     if (!Utils.isNullOrUndefined(newXs.endX)) {
-      segment.endTime = this._view.pixelsToTime(newXs.endX);
+      segment.updateTimes(null, this._view.pixelsToTime(newXs.endX));
     }
 
     if (newXs) {
@@ -535,7 +691,9 @@ define([
 
       this.addToUpdatedSegments(segment);
 
-      this._draw();
+      if (shouldDraw) {
+        this._draw();
+      }
     }
   };
 

package/src/components/source-group.js

@@ -263,30 +263,7 @@ define([
   };
 
   SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, leftHandle) {
-    const { start, end } = this._initialTimes;
-
-    this._view.updateWithAutoScroll(
-      function() {
-        var pointer = this._view.getPointerPosition();
-        var pointerX = pointer ? pointer.x : this._mouseDownX;
-
-        const diff = this._view.pixelsToTime(pointerX - this._mouseDownX);
-        const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
-
-        if (this._layer.manageSourceMovements(
-          [this._source],
-          leftHandle ? start + diff + timeOffsetDiff : null,
-          leftHandle ? null : end + diff + timeOffsetDiff
-        )) {
-          this._layer.batchDraw();
-        }
-      }.bind(this)
-    , null, false);
-
-    return {
-      x: draggedElement.absolutePosition().x,
-      y: draggedElement.absolutePosition().y
-    };
+    return this._layer.onSourceHandleDrag(draggedElement, leftHandle);
   };
 
   SourceGroup.prototype.update = function() {
@@ -373,21 +350,16 @@ define([
     }
   };
 
-  SourceGroup.prototype._onHandleDragStart = function() {
-    this._initialTimeOffset = this._view.getTimeOffset();
-    this._mouseDownX = this._view.getPointerPosition().x;
-    this._initialTimes = {
-      start: this._source.startTime,
-      end: this._source.endTime
-    };
+  SourceGroup.prototype._onHandleDragStart = function(leftHandle) {
     this._isHandleDragged = true;
     this._hideButtons();
+    this._layer.onSourceHandleDragStart(this, leftHandle);
   };
 
   SourceGroup.prototype._onHandleDragEnd = function() {
     this._isHandleDragged = false;
     this._showButtons();
-    this._layer.processSourceUpdates([this._source]);
+    this._layer.onSourceHandleDragEnd(this);
   };
 
   SourceGroup.prototype._addHandles = function(forceCreate) {
@@ -408,7 +380,7 @@ define([
 
       this._leftHandle.on('dragstart', function(event) {
         event.cancelBubble = true;
-        self._onHandleDragStart(event);
+        self._onHandleDragStart(true);
       });
 
       this._leftHandle.on('dragend', function(event) {
@@ -441,7 +413,7 @@ define([
 
       this._rightHandle.on('dragstart', function(event) {
         event.cancelBubble = true;
-        self._onHandleDragStart(event);
+        self._onHandleDragStart(false);
       });
 
       this._rightHandle.on('dragend', function(event) {