@checksub_team/peaks_timeline 2.4.0 → 2.5.0-alpha.1

package/src/components/sources-layer.js

@@ -69,12 +69,15 @@ define([
     // Used to suppress drag lifecycle callbacks when a dragged source is
     // temporarily stopped/restarted as part of a rebuild.
     this._suppressDragLifecycleForSourceId = null;
+    this._sourceHandleDragSession = null;
+    this._segmentDragSession = null;
 
     this._peaks.on('handler.sources.add', this._onSourcesAdd.bind(this));
     this._peaks.on('handler.sources.destroy', this._onSourcesDestroy.bind(this));
     this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
     this._peaks.on('handler.sources.hide', this._onSourcesHide.bind(this));
     this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
+    this._peaks.on('segments.setSelected', this._onSegmentsSetSelected.bind(this));
     this._peaks.on('model.source.update', this._onSourceUpdate.bind(this));
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
@@ -96,6 +99,10 @@ define([
     if (draggedSourceGroup) {
       draggedSourceGroup.stopDrag();
     }
+
+    if (this._segmentDragSession && this._segmentDragSession.draggedNode) {
+      this._segmentDragSession.draggedNode.stopDrag();
+    }
   };
 
   SourcesLayer.prototype.fitToView = function() {
@@ -114,6 +121,17 @@ define([
     return this._lineGroups.getSegmentsGroups();
   };
 
+  /**
+   * 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
+   * @param {Number} time
+   * @returns {Array<Segment>}
+   */
+  SourcesLayer.prototype.getSegmentsOnLineAfter = function(lineId, time) {
+    return this._lineGroups.getSegmentsOnLineAfter(lineId, time);
+  };
+
   SourcesLayer.prototype.add = function(element) {
     this._layer.add(element);
 
@@ -253,13 +271,29 @@ define([
   };
 
   SourcesLayer.prototype._onSourcesSetSelected = function(sources) {
+    var sourcesGroups = this._lineGroups.getSourcesGroups();
+
     sources.forEach(function(source) {
-      const sourceGroup = this._sourcesGroup[source.id];
+      const sourceGroup = sourcesGroups[source.id];
 
       if (sourceGroup) {
         sourceGroup.setSelected();
       }
-    }.bind(this));
+    });
+
+    this.batchDraw();
+  };
+
+  SourcesLayer.prototype._onSegmentsSetSelected = function(segments) {
+    var segmentsGroups = this._lineGroups.getSegmentsGroups();
+
+    segments.forEach(function(segment) {
+      var segmentsGroup = segmentsGroups[segment.line];
+
+      if (segmentsGroup) {
+        segmentsGroup.setSelected(segment);
+      }
+    });
 
     this.batchDraw();
   };
@@ -441,6 +475,341 @@ define([
     this._draggedElementsData = null;
   };
 
+  SourcesLayer.prototype.cleanupAfterSourceHandleDrag = function() {
+    this._sourceHandleDragSession = null;
+  };
+
+  SourcesLayer.prototype.onSourceHandleDragStart = function(sourceGroup, leftHandle) {
+    var source = sourceGroup.getSource();
+
+    this._sourceHandleDragSession = {
+      source: source,
+      leftHandle: leftHandle,
+      mouseDownX: this._view.getPointerPosition().x,
+      initialTimeOffset: this._view.getTimeOffset(),
+      initialStartTime: source.startTime,
+      initialEndTime: source.endTime
+    };
+  };
+
+  SourcesLayer.prototype.onSourceHandleDrag = function(draggedElement) {
+    this._view.updateWithAutoScroll(this._dragSourceHandle.bind(this), null, false);
+
+    return {
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
+    };
+  };
+
+  SourcesLayer.prototype._dragSourceHandle = function() {
+    var session = this._sourceHandleDragSession;
+    var pointer = this._view.getPointerPosition();
+    var pointerX;
+    var diff;
+    var timeOffsetDiff;
+    var shouldRedraw;
+
+    if (!session) {
+      return;
+    }
+
+    pointerX = pointer ? pointer.x : session.mouseDownX;
+    diff = this._view.pixelsToTime(pointerX - session.mouseDownX);
+    timeOffsetDiff = this._view.getTimeOffset() - session.initialTimeOffset;
+    shouldRedraw = this.manageSourceMovements(
+      [session.source],
+      session.leftHandle ? session.initialStartTime + diff + timeOffsetDiff : null,
+      session.leftHandle ? null : session.initialEndTime + diff + timeOffsetDiff
+    );
+
+    if (shouldRedraw) {
+      this.batchDraw();
+    }
+  };
+
+  SourcesLayer.prototype.onSourceHandleDragEnd = function(sourceGroup) {
+    this.cleanupAfterSourceHandleDrag();
+    this.processSourceUpdates([sourceGroup.getSource()]);
+  };
+
+  SourcesLayer.prototype.isSegmentDragInProgress = function() {
+    return Boolean(this._segmentDragSession);
+  };
+
+  SourcesLayer.prototype.cleanupAfterSegmentDrag = function() {
+    this._segmentDragSession = null;
+  };
+
+  SourcesLayer.prototype._getSelectedSegmentsForDrag = function(draggedSegment) {
+    var selectedElements = this._view.getSelectedElements();
+    var selectedSegments;
+    var draggedSegmentIsSelected;
+
+    if (!Array.isArray(selectedElements)) {
+      selectedElements = Object.values(selectedElements);
+    }
+
+    selectedSegments = selectedElements.filter(function(element) {
+      return !Utils.isNullOrUndefined(element.line) && Utils.isNullOrUndefined(element.lineId);
+    });
+
+    draggedSegmentIsSelected = selectedSegments.some(function(segment) {
+      return segment.id === draggedSegment.id;
+    });
+
+    if (!draggedSegmentIsSelected) {
+      selectedSegments = [draggedSegment];
+      this._view.deselectAll();
+    }
+
+    return selectedSegments;
+  };
+
+  SourcesLayer.prototype._buildSegmentDragGroups = function(segments) {
+    var segmentsGroups = this._lineGroups.getSegmentsGroups();
+    var groupsByLine = {};
+
+    segments.forEach(function(segment) {
+      var groupContext = groupsByLine[segment.line];
+
+      if (!groupContext) {
+        groupContext = {
+          group: segmentsGroups[segment.line],
+          segments: [],
+          initialPositions: {}
+        };
+        groupsByLine[segment.line] = groupContext;
+      }
+
+      groupContext.segments.push(segment);
+      groupContext.initialPositions[segment.id] = {
+        startTime: segment.startTime,
+        endTime: segment.endTime
+      };
+    });
+
+    return Object.keys(groupsByLine).map(function(lineId) {
+      groupsByLine[lineId].segments.sort(function(a, b) {
+        return a.startTime - b.startTime;
+      });
+
+      return groupsByLine[lineId];
+    });
+  };
+
+  SourcesLayer.prototype.onSegmentDragStart = function(segmentShape) {
+    var segment = segmentShape.getSegment();
+    var selectedSegments = this._getSelectedSegmentsForDrag(segment);
+    var groups = this._buildSegmentDragGroups(selectedSegments);
+    var minTimeOffset = -Infinity;
+    var maxTimeOffset = Infinity;
+    var draggable = true;
+    var shouldClampToAdjacentGroups = !(groups.length === 1 && groups[0].segments.length === 1);
+
+    groups.forEach(function(groupContext) {
+      if (shouldClampToAdjacentGroups) {
+        var limits = groupContext.group.getSegmentsDragTimeLimits(
+          groupContext.segments,
+          groupContext.initialPositions
+        );
+
+        minTimeOffset = Math.max(minTimeOffset, limits.minTimeOffset);
+        maxTimeOffset = Math.min(maxTimeOffset, limits.maxTimeOffset);
+      }
+
+      draggable = draggable && groupContext.segments.every(function(draggedSegment) {
+        return draggedSegment.editable;
+      });
+    });
+
+    this._segmentDragSession = {
+      kind: 'move',
+      draggedNode: segmentShape,
+      draggedSegment: segment,
+      mouseDownX: this._view.getPointerPosition().x,
+      initialTimeOffset: this._view.getTimeOffset(),
+      groups: groups,
+      minTimeOffset: minTimeOffset,
+      maxTimeOffset: maxTimeOffset,
+      appliedTimeOffset: 0,
+      draggable: draggable
+    };
+
+    this._peaks.emit('segments.dragstart', segment);
+  };
+
+  SourcesLayer.prototype.onSegmentDrag = function(draggedElement) {
+    this._view.updateWithAutoScroll(this._dragSegments.bind(this), null, false);
+
+    return {
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
+    };
+  };
+
+  SourcesLayer.prototype._dragSegments = function() {
+    var session = this._segmentDragSession;
+    var pointerPos;
+    var mousePos;
+    var timeDiff;
+    var timeOffsetDiff;
+    var requestedTimeOffset;
+    var appliedTimeOffset;
+    var groupContext;
+    var segment;
+    var initialPosition;
+
+    if (!session || session.kind !== 'move' || !session.draggable) {
+      return;
+    }
+
+    pointerPos = this._view.getPointerPosition();
+    mousePos = Math.min(
+      this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(),
+      Math.max(0, pointerPos ? pointerPos.x : session.mouseDownX)
+    );
+    timeDiff = this._view.pixelsToTime(mousePos - session.mouseDownX);
+    timeOffsetDiff = this._view.getTimeOffset() - session.initialTimeOffset;
+    requestedTimeOffset = Utils.roundTime(timeDiff + timeOffsetDiff);
+    appliedTimeOffset = Utils.clamp(
+      requestedTimeOffset,
+      session.minTimeOffset,
+      session.maxTimeOffset
+    );
+
+    if (appliedTimeOffset === session.appliedTimeOffset) {
+      return;
+    }
+
+    if (session.groups.length === 1 && session.groups[0].segments.length === 1) {
+      groupContext = session.groups[0];
+      segment = groupContext.segments[0];
+      initialPosition = groupContext.initialPositions[segment.id];
+
+      groupContext.group.updateSegment(
+        segment,
+        this._view.timeToPixels(initialPosition.startTime + appliedTimeOffset),
+        this._view.timeToPixels(initialPosition.endTime + appliedTimeOffset),
+        false
+      );
+    }
+    else {
+      session.groups.forEach(function(groupContext) {
+        groupContext.group.dragSegmentsByTimeOffset(
+          groupContext.segments,
+          groupContext.initialPositions,
+          appliedTimeOffset
+        );
+      });
+    }
+
+    session.appliedTimeOffset = appliedTimeOffset;
+    this._view.updateTimelineLength();
+    this.batchDraw();
+  };
+
+  SourcesLayer.prototype.onSegmentDragEnd = function(segmentShape) {
+    var session = this._segmentDragSession;
+
+    if (session && session.kind === 'move' && session.appliedTimeOffset !== 0) {
+      session.groups.forEach(function(groupContext) {
+        groupContext.group.markSegmentsUpdated(groupContext.segments);
+      });
+      this._view.updateTimelineLength();
+    }
+
+    this.cleanupAfterSegmentDrag();
+    this._peaks.emit('segments.dragend', segmentShape.getSegment());
+  };
+
+  SourcesLayer.prototype.onSegmentHandleDragStart = function(segmentMarker) {
+    this._segmentDragSession = {
+      kind: segmentMarker.isStartMarker() ? 'resize-start' : 'resize-end',
+      draggedNode: segmentMarker,
+      segment: segmentMarker.getSegment(),
+      group: this._lineGroups.getSegmentsGroups()[segmentMarker.getSegment().line],
+      mouseDownX: this._view.getPointerPosition().x,
+      initialTimeOffset: this._view.getTimeOffset(),
+      initialStartTime: segmentMarker.getSegment().startTime,
+      initialEndTime: segmentMarker.getSegment().endTime,
+      startMarker: segmentMarker.isStartMarker()
+    };
+
+    this._peaks.emit('segments.dragstart', segmentMarker.getSegment(), segmentMarker.isStartMarker());
+  };
+
+  SourcesLayer.prototype.onSegmentHandleDrag = function(segmentMarker) {
+    this._view.updateWithAutoScroll(this._dragSegmentHandle.bind(this), null, false);
+
+    return {
+      x: segmentMarker.getAbsolutePosition().x,
+      y: segmentMarker.getAbsolutePosition().y
+    };
+  };
+
+  SourcesLayer.prototype._dragSegmentHandle = function() {
+    var session = this._segmentDragSession;
+    var pointerPos;
+    var pointerX;
+    var timeDiff;
+    var timeOffsetDiff;
+    var newStartTime;
+    var newEndTime;
+
+    if (!session || (session.kind !== 'resize-start' && session.kind !== 'resize-end')) {
+      return;
+    }
+
+    pointerPos = this._view.getPointerPosition();
+    pointerX = pointerPos ? pointerPos.x : session.mouseDownX;
+    timeDiff = this._view.pixelsToTime(pointerX - session.mouseDownX);
+    timeOffsetDiff = this._view.getTimeOffset() - session.initialTimeOffset;
+
+    if (session.startMarker) {
+      newStartTime = Utils.roundTime(session.initialStartTime + timeDiff + timeOffsetDiff);
+
+      if (session.segment.duration) {
+        newStartTime = Math.max(
+          newStartTime,
+          Utils.roundTime(session.segment.endTime - session.segment.duration)
+        );
+      }
+
+      session.group.updateSegment(
+        session.segment,
+        this._view.timeToPixels(newStartTime),
+        null,
+        false
+      );
+    }
+    else {
+      newEndTime = Utils.roundTime(session.initialEndTime + timeDiff + timeOffsetDiff);
+
+      if (session.segment.duration) {
+        newEndTime = Math.min(
+          newEndTime,
+          Utils.roundTime(session.segment.startTime + session.segment.duration)
+        );
+      }
+
+      session.group.updateSegment(
+        session.segment,
+        null,
+        this._view.timeToPixels(newEndTime),
+        false
+      );
+    }
+
+    this._view.updateTimelineLength();
+    this.batchDraw();
+  };
+
+  SourcesLayer.prototype.onSegmentHandleDragEnd = function(segmentMarker) {
+    this._view.updateTimelineLength();
+    this.cleanupAfterSegmentDrag();
+    this._peaks.emit('segments.dragend', segmentMarker.getSegment(), segmentMarker.isStartMarker());
+  };
+
   SourcesLayer.prototype.onSourcesGroupDragStart = function(element) {
     if (this._suppressDragLifecycleForSourceId
       && element

package/src/main.js

@@ -791,16 +791,48 @@ define([
             .getSourceGroupById(id);
   };
 
+  /**
+   * Selects a source by its identifier.
+   *
+   * @param {String} sourceId
+   */
   Peaks.prototype.selectSourceById = function(sourceId) {
     return this.view
             .selectSourceById(sourceId);
   };
 
+  /**
+   * Selects all sources on a line whose start time is at or after the given time.
+   *
+   * @param {String} lineId
+   * @param {Number} time
+   */
   Peaks.prototype.selectSourcesOnLineAfter = function(lineId, time) {
     return this.view
             .selectSourcesOnLineAfter(lineId, time);
   };
 
+  /**
+   * Selects a segment by its identifier.
+   *
+   * @param {String} segmentId
+   */
+  Peaks.prototype.selectSegmentById = function(segmentId) {
+    return this.view
+            .selectSegmentById(segmentId);
+  };
+
+  /**
+   * Selects all segments in the given segment group or displayed line whose start time is at or after the given time.
+   *
+   * @param {String|Number} lineId
+   * @param {Number} time
+   */
+  Peaks.prototype.selectSegmentsOnLineAfter = function(lineId, time) {
+    return this.view
+            .selectSegmentsOnLineAfter(lineId, time);
+  };
+
   Peaks.prototype.deselectAll = function(notify) {
     return this.view
             .deselectAll(notify);

package/src/models/segment.js

@@ -352,9 +352,23 @@ define([
     this._peaks.emit('model.segment.updated', this);
   };
 
-  Segment.prototype.setSelected = function(selected) {
-    this._selected = selected;
-    this._peaks.emit('model.segment.selected', this);
+  /**
+   * Updates segment times without emitting a model update event.
+   *
+   * This is used by controller-owned drag flows that refresh the visible slice
+   * explicitly and emit their consolidated updates on drag end.
+   *
+   * @param {Number} [newStartTime]
+   * @param {Number} [newEndTime]
+   */
+  Segment.prototype.updateTimes = function(newStartTime, newEndTime) {
+    if (!Utils.isNullOrUndefined(newStartTime)) {
+      this._startTime = Utils.roundTime(newStartTime);
+    }
+
+    if (!Utils.isNullOrUndefined(newEndTime)) {
+      this._endTime = Utils.roundTime(newEndTime);
+    }
   };
 
   /**

package/src/view.js

@@ -525,19 +525,57 @@ define([
     return this._sourcesLayer.getSourceGroupById(sourceId);
   };
 
+  /**
+   * Selects a source by its identifier.
+   *
+   * @param {String} sourceId
+   */
   View.prototype.selectSourceById = function(sourceId) {
     const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
 
     if (sourceGroup) {
-      this._modeLayer.selectElements([sourceGroup.getSource()], false);
+      this._modeLayer.selectElements([sourceGroup.getSource()], true);
     }
   };
 
+  /**
+   * Selects all sources on a line whose start time is at or after the given time.
+   *
+   * @param {String} lineId
+   * @param {Number} time
+   */
   View.prototype.selectSourcesOnLineAfter = function(lineId, time) {
     const sources = this._sourcesLayer.getSourcesOnLineAfter(lineId, time);
 
-    if (sources) {
-      this._modeLayer.selectElements(sources, false);
+    if (sources.length) {
+      this._modeLayer.selectElements(sources, true);
+    }
+  };
+
+  /**
+   * Selects a segment by its identifier.
+   *
+   * @param {String} segmentId
+   */
+  View.prototype.selectSegmentById = function(segmentId) {
+    const segment = this._peaks.segmentHandler.getSegment(segmentId);
+
+    if (segment) {
+      this._modeLayer.selectElements([segment], true);
+    }
+  };
+
+  /**
+   * Selects all segments in the given segment group or displayed line whose start time is at or after the given time.
+   *
+   * @param {String|Number} lineId
+   * @param {Number} time
+   */
+  View.prototype.selectSegmentsOnLineAfter = function(lineId, time) {
+    const segments = this._sourcesLayer.getSegmentsOnLineAfter(lineId, time);
+
+    if (segments.length) {
+      this._modeLayer.selectElements(segments, true);
     }
   };