@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.0

package/peaks.js

@@ -14760,8 +14760,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 +14794,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 +14859,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 +15082,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 +15189,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 +15503,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 +15583,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 +15688,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 +15701,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,8 +15732,30 @@ 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;
@@ -15599,7 +15767,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]];
@@ -17910,13 +18078,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 +18093,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 +18103,15 @@ 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._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 +18166,14 @@ 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._view.setHoveredElement(null);
         this._hideButtons();
-        this._batchDraw();
+        this._scheduleBatchDraw();
     };
     SourceGroup.prototype._onDragStart = function (element) {
         this._isDragged = true;
@@ -18030,7 +18201,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,11 +18216,13 @@ 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();
             }
@@ -18064,8 +18237,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;
@@ -18119,12 +18293,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 +18312,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 +18340,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 +18394,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 +18584,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,6 +18599,12 @@ 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;
     };
@@ -18423,6 +18615,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     SourceGroup.prototype.stopHover = function () {
         this._group.fire('mouseleave', { evt: new MouseEvent('mouseleave') }, true);
     };
+    SourceGroup.prototype.setDragging = function (isDragging) {
+        this._isDragged = isDragging;
+    };
     SourceGroup.prototype.startDrag = function () {
         return this._group.startDrag();
     };
@@ -18432,12 +18627,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 +18742,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 +18838,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 +18858,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 +18876,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 +18898,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 +18931,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         }
         this._ensureImagePreviewCount(preview, targetCount, interImageSpacing);
         if (redraw) {
-            this._batchDraw();
+            this._scheduleBatchDraw();
         }
         this._previewList.push(preview);
     };
@@ -19168,7 +19374,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 +19391,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         return volumeGroup;
     };
     SourceGroup.prototype.destroy = function () {
+        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 +19422,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) {
@@ -19217,11 +19432,15 @@ 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._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 +19451,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._dragGhosts && this._draggedElements && this._draggedElements.length > 0) {
+            this._dragSourcesGroup();
+        }
+    };
     SourcesLayer.prototype._stopDrag = function () {
         const draggedSourceGroup = this._sourcesGroup[this._draggedElementId];
         if (draggedSourceGroup) {
@@ -19256,6 +19481,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     };
     SourcesLayer.prototype.addToStage = function (stage) {
         stage.add(this._layer);
+        stage.add(this._dragLayer);
     };
     SourcesLayer.prototype.enableEditing = function (enable) {
         this._allowEditing = enable;
@@ -19324,21 +19550,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 +19593,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 +19611,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 +19650,104 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             orderable: true,
             draggable: true
         });
+        var self = this;
+        this._dragGhosts = [];
+        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._dragLayer);
+                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;
+        }
+        this._initialSourcePositions = null;
+        this._dragOffsetX = undefined;
+        this._dragOffsetY = undefined;
+        var self = this;
         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) {
+        var pointerPos = this._view.getPointerPosition();
         this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
+        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,9 +19763,13 @@ 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);
+        this._updateDragGhosts();
         if (shouldRedraw) {
             this.batchDraw();
+            this._dragLayer.batchDraw();
         }
     };
     SourcesLayer.prototype.findSources = function (startTime, endTime) {
@@ -19465,15 +19779,101 @@ 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;
+        }
+        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 +19907,26 @@ 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._dragLayer);
+                sourceGroup.y(absoluteY);
+                var ghost = this._createDragGhost(sourceGroup);
+                this._dragGhosts.push({
+                    ghost: ghost,
+                    sourceId: source.id
+                });
+            }
         }
         return sourceGroup;
     };
@@ -19581,7 +19999,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 +20018,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 +20049,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 +20070,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 +20123,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 +20183,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 +20199,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 +20235,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 +22897,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 +23026,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 +23034,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 +23139,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 +23150,67 @@ 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) {
         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;
+        var pointer = this.getPointerPosition();
+        var pointerX = pointer ? pointer.x : null;
+        var viewWidth = this.getWidth();
+        var thresholdPx = Math.round(this._peaks.options.autoScrollThreshold * viewWidth);
+        var MAX_AUTO_SCROLL_PX_PER_FRAME = 30;
+        var NOMINAL_FRAME_MS = 16.67;
+        function getAutoScrollVelocity(pointerXValue) {
+            if (typeof pointerXValue !== 'number' || thresholdPx <= 0) {
+                return 0;
+            }
+            if (pointerXValue < thresholdPx) {
+                return Math.round(-MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (thresholdPx - pointerXValue) / thresholdPx));
+            }
+            if (pointerXValue > viewWidth - thresholdPx) {
+                return Math.round(MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (pointerXValue - (viewWidth - thresholdPx)) / thresholdPx));
+            }
+            return 0;
+        }
+        var velocityPxPerFrame = getAutoScrollVelocity(pointerX);
+        var canScroll = velocityPxPerFrame > 0 || velocityPxPerFrame < 0 && self.getFrameOffset() > 0;
+        this._limited = velocityPxPerFrame;
+        if (velocityPxPerFrame !== 0 && canScroll) {
+            if (!this._scrollingRafId) {
+                var lastTime = performance.now();
+                function scrollFrame(currentTime) {
+                    if (!self._scrollingRafId) {
+                        return;
+                    }
+                    var deltaTime = currentTime - lastTime;
+                    var scrollAmount = Math.round(self._limited * deltaTime / NOMINAL_FRAME_MS);
+                    lastTime = currentTime;
+                    var newOffset = self.getFrameOffset() + scrollAmount;
                     if (newOffset < 0) {
                         self.updateTimeline(0);
-                        clearInterval(self._scrollingInterval);
-                        self._scrollingInterval = null;
+                        self._scrollingRafId = null;
                     } else {
-                        self.updateTimeline(self.getFrameOffset() + self._limited);
+                        self.updateTimeline(newOffset);
+                        updateWhileScrolling();
+                        self._scrollingRafId = requestAnimationFrame(scrollFrame);
                     }
-                    updateInInterval();
-                }, 10);
+                }
+                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 +23404,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);