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

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) {
@@ -15082,7 +15085,7 @@ module.exports = function (SourceGroup, Utils, Konva) {
     LineGroup.prototype.addSource = function (source, sourceGroup, sourcesAround) {
         if (sourceGroup) {
             this._sourcesGroup[source.id] = sourceGroup;
-            if (!sourceGroup.isActive()) {
+            if (!sourceGroup.isDragged()) {
                 if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
                     sourceGroup.moveTo(this._group);
                 }
@@ -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;
@@ -16043,24 +16027,24 @@ module.exports = function (Konva, SVGs, Utils) {
         ]);
         this.refreshIndicators();
     };
-    LineIndicator.prototype._createIndicator = function (lineGroup, type, text, subText) {
+    LineIndicator.prototype._createIndicator = function (lineGroup, type, text, subText, defaultStyle = {}) {
         const indicator = new Konva.Group();
         let indicatorHeight = 0;
         var self = this;
         var textGroup, iconGroup, subTextGroup;
         var textNode, iconNode, subTextNode;
         if (text) {
-            [textGroup, textNode] = this._createIndicatorText(text);
+            [textGroup, textNode] = this._createIndicatorText(text, 'line-indicator-text', defaultStyle);
             indicator.add(textGroup);
             indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
         }
-        [iconGroup, iconNode] = this._createIndicatorIcon(type);
+        [iconGroup, iconNode] = this._createIndicatorIcon(type, 'line-indicator-icon', defaultStyle);
         iconGroup.y(indicatorHeight);
         indicator.add(iconGroup);
         indicatorHeight += iconGroup.getAttr('trueHeight');
         if (subText) {
             indicatorHeight += this._bottomPadding;
-            [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+            [subTextGroup, subTextNode] = this._createIndicatorText(subText, 'line-indicator-subText', defaultStyle);
             subTextGroup.y(indicatorHeight);
             indicator.add(subTextGroup);
             indicatorHeight += subTextGroup.getAttr('trueHeight');
@@ -16141,16 +16125,18 @@ module.exports = function (Konva, SVGs, Utils) {
         indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
         return indicator;
     };
-    LineIndicator.prototype._createIndicatorText = function (text) {
+    LineIndicator.prototype._createIndicatorText = function (text, role, defaultStyle = {}) {
+        defaultStyle = defaultStyle[role] || {};
         const textGroup = new Konva.Group();
         const textNode = new Konva.Text({
             text: text,
             fontSize: this._sizes.font,
             fontFamily: this._peaks.options.lineIndicatorFont,
-            fill: this._peaks.options.lineIndicatorTextColor,
+            fill: defaultStyle.fill || this._peaks.options.lineIndicatorTextColor,
             align: 'center',
             width: this._width,
-            listening: false
+            listening: false,
+            name: role
         });
         textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
         textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
@@ -16171,7 +16157,8 @@ module.exports = function (Konva, SVGs, Utils) {
             textNode
         ];
     };
-    LineIndicator.prototype._createIndicatorIcon = function (type) {
+    LineIndicator.prototype._createIndicatorIcon = function (type, role, defaultStyle = {}) {
+        defaultStyle = defaultStyle[role] || {};
         type = this._types.includes(type) ? type : 'default';
         const iconGroup = new Konva.Group();
         var iconHeight = this._sizes.icon[type];
@@ -16181,21 +16168,23 @@ module.exports = function (Konva, SVGs, Utils) {
                 x: this._width / 2,
                 y: this._sizes.icon.default / 2,
                 radius: this._sizes.icon.default / 2,
-                fill: this._peaks.options.lineIndicatorIconColor,
+                fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
-                listening: false
+                listening: false,
+                name: role
             });
         } else {
             iconNode = new Konva.Path({
                 x: (this._width - this._sizes.icon[type]) / 2,
                 y: 0,
                 data: SVGs[type].path,
-                fill: this._peaks.options.lineIndicatorIconColor,
+                fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
                 scale: {
                     x: this._sizes.icon[type] / SVGs[type].width,
                     y: this._sizes.icon[type] / SVGs[type].height
                 },
-                listening: false
+                listening: false,
+                name: role
             });
         }
         iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
@@ -16237,11 +16226,11 @@ module.exports = function (Konva, SVGs, Utils) {
             this._peaks.logger('peaks.line-indicator.update(): line indicator not found: ' + line.id);
             return;
         }
-        if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText) {
+        if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText && indicatorData.subText === line.indicatorSubText) {
             return;
         }
-        this.removeIndicator(line.id, true);
-        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText);
+        const styleData = this.removeIndicator(line.id, true);
+        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText, styleData);
         this._layer.add(indicator);
         indicatorData.indicator = indicator;
         indicatorData.type = line.indicatorType;
@@ -16249,17 +16238,40 @@ module.exports = function (Konva, SVGs, Utils) {
         indicatorData.subText = line.indicatorSubText;
         this.batchDraw();
     };
+    LineIndicator.prototype._getStyleData = function (konvaItem) {
+        if (!konvaItem) {
+            return {};
+        }
+        var styleData = {};
+        const name = konvaItem.name();
+        if (name) {
+            styleData[name] = { fill: konvaItem.fill() };
+        }
+        if (typeof konvaItem.getChildren === 'function') {
+            const children = konvaItem.getChildren();
+            if (children && children.length > 0) {
+                children.forEach(function (child) {
+                    styleData = Object.assign(styleData, this._getStyleData(child));
+                }.bind(this));
+            }
+        }
+        return styleData;
+    };
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
+        var styleData = {};
         if (this._indicators[lineId]) {
-            if (this._indicators[lineId].indicator) {
-                this._indicators[lineId].indicator.destroy();
-            }
+            const indicator = this._indicators[lineId].indicator;
             if (!keepInList) {
                 delete this._indicators[lineId];
             } else {
                 this._indicators[lineId].indicator = null;
+                styleData = this._getStyleData(indicator);
+            }
+            if (indicator) {
+                indicator.destroy();
             }
         }
+        return styleData;
     };
     LineIndicator.prototype.refreshIndicator = function (lineId) {
         var anyChange = false;
@@ -16301,7 +16313,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 +16343,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 +16426,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 +16436,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 +16452,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 +16616,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();
@@ -16659,6 +16676,10 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
     };
     ModeLayer.prototype._onMouseMoveInCutMode = function () {
         var mousePosition = this._stage.getPointerPosition();
+        if (!mousePosition) {
+            return;
+        }
+        this._syncHoveredElementFromPointer();
         mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
         var cuttingPosition = mousePosition;
         var hoveredElement = this._view.getHoveredElement();
@@ -16671,11 +16692,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,14 +16721,36 @@ 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) {
+                    this._view.setHoveredElement(sourceGroup);
+                    if (!sourceGroup.isHovered()) {
+                        sourceGroup.startHover();
+                    }
+                }
+                return;
+            }
+            node = node.getParent ? node.getParent() : null;
+        }
+        this._view.setHoveredElement(null);
+    };
     ModeLayer.prototype.setMode = function (mode) {
         if (this._mode === mode) {
             return;
@@ -16761,15 +16804,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 +16909,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 +16922,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 +17046,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 +17129,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) {
@@ -18103,8 +18151,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         this._selected = this._source.selected;
         this._hovered = false;
         this._isDragged = false;
-        this._isHandleDragging = false;
+        this._isHandleDragged = false;
         this._destroyed = false;
+        this._dragGhost = null;
         this._drawScheduled = false;
         this._previewList = [];
         this._previewBuildQueue = new Set();
@@ -18171,10 +18220,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);
@@ -18201,7 +18282,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         return this._hovered;
     };
     SourceGroup.prototype.isActive = function () {
-        return this._isDragged || this._isHandleDragging;
+        return this._isDragged || this._isHandleDragged;
+    };
+    SourceGroup.prototype.isDragged = function () {
+        return this._isDragged;
     };
     SourceGroup.prototype.addToContent = function (newChild) {
         if (this._source.wrapped) {
@@ -18210,7 +18294,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             this._unwrap.add(newChild);
         }
     };
-    SourceGroup.prototype.prepareDragEnd = function () {
+    SourceGroup.prototype._updateHandles = function () {
         var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
         this._leftHandle.width(handleWidth);
         this._rightHandle.width(handleWidth);
@@ -18226,7 +18310,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
@@ -18246,7 +18330,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
                 this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
                 this._updateMarkers();
-                this._rightHandle.x(this._width - this._rightHandle.width());
             } else {
                 const newTitle = Utils.removeLineBreaks(this._source.getVisibleTitle());
                 if (this._wrappedTitle && this._wrappedTitle.text() !== newTitle) {
@@ -18256,11 +18339,16 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
                     this._unwrap.add(this._createTitle(false));
                 }
             }
+            this._updateHandles();
             this._updateVolumeSlider();
             this._updateButtons();
             this._updateLoadingOverlay();
             this.updatePreviews();
         }
+        if (this._isDragged) {
+            this.createDragGhost();
+            this.updateDragGhost();
+        }
     };
     SourceGroup.prototype.setWrapping = function (wrap, forceCreate, notify) {
         if (wrap) {
@@ -18293,14 +18381,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             start: this._source.startTime,
             end: this._source.endTime
         };
-        this._isHandleDragging = true;
+        this._isHandleDragged = true;
         this._hideButtons();
     };
     SourceGroup.prototype._onHandleDragEnd = function () {
-        this._isHandleDragging = false;
+        this._isHandleDragged = false;
         this._showButtons();
-        this.update();
-        this.prepareDragEnd();
+        this._layer.processSourceUpdates([this._source]);
     };
     SourceGroup.prototype._addHandles = function (forceCreate) {
         var self = this;
@@ -18394,9 +18481,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
     SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth, fill) {
         var offset = addBorderWidth ? this._borderWidth : 0;
         var radius = !Utils.isNullOrUndefined(this._source.borderRadius) ? this._source.borderRadius : Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
-        var actualX = this._group.x() + this._view.getFrameOffset();
-        var x = Math.max(0, this._view.getFrameOffset() - actualX - 2 * radius);
-        var width = Math.min(this._width - x, this._view.getWidth() + 4 * radius - Math.max(0, actualX - this._view.getFrameOffset()));
+        var x = Math.max(0, -(this._group.x() + 2 * radius));
+        var width = Math.min(this._width - x, this._view.getWidth() + 4 * radius - Math.max(0, this._group.x()));
         var xWidth = x + width;
         if (width > 0) {
             ctx.beginPath();
@@ -18414,7 +18500,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
                 var backgroundColor;
                 if (this._selected) {
                     backgroundColor = this._source.selectedBackgroundColor;
-                } else if (this._hovered) {
+                } else if (this._hovered && this._view.getCurrentMode() !== 'cut') {
                     backgroundColor = this._source.hoverBackgroundColor;
                 } else {
                     backgroundColor = this._source.backgroundColor;
@@ -18610,6 +18696,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 +18704,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();
@@ -18754,12 +18846,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
                 });
             }
         }
+        var self = this;
         var waveform = new WaveformShape({
-            layer: this._layer,
             view: this._view,
-            source: this._source,
+            color: this._source.color,
             height: preview.group.height(),
-            url: url
+            waveformDataFunc: function () {
+                return self._createWaveformPointsIterator(url);
+            }
         });
         preview.group.add(waveform);
         this._addToUnwrap(preview.group);
@@ -18768,6 +18862,69 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         }
         this._previewList.push(preview);
     };
+    SourceGroup.prototype._createWaveformPointsIterator = function (url) {
+        var loaded = this._layer.getLoadedData(url + '-scaled');
+        var waveformData = loaded && loaded.data;
+        if (!waveformData) {
+            return {
+                next: function () {
+                    return { done: true };
+                }
+            };
+        }
+        var view = this._view;
+        var source = this._source;
+        var groupX = this._group && typeof this._group.x === 'function' ? this._group.x() : 0;
+        var groupWidth = this._width;
+        var viewWidth = view.getWidth();
+        var startPixel = 0;
+        var startOffset = 0;
+        var endPixel = Math.min(viewWidth, waveformData.length);
+        var targetSpeed = 1;
+        if (source) {
+            targetSpeed = source.targetSpeed || 1;
+            var hiddenLeftPixels = Math.max(-groupX, 0);
+            var hiddenRightPixels = Math.max(groupX + groupWidth - viewWidth, 0);
+            startPixel = Math.floor((view.timeToPixels(source.mediaStartTime) + hiddenLeftPixels) * targetSpeed);
+            startOffset = view.timeToPixels(source.mediaStartTime);
+            endPixel = Math.min(Math.ceil((view.timeToPixels(source.mediaEndTime) - hiddenRightPixels) * targetSpeed), waveformData.length);
+        }
+        if (startPixel < 0) {
+            startPixel = 0;
+        }
+        if (endPixel < startPixel) {
+            endPixel = startPixel;
+        }
+        var channels = waveformData.channels;
+        var channelData = new Array(channels);
+        for (var c = 0; c < channels; c++) {
+            channelData[c] = waveformData.channel(c);
+        }
+        var x = startPixel;
+        return {
+            next: function () {
+                if (x >= endPixel) {
+                    return { done: true };
+                }
+                var min = new Array(channels);
+                var max = new Array(channels);
+                for (var i = 0; i < channels; i++) {
+                    min[i] = channelData[i].min_sample(x);
+                    max[i] = channelData[i].max_sample(x);
+                }
+                var value = {
+                    x: x / targetSpeed - startOffset + 0.5,
+                    min: min,
+                    max: max
+                };
+                x++;
+                return {
+                    done: false,
+                    value: value
+                };
+            }
+        };
+    };
     SourceGroup.prototype.getAudioPreview = function () {
         return this._previewList.filter(function (preview) {
             return preview.type === 'audio';
@@ -18998,6 +19155,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,
@@ -19365,18 +19581,21 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         });
         volumeSliderGroup.add(volumeSliderRect);
         volumeSliderGroup.add(volumeSliderLine);
-        volumeSliderGroup.on('dragstart', function () {
+        volumeSliderGroup.on('dragstart', function (evt) {
+            evt.cancelBubble = true;
             volumeText.visible(true);
             self._peaks.emit('source.startVolumeChange', self._source);
         });
-        volumeSliderGroup.on('dragmove', function () {
+        volumeSliderGroup.on('dragmove', function (evt) {
+            evt.cancelBubble = true;
             var volume = self._getVolumeFromY(volumeSliderGroup.y());
             volumeText.text((volume * 100).toFixed(0) + '%');
             self._source.volume = Math.max(self._source.volumeRange[0], Math.min(volume, self._source.volumeRange[1]));
             self._peaks.emit('source.volumeChanged', self._source);
             self._scheduleBatchDraw();
         });
-        volumeSliderGroup.on('dragend', function () {
+        volumeSliderGroup.on('dragend', function (evt) {
+            evt.cancelBubble = true;
             volumeText.visible(false);
             self._peaks.emit('source.endVolumeChange', self._source);
         });
@@ -19391,6 +19610,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 +19653,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 +19676,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 +19700,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;
@@ -19502,19 +19726,19 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         const frameEndTime = this._view.pixelsToTime(frameOffset + width);
         var redraw = false;
         var isSourceGroupHovered = false;
-        var isSourceGroupActive = false;
+        var isSourceGroupDragged = false;
         if (sourceGroup) {
             isSourceGroupHovered = sourceGroup.isHovered();
-            isSourceGroupActive = sourceGroup.isActive();
+            isSourceGroupDragged = sourceGroup.isDragged();
             this._destroySourceGroup(source);
             redraw = true;
         }
-        if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupActive) {
+        if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupDragged) {
             const newSourceGroup = this._addSourceGroup(source);
             if (isSourceGroupHovered) {
                 newSourceGroup.startHover();
             }
-            if (isSourceGroupActive) {
+            if (isSourceGroupDragged) {
                 newSourceGroup.startDrag();
             }
             redraw = true;
@@ -19651,7 +19875,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,34 +19886,20 @@ 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) {
                 sourceGroup.setDragging(false);
-                sourceGroup.prepareDragEnd();
                 self._lineGroups.addSource(source, sourceGroup);
                 sourceGroup.y(0);
             }
@@ -19698,13 +19907,11 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         });
         this._draggedElementId = null;
         this.refresh();
-        this._view.batchDrawSourcesLayer();
-        this._view.updateTimelineLength();
-        this._peaks.emit('sources.updated', updatedSources);
+        this.processSourceUpdates(updatedSources);
     };
     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,12 +19973,15 @@ 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.processSourceUpdates = function (updatedSources) {
+        this._view.batchDrawSourcesLayer();
+        this._view.updateTimelineLength();
+        this._peaks.emit('sources.updated', updatedSources);
+    };
     SourcesLayer.prototype.findSources = function (startTime, endTime) {
         var sources = this._peaks.sourceHandler.find(startTime, endTime);
         var lineIds = this._lineGroups.getVisibleLines();
@@ -19779,54 +19989,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 +20081,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;
@@ -19935,7 +20092,9 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         for (var sourceId in this._sourcesGroup) {
             if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
                 var sourceGroup = this._sourcesGroup[sourceId];
-                if (!sourceGroup.isActive()) {
+                if (sourceGroup.isActive()) {
+                    sourceGroup.update();
+                } else {
                     var source = this._sourcesGroup[sourceId].getSource();
                     if (!this._isSourceVisible(source, startTime, endTime)) {
                         this._destroySourceGroup(source);
@@ -20342,83 +20501,104 @@ module.exports = function (Utils, Konva) {
         return height - Utils.clamp(height - scaledAmplitude, 0, height);
     }
     function WaveformShape(options) {
-        const shape = new Konva.Shape({ fill: options.source.color });
+        const shape = new Konva.Shape({
+            fill: options.color,
+            listening: false
+        });
         Object.assign(this, shape);
-        this._layer = options.layer;
         this._view = options.view;
-        this._source = options.source;
         this._height = options.height;
-        this._url = options.url + '-scaled';
-        this.sceneFunc(this._sceneFunc);
-        this.hitFunc(this._waveformShapeHitFunc);
+        this._waveformDataFunc = options.waveformDataFunc;
+        this.sceneFunc(function (context) {
+            var waveformPoints = this._waveformDataFunc ? this._waveformDataFunc() : null;
+            this._sceneFunc(context, waveformPoints);
+        });
     }
     WaveformShape.prototype = Object.create(Konva.Shape.prototype);
-    WaveformShape.prototype._sceneFunc = function (context) {
-        var width = this._view.getWidth();
-        var waveformData = this._layer.getLoadedData(this._url).data;
-        var startPixel = 0, startOffset = 0, endPixel = width, targetSpeed = 1;
-        if (this._source) {
-            targetSpeed = this._source.targetSpeed || 1;
-            startPixel = Math.floor((this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0)) * targetSpeed);
-            startOffset = this._view.timeToPixels(this._source.mediaStartTime);
-            endPixel = Math.min(Math.ceil((this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0)) * targetSpeed), waveformData.length);
+    WaveformShape.prototype._sceneFunc = function (context, waveformPoints) {
+        if (!waveformPoints) {
+            return;
+        }
+        var xPoints = [];
+        var minByChannel = [];
+        var maxByChannel = [];
+        var channels = 0;
+        this._forEachWaveformPoint(waveformPoints, function (point) {
+            if (!point || !point.min || !point.max) {
+                return;
+            }
+            if (channels === 0) {
+                channels = point.min.length;
+                for (var c = 0; c < channels; c++) {
+                    minByChannel[c] = [];
+                    maxByChannel[c] = [];
+                }
+            }
+            xPoints.push(point.x);
+            for (var i = 0; i < channels; i++) {
+                minByChannel[i].push(point.min[i]);
+                maxByChannel[i].push(point.max[i]);
+            }
+        });
+        if (channels === 0 || xPoints.length === 0) {
+            return;
         }
-        this._drawWaveform(context, waveformData, startPixel, startOffset, endPixel, targetSpeed, this._height);
+        this._drawWaveformFromPoints(context, xPoints, minByChannel, maxByChannel, channels, this._height);
     };
-    WaveformShape.prototype._drawWaveform = function (context, waveformData, startPixel, startOffset, endPixel, targetSpeed, height) {
-        var channels = waveformData.channels;
+    WaveformShape.prototype._forEachWaveformPoint = function (waveformPoints, callback) {
+        if (!waveformPoints) {
+            return;
+        }
+        if (typeof waveformPoints.next === 'function') {
+            while (true) {
+                var result = waveformPoints.next();
+                if (!result || result.done) {
+                    break;
+                }
+                callback(result.value);
+            }
+            return;
+        }
+        if (typeof Symbol !== 'undefined' && waveformPoints[Symbol.iterator]) {
+            var iterator = waveformPoints[Symbol.iterator]();
+            while (true) {
+                var iterResult = iterator.next();
+                if (iterResult.done) {
+                    break;
+                }
+                callback(iterResult.value);
+            }
+            return;
+        }
+        if (Array.isArray(waveformPoints)) {
+            for (var i = 0; i < waveformPoints.length; i++) {
+                callback(waveformPoints[i]);
+            }
+        }
+    };
+    WaveformShape.prototype._drawWaveformFromPoints = function (context, xPoints, minByChannel, maxByChannel, channels, height) {
         var waveformTop = 0;
         var waveformHeight = Math.floor(height / channels);
         for (var i = 0; i < channels; i++) {
             if (i === channels - 1) {
                 waveformHeight = height - (channels - 1) * waveformHeight;
             }
-            this._drawChannel(context, waveformData.channel(i), startPixel, startOffset, endPixel, waveformTop, waveformHeight, targetSpeed);
+            this._drawChannelFromPoints(context, xPoints, minByChannel[i], maxByChannel[i], waveformTop, waveformHeight);
             waveformTop += waveformHeight;
         }
     };
-    WaveformShape.prototype._drawChannel = function (context, channel, startPixel, startOffset, endPixel, top, height, targetSpeed) {
-        var x, val;
+    WaveformShape.prototype._drawChannelFromPoints = function (context, xPoints, minValues, maxValues, top, height) {
         var amplitudeScale = this._view.getAmplitudeScale();
         context.beginPath();
-        for (x = startPixel; x < endPixel; x++) {
-            val = channel.min_sample(x);
-            context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+        for (var i = 0; i < xPoints.length; i++) {
+            context.lineTo(xPoints[i], top + scaleY(minValues[i], height, amplitudeScale) + 0.5);
         }
-        for (x = endPixel - 1; x >= startPixel; x--) {
-            val = channel.max_sample(x);
-            context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+        for (var j = xPoints.length - 1; j >= 0; j--) {
+            context.lineTo(xPoints[j], top + scaleY(maxValues[j], height, amplitudeScale) + 0.5);
         }
         context.closePath();
         context.fillShape(this);
     };
-    WaveformShape.prototype._waveformShapeHitFunc = function (context) {
-        if (!this._source) {
-            return;
-        }
-        var frameOffset = this._view.getFrameOffset();
-        var viewWidth = this._view.getWidth();
-        var startPixels = this._view.timeToPixels(this._source.startTime);
-        var endPixels = this._view.timeToPixels(this._source.endTime);
-        var offsetY = 10;
-        var hitRectHeight = this._height;
-        if (hitRectHeight < 0) {
-            hitRectHeight = 0;
-        }
-        var hitRectLeft = startPixels - frameOffset;
-        var hitRectWidth = endPixels - startPixels;
-        if (hitRectLeft < 0) {
-            hitRectWidth -= -hitRectLeft;
-            hitRectLeft = 0;
-        }
-        if (hitRectLeft + hitRectWidth > viewWidth) {
-            hitRectWidth -= hitRectLeft + hitRectWidth - viewWidth;
-        }
-        context.beginPath();
-        context.rect(hitRectLeft, offsetY, hitRectWidth, hitRectHeight);
-        context.closePath();
-        context.fillStrokeShape(this);
-    };
     return WaveformShape;
 }(_dereq_('../utils'), _dereq_('konva'));
 },{"../utils":116,"konva":43}],107:[function(_dereq_,module,exports){
@@ -23153,48 +23333,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);
             }