@checksub_team/peaks_timeline 2.4.0 → 2.5.0-alpha.0

package/peaks.js

@@ -15410,6 +15410,12 @@ module.exports = function (SourceGroup, Utils, Konva) {
         }
         return sources;
     };
+    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;
@@ -15571,8 +15577,12 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
     LineGroups.prototype._onSegmentsUpdate = function (segment) {
         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) {
         var self = this;
@@ -15654,6 +15664,13 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
     LineGroups.prototype.getSourcesOnLineAfter = function (lineId, time) {
         return this._lineGroupsById[lineId].getSourcesAfter(time);
     };
+    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;
     };
@@ -16587,11 +16604,8 @@ module.exports = function (SourceGroup, Invoker, Source, Utils, Konva) {
     ModeLayer.prototype._onMouseClickInDefaultMode = function () {
         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);
             this._view.batchDrawSourcesLayer();
@@ -17175,28 +17189,8 @@ module.exports = function (Konva) {
             });
         }
     };
-    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) {
         this._group.moveTo(group);
@@ -17207,6 +17201,9 @@ module.exports = function (Konva) {
     SegmentMarker.prototype.getX = function () {
         return this._group.getX();
     };
+    SegmentMarker.prototype.getAbsolutePosition = function () {
+        return this._group.getAbsolutePosition();
+    };
     SegmentMarker.prototype.getWidth = function () {
         return this._group.getWidth();
     };
@@ -17222,6 +17219,9 @@ module.exports = function (Konva) {
     SegmentMarker.prototype.setX = function (x) {
         this._group.setX(x);
     };
+    SegmentMarker.prototype.stopDrag = function () {
+        this._group.stopDrag();
+    };
     SegmentMarker.prototype.timeUpdated = function (time) {
         if (this._marker.timeUpdated) {
             this._marker.timeUpdated(time);
@@ -17313,21 +17313,17 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this.createIndicators();
     }
     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 () {
         return !Utils.isNullOrUndefined(this._segment.borderRadius) ? this._segment.borderRadius : SEGMENT_CORNER_RADIUS;
     };
     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._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);
         this._segmentWidth = endPixel - startPixel;
@@ -17351,11 +17347,11 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         }
         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) {
             this._label.setX(startPixel - frameOffset);
@@ -17380,6 +17376,9 @@ module.exports = function (Konva, SegmentMarker, Utils) {
     SegmentShape.prototype.getEndMarker = function () {
         return this._endMarker;
     };
+    SegmentShape.prototype.stopDrag = function () {
+        this._shapeGroup.stopDrag();
+    };
     SegmentShape.prototype.moveTo = function (group, segmentsGroup) {
         if (segmentsGroup) {
             this._segmentsGroup = segmentsGroup;
@@ -17529,27 +17528,20 @@ module.exports = function (Konva, SegmentMarker, Utils) {
     };
     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);
     };
     SegmentShape.prototype._onSegmentHandleDrag = function () {
         this._peaks.emit('segments.dragged');
     };
     SegmentShape.prototype._onSegmentHandleDragStart = function (segmentMarker) {
-        var startMarker = segmentMarker.isStartMarker();
-        this._peaks.emit('segments.dragstart', this._segment, startMarker);
+        this._view._sourcesLayer.onSegmentHandleDragStart(segmentMarker);
     };
     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 () {
         if (this._startMarker) {
@@ -17835,6 +17827,23 @@ module.exports = function (SegmentShape, Utils, Konva) {
         }
         return visibleSegments;
     };
+    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();
     };
@@ -17904,6 +17913,9 @@ module.exports = function (SegmentShape, Utils, Konva) {
     SegmentsGroup.prototype.isMagnetized = function () {
         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];
         if (segmentShape) {
@@ -17916,18 +17928,86 @@ module.exports = function (SegmentShape, Utils, Konva) {
             this._updatedSegments.push(segment);
         }
     };
-    SegmentsGroup.prototype.updateSegment = function (segment, newStartX, newEndX) {
+    SegmentsGroup.prototype.hasUpdatedSegments = function () {
+        return this._updatedSegments.length > 0;
+    };
+    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
+        };
+    };
+    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();
+        }
+    };
+    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)
+        };
+    };
+    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) {
             this._updateSegment(segment);
             this.addToUpdatedSegments(segment);
-            this._draw();
+            if (shouldDraw) {
+                this._draw();
+            }
         }
     };
     SegmentsGroup.prototype.manageCollision = function (segment, newStartX, newEndX) {
@@ -18303,20 +18383,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         this._rightHandle.x(this._width - handleWidth);
     };
     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 () {
         const startPixel = this._view.timeToPixels(this._source.startTime);
@@ -18376,20 +18443,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             this._rightHandle.height(this._unwrappedHeight);
         }
     };
-    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) {
         var self = this;
@@ -18407,7 +18469,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             });
             this._leftHandle.on('dragstart', function (event) {
                 event.cancelBubble = true;
-                self._onHandleDragStart(event);
+                self._onHandleDragStart(true);
             });
             this._leftHandle.on('dragend', function (event) {
                 event.cancelBubble = true;
@@ -18435,7 +18497,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             });
             this._rightHandle.on('dragstart', function (event) {
                 event.cancelBubble = true;
-                self._onHandleDragStart(event);
+                self._onHandleDragStart(false);
             });
             this._rightHandle.on('dragend', function (event) {
                 event.cancelBubble = true;
@@ -19877,6 +19939,8 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._throttledBatchDraw = this._invoker.throttleTrailing(this._layer.batchDraw.bind(this._layer));
         this._drawPending = false;
         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));
@@ -19899,6 +19963,9 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         if (draggedSourceGroup) {
             draggedSourceGroup.stopDrag();
         }
+        if (this._segmentDragSession && this._segmentDragSession.draggedNode) {
+            this._segmentDragSession.draggedNode.stopDrag();
+        }
     };
     SourcesLayer.prototype.fitToView = function () {
         this._lineGroups.fitToView();
@@ -19912,6 +19979,9 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     SourcesLayer.prototype.getSegmentsGroups = function () {
         return this._lineGroups.getSegmentsGroups();
     };
+    SourcesLayer.prototype.getSegmentsOnLineAfter = function (lineId, time) {
+        return this._lineGroups.getSegmentsOnLineAfter(lineId, time);
+    };
     SourcesLayer.prototype.add = function (element) {
         this._layer.add(element);
         if (this._dragGroup) {
@@ -20112,6 +20182,244 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._draggedElementId = null;
         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 && element.currentTarget && element.currentTarget.attrs && element.currentTarget.attrs.sourceId === this._suppressDragLifecycleForSourceId) {
             return;
@@ -21330,6 +21638,12 @@ module.exports = function (Colors, EventEmitter, SegmentHandler, SourceHandler,
     Peaks.prototype.selectSourcesOnLineAfter = function (lineId, time) {
         return this.view.selectSourcesOnLineAfter(lineId, time);
     };
+    Peaks.prototype.selectSegmentById = function (segmentId) {
+        return this.view.selectSegmentById(segmentId);
+    };
+    Peaks.prototype.selectSegmentsOnLineAfter = function (lineId, time) {
+        return this.view.selectSegmentsOnLineAfter(lineId, time);
+    };
     Peaks.prototype.deselectAll = function (notify) {
         return this.view.deselectAll(notify);
     };
@@ -21774,6 +22088,14 @@ module.exports = function (Utils) {
         this._indicators = opts.indicators;
         this._peaks.emit('model.segment.updated', this);
     };
+    Segment.prototype.updateTimes = function (newStartTime, newEndTime) {
+        if (!Utils.isNullOrUndefined(newStartTime)) {
+            this._startTime = Utils.roundTime(newStartTime);
+        }
+        if (!Utils.isNullOrUndefined(newEndTime)) {
+            this._endTime = Utils.roundTime(newEndTime);
+        }
+    };
     Segment.prototype.setSelected = function (selected) {
         this._selected = selected;
         this._peaks.emit('model.segment.selected', this);
@@ -23877,13 +24199,25 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     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);
         }
     };
     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);
+        }
+    };
+    View.prototype.selectSegmentById = function (segmentId) {
+        const segment = this._peaks.segmentHandler.getSegment(segmentId);
+        if (segment) {
+            this._modeLayer.selectElements([segment], true);
+        }
+    };
+    View.prototype.selectSegmentsOnLineAfter = function (lineId, time) {
+        const segments = this._sourcesLayer.getSegmentsOnLineAfter(lineId, time);
+        if (segments.length) {
+            this._modeLayer.selectElements(segments, true);
         }
     };
     View.prototype.deselectAll = function (notify) {