@checksub_team/peaks_timeline 1.16.0-alpha.2 → 1.16.0

package/peaks.js

@@ -14809,6 +14809,12 @@ module.exports = function (Konva, Utils, SVGs) {
         this._indicators[lineId].text = text;
         this.draw();
     };
+    LineIndicator.prototype._showMenu = function (menu) {
+        menu.style.display = 'block';
+        var containerRect = this._stage.container().getBoundingClientRect();
+        menu.style.top = containerRect.top + this._stage.getPointerPosition().y - menu.offsetHeight + 'px';
+        menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
+    };
     LineIndicator.prototype._createIndicator = function (line, type, text) {
         var indicator = new Konva.Group();
         var indicatorHeight = 0;
@@ -14943,7 +14949,7 @@ module.exports = function (Konva, Utils, SVGs) {
     return LineIndicator;
 }(_dereq_('konva'), _dereq_('./utils'), _dereq_('./svgs'));
 },{"./svgs":108,"./utils":113,"konva":43}],92:[function(_dereq_,module,exports){
-module.exports = function (SourceGroup, Konva, Utils) {
+module.exports = function (Konva, Utils) {
     'use strict';
     function Line(peaks, view, y, id, position) {
         this._peaks = peaks;
@@ -14976,8 +14982,8 @@ module.exports = function (SourceGroup, Konva, Utils) {
     Line.prototype.getId = function () {
         return this._id;
     };
-    Line.prototype.countRemainingElements = function () {
-        return this.isSegmentsLine() ? this._segmentsGroup.countRemainingElements() : Object.keys(this._sources).length;
+    Line.prototype.isEmpty = function () {
+        return this.isSegmentsLine() ? this._segmentsGroup.isEmpty() : Object.keys(this._sources).length === 0;
     };
     Line.prototype.isSegmentsLine = function () {
         return Boolean(this._segmentsGroup);
@@ -15005,53 +15011,71 @@ module.exports = function (SourceGroup, Konva, Utils) {
     Line.prototype.lineHeight = function () {
         return this._height;
     };
-    Line.prototype._addHeight = function (height) {
-        if (this._sourceHeights[height]) {
-            this._sourceHeights[height]++;
-        } else {
-            this._sourceHeights[height] = 1;
-            if (height > this._height) {
-                this._height = height;
+    Line.prototype.changeHeight = function (from, to) {
+        if (this._sourceHeights[from]) {
+            var oldHeight = this._height;
+            if (this._sourceHeights[to]) {
+                this._sourceHeights[to] += this._sourceHeights[from];
+            } else {
+                this._sourceHeights[to] = this._sourceHeights[from];
             }
-        }
-    };
-    Line.prototype._subtractHeight = function (height) {
-        if (Object.keys(this._sources).length === 0) {
-            this._height = this._peaks.options.emptyLineHeight;
-            this._sourceHeights = {};
-        } else {
-            this._sourceHeights[height]--;
-            if (this._sourceHeights[height] === 0 && height === this._height) {
-                delete this._sourceHeights[height];
+            if (to > this._height) {
+                this._height = to;
+            } else if (from === this._height) {
                 this._height = 0;
-                for (var sourceHeight in this._sourceHeights) {
-                    if (Utils.objectHasProperty(this._sourceHeights, sourceHeight)) {
-                        var parsedHeight = parseInt(sourceHeight, 10);
-                        if (parsedHeight > this._height) {
-                            this._height = parsedHeight;
+                for (var height in this._sourceHeights) {
+                    if (Utils.objectHasProperty(this._sourceHeights, height)) {
+                        var parsedHeight = parseInt(height, 10);
+                        if (parsedHeight !== from) {
+                            if (parsedHeight > this._height) {
+                                this._height = parsedHeight;
+                            }
                         }
                     }
                 }
             }
+            if (this._height !== oldHeight) {
+                this._peaks.emit('line.heightChanged', this._position);
+            }
+            delete this._sourceHeights[from];
         }
     };
-    Line.prototype.updateLineHeight = function (source, action) {
+    Line.prototype.updateLineHeight = function (sourceGroup, action) {
         var oldHeight = this._height;
-        var sourceGroup = this._sourcesGroup[source.id];
         var sourceGroupHeight;
         switch (action) {
         case 'add':
-            sourceGroupHeight = sourceGroup ? sourceGroup.getCurrentHeight() : SourceGroup.getHeights(source, this._peaks).current;
-            this._addHeight(sourceGroupHeight);
+            sourceGroupHeight = sourceGroup.getCurrentHeight();
+            if (this._sourceHeights[sourceGroupHeight]) {
+                this._sourceHeights[sourceGroupHeight]++;
+            } else {
+                this._sourceHeights[sourceGroupHeight] = 1;
+                if (sourceGroupHeight > this._height) {
+                    this._height = sourceGroupHeight;
+                }
+            }
             break;
         case 'remove':
-            sourceGroupHeight = sourceGroup ? sourceGroup.getCurrentHeight() : SourceGroup.getHeights(source, this._peaks).current;
-            this._subtractHeight(sourceGroupHeight);
+            if (Object.keys(this._sources).length === 0) {
+                this._height = this._peaks.options.emptyLineHeight;
+                this._sourceHeights = {};
+            } else {
+                sourceGroupHeight = sourceGroup.getCurrentHeight();
+                this._sourceHeights[sourceGroupHeight]--;
+                if (this._sourceHeights[sourceGroupHeight] === 0 && sourceGroupHeight === this._height) {
+                    delete this._sourceHeights[sourceGroupHeight];
+                    this._height = 0;
+                    for (var height in this._sourceHeights) {
+                        if (Utils.objectHasProperty(this._sourceHeights, height)) {
+                            var parsedHeight = parseInt(height, 10);
+                            if (parsedHeight > this._height) {
+                                this._height = parsedHeight;
+                            }
+                        }
+                    }
+                }
+            }
             break;
-        default:
-            var {unwrapped, wrapped} = sourceGroup ? sourceGroup.getHeights() : SourceGroup.getHeights(source, this._peaks);
-            this._addHeight(source.wrapped ? wrapped : unwrapped);
-            this._subtractHeight(source.wrapped ? unwrapped : wrapped);
         }
         if (this._height !== oldHeight) {
             this._peaks.emit('line.heightChanged', this._position);
@@ -15063,10 +15087,9 @@ module.exports = function (SourceGroup, Konva, Utils) {
     Line.prototype.addToLayer = function (layer) {
         layer.add(this._group);
     };
-    Line.prototype.addSourceGroup = function (source, sourceGroup) {
-        if (sourceGroup) {
-            this._sourcesGroup[source.id] = sourceGroup;
-        }
+    Line.prototype.addSourceGroup = function (sourceGroup) {
+        var source = sourceGroup.getSource();
+        this._sourcesGroup[source.id] = sourceGroup;
         if (!this._sources[source.id]) {
             var newSource = {
                 source: source,
@@ -15083,9 +15106,9 @@ module.exports = function (SourceGroup, Konva, Utils) {
                     }
                     if (source.endTime <= currentSource.source.startTime) {
                         var startLimit = currentSource.prevSourceId ? this._sources[currentSource.prevSourceId].source.endTime : 0;
-                        const {newStartTime, newEndTime} = this._canBePlacedBetween(source.startTime, source.endTime, startLimit, currentSource.source.startTime);
-                        if (newStartTime !== null && newEndTime !== null) {
-                            source.updateTimes(newStartTime, newEndTime);
+                        var newTimes = this._canBePlacedBetween(source.startTime, source.endTime, startLimit, currentSource.source.startTime);
+                        if (newTimes) {
+                            source.updateTimes(newTimes.start, newTimes.end);
                             if (currentSource.prevSourceId) {
                                 this._sources[currentSource.prevSourceId].nextSourceId = source.id;
                                 newSource.prevSourceId = currentSource.prevSourceId;
@@ -15112,9 +15135,9 @@ module.exports = function (SourceGroup, Konva, Utils) {
                 this._firstSourceId = source.id;
                 this._sources[source.id] = newSource;
             }
-            this.updateLineHeight(source, 'add');
+            this.updateLineHeight(sourceGroup, 'add');
         }
-        if (sourceGroup && (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group))) {
+        if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
             sourceGroup.addToGroup(this._group);
         }
     };
@@ -15134,46 +15157,42 @@ module.exports = function (SourceGroup, Konva, Utils) {
     };
     Line.prototype._canBePlacedBetween = function (startTime, endTime, startLimit, endLimit) {
         var timeWidth = Utils.roundTime(endTime - startTime);
-        var newStartTime, newEndTime;
+        var newTimes = null;
         if (!endLimit && startTime > startLimit || startTime > startLimit && endTime < endLimit) {
-            newStartTime = startTime;
-            newEndTime = endTime;
+            newTimes = {
+                start: startTime,
+                end: endTime
+            };
         } else if (Utils.roundTime(endLimit - startLimit) >= timeWidth) {
             if (startTime > startLimit) {
-                newStartTime = Utils.roundTime(endLimit - timeWidth);
-                newEndTime = endLimit;
+                newTimes = {
+                    start: Utils.roundTime(endLimit - timeWidth),
+                    end: endLimit
+                };
             } else {
-                newStartTime = startLimit;
-                newEndTime = Utils.roundTime(startLimit + timeWidth);
+                newTimes = {
+                    start: startLimit,
+                    end: Utils.roundTime(startLimit + timeWidth)
+                };
             }
         }
-        return {
-            newStartTime,
-            newEndTime
-        };
+        return newTimes;
     };
     Line.prototype.removeSourceGroup = function (source, isPermanent) {
         var sourceGroup = this._sourcesGroup[source.id];
         delete this._sourcesGroup[source.id];
         if (isPermanent) {
-            var sourceData = this._sources[source.id];
-            delete this._sources[source.id];
-            if (Object.keys(this._sources).length === 0) {
-                setTimeout(function () {
-                    this._peaks.emit('line.remove', this._position);
-                }.bind(this), 0);
-                return sourceGroup;
-            }
-            if (sourceData.prevSourceId) {
-                this._sources[sourceData.prevSourceId].nextSourceId = sourceData.nextSourceId;
+            if (this._sources[source.id].prevSourceId) {
+                this._sources[this._sources[source.id].prevSourceId].nextSourceId = this._sources[source.id].nextSourceId;
             }
-            if (sourceData.nextSourceId) {
-                this._sources[sourceData.nextSourceId].prevSourceId = sourceData.prevSourceId;
+            if (this._sources[source.id].nextSourceId) {
+                this._sources[this._sources[source.id].nextSourceId].prevSourceId = this._sources[source.id].prevSourceId;
             }
             if (this._firstSourceId === source.id) {
-                this._firstSourceId = sourceData.nextSourceId;
+                this._firstSourceId = this._sources[source.id].nextSourceId;
             }
-            this.updateLineHeight(source, 'remove');
+            delete this._sources[source.id];
+            this.updateLineHeight(sourceGroup, 'remove');
         }
         return sourceGroup;
     };
@@ -15196,85 +15215,83 @@ module.exports = function (SourceGroup, Konva, Utils) {
         this._y += dy;
         this._group.y(this._group.y() + dy);
     };
-    Line.prototype.manageOrder = function (sources, startTime, endTime) {
-        const firstSource = sources[0];
-        const lastSource = sources[sources.length - 1];
-        const cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
-        var newStartTime = startTime;
-        var newEndTime = endTime;
+    Line.prototype.manageSourceOrder = function (source, newTimes) {
+        var cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
         var tmpTimes;
-        var sourceDuration = Utils.roundTime(endTime - startTime);
-        if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
-            if (this._sources[firstSource.id].prevSourceId) {
-                var previousStartTime = this._sources[this._sources[firstSource.id].prevSourceId].source.startTime;
-                if (Utils.roundTime(cursorTime + this._view.getTimeOffset()) < previousStartTime) {
-                    tmpTimes = this._changeSourcesPosition(sources, sourceDuration, cursorTime + this._view.getTimeOffset());
-                    if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
-                        newStartTime = tmpTimes.newStartTime;
-                        newEndTime = tmpTimes.newEndTime;
+        var sourceDuration = source.endTime - source.startTime;
+        if (newTimes.start !== null && newTimes.end !== null) {
+            if (this._sources[source.id].prevSourceId) {
+                var previousStartTime = this._sources[this._sources[source.id].prevSourceId].source.startTime;
+                if (cursorTime + this._view.getTimeOffset() < previousStartTime) {
+                    tmpTimes = this._changeSourcePosition(source, sourceDuration, cursorTime + this._view.getTimeOffset());
+                    if (tmpTimes) {
+                        newTimes.start = tmpTimes.start;
+                        newTimes.end = tmpTimes.end;
                     }
                 }
             }
-            if (this._sources[lastSource.id].nextSourceId) {
-                var nextEndTime = this._sources[this._sources[lastSource.id].nextSourceId].source.endTime;
-                if (Utils.roundTime(cursorTime + this._view.getTimeOffset()) > nextEndTime) {
-                    tmpTimes = this._changeSourcesPosition(sources, sourceDuration, cursorTime + this._view.getTimeOffset());
-                    if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
-                        newStartTime = tmpTimes.newStartTime;
-                        newEndTime = tmpTimes.newEndTime;
+            if (this._sources[source.id].nextSourceId) {
+                var nextEndTime = this._sources[this._sources[source.id].nextSourceId].source.endTime;
+                if (cursorTime + this._view.getTimeOffset() > nextEndTime) {
+                    tmpTimes = this._changeSourcePosition(source, sourceDuration, cursorTime + this._view.getTimeOffset());
+                    if (tmpTimes) {
+                        newTimes.start = tmpTimes.start;
+                        newTimes.end = tmpTimes.end;
                     }
                 }
             }
         }
-        return {
-            newStartTime,
-            newEndTime
-        };
+        if (newTimes.start) {
+            newTimes.start = Utils.roundTime(newTimes.start);
+        }
+        if (newTimes.end) {
+            newTimes.end = Utils.roundTime(newTimes.end);
+        }
+        return newTimes;
     };
-    Line.prototype._changeSourcesPosition = function (sources, sourceDuration, time) {
-        var currentRange = {
-            start: null,
-            end: null
-        };
-        var startLimit = null;
-        var endLimit = null;
-        let newStartTime, newEndTime;
-        do {
-            if (!currentRange.end) {
-                currentRange.end = this._sources[this._firstSourceId];
-            } else {
-                currentRange.start = currentRange.end;
-                currentRange.end = this._sources[currentRange.start.nextSourceId];
-            }
-            if (currentRange.start) {
-                startLimit = currentRange.start.source.endTime;
-            } else {
-                startLimit = 0;
-            }
-            if (currentRange.end) {
-                endLimit = currentRange.end.source.startTime;
-            } else {
-                endLimit = null;
-            }
-            if (time > startLimit && (endLimit === null || time < endLimit)) {
-                ({newStartTime, newEndTime} = this._canBePlacedBetween(time, time + sourceDuration, startLimit, endLimit));
-                if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
-                    let prevSourceId = currentRange.start ? currentRange.start.source.id : null;
-                    sources.forEach(function (source) {
+    Line.prototype._changeSourcePosition = function (source, sourceDuration, time) {
+        if (source.orderable && this._firstSourceId) {
+            var currentRange = {
+                start: null,
+                end: null
+            };
+            var startLimit = null;
+            var endLimit = null;
+            do {
+                if (!currentRange.end) {
+                    currentRange.end = this._sources[this._firstSourceId];
+                } else {
+                    currentRange.start = currentRange.end;
+                    currentRange.end = this._sources[currentRange.start.nextSourceId];
+                }
+                if (currentRange.start) {
+                    startLimit = currentRange.start.source.endTime;
+                } else {
+                    startLimit = 0;
+                }
+                if (currentRange.end) {
+                    endLimit = currentRange.end.source.startTime;
+                } else {
+                    endLimit = null;
+                }
+                if (time > startLimit && (endLimit === null || time < endLimit)) {
+                    var newTimes = this._canBePlacedBetween(time, time + sourceDuration, startLimit, endLimit);
+                    if (newTimes) {
+                        if (newTimes.start) {
+                            newTimes.start = Utils.roundTime(newTimes.start);
+                        }
+                        if (newTimes.end) {
+                            newTimes.end = Utils.roundTime(newTimes.end);
+                        }
+                        source.updateTimes(newTimes.start, newTimes.end);
+                        var prevSourceId = currentRange.start ? currentRange.start.source.id : null;
                         this._moveSource(this._sources[source.id].source, prevSourceId);
-                        prevSourceId = source.id;
-                    }.bind(this));
+                        return newTimes;
+                    }
                 }
-                return {
-                    newStartTime,
-                    newEndTime
-                };
-            }
-        } while (currentRange.end);
-        return {
-            newStartTime,
-            newEndTime
-        };
+            } while (currentRange.end);
+        }
+        return null;
     };
     Line.prototype._moveSource = function (source, prevSourceId) {
         var sourceObj = this._sources[source.id];
@@ -15302,17 +15319,20 @@ module.exports = function (SourceGroup, Konva, Utils) {
         }
         this._sources[source.id] = sourceObj;
     };
-    Line.prototype.manageCollision = function (sources, newStartTime, newEndTime) {
-        var originalStartTime = newStartTime;
-        var originalEndTime = newEndTime;
+    Line.prototype.manageCollision = function (source, newTimes) {
+        var originalStartTime = null;
+        var originalEndTime = null;
+        var newStartTime = null;
+        var newEndTime = null;
         var startLimited = false;
         var endLimited = false;
-        const firstSource = sources[0];
-        const lastSource = sources[sources.length - 1];
-        if (typeof newStartTime === 'number') {
-            if (firstSource.startTime > newStartTime) {
-                if (this._sources[firstSource.id].prevSourceId) {
-                    var previousSource = this._sources[this._sources[firstSource.id].prevSourceId].source;
+        newTimes.updateTimelineLength = false;
+        if (newTimes.start !== null) {
+            originalStartTime = newTimes.start;
+            newStartTime = originalStartTime;
+            if (source.startTime > newStartTime) {
+                if (this._sources[source.id].prevSourceId) {
+                    var previousSource = this._sources[this._sources[source.id].prevSourceId].source;
                     if (newStartTime < previousSource.endTime) {
                         newStartTime = previousSource.endTime;
                         startLimited = true;
@@ -15325,10 +15345,12 @@ module.exports = function (SourceGroup, Konva, Utils) {
                 }
             }
         }
-        if (typeof newEndTime === 'number') {
-            if (lastSource.endTime < newEndTime) {
-                if (this._sources[lastSource.id].nextSourceId) {
-                    var nextSource = this._sources[this._sources[lastSource.id].nextSourceId].source;
+        if (newTimes.end !== null) {
+            originalEndTime = newTimes.end;
+            newEndTime = originalEndTime;
+            if (source.endTime < newEndTime) {
+                if (this._sources[source.id].nextSourceId) {
+                    var nextSource = this._sources[this._sources[source.id].nextSourceId].source;
                     if (newEndTime > nextSource.startTime) {
                         newEndTime = nextSource.startTime;
                         endLimited = true;
@@ -15336,7 +15358,7 @@ module.exports = function (SourceGroup, Konva, Utils) {
                 }
             }
         }
-        if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
+        if (newStartTime !== null && newEndTime !== null) {
             var timeWidth = originalEndTime - originalStartTime;
             if (startLimited) {
                 newEndTime = Utils.roundTime(newStartTime + timeWidth);
@@ -15345,28 +15367,34 @@ module.exports = function (SourceGroup, Konva, Utils) {
                 newStartTime = Utils.roundTime(newEndTime - timeWidth);
             }
         }
-        if (typeof newStartTime === 'number' && typeof newEndTime !== 'number') {
-            if (Utils.roundTime(sources[0].endTime - newStartTime) < sources[0].minSize) {
-                newStartTime = Utils.roundTime(sources[0].endTime - sources[0].minSize);
+        if (newStartTime !== null && newEndTime === null) {
+            if (Utils.roundTime(source.endTime - newStartTime) < source.minSize) {
+                newStartTime = Utils.roundTime(source.endTime - source.minSize);
             }
-        } else if (typeof newEndTime === 'number' && typeof newStartTime !== 'number') {
-            if (Utils.roundTime(newEndTime - sources[0].startTime) < sources[0].minSize) {
-                newEndTime = Utils.roundTime(sources[0].startTime + sources[0].minSize);
+        } else if (newEndTime !== null && newStartTime === null) {
+            if (Utils.roundTime(newEndTime - source.startTime) < source.minSize) {
+                newEndTime = Utils.roundTime(source.startTime + source.minSize);
             }
         } else {
-            if (Utils.roundTime(newEndTime - newStartTime) < sources[0].minSize) {
-                if (sources[0].endTime !== newEndTime) {
-                    newEndTime = Utils.roundTime(newStartTime + sources[0].minSize);
+            if (Utils.roundTime(newEndTime - newStartTime) < source.minSize) {
+                if (source.endTime !== newEndTime) {
+                    newEndTime = Utils.roundTime(newStartTime + source.minSize);
                 }
-                if (sources[0].startTime !== newStartTime) {
-                    newStartTime = Utils.roundTime(newEndTime - sources[0].minSize);
+                if (source.startTime !== newStartTime) {
+                    newStartTime = Utils.roundTime(newEndTime - source.minSize);
                 }
             }
         }
-        return {
-            newStartTime,
-            newEndTime
-        };
+        if (newStartTime !== null && newStartTime !== originalStartTime) {
+            newTimes.start = newStartTime;
+        }
+        if (newEndTime !== null && newEndTime !== originalEndTime) {
+            newTimes.end = newEndTime;
+            if (this._sources[source.id].nextSourceId === null) {
+                newTimes.updateTimelineLength = true;
+            }
+        }
+        return newTimes;
     };
     Line.prototype.getSourcesAfter = function (time) {
         const sources = [];
@@ -15385,34 +15413,6 @@ module.exports = function (SourceGroup, Konva, Utils) {
         }
         return sources;
     };
-    Line.prototype.getSourcesAround = function (time) {
-        var left = null;
-        var right = null;
-        var overlapping = null;
-        var currentId = this._firstSourceId;
-        while (currentId) {
-            var lineSource = this._sources[currentId];
-            var source = lineSource.source;
-            if (time < source.startTime) {
-                right = source;
-                break;
-            } else if (time >= source.startTime && time <= source.endTime) {
-                overlapping = source;
-                break;
-            } else {
-                left = source;
-            }
-            currentId = lineSource.nextSourceId;
-        }
-        if (overlapping) {
-            return { overlapping: overlapping };
-        } else {
-            return {
-                left: left,
-                right: right
-            };
-        }
-    };
     Line.prototype.updatePosition = function (pos) {
         for (var sourceId in this._sources) {
             if (Utils.objectHasProperty(this._sources, sourceId)) {
@@ -15431,29 +15431,26 @@ module.exports = function (SourceGroup, Konva, Utils) {
         this._group.listening(bool);
     };
     return Line;
-}(_dereq_('./source-group'), _dereq_('konva'), _dereq_('./utils'));
-},{"./source-group":105,"./utils":113,"konva":43}],93:[function(_dereq_,module,exports){
+}(_dereq_('konva'), _dereq_('./utils'));
+},{"./utils":113,"konva":43}],93:[function(_dereq_,module,exports){
 module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
     'use strict';
     function Lines(peaks, view, layer) {
         this._peaks = peaks;
         this._view = view;
         this._layer = layer;
+        this._linesBySourceId = {};
         this._linesByPosition = {};
         this._autoAddToLayer = false;
         this._areSourceInteractionsAllowed = true;
         this._areSegmentInteractionsAllowed = true;
-        this._automaticallyCreatedLineId = null;
-        this._automaticLineCreationPosition = null;
-        this._automaticLineCreationTimeout = null;
         this._segmentsGroups = {};
         this._segmentsGroupToLine = {};
         this._lineId = 0;
         this._lineIndicator = new LineIndicator(peaks, view, document.getElementById('line-indicator-container'));
         this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
+        this._peaks.on('line.add', this._onLineAdd.bind(this));
         this._peaks.on('line.remove', this._onLineRemove.bind(this));
-        this._peaks.on('sources.show', this._onSourcesWrappingChanged.bind(this));
-        this._peaks.on('sources.hide', this._onSourcesWrappingChanged.bind(this));
         this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
         this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
         this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
@@ -15497,24 +15494,33 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         this._updateLinesPosition(position);
         this._view.updateTimeline();
     };
-    Lines.prototype._onLineRemove = function (position) {
-        this._removeLine(position);
+    Lines.prototype._onLineAdd = function (position) {
+        this._createLine(position);
+        this._setInteractions(position);
         this._updateLinesPosition(position);
     };
-    Lines.prototype._onSourcesWrappingChanged = function (sources) {
-        sources.forEach(function (source) {
-            if (this._linesByPosition[source.position]) {
-                this._linesByPosition[source.position].updateLineHeight(source, 'wrappingChanged');
+    Lines.prototype._onLineRemove = function (position) {
+        var oldLine = this.removeLine(position);
+        var lineNewY = oldLine.getY();
+        this._updateLinesPosition(position, lineNewY);
+    };
+    Lines.prototype.changeLineHeight = function (from, to) {
+        for (var position in this._linesByPosition) {
+            if (Utils.objectHasProperty(this._linesByPosition, position)) {
+                if (!this._linesByPosition[position].isSegmentsLine()) {
+                    this._linesByPosition[position].changeHeight(from, to);
+                }
             }
-        }.bind(this));
+        }
     };
-    Lines.prototype.addSourceGroup = function (source, sourceGroup, position) {
+    Lines.prototype.addSourceGroup = function (sourceGroup, position) {
         if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
             this._createLine(position);
             this._setInteractions(position);
         }
-        source.position = position;
-        this._linesByPosition[position].addSourceGroup(source, sourceGroup);
+        sourceGroup.getSource().position = position;
+        this._linesByPosition[position].addSourceGroup(sourceGroup);
+        this._linesBySourceId[sourceGroup.getSource().id] = this._linesByPosition[position];
     };
     Lines.prototype.addSegments = function (lineId, position) {
         this._createLine(position);
@@ -15525,28 +15531,22 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         this._updateLinesPosition(position);
     };
     Lines.prototype.removeSourceGroup = function (source, isPermanent) {
-        if (!this._linesByPosition[source.position]) {
-            return null;
-        }
         var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, isPermanent);
         if (isPermanent) {
+            delete this._linesBySourceId[source.id];
             this._updateLinesPosition(source.position);
         }
         return sourceGroup;
     };
-    Lines.prototype._removeLine = function (pos) {
+    Lines.prototype.removeLine = function (pos) {
         var oldLine = this._linesByPosition[pos];
-        var lineId = oldLine.getId();
-        if (this._automaticallyCreatedLineId === lineId) {
-            this._automaticallyCreatedLineId = null;
-        }
         oldLine.destroy();
         delete this._linesByPosition[pos];
-        this._lineIndicator.removeIndicator(lineId, false);
+        this._lineIndicator.removeIndicator(oldLine.getId(), false);
         return oldLine;
     };
     Lines.prototype.isLineVisible = function (position) {
-        return this._linesByPosition[position] ? this._linesByPosition[position].isVisible() : false;
+        return this._linesByPosition[position].isVisible();
     };
     Lines.prototype.getVisibleLines = function () {
         var positions = {};
@@ -15576,18 +15576,14 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
     Lines.prototype.updateLines = function (position) {
         this._updateLinesPosition(position);
     };
-    Lines.prototype._updateLinesPosition = function (position) {
+    Lines.prototype._updateLinesPosition = function (position, forceNewY) {
         var line = this._linesByPosition[position];
         var dy = null;
         var newY;
-        if (line) {
-            newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
+        if (forceNewY) {
+            newY = forceNewY;
         } else {
-            var previousLine;
-            while ((previousLine === undefined || previousLine === null) && position > 0) {
-                previousLine = this._linesByPosition[--position];
-            }
-            newY = previousLine ? previousLine.getY() + previousLine.lineHeight() + this._peaks.options.interline : 0;
+            newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
         }
         for (var pos in this._linesByPosition) {
             if (Utils.objectHasProperty(this._linesByPosition, pos)) {
@@ -15603,7 +15599,7 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         this._lineIndicator.updateIndicators();
         this._lineIndicator.draw();
-        this._view.refresh();
+        this._view.drawSourcesLayer();
     };
     Lines.prototype.setOffsetY = function (frameOffset) {
         for (var position in this._linesByPosition) {
@@ -15637,83 +15633,22 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         return length;
     };
-    Lines.prototype.stopAutomaticLineCreation = function () {
-        if (this._automaticLineCreationTimeout) {
-            clearTimeout(this._automaticLineCreationTimeout);
-        }
-        this._automaticLineCreationTimeout = null;
-        this._automaticLineCreationPosition = null;
-        this._automaticallyCreatedLineId = null;
-    };
-    Lines.prototype.manageAutomaticLineCreation = function (newLinePosition, initialPosition, sources) {
-        if (this._automaticallyCreatedLineId !== null) {
-            return;
-        } else if (this._automaticLineCreationPosition !== null && this._automaticLineCreationPosition !== newLinePosition) {
-            this.stopAutomaticLineCreation();
-        }
-        if (this._automaticLineCreationTimeout) {
-            return;
-        }
-        this._automaticLineCreationPosition = newLinePosition;
-        this._automaticLineCreationTimeout = setTimeout(function () {
-            this._automaticLineCreationTimeout = null;
-            var currentLine = this._linesByPosition[initialPosition];
-            if (currentLine.countRemainingElements() === sources.length) {
-                this.stopAutomaticLineCreation();
-                return;
-            }
-            this._automaticallyCreatedLineId = this._createLine(newLinePosition);
-            this._setInteractions(newLinePosition);
-            this.moveSourcesToPosition(sources, currentLine.getPosition(), newLinePosition);
-        }.bind(this), this._peaks.options.automaticLineCreationDelay);
-    };
-    Lines.prototype.manageVerticalPosition = function (sources, startTime, endTime, mouseX, mouseY) {
-        if (mouseX === null || mouseX === undefined) {
-            return;
-        }
-        const position = sources[0].position;
-        const linePos = this.getLinesUnderY(mouseY);
-        if (linePos[0] !== linePos[1]) {
-            this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
-        } else {
-            this.stopAutomaticLineCreation();
-            if (mouseX !== null && mouseX !== undefined && linePos[0] !== position && !this._linesByPosition[linePos[0]].isSegmentsLine()) {
-                var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
-                var sourceDuration = Utils.roundTime(endTime - startTime);
-                if (this._hasSpaceForSourceAt(linePos[0], mouseTime, sourceDuration)) {
-                    this.moveSourcesToPosition(sources, position, linePos[0]);
-                }
+    Lines.prototype.manageVerticalPosition = function (source, newY) {
+        if (newY !== null && newY !== undefined) {
+            var pos = this.getLineOnPosition(newY);
+            if (pos[0] === pos[1] && pos[0] !== source.position && !this._linesByPosition[pos[0]].isSegmentsLine()) {
+                this.moveSourceToPosition(source, pos[0]);
             }
         }
     };
-    Lines.prototype._hasSpaceForSourceAt = function (linePosition, mouseTime, sourceDuration) {
-        var line = this._linesByPosition[linePosition];
-        if (!line || line.isSegmentsLine()) {
-            return false;
-        }
-        var sourcesAround = line.getSourcesAround(mouseTime);
-        if (sourcesAround.overlapping) {
-            return false;
-        } else if (!sourcesAround.right) {
-            return true;
-        } else {
-            var leftLimit = sourcesAround.left ? sourcesAround.left.endTime : 0;
-            var rightLimit = sourcesAround.right.startTime;
-            return sourceDuration <= Utils.roundTime(rightLimit - leftLimit);
-        }
-    };
     Lines.prototype.getLineByPosition = function (pos) {
         return this._linesByPosition[pos];
     };
-    Lines.prototype.getLastPosition = function () {
-        var keys = Object.keys(this._linesByPosition);
-        return keys.pop();
-    };
-    Lines.prototype.getLinesUnderY = function (y) {
+    Lines.prototype.getLineOnPosition = function (y) {
         var height;
         var pos = [
             -1,
-            this.getLastPosition() + 1
+            Number.MAX_VALUE
         ];
         for (var position in this._linesByPosition) {
             if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -15728,15 +15663,12 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         return pos;
     };
-    Lines.prototype.moveSourcesToPosition = function (sources, initialPosition, targetPosition) {
-        sources.forEach(function (source) {
-            var sourceGroup = this._linesByPosition[initialPosition].removeSourceGroup(source, true);
-            if (sourceGroup) {
-                sourceGroup.moveTo(this._linesByPosition[targetPosition].getKonvaGroup());
-            }
-            this.addSourceGroup(source, sourceGroup, targetPosition);
-        }.bind(this));
-        this._updateLinesPosition(initialPosition);
+    Lines.prototype.moveSourceToPosition = function (source, pos) {
+        var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, true);
+        delete this._linesBySourceId[source.id];
+        sourceGroup.moveTo(this._linesByPosition[pos].getKonvaGroup());
+        this._updateLinesPosition(source.position);
+        this.addSourceGroup(sourceGroup, pos);
     };
     Lines.prototype._getNextLineId = function () {
         this._lineId++;
@@ -15752,13 +15684,9 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
                 if (currentPos < position) {
                     y += this._linesByPosition[pos].lineHeight() + this._peaks.options.interline;
                 } else {
-                    if (Utils.objectHasProperty(this._linesByPosition, position)) {
-                        var newPosition = currentPos + 1;
-                        this._linesByPosition[currentPos].updatePosition(newPosition);
-                        newLinesByPosition[newPosition] = this._linesByPosition[currentPos];
-                        if (!this._linesByPosition[newPosition]) {
-                            break;
-                        }
+                    if (this._linesByPosition[position]) {
+                        this._linesByPosition[currentPos].updatePosition(currentPos + 1);
+                        newLinesByPosition[currentPos + 1] = this._linesByPosition[currentPos];
                     }
                 }
             }
@@ -15770,7 +15698,6 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         newLinesByPosition[position] = line;
         this._linesByPosition = newLinesByPosition;
-        return line.getId();
     };
     Lines.prototype.updateSegments = function (frameStartTime, frameEndTime) {
         for (var lineId in this._segmentsGroups) {
@@ -15779,11 +15706,11 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
             }
         }
     };
-    Lines.prototype.manageCollision = function (sources, newStartTime, newEndTime) {
-        return this._linesByPosition[sources[0].position].manageCollision(sources, newStartTime, newEndTime);
+    Lines.prototype.manageCollision = function (source, newTimes) {
+        return this._linesBySourceId[source.id].manageCollision(source, newTimes);
     };
-    Lines.prototype.manageOrder = function (sources, startTime, endTime) {
-        return this._linesByPosition[sources[0].position].manageOrder(sources, startTime, endTime);
+    Lines.prototype.manageSourceOrder = function (source, newTimes) {
+        return this._linesBySourceId[source.id].manageSourceOrder(source, newTimes);
     };
     Lines.prototype._setInteractions = function (position) {
         var line = this._linesByPosition[position];
@@ -15936,8 +15863,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             autoScrollThreshold: 0.05,
             minSourceSize: 0.05,
             minSegmentSize: 0.2,
-            canMoveSourcesBetweenLines: true,
-            automaticLineCreationDelay: 100
+            canMoveSourcesBetweenLines: true
         };
         this.logger = console.error.bind(console);
         return this;
@@ -16115,6 +16041,11 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype._removeWindowResizeHandler = function () {
         window.removeEventListener('resize', this._onResize);
     };
+    Peaks.prototype.setLineHeight = function (newLineHeight) {
+        var oldHeight = this.options.lineHeight;
+        this.options.lineHeight = newLineHeight;
+        this.emit('options.set.line_height', oldHeight);
+    };
     Peaks.prototype.zoomIn = function () {
         this.view.setZoom(this.view.getTimeToPixelsScale() + Math.floor(this.view.getTimeToPixelsScale() / 10) + 1);
     };
@@ -17640,9 +17571,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
     SegmentsGroup.prototype.isEmpty = function () {
         return Object.keys(this._segments).length === 0;
     };
-    SegmentsGroup.prototype.countRemainingElements = function () {
-        return Object.keys(this._segments).length;
-    };
     SegmentsGroup.prototype.addToGroup = function (group) {
         group.add(this._group);
     };
@@ -18148,12 +18076,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         this._indicators = {};
         var self = this;
         this._x = this._view.timeToPixels(source.startTime);
+        this._roundedX = Math.round(this._x);
         this._width = this._view.timeToPixels(source.endTime - source.startTime);
-        var heights = SourceGroup.getHeights(source, peaks);
-        this._unwrappedHeight = heights.unwrapped;
-        this._wrappedHeight = heights.wrapped;
-        this._height = heights.current;
+        this._roundedWidth = Math.round(this._width);
+        this._unwrappedHeight = source.binaryHeight && source.previewHeight ? source.binaryHeight + source.previewHeight : this._peaks.options.lineHeight;
+        this._wrappedHeight = this._peaks.options.wrappedLineHeight;
         this._borderWidth = this._source.borderWidth || 0;
+        this._height = this._unwrappedHeight;
         this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
         this._selected = this._source.selected;
         this._isDragged = false;
@@ -18174,12 +18103,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         this._group.on('dragend', this._onDragEnd.bind(this));
         this._cursor = null;
         this._group.on('mouseenter', function () {
+            self._hovered = true;
             self._view.setHoveredElement(self);
             if (!self._source.loading) {
                 self._showButtons();
             }
         });
         this._group.on('mouseleave', function () {
+            self._hovered = false;
             self._view.setHoveredElement(null);
             self._hideButtons();
         });
@@ -18246,10 +18177,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
         const {start, end} = this._initialTimes;
         this._view.updateWithAutoScroll(function () {
-            if (this._layer.manageSourceMovements([this._source], leftHandle ? start + diff + timeOffsetDiff : null, leftHandle ? null : end + diff + timeOffsetDiff)) {
+            if (this._layer.updateSource(this._source, leftHandle ? start + diff + timeOffsetDiff : null, leftHandle ? null : end + diff + timeOffsetDiff)) {
                 this._layer.draw();
             }
         }.bind(this));
+        this._view.setTimelineLength(this._view.timeToPixels(this._source.endTime) + this._view.getWidth());
         return {
             x: draggedElement.absolutePosition().x,
             y: draggedElement.absolutePosition().y
@@ -18262,9 +18194,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
         this._group.x(startPixel - frameOffset);
         this._x = startPixel;
+        this._roundedX = Math.round(this._x);
         const newWidth = endPixel - startPixel;
         if (newWidth !== this._width) {
             this._width = newWidth;
+            this._roundedWidth = Math.round(this._width);
             if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
                 this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
                 this._updateMarkers();
@@ -18315,11 +18249,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
             start: this._source.startTime,
             end: this._source.endTime
         };
-        this._isDragged = true;
         this._hideButtons();
     };
     SourceGroup.prototype._onHandleDragEnd = function () {
-        this._isDragged = false;
         this._showButtons();
     };
     SourceGroup.prototype._addHandles = function (forceCreate) {
@@ -18401,46 +18333,52 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
     };
     SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth, fill) {
         var offset = addBorderWidth ? this._borderWidth : 0;
-        var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? 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 radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : Math.max(1, Math.min(this._roundedWidth / 2, Math.min(CORNER_RADIUS, this._height / 2)));
+        var x = Math.max(0, this._view.getFrameOffset() - this._roundedX - radius);
+        var width = Math.min(this._roundedWidth - x, this._view.getWidth() + radius - Math.max(0, this._roundedX - this._view.getFrameOffset()));
         var xWidth = x + width;
-        if (width > 0) {
-            ctx.beginPath();
-            ctx.moveTo(x + radius, offset);
-            ctx.lineTo(xWidth - radius, offset);
-            ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
-            ctx.lineTo(xWidth - offset, this._height - radius);
-            ctx.quadraticCurveTo(xWidth - offset, this._height - offset, xWidth - radius, this._height - offset);
-            ctx.lineTo(x + radius, this._height - offset);
-            ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
-            ctx.lineTo(x + offset, radius);
-            ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
-            ctx.closePath();
-            if (fill) {
-                if (this._source.shouldShowWarning()) {
-                    var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
-                    if (this._source.mediaEndTime < this._source.duration) {
-                        var rightStopPosition = Math.max(1 - this._source.warningWidth / this._width, 0.5);
-                        gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
-                        gradient.addColorStop(1, this._source.warningColor);
-                    }
-                    if (this._source.mediaStartTime > 0) {
-                        var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
-                        gradient.addColorStop(0, this._source.warningColor);
-                        gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
-                    }
-                    ctx.fillStyle = gradient;
-                    ctx.fill();
-                } else {
-                    ctx.fillStyle = this._source.backgroundColor;
-                    ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(x + radius, offset);
+        ctx.lineTo(xWidth - radius, offset);
+        ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
+        ctx.lineTo(xWidth - offset, this._height - radius);
+        ctx.quadraticCurveTo(xWidth - offset, this._height - offset, xWidth - radius, this._height - offset);
+        ctx.lineTo(x + radius, this._height - offset);
+        ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
+        ctx.lineTo(x + offset, radius);
+        ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
+        ctx.closePath();
+        if (fill) {
+            var backgroundColor;
+            if (this._selected) {
+                backgroundColor = this._source.selectedBackgroundColor;
+            } else if (this._hovered) {
+                backgroundColor = this._source.hoverBackgroundColor;
+            } else {
+                backgroundColor = this._source.backgroundColor;
+            }
+            if (this._source.shouldShowWarning()) {
+                var gradient = ctx.createLinearGradient(0, 0, this._roundedWidth, 0);
+                if (this._source.mediaEndTime < this._source.duration) {
+                    var rightStopPosition = Math.max(1 - this._source.warningWidth / this._roundedWidth, 0.5);
+                    gradient.addColorStop(rightStopPosition, backgroundColor);
+                    gradient.addColorStop(1, this._source.warningColor);
                 }
-            }
-            if (shape) {
-                ctx.fillStrokeShape(shape);
+                if (this._source.mediaStartTime > 0) {
+                    var leftStopPosition = Math.min(this._source.warningWidth / this._roundedWidth, 0.5);
+                    gradient.addColorStop(0, this._source.warningColor);
+                    gradient.addColorStop(leftStopPosition, backgroundColor);
+                }
+                ctx.fillStyle = gradient;
+                ctx.fill();
+            } else {
+                ctx.fillStyle = backgroundColor;
+                ctx.fill();
             }
         }
+        if (shape) {
+            ctx.fillStrokeShape(shape);
+        }
     };
     SourceGroup.prototype._addUnwrap = function (forceCreate) {
         if (!this._unwrap || forceCreate) {
@@ -18774,7 +18712,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         this._selected = this._source.selected;
         if (this._border) {
             if (this._selected) {
-                this._border.fill(this._source.selectedColor);
+                this._border.fill(this._source.selectedBorderColor);
                 this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
             } else {
                 this._border.fill(this._source.borderColor);
@@ -18787,7 +18725,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
                 })[0];
                 if (unwrap_background) {
                     if (this._selected) {
-                        unwrap_background.stroke(this._source.selectedColor);
+                        unwrap_background.stroke(this._source.selectedBorderColor);
                         unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
                         unwrap_background.strokeWidth(0);
@@ -18800,7 +18738,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
                 })[0];
                 if (wrap_background) {
                     if (this._selected) {
-                        wrap_background.stroke(this._source.selectedColor);
+                        wrap_background.stroke(this._source.selectedBorderColor);
                         wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
                         wrap_background.strokeWidth(0);
@@ -18953,13 +18891,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
     SourceGroup.prototype.getCurrentHeight = function () {
         return this._height;
     };
-    SourceGroup.prototype.getHeights = function () {
-        return {
-            unwrapped: this._unwrappedHeight,
-            wrapped: this._wrappedHeight,
-            current: this._height
-        };
-    };
     SourceGroup.prototype.setVisible = function (boolean) {
         this._group.visible(boolean);
     };
@@ -19342,16 +19273,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         }
         this._group.destroy();
     };
-    SourceGroup.getHeights = function (source, peaks) {
-        var unwrappedHeight = source.binaryHeight && source.previewHeight ? source.binaryHeight + source.previewHeight : peaks.options.lineHeight;
-        var wrappedHeight = peaks.options.wrappedLineHeight;
-        var height = source.wrapped ? wrappedHeight : unwrappedHeight;
-        return {
-            unwrapped: unwrappedHeight,
-            wrapped: wrappedHeight,
-            current: height
-        };
-    };
     return SourceGroup;
 }(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./utils'), _dereq_('./loader'), _dereq_('konva'));
 },{"./loader":94,"./utils":113,"./waveform-builder":114,"./waveform-shape":115,"konva":43}],106:[function(_dereq_,module,exports){
@@ -19434,13 +19355,23 @@ module.exports = function (Utils) {
         if (!Utils.isValidColor(options.backgroundColor)) {
             throw new TypeError('peaks.sources.' + context + ': backgroundColor should be a valid CSS color');
         }
+        if (Utils.isNullOrUndefined(options.selectedBackgroundColor)) {
+            options.selectedBackgroundColor = options.backgroundColor;
+        } else if (!Utils.isValidColor(options.selectedBackgroundColor)) {
+            throw new TypeError('peaks.sources.' + context + ': selectedBackgroundColor should be a valid CSS color');
+        }
+        if (Utils.isNullOrUndefined(options.hoverBackgroundColor)) {
+            options.hoverBackgroundColor = Utils.shadeColor(options.backgroundColor, 30);
+        } else if (!Utils.isValidColor(options.hoverBackgroundColor)) {
+            throw new TypeError('peaks.sources.' + context + ': hoverBackgroundColor should be a valid CSS color');
+        }
         if (!Utils.isValidColor(options.borderColor)) {
             options.borderColor = options.color;
         }
-        if (Utils.isNullOrUndefined(options.selectedColor)) {
-            options.selectedColor = null;
-        } else if (!Utils.isValidColor(options.selectedColor)) {
-            throw new TypeError('peaks.sources.' + context + ': selectedColor should be a valid CSS color');
+        if (Utils.isNullOrUndefined(options.selectedBorderColor)) {
+            options.selectedBorderColor = Utils.shadeColor(options.borderColor, 30);
+        } else if (!Utils.isValidColor(options.selectedBorderColor)) {
+            throw new TypeError('peaks.sources.' + context + ': selectedBorderColor should be a valid CSS color');
         }
         if (Utils.isNullOrUndefined(options.warningColor)) {
             options.warningColor = null;
@@ -19592,7 +19523,7 @@ module.exports = function (Utils) {
             throw new TypeError('peaks.sources.' + context + ': loading must be a boolean');
         }
     }
-    function Source(peaks, id, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor, markerWidth, volume, volumeRange, loading, ...customParams) {
+    function Source(peaks, id, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, hoverBackgroundColor, selectedBackgroundColor, borderColor, selectedBorderColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor, markerWidth, volume, volumeRange, loading, ...customParams) {
         var opts = {
             title: title,
             titleAlignments: titleAlignments,
@@ -19608,8 +19539,10 @@ module.exports = function (Utils) {
             mediaEndTime: mediaEndTime,
             color: color,
             backgroundColor: backgroundColor,
+            hoverBackgroundColor: hoverBackgroundColor,
+            selectedBackgroundColor: selectedBackgroundColor,
             borderColor: borderColor,
-            selectedColor: selectedColor,
+            selectedBorderColor: selectedBorderColor,
             warningColor: warningColor,
             warningWidth: warningWidth,
             textFont: textFont,
@@ -19661,8 +19594,10 @@ module.exports = function (Utils) {
         this._mediaEndTime = opts.mediaEndTime;
         this._color = opts.color;
         this._backgroundColor = opts.backgroundColor;
+        this._hoverBackgroundColor = opts.hoverBackgroundColor;
+        this._selectedBackgroundColor = opts.selectedBackgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._selectedBorderColor = opts.selectedBorderColor;
         this._warningColor = opts.warningColor;
         this._warningWidth = opts.warningWidth;
         this._volumeSliderColor = opts.volumeSliderColor;
@@ -19828,6 +19763,24 @@ module.exports = function (Utils) {
                 this._backgroundColor = backgroundColor;
             }
         },
+        hoverBackgroundColor: {
+            enumerable: true,
+            get: function () {
+                return this._hoverBackgroundColor;
+            },
+            set: function (hoverBackgroundColor) {
+                this._hoverBackgroundColor = hoverBackgroundColor;
+            }
+        },
+        selectedBackgroundColor: {
+            enumerable: true,
+            get: function () {
+                return this._selectedBackgroundColor;
+            },
+            set: function (selectedBackgroundColor) {
+                this._selectedBackgroundColor = selectedBackgroundColor;
+            }
+        },
         borderColor: {
             enumerable: true,
             get: function () {
@@ -19837,13 +19790,13 @@ module.exports = function (Utils) {
                 this._borderColor = borderColor;
             }
         },
-        selectedColor: {
+        selectedBorderColor: {
             enumerable: true,
             get: function () {
-                return this._selectedColor;
+                return this._selectedBorderColor;
             },
-            set: function (selectedColor) {
-                this._selectedColor = selectedColor;
+            set: function (selectedBorderColor) {
+                this._selectedBorderColor = selectedBorderColor;
             }
         },
         warningColor: {
@@ -20202,8 +20155,10 @@ module.exports = function (Utils) {
             mediaEndTime: this.mediaEndTime,
             color: this.color,
             backgroundColor: this.backgroundColor,
+            hoverBackgroundColor: this.hoverBackgroundColor,
+            selectedBackgroundColor: this.selectedBackgroundColor,
             borderColor: this.borderColor,
-            selectedColor: this.selectedColor,
+            selectedBorderColor: this.selectedBorderColor,
             warningColor: this.warningColor,
             warningWidth: this.warningWidth,
             volumeSliderColor: this.volumeSliderColor,
@@ -20252,8 +20207,10 @@ module.exports = function (Utils) {
         this._mediaEndTime = opts.mediaEndTime;
         this._color = opts.color;
         this._backgroundColor = opts.backgroundColor;
+        this._hoverBackgroundColor = opts.hoverBackgroundColor;
+        this._selectedBackgroundColor = opts.selectedBackgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._selectedBorderColor = opts.selectedBorderColor;
         this._warningColor = opts.warningColor;
         this._warningWidth = opts.warningWidth;
         this._volumeSliderColor = opts.volumeSliderColor;
@@ -20357,7 +20314,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
         this._peaks.on('source.update', this._onSourceUpdate.bind(this));
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
+        this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
         this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
+        this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
         this._peaks.on('source.setIndicators', this.setIndicators.bind(this));
     }
     SourcesLayer.prototype.fitToView = function () {
@@ -20384,10 +20343,24 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.isEditingEnabled = function () {
         return this._allowEditing;
     };
-    SourcesLayer.prototype.refresh = function () {
-        var frameOffset = this._view.getFrameOffset();
-        var width = this._view.getWidth();
-        this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
+    SourcesLayer.prototype._onOptionsLineHeightChange = function (oldHeight) {
+        var positions = [];
+        for (var sourceId in this._sourcesGroup) {
+            if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+                var source = this._sourcesGroup[sourceId].getSource();
+                if (!positions.includes(source.position)) {
+                    this._lines.changeLineHeight(oldHeight, this._peaks.options.lineHeight);
+                    positions.push(source.position);
+                }
+                this._removeSource(source);
+                this._addSourceGroup(source);
+            }
+        }
+        if (positions) {
+            var frameOffset = this._view.getFrameOffset();
+            var width = this._view.getWidth();
+            this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
+        }
     };
     SourcesLayer.prototype._onSourceUpdate = function (source) {
         var redraw = false;
@@ -20417,6 +20390,13 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         }.bind(this));
         this.draw();
     };
+    SourcesLayer.prototype._onSourcesShow = function (sources) {
+        var self = this;
+        sources.forEach(function (source) {
+            self._sourcesGroup[source.id].setWrapping(false, true);
+        });
+        this._layer.draw();
+    };
     SourcesLayer.prototype._onSourcesAdd = function (sources) {
         var self = this;
         var frameOffset = self._view.getFrameOffset();
@@ -20475,6 +20455,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             }
         }
     };
+    SourcesLayer.prototype._onSourcesRefresh = function () {
+        this._layer.draw();
+    };
     SourcesLayer.prototype._onSegmentsShow = function (lineId, position) {
         this._lines.addSegments(lineId, position);
         this._view.updateTimelineLength();
@@ -20486,7 +20469,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype._addSourceGroup = function (source, startDataRetrieval = true) {
         var sourceGroup = this._createSourceGroup(source);
         this._sourcesGroup[source.id] = sourceGroup;
-        this._lines.addSourceGroup(source, sourceGroup, source.position);
+        this._lines.addSourceGroup(sourceGroup, source.position);
         if (startDataRetrieval) {
             this._dataRetriever.retrieveData(source);
         }
@@ -20513,28 +20496,20 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.onSourcesGroupDragStart = function (element) {
         this._initialTimeOffset = this._view.getTimeOffset();
         this._mouseDownX = this._view.getPointerPosition().x;
+        this._activeElements = {};
         const draggedElementId = element.currentTarget.attrs.sourceId;
-        var selectedElements = this._view.getSelectedElements();
-        const shouldDragSelectedElements = Object.keys(selectedElements).includes(draggedElementId);
-        if (shouldDragSelectedElements) {
-            this._draggedElements = Object.values(selectedElements).sort((a, b) => a.startTime - b.startTime);
-        } else {
-            this._draggedElements = [this._sourcesGroup[draggedElementId].getSource()];
-            this._view.deselectAll();
-        }
-        this._draggedElementsData = this._draggedElements.reduce(function (bounds, source) {
-            bounds.initialStartTime = Math.min(source.startTime, bounds.initialStartTime);
-            bounds.initialEndTime = Math.max(source.endTime, bounds.initialEndTime);
-            bounds.orderable = source.orderable && bounds.orderable;
-            return bounds;
-        }, {
-            initialStartTime: Infinity,
-            initialEndTime: -Infinity,
-            orderable: true
-        });
+        const shouldDragSelectedElements = Object.keys(this._view.getSelectedElements()).includes(draggedElementId);
+        this._nonSelectedElement = shouldDragSelectedElements ? null : [this._sourcesGroup[draggedElementId].getSource()];
+        this._isDraggable = true;
+        (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function (source) {
+            if (!source.draggable) {
+                this._isDraggable = false;
+                return;
+            }
+        }.bind(this));
     };
     SourcesLayer.prototype.onSourcesGroupDragEnd = function () {
-        const updatedSources = this._draggedElements.map(function (source) {
+        const updatedSources = (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).map(function (source) {
             const sourceGroup = this._sourcesGroup[source.id];
             if (sourceGroup) {
                 sourceGroup.prepareDragEnd();
@@ -20543,6 +20518,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         }.bind(this));
         this._view.drawSourcesLayer();
         this._view.updateTimelineLength();
+        this._activeElements = {};
         this._peaks.emit('sources.updated', updatedSources);
     };
     SourcesLayer.prototype.onSourcesGroupDrag = function (draggedElement) {
@@ -20554,15 +20530,28 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     };
     SourcesLayer.prototype._dragSourcesGroup = function () {
         var mousePos = Math.min(this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(), Math.max(0, this._view.getPointerPosition().x));
-        const timeDiff = this._view.pixelsToTime(mousePos - this._mouseDownX);
+        const diff = this._view.pixelsToTime(mousePos - this._mouseDownX);
         const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
-        const mousePosX = this._view.getPointerPosition().x;
         const mousePosY = this._view.getPointerPosition().y;
-        const {initialStartTime, initialEndTime, orderable} = this._draggedElementsData;
-        const shouldRedraw = this.manageSourceMovements(this._draggedElements, initialStartTime + timeOffsetDiff + timeDiff, initialEndTime + timeOffsetDiff + timeDiff, orderable, mousePosX, mousePosY);
+        var newEnd = 0;
+        var shouldRedraw = false;
+        (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function (source) {
+            if (!this._activeElements[source.id]) {
+                this._activeElements[source.id] = {
+                    initialStartTime: source.startTime,
+                    initialEndTime: source.endTime
+                };
+            }
+            const {initialStartTime, initialEndTime} = this._activeElements[source.id];
+            newEnd = Math.max(newEnd, source.endTime);
+            if (this._isDraggable) {
+                shouldRedraw = this.updateSource(source, initialStartTime + diff + timeOffsetDiff, initialEndTime + diff + timeOffsetDiff, mousePosY) || shouldRedraw;
+            }
+        }.bind(this));
         if (shouldRedraw) {
             this.draw();
         }
+        this._view.setTimelineLength(this._view.timeToPixels(newEnd) + this._view.getWidth());
     };
     SourcesLayer.prototype.findSources = function (startTime, endTime) {
         var sources = this._peaks.sources.find(startTime, endTime);
@@ -20571,41 +20560,31 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             return positions[source.position];
         });
     };
-    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));
-                });
-            }
-        }
-        this.refresh();
-    };
-    SourcesLayer.prototype.manageSourceMovements = function (sources, newStartTime, newEndTime, orderable, mouseX, mouseY) {
-        newStartTime = typeof newStartTime === 'number' ? Utils.roundTime(newStartTime) : newStartTime;
-        newEndTime = typeof newEndTime === 'number' ? Utils.roundTime(newEndTime) : newEndTime;
-        if (this._peaks.options.canMoveSourcesBetweenLines && typeof mouseY === 'number') {
-            this.manageVerticalPosition(sources, newStartTime, newEndTime, mouseX, mouseY);
-        }
-        if (orderable) {
-            ({newStartTime, newEndTime} = this.manageOrder(sources, newStartTime, newEndTime));
+    SourcesLayer.prototype.updateSource = function (source, startTime, endTime, newY) {
+        var newTimes = {
+            start: startTime,
+            end: endTime
+        };
+        if (this._peaks.options.canMoveSourcesBetweenLines) {
+            this.manageVerticalPosition(source, newY);
+        }
+        newTimes = this.manageSourceOrder(source, newTimes);
+        newTimes = this.manageCollision(source, newTimes);
+        source.updateTimes(newTimes.start, newTimes.end);
+        if (newTimes) {
+            this._updateSource(source);
+            return true;
         }
-        ({newStartTime, newEndTime} = this.manageCollision(sources, newStartTime, newEndTime));
-        this._applyTimeChangesToSources(sources, sources[0].startTime, newStartTime, newEndTime);
-        this._view.setTimelineLength(this._view.timeToPixels(sources[sources.length - 1].endTime) + this._view.getWidth());
-        return true;
+        return false;
     };
-    SourcesLayer.prototype.manageVerticalPosition = function (sources, startTime, endTime, mouseX, mouseY) {
-        return this._lines.manageVerticalPosition(sources, startTime, endTime, mouseX, mouseY);
+    SourcesLayer.prototype.manageVerticalPosition = function (source, newY) {
+        return this._lines.manageVerticalPosition(source, newY);
     };
-    SourcesLayer.prototype.manageOrder = function (sources, startTime, endTime) {
-        return this._lines.manageOrder(sources, startTime, endTime);
+    SourcesLayer.prototype.manageSourceOrder = function (source, newTimes) {
+        return this._lines.manageSourceOrder(source, newTimes);
     };
-    SourcesLayer.prototype.manageCollision = function (sources, newStartTime, newEndTime) {
-        return this._lines.manageCollision(sources, newStartTime, newEndTime);
+    SourcesLayer.prototype.manageCollision = function (source, newTimes) {
+        return this._lines.manageCollision(source, newTimes);
     };
     SourcesLayer.prototype._updateSource = function (source) {
         var sourceGroup = this._findOrAddSourceGroup(source);
@@ -20739,7 +20718,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.off('sources.hide', this._onSourcesHide);
         this._peaks.off('source.update', this._onSourceUpdate);
         this._peaks.off('data.retrieved', this._onDataRetrieved);
+        this._peaks.off('sources.refresh', this._onSourcesRefresh);
         this._peaks.off('segments.show', this._onSegmentsShow);
+        this._peaks.off('options.set.line_height', this._onOptionsLineHeightChange);
         this._peaks.off('source.setIndicators', this.setIndicators);
     };
     SourcesLayer.prototype.getHeight = function () {
@@ -21129,8 +21110,10 @@ module.exports = function (Source, Utils) {
             mediaEndTime: originalMediaEndTime,
             color: sourceToCut.color,
             backgroundColor: sourceToCut.backgroundColor,
+            hoverBackgroundColor: sourceToCut.hoverBackgroundColor,
+            selectedBackgroundColor: sourceToCut.selectedBackgroundColor,
             borderColor: sourceToCut.borderColor,
-            selectedColor: sourceToCut.selectedColor,
+            selectedBorderColor: sourceToCut.selectedBorderColor,
             warningColor: sourceToCut.warningColor,
             warningWidth: sourceToCut.warningWidth,
             volumeSliderColor: sourceToCut.volumeSliderColor,
@@ -21190,7 +21173,7 @@ module.exports = function (Source, Utils) {
                 customParams.push(key, value);
             }
         });
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.titleAlignments, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.buttons, options.markerColor, options.markerWidth, options.volume, options.volumeRange, options.loading, ...customParams);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.titleAlignments, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.hoverBackgroundColor, options.selectedBackgroundColor, options.borderColor, options.selectedBorderColor, options.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.buttons, options.markerColor, options.markerWidth, options.volume, options.volumeRange, options.loading, ...customParams);
         return source;
     };
     TimelineSources.prototype.getSources = function () {
@@ -21296,16 +21279,10 @@ module.exports = function (Source, Utils) {
         }, shouldBlockEvent);
     };
     TimelineSources.prototype.showById = function (sourceId) {
-        if (this._sourcesById[sourceId].wrapped === false) {
-            return;
-        }
         this._sourcesById[sourceId].wrapped = false;
         this._peaks.emit('sources.show', [this._sourcesById[sourceId]]);
     };
     TimelineSources.prototype.hideById = function (sourceId) {
-        if (this._sourcesById[sourceId].wrapped === true) {
-            return;
-        }
         this._sourcesById[sourceId].wrapped = true;
         this._peaks.emit('sources.hide', [this._sourcesById[sourceId]]);
     };
@@ -21580,9 +21557,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     TimelineZoomView.prototype.drawSourcesLayer = function () {
         this._sourcesLayer.draw();
     };
-    TimelineZoomView.prototype.refresh = function () {
-        this._sourcesLayer.refresh();
-    };
     TimelineZoomView.prototype.getSegmentsGroup = function () {
         return this._sourcesLayer.getSegmentsGroup();
     };