@checksub_team/peaks_timeline 2.3.0-alpha.0 → 2.3.0-alpha.1

package/peaks.js

@@ -14418,44 +14418,47 @@ WaveformData.createFromAudio = _dereq_("./lib/builders/webaudio");
 module.exports = WaveformData;
 
 },{"./lib/builders/webaudio":81,"./lib/core":83}],86:[function(_dereq_,module,exports){
-module.exports = function (Utils, Konva) {
+module.exports = function (Utils, Invoker, Konva) {
     'use strict';
     var LEFT_PADDING = 4;
     function Axis(peaks, view, options) {
         this._view = view;
+        this._invoker = new Invoker();
         var self = this;
         peaks.on('playhead.moved', this._onPlayheadMoved.bind(this));
         peaks.on('playhead.hidden', this._onPlayheadHidden.bind(this));
-        self._axisGridlineColor = options.axisGridlineColor;
-        self._axisLabelColor = options.axisLabelColor;
-        self._backLayer = new Konva.Layer({ listening: false });
-        self._frontLayer = new Konva.Layer({ listening: false });
-        self._axisShape = new Konva.Shape({
+        this._axisGridlineColor = options.axisGridlineColor;
+        this._axisLabelColor = options.axisLabelColor;
+        this._backLayer = new Konva.Layer({ listening: false });
+        this._frontLayer = new Konva.Layer({ listening: false });
+        this._axisShape = new Konva.Shape({
             sceneFunc: function (context) {
                 self.drawAxis(context, view);
             }
         });
-        self._backLayer.add(self._axisShape);
-        self._timesShape = new Konva.Shape({
+        this._backLayer.add(this._axisShape);
+        this._timesShape = new Konva.Shape({
             sceneFunc: function (context) {
                 self.drawTimes(context, view);
             }
         });
-        self._frontLayer.add(self._timesShape);
+        this._frontLayer.add(this._timesShape);
+        this._throttledBackDraw = this._invoker.throttleTrailing(this._backLayer.batchDraw.bind(this._backLayer));
+        this._throttledFrontDraw = this._invoker.throttleTrailing(this._frontLayer.batchDraw.bind(this._frontLayer));
     }
     Axis.prototype._onPlayheadMoved = function (playheadX, playheadWidth) {
         this._maskStart = playheadX + this._view.getFrameOffset();
         this._maskEnd = playheadX + this._view.getFrameOffset() + playheadWidth;
-        this._frontLayer.batchDraw();
+        this._throttledFrontDraw();
     };
     Axis.prototype._onPlayheadHidden = function () {
         this._maskStart = null;
         this._maskEnd = null;
-        this._frontLayer.batchDraw();
+        this._throttledFrontDraw();
     };
     Axis.prototype.batchDraw = function () {
-        this._backLayer.batchDraw();
-        this._frontLayer.batchDraw();
+        this._throttledBackDraw();
+        this._throttledFrontDraw();
     };
     Axis.prototype.addBackToStage = function (stage) {
         stage.add(this._backLayer);
@@ -14559,8 +14562,8 @@ module.exports = function (Utils, Konva) {
         return false;
     };
     return Axis;
-}(_dereq_('../utils'), _dereq_('konva'));
-},{"../utils":116,"konva":43}],87:[function(_dereq_,module,exports){
+}(_dereq_('../utils'), _dereq_('./invoker'), _dereq_('konva'));
+},{"../utils":116,"./invoker":90,"konva":43}],87:[function(_dereq_,module,exports){
 module.exports = function (Data, Utils) {
     'use strict';
     function DataRetriever(peaks) {
@@ -15732,30 +15735,9 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
             }
             this._automaticallyCreatedLineId = automaticallyCreatedLineGroup.getId();
             this._moveSourcesToPositionIfPossible(sources, newLinePosition);
-            this._nudgeFrameOffsetYToLineCenter(newLinePosition, this._automaticLineCreationMouseY);
             this._peaks.emit('sources.delayedLineChange', sources);
         }.bind(this), this._peaks.options.automaticLineCreationDelay);
     };
-    LineGroups.prototype._nudgeFrameOffsetYToLineCenter = function (linePosition, mouseY) {
-        if (!this._peaks.options.enableVerticalScrolling) {
-            return;
-        }
-        if (Utils.isNullOrUndefined(mouseY)) {
-            return;
-        }
-        const lineGroup = this._lineGroupsByPosition[linePosition];
-        if (!lineGroup) {
-            return;
-        }
-        const targetCenterY = lineGroup.y() + lineGroup.lineHeight() / 2;
-        const deltaY = targetCenterY - mouseY;
-        if (deltaY === 0) {
-            return;
-        }
-        const maxOffsetY = Math.max(0, this._view.getFullHeight() - this._view.getHeight());
-        const nextOffsetY = Utils.clamp(this._view.getFrameOffsetY() + deltaY, 0, maxOffsetY);
-        this._view.updateTimeline(null, nextOffsetY);
-    };
     LineGroups.prototype.manageVerticalPosition = function (sources, startTime, endTime, mouseX, mouseY) {
         if (Utils.isNullOrUndefined(mouseX)) {
             return;
@@ -15983,12 +15965,13 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
     return LineGroups;
 }(_dereq_('./segments-group'), _dereq_('./line-group'), _dereq_('./line-indicator'), _dereq_('../utils'));
 },{"../utils":116,"./line-group":91,"./line-indicator":93,"./segments-group":101}],93:[function(_dereq_,module,exports){
-module.exports = function (Konva, SVGs, Utils) {
+module.exports = function (Konva, SVGs, Invoker, Utils) {
     'use strict';
     function LineIndicator(peaks, view, container) {
         this._peaks = peaks;
         this._view = view;
         this._container = container;
+        this._invoker = new Invoker();
         this._width = this._peaks.options.lineIndicatorWidth;
         this._height = this._view.getHeight();
         this._sizes = {
@@ -16012,6 +15995,7 @@ module.exports = function (Konva, SVGs, Utils) {
         });
         this._layer = new Konva.Layer();
         this._stage.add(this._layer);
+        this._throttledBatchDraw = this._invoker.throttleTrailing(this._layer.batchDraw.bind(this._layer));
         this._indicators = {};
         this._separatingLine = new Konva.Line({
             points: [
@@ -16025,7 +16009,7 @@ module.exports = function (Konva, SVGs, Utils) {
             listening: false
         });
         this._layer.add(this._separatingLine);
-        this._layer.batchDraw();
+        this.batchDraw();
         this._isDragging = false;
         this._dragLineId = null;
         this._dragContainerRect = null;
@@ -16301,7 +16285,7 @@ module.exports = function (Konva, SVGs, Utils) {
         return anyChange;
     };
     LineIndicator.prototype.batchDraw = function () {
-        this._layer.batchDraw();
+        this._throttledBatchDraw();
     };
     LineIndicator.prototype._onWindowMove = function (event) {
         if (!this._dragContainerRect) {
@@ -16331,8 +16315,8 @@ module.exports = function (Konva, SVGs, Utils) {
         this._stage.container().style.cursor = 'pointer';
     };
     return LineIndicator;
-}(_dereq_('konva'), _dereq_('./svgs'), _dereq_('../utils'));
-},{"../utils":116,"./svgs":104,"konva":43}],94:[function(_dereq_,module,exports){
+}(_dereq_('konva'), _dereq_('./svgs'), _dereq_('./invoker'), _dereq_('../utils'));
+},{"../utils":116,"./invoker":90,"./svgs":104,"konva":43}],94:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     var RADIUS = 5;
@@ -16414,7 +16398,7 @@ module.exports = function (DefaultSegmentMarker, Utils, Konva) {
     };
 }(_dereq_('./default-segment-marker'), _dereq_('../utils'), _dereq_('konva'));
 },{"../utils":116,"./default-segment-marker":89,"konva":43}],96:[function(_dereq_,module,exports){
-module.exports = function (SourceGroup, Source, Utils, Konva) {
+module.exports = function (SourceGroup, Invoker, Source, Utils, Konva) {
     'use strict';
     var TIME_X_OFFSET = 20;
     var TIME_Y_OFFSET = 10;
@@ -16424,9 +16408,11 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
         this._view = view;
         this._playheadLayer = playheadLayer;
         this._stage = stage;
+        this._invoker = new Invoker();
         this._selectedElements = {};
         this._currentLine = null;
         this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
+        this._throttledBatchDraw = this._invoker.throttleTrailing(this._layer.batchDraw.bind(this._layer));
         this._prepareDefaultMode();
         this._onMouseClickInDefaultMode = this._onMouseClickInDefaultMode.bind(this);
         this._onKeyboardDelete = this._onKeyboardDelete.bind(this);
@@ -16438,6 +16424,9 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
         this.setMode(initialMode);
         this._peaks.on('handler.sources.destroy', this._onSourcesDestroy.bind(this));
     }
+    ModeLayer.prototype.batchDraw = function () {
+        this._throttledBatchDraw();
+    };
     ModeLayer.prototype._onSourcesDestroy = function (sources) {
         const selectedElementsToDeselect = {};
         sources.forEach(function (source) {
@@ -16599,7 +16588,7 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
     };
     ModeLayer.prototype._onMouseEnterInCutMode = function () {
         this._cutGroup.visible(true);
-        this._layer.batchDraw();
+        this.batchDraw();
     };
     ModeLayer.prototype._updateCursorTime = function (position) {
         var hoveredElement = this._view.getHoveredElement();
@@ -16671,11 +16660,11 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
         }
         this._updateCursorTime(cuttingPosition);
         this._updateCuttingLine(cuttingPosition);
-        this._layer.batchDraw();
+        this.batchDraw();
     };
     ModeLayer.prototype._onMouseLeaveInCutMode = function () {
         this._cutGroup.visible(false);
-        this._layer.batchDraw();
+        this.batchDraw();
     };
     ModeLayer.prototype._onMouseClickInCutMode = function () {
         var mousePosition = this._stage.getPointerPosition();
@@ -16700,12 +16689,30 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
                 }
                 cuttingPixel -= hoveredElement.x();
                 this._cuttingLine.visible(false);
-                this._peaks.cutSource(hoveredElement.getSource(), this._view.pixelsToTime(cuttingPixel));
                 this._view.setHoveredElement(null);
+                this._peaks.cutSource(hoveredElement.getSource(), this._view.pixelsToTime(cuttingPixel));
+                this._syncHoveredElementFromPointer();
                 this._updateCursorTime(cuttingPosition);
                 this._updateCuttingLine(cuttingPosition);
-                this._layer.batchDraw();
+                this.batchDraw();
+            }
+        }
+    };
+    ModeLayer.prototype._syncHoveredElementFromPointer = function () {
+        var pointerPos = this._stage.getPointerPosition();
+        if (!pointerPos) {
+            return;
+        }
+        var node = this._stage.getIntersection(pointerPos);
+        while (node) {
+            if (node.attrs && node.attrs.sourceId) {
+                var sourceGroup = this._view.getSourceGroupById(node.attrs.sourceId);
+                if (sourceGroup && !sourceGroup.isHovered()) {
+                    sourceGroup.startHover();
+                }
+                return;
             }
+            node = node.getParent ? node.getParent() : null;
         }
     };
     ModeLayer.prototype.setMode = function (mode) {
@@ -16761,15 +16768,15 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
             return;
         }
         this._mode = mode;
-        this._layer.batchDraw();
+        this.batchDraw();
         this._view.batchDrawSourcesLayer();
     };
     ModeLayer.prototype.getCurrentMode = function () {
         return this._mode;
     };
     return ModeLayer;
-}(_dereq_('./source-group'), _dereq_('../models/source'), _dereq_('../utils'), _dereq_('konva'));
-},{"../models/source":112,"../utils":116,"./source-group":102,"konva":43}],97:[function(_dereq_,module,exports){
+}(_dereq_('./source-group'), _dereq_('./invoker'), _dereq_('../models/source'), _dereq_('../utils'), _dereq_('konva'));
+},{"../models/source":112,"../utils":116,"./invoker":90,"./source-group":102,"konva":43}],97:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     function getMarkerObject(obj) {
@@ -16866,7 +16873,7 @@ module.exports = function (Konva) {
     return MouseDragHandler;
 }(_dereq_('konva'));
 },{"konva":43}],98:[function(_dereq_,module,exports){
-module.exports = function (Utils, Konva) {
+module.exports = function (Utils, Invoker, Konva) {
     'use strict';
     var HANDLE_RADIUS = 10;
     function PlayheadLayer(peaks, view, lines, showTime) {
@@ -16879,6 +16886,8 @@ module.exports = function (Utils, Konva) {
         this._playheadTextColor = peaks.options.playheadTextColor;
         this._time = null;
         this._playheadLayer = new Konva.Layer();
+        this._invoker = new Invoker();
+        this._throttledBatchDraw = this._invoker.throttleTrailing(this._playheadLayer.batchDraw.bind(this._playheadLayer));
         this._activeSegments = {};
         this._activeSources = {};
         this._createPlayhead(this._playheadColor);
@@ -17001,9 +17010,12 @@ module.exports = function (Utils, Konva) {
         }
         this._time = time;
         if (pixelHasChanged || timeHasChanged) {
-            this._playheadLayer.batchDraw();
+            this.batchDraw();
         }
     };
+    PlayheadLayer.prototype.batchDraw = function () {
+        this._throttledBatchDraw();
+    };
     PlayheadLayer.prototype._updatePlayheadPixel = function (time) {
         const pixelIndex = this._view.timeToPixels(time);
         const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
@@ -17081,12 +17093,12 @@ module.exports = function (Utils, Konva) {
             }
         }
         if (updated) {
-            this._playheadLayer.batchDraw();
+            this.batchDraw();
         }
     };
     return PlayheadLayer;
-}(_dereq_('../utils'), _dereq_('konva'));
-},{"../utils":116,"konva":43}],99:[function(_dereq_,module,exports){
+}(_dereq_('../utils'), _dereq_('./invoker'), _dereq_('konva'));
+},{"../utils":116,"./invoker":90,"konva":43}],99:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     function SegmentMarker(options) {
@@ -18105,6 +18117,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         this._isDragged = false;
         this._isHandleDragging = false;
         this._destroyed = false;
+        this._dragGhost = null;
         this._drawScheduled = false;
         this._previewList = [];
         this._previewBuildQueue = new Set();
@@ -18171,10 +18184,42 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
     SourceGroup.prototype._onHoverEnd = function () {
         this._hovered = false;
         this._manualHover = false;
+        this._disableManualHoverTracking();
         this._view.setHoveredElement(null);
         this._hideButtons();
         this._scheduleBatchDraw();
     };
+    SourceGroup.prototype._enableManualHoverTracking = function () {
+        if (this._manualHoverTrackingEnabled) {
+            return;
+        }
+        if (!this._group || this._destroyed) {
+            return;
+        }
+        var stage = this._group.getStage && this._group.getStage();
+        if (!stage) {
+            return;
+        }
+        this._manualHoverTrackingEnabled = true;
+        this._manualHoverNamespace = '.manualHover.' + this._source.id;
+        this._manualHoverMoveHandler = function () {
+            this._manageManualHoverStop();
+        }.bind(this);
+        stage.on('mousemove' + this._manualHoverNamespace, this._manualHoverMoveHandler);
+        stage.on('touchmove' + this._manualHoverNamespace, this._manualHoverMoveHandler);
+    };
+    SourceGroup.prototype._disableManualHoverTracking = function () {
+        if (!this._manualHoverTrackingEnabled) {
+            return;
+        }
+        var stage = this._group && this._group.getStage && this._group.getStage();
+        if (stage && this._manualHoverNamespace) {
+            stage.off(this._manualHoverNamespace);
+        }
+        this._manualHoverTrackingEnabled = false;
+        this._manualHoverMoveHandler = null;
+        this._manualHoverNamespace = null;
+    };
     SourceGroup.prototype._onDragStart = function (element) {
         this._isDragged = true;
         this._layer.onSourcesGroupDragStart(element);
@@ -18226,7 +18271,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             if (this._layer.manageSourceMovements([this._source], leftHandle ? start + diff + timeOffsetDiff : null, leftHandle ? null : end + diff + timeOffsetDiff)) {
                 this._layer.batchDraw();
             }
-        }.bind(this));
+        }.bind(this), null, false);
         return {
             x: draggedElement.absolutePosition().x,
             y: draggedElement.absolutePosition().y
@@ -18261,6 +18306,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             this._updateLoadingOverlay();
             this.updatePreviews();
         }
+        if (this._isDragged) {
+            this.createDragGhost();
+            this.updateDragGhost();
+        }
     };
     SourceGroup.prototype.setWrapping = function (wrap, forceCreate, notify) {
         if (wrap) {
@@ -18610,6 +18659,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
     };
     SourceGroup.prototype.startHover = function () {
         this._manualHover = true;
+        this._enableManualHoverTracking();
         this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
     };
     SourceGroup.prototype.stopHover = function () {
@@ -18617,6 +18667,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
     };
     SourceGroup.prototype.setDragging = function (isDragging) {
         this._isDragged = isDragging;
+        if (isDragging) {
+            this.createDragGhost();
+        } else {
+            this.destroyDragGhost();
+        }
     };
     SourceGroup.prototype.startDrag = function () {
         return this._group.startDrag();
@@ -18998,6 +19053,65 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
     SourceGroup.prototype.getCurrentHeight = function () {
         return this._height;
     };
+    SourceGroup.prototype.createDragGhost = function () {
+        if (this._dragGhost) {
+            return this._dragGhost;
+        }
+        var frameOffset = this._view.getFrameOffset();
+        var x = this._view.timeToPixels(this._source.startTime) - frameOffset;
+        var width = this._view.timeToPixels(this._source.endTime - this._source.startTime);
+        var height = this.getCurrentHeight();
+        var y = this.getAbsoluteY();
+        this._dragGhost = new Konva.Rect({
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+            fill: this._source.backgroundColor,
+            opacity: 0.4,
+            stroke: this._source.selectedBorderColor,
+            strokeWidth: 2,
+            dash: [
+                8,
+                4
+            ],
+            cornerRadius: 8,
+            listening: false
+        });
+        this._layer.add(this._dragGhost);
+        this._dragGhost.moveToBottom();
+        this.updateDragGhost();
+        return this._dragGhost;
+    };
+    SourceGroup.prototype.updateDragGhost = function (lineGroupsById) {
+        if (!this._dragGhost) {
+            return;
+        }
+        if (!lineGroupsById && this._layer && typeof this._layer.getLineGroups === 'function') {
+            var lineGroups = this._layer.getLineGroups();
+            if (lineGroups && typeof lineGroups.getLineGroupsById === 'function') {
+                lineGroupsById = lineGroups.getLineGroupsById();
+            }
+        }
+        var frameOffset = this._view.getFrameOffset();
+        var x = this._view.timeToPixels(this._source.startTime) - frameOffset;
+        var width = this._view.timeToPixels(this._source.endTime - this._source.startTime);
+        this._dragGhost.x(x);
+        this._dragGhost.width(width);
+        this._dragGhost.height(this.getCurrentHeight());
+        if (lineGroupsById) {
+            var lineGroup = lineGroupsById[this._source.lineId];
+            if (lineGroup) {
+                this._dragGhost.y(lineGroup.y());
+            }
+        }
+    };
+    SourceGroup.prototype.destroyDragGhost = function () {
+        if (this._dragGhost) {
+            this._dragGhost.destroy();
+            this._dragGhost = null;
+        }
+    };
     SourceGroup.prototype.getHeights = function () {
         return {
             unwrapped: this._unwrappedHeight,
@@ -19391,6 +19505,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         return volumeGroup;
     };
     SourceGroup.prototype.destroy = function () {
+        this.destroyDragGhost();
+        this._disableManualHoverTracking();
         if (this._pendingIdleCallbacks) {
             this._pendingIdleCallbacks.forEach(function (id) {
                 Utils.cancelIdle(id);
@@ -19432,10 +19548,11 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._allowEditing = allowEditing;
         this._sourcesGroup = {};
         this._layer = new Konva.Layer();
-        this._dragLayer = new Konva.Layer();
         this._dataRetriever = new DataRetriever(peaks);
         this._lineGroups = new LineGroups(peaks, view, this);
         this._lineGroups.addToLayer(this);
+        this._dragGroup = new Konva.Group({ listening: false });
+        this._layer.add(this._dragGroup);
         this._loadedData = {};
         this._invoker = new Invoker();
         this._rescaleVersion = 0;
@@ -19454,7 +19571,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._peaks.on('sources.delayedLineChange', this._onSourcesDelayedLineChanged.bind(this));
     }
     SourcesLayer.prototype._onSourcesDelayedLineChanged = function () {
-        if (this._dragGhosts && this._draggedElements && this._draggedElements.length > 0) {
+        if (this._draggedElements && this._draggedElements.length > 0) {
             this._dragSourcesGroup();
         }
     };
@@ -19478,10 +19595,12 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     };
     SourcesLayer.prototype.add = function (element) {
         this._layer.add(element);
+        if (this._dragGroup) {
+            this._dragGroup.moveToTop();
+        }
     };
     SourcesLayer.prototype.addToStage = function (stage) {
         stage.add(this._layer);
-        stage.add(this._dragLayer);
     };
     SourcesLayer.prototype.enableEditing = function (enable) {
         this._allowEditing = enable;
@@ -19651,7 +19770,6 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             draggable: true
         });
         var self = this;
-        this._dragGhosts = [];
         this._initialSourcePositions = {};
         this._draggedElements.forEach(function (source) {
             self._initialSourcePositions[source.id] = {
@@ -19663,29 +19781,16 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             if (sourceGroup) {
                 sourceGroup.setDragging(true);
                 var absoluteY = sourceGroup.getAbsoluteY();
-                sourceGroup.moveTo(self._dragLayer);
+                sourceGroup.moveTo(self._dragGroup);
                 sourceGroup.y(absoluteY);
-                var ghost = self._createDragGhost(sourceGroup);
-                self._dragGhosts.push({
-                    ghost: ghost,
-                    sourceId: source.id
-                });
             }
         });
     };
     SourcesLayer.prototype.onSourcesGroupDragEnd = function () {
-        if (this._dragGhosts) {
-            this._dragGhosts.forEach(function (item) {
-                if (item.ghost) {
-                    item.ghost.destroy();
-                }
-            });
-            this._dragGhosts = null;
-        }
+        var self = this;
         this._initialSourcePositions = null;
         this._dragOffsetX = undefined;
         this._dragOffsetY = undefined;
-        var self = this;
         const updatedSources = this._draggedElements.map(function (source) {
             const sourceGroup = self._sourcesGroup[source.id];
             if (sourceGroup) {
@@ -19704,7 +19809,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     };
     SourcesLayer.prototype.onSourcesGroupDrag = function (draggedElement) {
         var pointerPos = this._view.getPointerPosition();
-        this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
+        this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this), null, true);
         var clickedSourceGroup = this._sourcesGroup[this._draggedElementId];
         if (clickedSourceGroup) {
             var mouseX = pointerPos.x;
@@ -19766,10 +19871,8 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         var newStartTime = Utils.roundTime(initialStartTime + timeOffsetDiff + timeDiff);
         var newEndTime = Utils.roundTime(initialEndTime + timeOffsetDiff + timeDiff);
         const shouldRedraw = this.manageSourceMovements(this._draggedElements, newStartTime, newEndTime, orderable, mousePosX, mousePosY);
-        this._updateDragGhosts();
         if (shouldRedraw) {
             this.batchDraw();
-            this._dragLayer.batchDraw();
         }
     };
     SourcesLayer.prototype.findSources = function (startTime, endTime) {
@@ -19779,54 +19882,6 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             return lineIds[source.lineId];
         });
     };
-    SourcesLayer.prototype._createDragGhost = function (sourceGroup) {
-        var source = sourceGroup.getSource();
-        var frameOffset = this._view.getFrameOffset();
-        var x = this._view.timeToPixels(source.startTime) - frameOffset;
-        var width = this._view.timeToPixels(source.endTime - source.startTime);
-        var height = sourceGroup.getCurrentHeight();
-        var y = sourceGroup.getAbsoluteY();
-        var ghost = new Konva.Rect({
-            x: x,
-            y: y,
-            width: width,
-            height: height,
-            fill: source.backgroundColor,
-            opacity: 0.4,
-            stroke: source.selectedBorderColor,
-            strokeWidth: 2,
-            dash: [
-                8,
-                4
-            ],
-            cornerRadius: 8,
-            listening: false
-        });
-        this._layer.add(ghost);
-        ghost.moveToBottom();
-        return ghost;
-    };
-    SourcesLayer.prototype._updateDragGhosts = function () {
-        if (!this._dragGhosts) {
-            return;
-        }
-        var self = this;
-        var frameOffset = this._view.getFrameOffset();
-        var lineGroupsById = this._lineGroups.getLineGroupsById();
-        this._dragGhosts.forEach(function (item) {
-            var sourceGroup = self._sourcesGroup[item.sourceId];
-            if (!sourceGroup || !item.ghost) {
-                return;
-            }
-            var sourceData = sourceGroup.getSource();
-            var x = self._view.timeToPixels(sourceData.startTime) - frameOffset;
-            item.ghost.x(x);
-            var lineGroup = lineGroupsById[sourceData.lineId];
-            if (lineGroup) {
-                item.ghost.y(lineGroup.y());
-            }
-        });
-    };
     SourcesLayer.prototype._updateSourceTimesDuringDrag = function (newStartTime) {
         if (!this._initialSourcePositions || !this._draggedElements) {
             return;
@@ -19919,13 +19974,8 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             if (isDraggedSource) {
                 sourceGroup.setDragging(true);
                 var absoluteY = sourceGroup.getAbsoluteY();
-                sourceGroup.moveTo(this._dragLayer);
+                sourceGroup.moveTo(this._dragGroup);
                 sourceGroup.y(absoluteY);
-                var ghost = this._createDragGhost(sourceGroup);
-                this._dragGhosts.push({
-                    ghost: ghost,
-                    sourceId: source.id
-                });
             }
         }
         return sourceGroup;
@@ -23153,48 +23203,90 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     View.prototype.getSelectedElements = function () {
         return Object.values(this._modeLayer.getSelectedElements());
     };
-    View.prototype.updateWithAutoScroll = function (updateWhileScrolling, updateWhileNotScrolling) {
+    View.prototype.updateWithAutoScroll = function (updateWhileScrolling, updateWhileNotScrolling, enableVerticalAutoScroll) {
         var self = this;
         var pointer = this.getPointerPosition();
         var pointerX = pointer ? pointer.x : null;
+        var pointerY = pointer ? pointer.y : null;
         var viewWidth = this.getWidth();
+        var viewHeight = this.getHeight();
         var thresholdPx = Math.round(this._peaks.options.autoScrollThreshold * viewWidth);
+        var thresholdPy = Math.round(this._peaks.options.autoScrollThreshold * viewHeight);
         var MAX_AUTO_SCROLL_PX_PER_FRAME = 30;
         var NOMINAL_FRAME_MS = 16.67;
-        function getAutoScrollVelocity(pointerXValue) {
-            if (typeof pointerXValue !== 'number' || thresholdPx <= 0) {
+        function getAutoScrollVelocity(pointerValue, threshold, size) {
+            if (typeof pointerValue !== 'number' || threshold <= 0 || size <= 0) {
                 return 0;
             }
-            if (pointerXValue < thresholdPx) {
-                return Math.round(-MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (thresholdPx - pointerXValue) / thresholdPx));
+            if (pointerValue < threshold) {
+                return Math.round(-MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (threshold - pointerValue) / threshold));
             }
-            if (pointerXValue > viewWidth - thresholdPx) {
-                return Math.round(MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (pointerXValue - (viewWidth - thresholdPx)) / thresholdPx));
+            if (pointerValue > size - threshold) {
+                return Math.round(MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (pointerValue - (size - threshold)) / threshold));
             }
             return 0;
         }
-        var velocityPxPerFrame = getAutoScrollVelocity(pointerX);
-        var canScroll = velocityPxPerFrame > 0 || velocityPxPerFrame < 0 && self.getFrameOffset() > 0;
-        this._limited = velocityPxPerFrame;
-        if (velocityPxPerFrame !== 0 && canScroll) {
+        var velocityXPerFrame = getAutoScrollVelocity(pointerX, thresholdPx, viewWidth);
+        var verticalScrollingEnabled = Boolean(enableVerticalAutoScroll && this._peaks.options.enableVerticalScrolling);
+        var maxFrameOffsetY = 0;
+        if (verticalScrollingEnabled) {
+            maxFrameOffsetY = this.getFullHeight() - viewHeight;
+            if (!Number.isFinite(maxFrameOffsetY) || maxFrameOffsetY < 0) {
+                maxFrameOffsetY = 0;
+            }
+        }
+        var velocityYPerFrame = verticalScrollingEnabled && maxFrameOffsetY > 0 ? getAutoScrollVelocity(pointerY, thresholdPy, viewHeight) : 0;
+        var canScrollX = velocityXPerFrame > 0 || velocityXPerFrame < 0 && self.getFrameOffset() > 0;
+        var canScrollY = verticalScrollingEnabled && maxFrameOffsetY > 0 && (velocityYPerFrame > 0 && self.getFrameOffsetY() < maxFrameOffsetY || velocityYPerFrame < 0 && self.getFrameOffsetY() > 0);
+        this._autoScrollVelocityX = velocityXPerFrame;
+        this._autoScrollVelocityY = velocityYPerFrame;
+        if (velocityXPerFrame !== 0 && canScrollX || velocityYPerFrame !== 0 && canScrollY) {
             if (!this._scrollingRafId) {
                 var lastTime = performance.now();
                 function scrollFrame(currentTime) {
                     if (!self._scrollingRafId) {
                         return;
                     }
+                    var xVel = self._autoScrollVelocityX || 0;
+                    var yVel = self._autoScrollVelocityY || 0;
+                    var canContinueX = xVel > 0 || xVel < 0 && self.getFrameOffset() > 0;
+                    var maxY = 0;
+                    var canContinueY = false;
+                    if (verticalScrollingEnabled) {
+                        maxY = self.getFullHeight() - self.getHeight();
+                        if (!Number.isFinite(maxY) || maxY < 0) {
+                            maxY = 0;
+                        }
+                        canContinueY = maxY > 0 && (yVel > 0 && self.getFrameOffsetY() < maxY || yVel < 0 && self.getFrameOffsetY() > 0);
+                    }
+                    if ((xVel === 0 || !canContinueX) && (yVel === 0 || !canContinueY)) {
+                        self.stopAutoScroll();
+                        updateWhileScrolling();
+                        return;
+                    }
                     var deltaTime = currentTime - lastTime;
-                    var scrollAmount = Math.round(self._limited * deltaTime / NOMINAL_FRAME_MS);
+                    var scrollAmountX = Math.round(xVel * deltaTime / NOMINAL_FRAME_MS);
+                    var scrollAmountY = Math.round(yVel * deltaTime / NOMINAL_FRAME_MS);
                     lastTime = currentTime;
-                    var newOffset = self.getFrameOffset() + scrollAmount;
-                    if (newOffset < 0) {
-                        self.updateTimeline(0);
-                        self._scrollingRafId = null;
+                    var newOffsetX = self.getFrameOffset() + scrollAmountX;
+                    var newOffsetY = self.getFrameOffsetY() + scrollAmountY;
+                    if (newOffsetX < 0) {
+                        newOffsetX = 0;
+                    }
+                    if (verticalScrollingEnabled) {
+                        if (newOffsetY < 0) {
+                            newOffsetY = 0;
+                        } else if (newOffsetY > maxY) {
+                            newOffsetY = maxY;
+                        }
+                    }
+                    if (!verticalScrollingEnabled) {
+                        self.updateTimeline(newOffsetX);
                     } else {
-                        self.updateTimeline(newOffset);
-                        updateWhileScrolling();
-                        self._scrollingRafId = requestAnimationFrame(scrollFrame);
+                        self.updateTimeline(newOffsetX, newOffsetY);
                     }
+                    updateWhileScrolling();
+                    self._scrollingRafId = requestAnimationFrame(scrollFrame);
                 }
                 self._scrollingRafId = requestAnimationFrame(scrollFrame);
             }