@checksub_team/peaks_timeline 2.2.1 → 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) {
@@ -14760,8 +14763,17 @@ module.exports = function (Utils, Konva) {
 },{"../utils":116,"konva":43}],90:[function(_dereq_,module,exports){
 module.exports = function () {
     'use strict';
+    var raf = typeof window !== 'undefined' && window.requestAnimationFrame || function (fn) {
+        return setTimeout(fn, 16);
+    };
+    var caf = typeof window !== 'undefined' && window.cancelAnimationFrame || function (id) {
+        clearTimeout(id);
+    };
     function Invoker() {
         this._throttledFunc = {};
+        this._rafThrottled = {};
+        this._frameCallbacks = [];
+        this._frameScheduled = false;
     }
     Invoker.prototype.throttle = function (id, func, wait) {
         var self = this;
@@ -14785,6 +14797,52 @@ module.exports = function () {
             }, wait);
         }
     };
+    Invoker.prototype.throttleRAF = function (id, func) {
+        var self = this;
+        if (this._rafThrottled[id]) {
+            this._rafThrottled[id].func = func;
+            this._rafThrottled[id].pending = true;
+            return;
+        }
+        this._rafThrottled[id] = {
+            func: func,
+            pending: true,
+            rafId: null
+        };
+        function frame() {
+            if (self._rafThrottled[id] && self._rafThrottled[id].pending) {
+                self._rafThrottled[id].pending = false;
+                self._rafThrottled[id].func();
+                self._rafThrottled[id].rafId = raf(frame);
+            } else if (self._rafThrottled[id]) {
+                delete self._rafThrottled[id];
+            }
+        }
+        this._rafThrottled[id].rafId = raf(frame);
+    };
+    Invoker.prototype.cancelThrottleRAF = function (id) {
+        if (this._rafThrottled[id]) {
+            if (this._rafThrottled[id].rafId) {
+                caf(this._rafThrottled[id].rafId);
+            }
+            delete this._rafThrottled[id];
+        }
+    };
+    Invoker.prototype.scheduleFrame = function (callback) {
+        var self = this;
+        this._frameCallbacks.push(callback);
+        if (!this._frameScheduled) {
+            this._frameScheduled = true;
+            raf(function () {
+                self._frameScheduled = false;
+                var callbacks = self._frameCallbacks;
+                self._frameCallbacks = [];
+                for (var i = 0; i < callbacks.length; i++) {
+                    callbacks[i]();
+                }
+            });
+        }
+    };
     Invoker.prototype.debounce = function (func, wait, immediate) {
         var timeout;
         return function executedFunction() {
@@ -14804,6 +14862,96 @@ module.exports = function () {
             }
         };
     };
+    Invoker.prototype.throttleLeading = function (func) {
+        var scheduled = false;
+        var savedArgs = null;
+        var savedThis = null;
+        return function throttled() {
+            if (scheduled) {
+                savedArgs = arguments;
+                savedThis = this;
+                return;
+            }
+            func.apply(this, arguments);
+            scheduled = true;
+            raf(function () {
+                scheduled = false;
+                if (savedArgs) {
+                    func.apply(savedThis, savedArgs);
+                    savedArgs = null;
+                    savedThis = null;
+                }
+            });
+        };
+    };
+    Invoker.prototype.throttleTrailing = function (func) {
+        var rafId = null;
+        var savedArgs = null;
+        var savedThis = null;
+        return function throttled() {
+            savedArgs = arguments;
+            savedThis = this;
+            if (rafId === null) {
+                rafId = raf(function () {
+                    rafId = null;
+                    func.apply(savedThis, savedArgs);
+                });
+            }
+        };
+    };
+    Invoker.prototype.createBatcher = function (processFn, options) {
+        options = options || {};
+        var maxWait = options.maxWait || 100;
+        var items = [];
+        var timeout = null;
+        var lastFlush = 0;
+        function flush() {
+            if (items.length === 0) {
+                return;
+            }
+            var batch = items;
+            items = [];
+            timeout = null;
+            lastFlush = Date.now();
+            processFn(batch);
+        }
+        return {
+            add: function (item) {
+                items.push(item);
+                if (timeout === null) {
+                    var timeSinceLastFlush = Date.now() - lastFlush;
+                    if (timeSinceLastFlush >= maxWait) {
+                        raf(flush);
+                    } else {
+                        timeout = setTimeout(flush, Math.min(16, maxWait - timeSinceLastFlush));
+                    }
+                }
+            },
+            flush: flush,
+            size: function () {
+                return items.length;
+            }
+        };
+    };
+    Invoker.prototype.destroy = function () {
+        var id;
+        for (id in this._throttledFunc) {
+            if (Object.prototype.hasOwnProperty.call(this._throttledFunc, id)) {
+                clearInterval(this._throttledFunc[id].timer);
+            }
+        }
+        this._throttledFunc = {};
+        for (id in this._rafThrottled) {
+            if (Object.prototype.hasOwnProperty.call(this._rafThrottled, id)) {
+                if (this._rafThrottled[id].rafId) {
+                    caf(this._rafThrottled[id].rafId);
+                }
+            }
+        }
+        this._rafThrottled = {};
+        this._frameCallbacks = [];
+        this._frameScheduled = false;
+    };
     return Invoker;
 }();
 },{}],91:[function(_dereq_,module,exports){
@@ -14937,8 +15085,10 @@ module.exports = function (SourceGroup, Utils, Konva) {
     LineGroup.prototype.addSource = function (source, sourceGroup, sourcesAround) {
         if (sourceGroup) {
             this._sourcesGroup[source.id] = sourceGroup;
-            if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
-                sourceGroup.moveTo(this._group);
+            if (!sourceGroup.isActive()) {
+                if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
+                    sourceGroup.moveTo(this._group);
+                }
             }
         }
         if (!this._sources[source.id]) {
@@ -15042,9 +15192,6 @@ module.exports = function (SourceGroup, Utils, Konva) {
     LineGroup.prototype.removeSourceGroup = function (source) {
         const sourceGroup = this._sourcesGroup[source.id];
         delete this._sourcesGroup[source.id];
-        if (sourceGroup) {
-            sourceGroup.hideButKeepFocus();
-        }
         return sourceGroup;
     };
     LineGroup.prototype.removeSource = function (source) {
@@ -15359,6 +15506,7 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this._areSegmentInteractionsAllowed = true;
         this._automaticallyCreatedLineId = null;
         this._automaticLineCreationPosition = null;
+        this._automaticLineCreationMouseY = null;
         this._automaticLineCreationTimeout = null;
         this._segmentsGroups = {};
         this._segmentsGroupToLine = {};
@@ -15438,7 +15586,6 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
     };
     LineGroups.prototype._onLineHeightChanged = function () {
         this.refreshLineYs();
-        this._view.updateTimeline();
     };
     LineGroups.prototype._onSourcesWrappingChanged = function (sources) {
         sources.forEach(function (source) {
@@ -15544,9 +15691,10 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         }
         this._automaticLineCreationTimeout = null;
         this._automaticLineCreationPosition = null;
+        this._automaticLineCreationMouseY = null;
         this._automaticallyCreatedLineId = null;
     };
-    LineGroups.prototype.manageAutomaticLineCreation = function (newLinePosition, initialPosition, sources) {
+    LineGroups.prototype.manageAutomaticLineCreation = function (newLinePosition, initialPosition, sources, mouseY) {
         if (!Utils.isNullOrUndefined(this._automaticallyCreatedLineId)) {
             return;
         } else if (!Utils.isNullOrUndefined(this._automaticLineCreationPosition) && this._automaticLineCreationPosition !== newLinePosition) {
@@ -15556,6 +15704,7 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
             return;
         }
         this._automaticLineCreationPosition = newLinePosition;
+        this._automaticLineCreationMouseY = mouseY;
         this._automaticLineCreationTimeout = setTimeout(function () {
             this._automaticLineCreationTimeout = null;
             const currentLine = this._lineGroupsByPosition[initialPosition];
@@ -15586,6 +15735,7 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
             }
             this._automaticallyCreatedLineId = automaticallyCreatedLineGroup.getId();
             this._moveSourcesToPositionIfPossible(sources, newLinePosition);
+            this._peaks.emit('sources.delayedLineChange', sources);
         }.bind(this), this._peaks.options.automaticLineCreationDelay);
     };
     LineGroups.prototype.manageVerticalPosition = function (sources, startTime, endTime, mouseX, mouseY) {
@@ -15599,7 +15749,7 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
             return;
         }
         if (linePos[0] !== linePos[1]) {
-            this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
+            this.manageAutomaticLineCreation(linePos[0] + 1, position, sources, mouseY);
         } else {
             this.stopAutomaticLineCreation();
             const targetLineGroup = this._lineGroupsByPosition[linePos[0]];
@@ -15815,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 = {
@@ -15844,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: [
@@ -15857,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;
@@ -16133,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) {
@@ -16163,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;
@@ -16246,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;
@@ -16256,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);
@@ -16270,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) {
@@ -16431,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();
@@ -16503,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();
@@ -16532,14 +16689,32 @@ 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) {
         if (this._mode === mode) {
             return;
@@ -16593,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) {
@@ -16698,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) {
@@ -16711,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);
@@ -16833,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());
@@ -16913,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) {
@@ -17910,13 +18090,14 @@ module.exports = function (SegmentShape, Utils, Konva) {
     return SegmentsGroup;
 }(_dereq_('./segment-shape'), _dereq_('../utils'), _dereq_('konva'));
 },{"../utils":116,"./segment-shape":100,"konva":43}],102:[function(_dereq_,module,exports){
-module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva) {
+module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Utils, Konva) {
     'use strict';
     var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
     var SPACING_BETWEEN_PREVIEWS = 1.5;
     var CORNER_RADIUS = 8;
     var INDICATOR_RADIUS = 4;
-    var PREVIEW_CREATE_CHUNK = 8;
+    var PREVIEW_CREATE_CHUNK = 12;
+    var sharedInvoker = new Invoker();
     function SourceGroup(source, peaks, layer, view) {
         this._source = source;
         this._peaks = peaks;
@@ -17924,7 +18105,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._view = view;
         this._indicators = {};
         var self = this;
-        this._x = this._view.timeToPixels(source.startTime);
         this._width = this._view.timeToPixels(source.endTime - source.startTime);
         var heights = SourceGroup.getHeights(source, peaks);
         this._unwrappedHeight = heights.unwrapped;
@@ -17935,12 +18115,16 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._selected = this._source.selected;
         this._hovered = false;
         this._isDragged = false;
+        this._isHandleDragging = false;
         this._destroyed = false;
+        this._dragGhost = null;
+        this._drawScheduled = false;
         this._previewList = [];
         this._previewBuildQueue = new Set();
+        this._pendingIdleCallbacks = new Set();
         this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
-            x: this._x,
+            x: this._view.timeToPixels(source.startTime),
             sourceId: this._source.id,
             draggable: this._source.draggable,
             dragBoundFunc: function () {
@@ -17995,14 +18179,46 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         if (!this._source.loading) {
             this._showButtons();
         }
-        this._batchDraw();
+        this._scheduleBatchDraw();
     };
     SourceGroup.prototype._onHoverEnd = function () {
         this._hovered = false;
         this._manualHover = false;
+        this._disableManualHoverTracking();
         this._view.setHoveredElement(null);
         this._hideButtons();
-        this._batchDraw();
+        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;
@@ -18030,7 +18246,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         return this._hovered;
     };
     SourceGroup.prototype.isActive = function () {
-        return this._isDragged;
+        return this._isDragged || this._isHandleDragging;
     };
     SourceGroup.prototype.addToContent = function (newChild) {
         if (this._source.wrapped) {
@@ -18045,15 +18261,17 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._rightHandle.width(handleWidth);
         this._rightHandle.x(this._width - handleWidth);
     };
-    SourceGroup.prototype._onSourceGroupHandleDrag = function (draggedElement, dragPos, leftHandle) {
-        const diff = this._view.pixelsToTime(dragPos.x - this._mouseDownX);
-        const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
+    SourceGroup.prototype._onSourceGroupHandleDrag = function (draggedElement, leftHandle) {
         const {start, end} = this._initialTimes;
         this._view.updateWithAutoScroll(function () {
+            var pointer = this._view.getPointerPosition();
+            var pointerX = pointer ? pointer.x : this._mouseDownX;
+            const diff = this._view.pixelsToTime(pointerX - this._mouseDownX);
+            const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
             if (this._layer.manageSourceMovements([this._source], leftHandle ? start + diff + timeOffsetDiff : null, leftHandle ? null : end + diff + timeOffsetDiff)) {
                 this._layer.batchDraw();
             }
-        }.bind(this));
+        }.bind(this), null, false);
         return {
             x: draggedElement.absolutePosition().x,
             y: draggedElement.absolutePosition().y
@@ -18064,8 +18282,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         const endPixel = this._view.timeToPixels(this._source.endTime);
         const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
         const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
-        this._group.x(startPixel - frameOffset);
-        this._x = startPixel;
+        if (!this._isDragged) {
+            this._group.x(startPixel - frameOffset);
+        }
         const newWidth = endPixel - startPixel;
         if (newWidth !== this._width) {
             this._width = newWidth;
@@ -18087,6 +18306,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             this._updateLoadingOverlay();
             this.updatePreviews();
         }
+        if (this._isDragged) {
+            this.createDragGhost();
+            this.updateDragGhost();
+        }
     };
     SourceGroup.prototype.setWrapping = function (wrap, forceCreate, notify) {
         if (wrap) {
@@ -18119,12 +18342,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             start: this._source.startTime,
             end: this._source.endTime
         };
-        this._isDragged = true;
+        this._isHandleDragging = true;
         this._hideButtons();
     };
     SourceGroup.prototype._onHandleDragEnd = function () {
-        this._isDragged = false;
+        this._isHandleDragging = false;
         this._showButtons();
+        this.update();
+        this.prepareDragEnd();
     };
     SourceGroup.prototype._addHandles = function (forceCreate) {
         var self = this;
@@ -18136,12 +18361,18 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 height: this._unwrappedHeight,
                 visible: true,
                 draggable: this._source.resizable,
-                dragBoundFunc: function (pos) {
-                    return self._onSourceGroupHandleDrag(this, pos, true);
+                dragBoundFunc: function () {
+                    return self._onSourceGroupHandleDrag(this, true);
                 }
             });
-            this._leftHandle.on('dragstart', this._onHandleDragStart.bind(this));
-            this._leftHandle.on('dragend', this._onHandleDragEnd.bind(this));
+            this._leftHandle.on('dragstart', function (event) {
+                event.cancelBubble = true;
+                self._onHandleDragStart(event);
+            });
+            this._leftHandle.on('dragend', function (event) {
+                event.cancelBubble = true;
+                self._onHandleDragEnd(event);
+            });
             if (this._source.resizable) {
                 this._leftHandle.on('mouseover', function () {
                     self._cursor = 'ew-resize';
@@ -18158,12 +18389,18 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 height: this._unwrappedHeight,
                 visible: true,
                 draggable: this._source.resizable,
-                dragBoundFunc: function (pos) {
-                    return self._onSourceGroupHandleDrag(this, pos, false);
+                dragBoundFunc: function () {
+                    return self._onSourceGroupHandleDrag(this, false);
                 }
             });
-            this._rightHandle.on('dragstart', this._onHandleDragStart.bind(this));
-            this._rightHandle.on('dragend', this._onHandleDragEnd.bind(this));
+            this._rightHandle.on('dragstart', function (event) {
+                event.cancelBubble = true;
+                self._onHandleDragStart(event);
+            });
+            this._rightHandle.on('dragend', function (event) {
+                event.cancelBubble = true;
+                self._onHandleDragEnd(event);
+            });
             if (this._source.resizable) {
                 this._rightHandle.on('mouseover', function () {
                     self._cursor = 'ew-resize';
@@ -18206,8 +18443,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     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 x = Math.max(0, this._view.getFrameOffset() - this._x - 2 * radius);
-        var width = Math.min(this._width - x, this._view.getWidth() + 4 * radius - Math.max(0, this._x - this._view.getFrameOffset()));
+        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 xWidth = x + width;
         if (width > 0) {
             ctx.beginPath();
@@ -18395,9 +18633,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     SourceGroup.prototype.getWidth = function () {
         return this._width;
     };
-    SourceGroup.prototype.getX = function () {
-        return this._x;
-    };
     SourceGroup.prototype.getAbsoluteY = function () {
         return this._group.absolutePosition().y;
     };
@@ -18413,16 +18648,31 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         }
         return this._group.y(value);
     };
+    SourceGroup.prototype.absolutePosition = function (value) {
+        if (value) {
+            return this._group.absolutePosition(value);
+        }
+        return this._group.absolutePosition();
+    };
     SourceGroup.prototype.getSource = function () {
         return this._source;
     };
     SourceGroup.prototype.startHover = function () {
         this._manualHover = true;
+        this._enableManualHoverTracking();
         this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
     };
     SourceGroup.prototype.stopHover = function () {
         this._group.fire('mouseleave', { evt: new MouseEvent('mouseleave') }, true);
     };
+    SourceGroup.prototype.setDragging = function (isDragging) {
+        this._isDragged = isDragging;
+        if (isDragging) {
+            this.createDragGhost();
+        } else {
+            this.destroyDragGhost();
+        }
+    };
     SourceGroup.prototype.startDrag = function () {
         return this._group.startDrag();
     };
@@ -18432,12 +18682,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     SourceGroup.prototype.moveTo = function (group) {
         this._group.moveTo(group);
     };
+    SourceGroup.prototype.moveToTop = function () {
+        this._group.moveToTop();
+    };
     SourceGroup.prototype.isDescendantOf = function (group) {
         return group.isAncestorOf(this._group);
     };
-    SourceGroup.prototype.hideButKeepFocus = function () {
-        this._group.moveTo(this._view.getTempGroup());
-    };
     SourceGroup.prototype.getParent = function () {
         return this._group.getParent();
     };
@@ -18547,17 +18797,29 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         }
     };
     SourceGroup.prototype._createAudioPreview = function (preview, redraw) {
+        var url = preview.url;
+        var scaledData = this._layer.getLoadedData(url + '-scaled');
+        var currentScale = this._view.getTimeToPixelsScale();
+        if (scaledData && scaledData.scale !== currentScale) {
+            var originalData = this._layer.getLoadedData(url);
+            if (originalData) {
+                this._layer.setLoadedData(url + '-scaled', {
+                    data: originalData.resample({ scale: originalData.sample_rate / currentScale }),
+                    scale: currentScale
+                });
+            }
+        }
         var waveform = new WaveformShape({
             layer: this._layer,
             view: this._view,
             source: this._source,
             height: preview.group.height(),
-            url: preview.url
+            url: url
         });
         preview.group.add(waveform);
         this._addToUnwrap(preview.group);
         if (redraw) {
-            this._layer.rescale(true);
+            this._scheduleBatchDraw();
         }
         this._previewList.push(preview);
     };
@@ -18631,6 +18893,19 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             }
         });
     };
+    SourceGroup.prototype._scheduleBatchDraw = function () {
+        if (this._destroyed || this._drawScheduled) {
+            return;
+        }
+        this._drawScheduled = true;
+        var self = this;
+        sharedInvoker.scheduleFrame(function () {
+            self._drawScheduled = false;
+            if (!self._destroyed) {
+                self._batchDraw();
+            }
+        });
+    };
     SourceGroup.prototype._batchDraw = function () {
         var layer = this._group && this._group.getLayer && this._group.getLayer();
         if (layer && typeof layer.batchDraw === 'function') {
@@ -18638,27 +18913,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         }
     };
     SourceGroup.prototype._scheduleIdle = function (fn) {
-        if (typeof window !== 'undefined' && window.requestIdleCallback) {
-            return window.requestIdleCallback(fn, { timeout: 50 });
-        }
-        if (typeof window !== 'undefined' && window.requestAnimationFrame) {
-            return window.requestAnimationFrame(function () {
-                fn({
-                    timeRemaining: function () {
-                        return 0;
-                    },
-                    didTimeout: true
-                });
-            });
-        }
-        return setTimeout(function () {
-            fn({
-                timeRemaining: function () {
-                    return 0;
-                },
-                didTimeout: true
-            });
-        }, 0);
+        var self = this;
+        var id = Utils.scheduleIdle(function (deadline) {
+            self._pendingIdleCallbacks.delete(id);
+            fn(deadline);
+        }, { timeout: 50 });
+        this._pendingIdleCallbacks.add(id);
+        return id;
     };
     SourceGroup.prototype._ensureImagePreviewCount = function (preview, targetCount, interImageSpacing) {
         var imageList = preview.group.getChildren();
@@ -18670,7 +18931,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             imageList[j].visible(false);
         }
         if (currentCount >= targetCount || this._previewBuildQueue.has(preview)) {
-            this._batchDraw();
+            this._scheduleBatchDraw();
             return;
         }
         this._previewBuildQueue.add(preview);
@@ -18692,7 +18953,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 nextIndex += 1;
                 added += 1;
             }
-            self._batchDraw();
+            self._scheduleBatchDraw();
             if (nextIndex < targetCount) {
                 self._scheduleIdle(buildChunk);
             } else {
@@ -18725,7 +18986,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         }
         this._ensureImagePreviewCount(preview, targetCount, interImageSpacing);
         if (redraw) {
-            this._batchDraw();
+            this._scheduleBatchDraw();
         }
         this._previewList.push(preview);
     };
@@ -18792,6 +19053,65 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     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,
@@ -19168,7 +19488,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             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._batchDraw();
+            self._scheduleBatchDraw();
         });
         volumeSliderGroup.on('dragend', function () {
             volumeText.visible(false);
@@ -19185,6 +19505,17 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         return volumeGroup;
     };
     SourceGroup.prototype.destroy = function () {
+        this.destroyDragGhost();
+        this._disableManualHoverTracking();
+        if (this._pendingIdleCallbacks) {
+            this._pendingIdleCallbacks.forEach(function (id) {
+                Utils.cancelIdle(id);
+            });
+            this._pendingIdleCallbacks.clear();
+        }
+        if (this._previewBuildQueue) {
+            this._previewBuildQueue.clear();
+        }
         if (this._buttonsAnimation) {
             this._buttonsAnimation.destroy();
             this._buttonsAnimation = null;
@@ -19207,8 +19538,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         };
     };
     return SourceGroup;
-}(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./loader'), _dereq_('../utils'), _dereq_('konva'));
-},{"../utils":116,"./loader":94,"./waveform-builder":105,"./waveform-shape":106,"konva":43}],103:[function(_dereq_,module,exports){
+}(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./loader'), _dereq_('./invoker'), _dereq_('../utils'), _dereq_('konva'));
+},{"../utils":116,"./invoker":90,"./loader":94,"./waveform-builder":105,"./waveform-shape":106,"konva":43}],103:[function(_dereq_,module,exports){
 module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Utils, Konva) {
     'use strict';
     function SourcesLayer(peaks, view, allowEditing) {
@@ -19220,8 +19551,13 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         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._debouncedRescale = new Invoker().debounce(this._rescale, 150);
+        this._invoker = new Invoker();
+        this._rescaleVersion = 0;
+        this._throttledBatchDraw = this._invoker.throttleTrailing(this._layer.batchDraw.bind(this._layer));
+        this._drawPending = false;
         this._peaks.on('handler.sources.add', this._onSourcesAdd.bind(this));
         this._peaks.on('handler.sources.destroy', this._onSourcesDestroy.bind(this));
         this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
@@ -19232,7 +19568,13 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
         this._peaks.on('model.source.setIndicators', this.setIndicators.bind(this));
         this._peaks.on('handler.view.mouseup', this._stopDrag.bind(this));
+        this._peaks.on('sources.delayedLineChange', this._onSourcesDelayedLineChanged.bind(this));
     }
+    SourcesLayer.prototype._onSourcesDelayedLineChanged = function () {
+        if (this._draggedElements && this._draggedElements.length > 0) {
+            this._dragSourcesGroup();
+        }
+    };
     SourcesLayer.prototype._stopDrag = function () {
         const draggedSourceGroup = this._sourcesGroup[this._draggedElementId];
         if (draggedSourceGroup) {
@@ -19253,6 +19595,9 @@ 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);
@@ -19324,21 +19669,21 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             self._removeSource(source);
         });
         this._view.updateTimelineLength();
-        this._layer.batchDraw();
+        this.batchDraw();
     };
     SourcesLayer.prototype._onSourcesShow = function (sources) {
         var self = this;
         sources.forEach(function (source) {
             self._sourcesGroup[source.id].setWrapping(false, true);
         });
-        this._layer.batchDraw();
+        this.batchDraw();
     };
     SourcesLayer.prototype._onSourcesHide = function (sources) {
         var self = this;
         sources.forEach(function (source) {
             self._sourcesGroup[source.id].setWrapping(true, true);
         });
-        this._layer.batchDraw();
+        this.batchDraw();
     };
     SourcesLayer.prototype._onDataRetrieved = function (data, source, url) {
         if (data) {
@@ -19367,7 +19712,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     SourcesLayer.prototype._onSegmentsShow = function (segmentsGroupId, lineId) {
         this._lineGroups.addSegments(segmentsGroupId, lineId);
         this._view.updateTimelineLength();
-        this._layer.batchDraw();
+        this.batchDraw();
     };
     SourcesLayer.prototype._createSourceGroup = function (source) {
         return new SourceGroup(source, this._peaks, this, this._view);
@@ -19385,17 +19730,19 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         var sourceGroup = this._sourcesGroup[source.id];
         if (sourceGroup) {
             sourceGroup.createIndicators();
-            this._layer.batchDraw();
+            this.batchDraw();
         }
     };
     SourcesLayer.prototype.updateSources = function (startTime, endTime) {
         this._lineGroups.updateSegments(startTime, endTime);
         var sources = this.findSources(startTime, endTime);
         var count = sources.length;
-        sources.forEach(this._updateSource.bind(this));
+        for (var i = 0; i < sources.length; i++) {
+            this._updateSource(sources[i]);
+        }
         count += this._removeInvisibleSources(startTime, endTime);
         if (count > 0) {
-            this._layer.batchDraw();
+            this.batchDraw();
         }
     };
     SourcesLayer.prototype.onSourcesGroupDragStart = function (element) {
@@ -19422,22 +19769,90 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             orderable: true,
             draggable: true
         });
+        var self = this;
+        this._initialSourcePositions = {};
+        this._draggedElements.forEach(function (source) {
+            self._initialSourcePositions[source.id] = {
+                startTime: source.startTime,
+                endTime: source.endTime,
+                lineId: source.lineId
+            };
+            var sourceGroup = self._sourcesGroup[source.id];
+            if (sourceGroup) {
+                sourceGroup.setDragging(true);
+                var absoluteY = sourceGroup.getAbsoluteY();
+                sourceGroup.moveTo(self._dragGroup);
+                sourceGroup.y(absoluteY);
+            }
+        });
     };
     SourcesLayer.prototype.onSourcesGroupDragEnd = function () {
+        var self = this;
+        this._initialSourcePositions = null;
+        this._dragOffsetX = undefined;
+        this._dragOffsetY = undefined;
         const updatedSources = this._draggedElements.map(function (source) {
-            const sourceGroup = this._sourcesGroup[source.id];
+            const sourceGroup = self._sourcesGroup[source.id];
             if (sourceGroup) {
+                sourceGroup.setDragging(false);
                 sourceGroup.prepareDragEnd();
+                self._lineGroups.addSource(source, sourceGroup);
+                sourceGroup.y(0);
             }
             return source;
-        }.bind(this));
+        });
         this._draggedElementId = null;
+        this.refresh();
         this._view.batchDrawSourcesLayer();
         this._view.updateTimelineLength();
         this._peaks.emit('sources.updated', updatedSources);
     };
     SourcesLayer.prototype.onSourcesGroupDrag = function (draggedElement) {
-        this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
+        var pointerPos = this._view.getPointerPosition();
+        this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this), null, true);
+        var clickedSourceGroup = this._sourcesGroup[this._draggedElementId];
+        if (clickedSourceGroup) {
+            var mouseX = pointerPos.x;
+            var mouseY = pointerPos.y;
+            var offsetX = this._dragOffsetX || 0;
+            var offsetY = this._dragOffsetY || 0;
+            if (this._dragOffsetX === undefined) {
+                var currentPos = draggedElement.absolutePosition();
+                this._dragOffsetX = currentPos.x - mouseX;
+                this._dragOffsetY = currentPos.y - mouseY;
+                offsetX = this._dragOffsetX;
+                offsetY = this._dragOffsetY;
+            }
+            var clickedSourceX = mouseX + offsetX;
+            var clickedSourceY = mouseY + offsetY;
+            if (this._draggedElements && this._draggedElements.length > 1 && this._initialSourcePositions) {
+                var self = this;
+                var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
+                if (clickedInitialPos) {
+                    var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
+                    this._draggedElements.forEach(function (source) {
+                        if (source.id !== self._draggedElementId) {
+                            var sourceGroup = self._sourcesGroup[source.id];
+                            if (sourceGroup) {
+                                var initialPos = self._initialSourcePositions[source.id];
+                                if (initialPos) {
+                                    var initialPixelX = self._view.timeToPixels(initialPos.startTime);
+                                    var pixelOffset = initialPixelX - clickedInitialPixelX;
+                                    sourceGroup.absolutePosition({
+                                        x: clickedSourceX + pixelOffset,
+                                        y: clickedSourceY
+                                    });
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+            return {
+                x: clickedSourceX,
+                y: clickedSourceY
+            };
+        }
         return {
             x: draggedElement.absolutePosition().x,
             y: draggedElement.absolutePosition().y
@@ -19453,7 +19868,9 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         if (!draggable) {
             return;
         }
-        const shouldRedraw = this.manageSourceMovements(this._draggedElements, initialStartTime + timeOffsetDiff + timeDiff, initialEndTime + timeOffsetDiff + timeDiff, orderable, mousePosX, mousePosY);
+        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);
         if (shouldRedraw) {
             this.batchDraw();
         }
@@ -19465,15 +19882,53 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             return lineIds[source.lineId];
         });
     };
+    SourcesLayer.prototype._updateSourceTimesDuringDrag = function (newStartTime) {
+        if (!this._initialSourcePositions || !this._draggedElements) {
+            return;
+        }
+        var self = this;
+        var firstSourceInitial = this._initialSourcePositions[this._draggedElements[0].id];
+        if (!firstSourceInitial) {
+            return;
+        }
+        var timeDiff = Utils.roundTime(newStartTime - firstSourceInitial.startTime);
+        this._draggedElements.forEach(function (source) {
+            var initialPos = self._initialSourcePositions[source.id];
+            if (initialPos) {
+                source.updateTimes(Utils.roundTime(initialPos.startTime + timeDiff), Utils.roundTime(initialPos.endTime + timeDiff));
+            }
+        });
+    };
     SourcesLayer.prototype._applyTimeChangesToSources = function (sources, initialStartTime, newStartTime, newEndTime) {
         if (sources.length === 1) {
             sources[0].updateTimes(newStartTime, newEndTime);
         } else {
-            const timeDiff = Utils.roundTime(newStartTime - initialStartTime);
-            if (timeDiff !== 0) {
-                sources.forEach(function (source) {
-                    source.updateTimes(Utils.roundTime(source.startTime + timeDiff), Utils.roundTime(source.endTime + timeDiff));
-                });
+            var canUseInitialPositions = Boolean(this._initialSourcePositions && this._initialSourcePositions[sources[0].id]);
+            if (canUseInitialPositions) {
+                for (var i = 0; i < sources.length; i++) {
+                    if (!this._initialSourcePositions[sources[i].id]) {
+                        canUseInitialPositions = false;
+                        break;
+                    }
+                }
+            }
+            if (canUseInitialPositions) {
+                var firstInitial = this._initialSourcePositions[sources[0].id];
+                var timeDiffFromInitial = Utils.roundTime(newStartTime - firstInitial.startTime);
+                if (timeDiffFromInitial !== 0) {
+                    var self = this;
+                    sources.forEach(function (source) {
+                        var initialPos = self._initialSourcePositions[source.id];
+                        source.updateTimes(Utils.roundTime(initialPos.startTime + timeDiffFromInitial), Utils.roundTime(initialPos.endTime + timeDiffFromInitial));
+                    });
+                }
+            } else {
+                const timeDiff = Utils.roundTime(newStartTime - initialStartTime);
+                if (timeDiff !== 0) {
+                    sources.forEach(function (source) {
+                        source.updateTimes(Utils.roundTime(source.startTime + timeDiff), Utils.roundTime(source.endTime + timeDiff));
+                    });
+                }
             }
         }
         this.refresh();
@@ -19507,8 +19962,21 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     };
     SourcesLayer.prototype._findOrAddSourceGroup = function (source) {
         var sourceGroup = this._sourcesGroup[source.id];
+        var isNewlyCreated = false;
         if (!sourceGroup) {
             sourceGroup = this._addSourceGroup(source);
+            isNewlyCreated = true;
+        }
+        if (isNewlyCreated && this._draggedElements && this._initialSourcePositions) {
+            var isDraggedSource = this._draggedElements.some(function (s) {
+                return s.id === source.id;
+            });
+            if (isDraggedSource) {
+                sourceGroup.setDragging(true);
+                var absoluteY = sourceGroup.getAbsoluteY();
+                sourceGroup.moveTo(this._dragGroup);
+                sourceGroup.y(absoluteY);
+            }
         }
         return sourceGroup;
     };
@@ -19581,7 +20049,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._layer.setVisible(visible);
     };
     SourcesLayer.prototype.batchDraw = function () {
-        this._layer.batchDraw();
+        this._throttledBatchDraw();
     };
     SourcesLayer.prototype.listening = function (bool) {
         this._layer.listening(bool);
@@ -19600,18 +20068,27 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         var startsEarlier = source1.startTime > source2.startTime && source1.startTime < source2.endTime;
         return endsLater || startsEarlier;
     };
-    SourcesLayer.prototype.rescale = function (debounce) {
-        if (debounce) {
-            this._debouncedRescale();
-        } else {
-            this._rescale();
-        }
+    SourcesLayer.prototype.rescale = function () {
+        this._rescaleVersion = (this._rescaleVersion || 0) + 1;
+        this._rescale(this._rescaleVersion);
     };
-    SourcesLayer.prototype._rescale = function () {
-        var id, audioPreviews, urls = [], self = this;
-        for (id in this._sourcesGroup) {
-            if (Utils.objectHasProperty(this._sourcesGroup, id)) {
-                audioPreviews = this._sourcesGroup[id].getAudioPreview();
+    SourcesLayer.prototype._rescale = function (version) {
+        var self = this;
+        var ids = Object.keys(this._sourcesGroup);
+        var urls = [];
+        var index = 0;
+        function processNext() {
+            if (self._rescaleVersion !== version) {
+                return;
+            }
+            if (index >= ids.length) {
+                self.batchDraw();
+                return;
+            }
+            var id = ids[index];
+            var sourceGroup = self._sourcesGroup[id];
+            if (sourceGroup) {
+                var audioPreviews = sourceGroup.getAudioPreview();
                 audioPreviews.forEach(function (audioPreview) {
                     if (self._shouldResampleAudio(audioPreview.url, urls)) {
                         self._loadedData[audioPreview.url + '-scaled'] = {
@@ -19622,8 +20099,10 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
                     }
                 });
             }
+            index++;
+            Utils.scheduleIdle(processNext, { timeout: 16 });
         }
-        this._layer.batchDraw();
+        processNext();
     };
     SourcesLayer.prototype._shouldResampleAudio = function (audioUrl, urls) {
         return this._loadedData[audioUrl + '-scaled'] && !urls.includes(audioUrl) && this._loadedData[audioUrl + '-scaled'].scale !== this._view.getTimeToPixelsScale();
@@ -19641,6 +20120,10 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._peaks.off('handler.segments.show', this._onSegmentsShow);
         this._peaks.off('model.source.setIndicators', this.setIndicators);
         this._peaks.off('handler.view.mouseup', this._stopDrag);
+        this._rescaleVersion++;
+        if (this._invoker) {
+            this._invoker.destroy();
+        }
     };
     SourcesLayer.prototype.getHeight = function () {
         return this._layer.getHeight();
@@ -19690,15 +20173,13 @@ module.exports = function () {
 module.exports = function (WaveformData, Utils) {
     'use strict';
     var isXhr2 = 'withCredentials' in new XMLHttpRequest();
-    function scheduleIdle(fn) {
-        if (typeof window !== 'undefined' && window.requestIdleCallback) {
-            return window.requestIdleCallback(fn, { timeout: 80 });
-        }
-        return setTimeout(fn, 0);
-    }
+    var waveformCache = Utils.createLRUCache(50);
     function WaveformBuilder(peaks) {
         this._peaks = peaks;
     }
+    WaveformBuilder.clearCache = function () {
+        waveformCache.clear();
+    };
     WaveformBuilder.prototype.init = function (options, callback) {
         if (options.dataUri && (options.webAudio || options.audioContext) || options.waveformData && (options.webAudio || options.audioContext) || options.dataUri && options.waveformData) {
             callback(new TypeError('Peaks.init(): You may only pass one source (webAudio, dataUri, or waveformData) to render waveform data.'));
@@ -19752,6 +20233,14 @@ module.exports = function (WaveformData, Utils) {
             callback(new Error('Peaks.init(): Unable to determine a compatible dataUri format for this browser'));
             return;
         }
+        var cacheKey = url + ':' + requestType;
+        var cachedData = waveformCache.get(cacheKey);
+        if (cachedData) {
+            Utils.scheduleIdle(function () {
+                callback(null, cachedData);
+            });
+            return;
+        }
         var xhr = self._createXHR(url, requestType, options.withCredentials, function (event) {
             if (this.readyState !== 4) {
                 return;
@@ -19760,13 +20249,14 @@ module.exports = function (WaveformData, Utils) {
                 callback(new Error('Unable to fetch remote data. HTTP status ' + this.status));
                 return;
             }
-            scheduleIdle(function () {
+            Utils.scheduleIdle(function () {
                 try {
                     var waveformData = WaveformData.create(event.target.response);
                     if (waveformData.channels !== 1 && waveformData.channels !== 2) {
                         callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
                         return;
                     }
+                    waveformCache.set(cacheKey, waveformData);
                     callback(null, waveformData);
                 } catch (err) {
                     callback(err);
@@ -19795,7 +20285,7 @@ module.exports = function (WaveformData, Utils) {
             callback(new Error('Peaks.init(): Unable to determine a compatible waveformData format'));
             return;
         }
-        scheduleIdle(function () {
+        Utils.scheduleIdle(function () {
             try {
                 var createdWaveformData = WaveformData.create(data);
                 if (createdWaveformData.channels !== 1 && createdWaveformData.channels !== 2) {
@@ -22457,6 +22947,63 @@ module.exports = function (UUID) {
             var GG = G.toString(16).length === 1 ? '0' + G.toString(16) : G.toString(16);
             var BB = B.toString(16).length === 1 ? '0' + B.toString(16) : B.toString(16);
             return '#' + RR + GG + BB;
+        },
+        scheduleIdle: function (callback, options) {
+            options = options || { timeout: 50 };
+            if (typeof window !== 'undefined' && window.requestIdleCallback) {
+                return window.requestIdleCallback(callback, options);
+            }
+            return setTimeout(function () {
+                callback({
+                    didTimeout: true,
+                    timeRemaining: function () {
+                        return 0;
+                    }
+                });
+            }, 0);
+        },
+        cancelIdle: function (id) {
+            if (typeof window !== 'undefined' && window.cancelIdleCallback) {
+                window.cancelIdleCallback(id);
+            } else {
+                clearTimeout(id);
+            }
+        },
+        createLRUCache: function (maxSize) {
+            var cache = new Map();
+            maxSize = maxSize || 100;
+            return {
+                get: function (key) {
+                    if (!cache.has(key)) {
+                        return undefined;
+                    }
+                    var value = cache.get(key);
+                    cache.delete(key);
+                    cache.set(key, value);
+                    return value;
+                },
+                set: function (key, value) {
+                    if (cache.has(key)) {
+                        cache.delete(key);
+                    } else if (cache.size >= maxSize) {
+                        var firstKey = cache.keys().next().value;
+                        cache.delete(firstKey);
+                    }
+                    cache.set(key, value);
+                },
+                has: function (key) {
+                    return cache.has(key);
+                },
+                delete: function (key) {
+                    return cache.delete(key);
+                },
+                clear: function () {
+                    cache.clear();
+                },
+                size: function () {
+                    return cache.size;
+                }
+            };
         }
     };
 }(_dereq_('uuid'));
@@ -22529,7 +23076,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             width: self._width - self._peaks.options.lineIndicatorWidth,
             height: self._height
         });
-        self._tempGroup = new Konva.Group({ listening: false });
         self._width -= self._peaks.options.lineIndicatorWidth;
         self._axis = new Axis(self._peaks, self, {
             axisGridlineColor: this._options.axisGridlineColor,
@@ -22538,7 +23084,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._axis.addBackToStage(self._stage);
         self._sourcesLayer = new SourcesLayer(peaks, self, true);
         self._sourcesLayer.addToStage(self._stage);
-        self._sourcesLayer.add(self._tempGroup);
         self._axis.addFrontToStage(self._stage);
         self._playheadLayer = new PlayheadLayer(peaks, self, self._sourcesLayer.getLineGroups(), self._options.showPlayheadTime);
         self._playheadLayer.addToStage(self._stage);
@@ -22644,7 +23189,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         window.addEventListener('click', this._onWindowClick, false);
     }
     View.prototype._mouseUp = function () {
-        this.clearScrollingInterval();
+        this.stopAutoScroll();
         this._peaks.emit('handler.view.mouseup');
     };
     View.prototype._onWindowClick = function (event) {
@@ -22655,49 +23200,109 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     View.prototype.setClickable = function (clickable) {
         this._isClickable = clickable;
     };
-    View.prototype.getTempGroup = function () {
-        return this._tempGroup;
-    };
     View.prototype.getSelectedElements = function () {
         return Object.values(this._modeLayer.getSelectedElements());
     };
-    View.prototype.updateWithAutoScroll = function (updateInInterval, updateOutInterval) {
+    View.prototype.updateWithAutoScroll = function (updateWhileScrolling, updateWhileNotScrolling, enableVerticalAutoScroll) {
         var self = this;
-        var posX = this.getPointerPosition().x;
-        var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
-        this._limited = 0;
-        if (posX < threshold) {
-            this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
-        } else if (posX > this.getWidth() - threshold) {
-            this._limited = Math.round(30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold));
-        }
-        if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
-            if (!this._scrollingInterval) {
-                this._scrollingInterval = setInterval(function () {
-                    var newOffset = self.getFrameOffset() + self._limited;
-                    if (newOffset < 0) {
-                        self.updateTimeline(0);
-                        clearInterval(self._scrollingInterval);
-                        self._scrollingInterval = null;
+        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(pointerValue, threshold, size) {
+            if (typeof pointerValue !== 'number' || threshold <= 0 || size <= 0) {
+                return 0;
+            }
+            if (pointerValue < threshold) {
+                return Math.round(-MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (threshold - pointerValue) / threshold));
+            }
+            if (pointerValue > size - threshold) {
+                return Math.round(MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (pointerValue - (size - threshold)) / threshold));
+            }
+            return 0;
+        }
+        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 scrollAmountX = Math.round(xVel * deltaTime / NOMINAL_FRAME_MS);
+                    var scrollAmountY = Math.round(yVel * deltaTime / NOMINAL_FRAME_MS);
+                    lastTime = currentTime;
+                    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(self.getFrameOffset() + self._limited);
+                        self.updateTimeline(newOffsetX, newOffsetY);
                     }
-                    updateInInterval();
-                }, 10);
+                    updateWhileScrolling();
+                    self._scrollingRafId = requestAnimationFrame(scrollFrame);
+                }
+                self._scrollingRafId = requestAnimationFrame(scrollFrame);
             }
         } else {
-            this.clearScrollingInterval();
-            if (updateOutInterval) {
-                updateOutInterval();
+            this.stopAutoScroll();
+            if (updateWhileNotScrolling) {
+                updateWhileNotScrolling();
             } else {
-                updateInInterval();
+                updateWhileScrolling();
             }
         }
     };
-    View.prototype.clearScrollingInterval = function () {
-        if (this._scrollingInterval) {
-            clearInterval(this._scrollingInterval);
-            this._scrollingInterval = null;
+    View.prototype.stopAutoScroll = function () {
+        if (this._scrollingRafId) {
+            cancelAnimationFrame(this._scrollingRafId);
+            this._scrollingRafId = null;
         }
     };
     View.prototype.getCurrentMode = function () {
@@ -22891,7 +23496,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this.setFrameOffset(apexPixel - playheadOffsetPixels);
         this.overrideInteractions(true, true);
         this.updateTimeline(this._frameOffset);
-        this._sourcesLayer.rescale(true);
+        this._sourcesLayer.rescale();
         this._playheadLayer.updatePlayheadTime(currentTime);
         this._peaks.emit('handler.view.updatezoom', newScale, prevScale);
         this.overrideInteractions(false, true);