@checksub_team/peaks_timeline 1.15.8-alpha.0 → 1.16.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.15.8-alpha.0",
+  "version": "1.16.0-alpha.0",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -14446,7 +14446,7 @@ module.exports = function (Data) {
         var data = new Data();
         this._data[url] = data;
         this._waitingForData[url] = [source];
-        this._fetch(url, data, 1000, 10);
+        this._fetch(url, data, 2000, 3);
     };
     DataRetriever.prototype._fetch = function (url, data, delay, limit) {
         var self = this;
@@ -14459,12 +14459,15 @@ module.exports = function (Data) {
             if (timesTried >= limit) {
                 return Promise.reject(err);
             }
-            return fetch(url).catch(function (err) {
-                later(delay).then(function () {
-                    recur(timesTried + 1, err);
-                });
-            }).then(function (response) {
+            return fetch(url).then(function (response) {
+                if (!response.ok) {
+                    throw new Error('HTTP ' + response.status + ': ' + response.statusText);
+                }
                 return response.blob();
+            }).catch(function (err) {
+                return later(delay).then(function () {
+                    return recur(timesTried + 1, err);
+                });
             }).then(function (blob) {
                 var type = blob.type;
                 if (type) {
@@ -15179,16 +15182,23 @@ module.exports = function (Konva, Utils) {
         var sourceGroup = this._sourcesGroup[source.id];
         delete this._sourcesGroup[source.id];
         if (isPermanent) {
-            if (this._sources[source.id].prevSourceId) {
-                this._sources[this._sources[source.id].prevSourceId].nextSourceId = this._sources[source.id].nextSourceId;
+            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 (this._sources[source.id].nextSourceId) {
-                this._sources[this._sources[source.id].nextSourceId].prevSourceId = this._sources[source.id].prevSourceId;
+            if (sourceData.prevSourceId) {
+                this._sources[sourceData.prevSourceId].nextSourceId = sourceData.nextSourceId;
+            }
+            if (sourceData.nextSourceId) {
+                this._sources[sourceData.nextSourceId].prevSourceId = sourceData.prevSourceId;
             }
             if (this._firstSourceId === source.id) {
-                this._firstSourceId = this._sources[source.id].nextSourceId;
+                this._firstSourceId = sourceData.nextSourceId;
             }
-            delete this._sources[source.id];
             this.updateLineHeight(sourceGroup, 'remove');
         }
         return sourceGroup;
@@ -15410,6 +15420,34 @@ module.exports = function (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)) {
@@ -15436,11 +15474,13 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         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;
@@ -15497,9 +15537,8 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         this._updateLinesPosition(position);
     };
     Lines.prototype._onLineRemove = function (position) {
-        var oldLine = this.removeLine(position);
-        var lineNewY = oldLine.getY();
-        this._updateLinesPosition(position, lineNewY);
+        this.removeLine(position);
+        this._updateLinesPosition(position);
     };
     Lines.prototype.changeLineHeight = function (from, to) {
         for (var position in this._linesByPosition) {
@@ -15517,7 +15556,6 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         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);
@@ -15528,22 +15566,28 @@ 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) {
         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(oldLine.getId(), false);
+        this._lineIndicator.removeIndicator(lineId, false);
         return oldLine;
     };
     Lines.prototype.isLineVisible = function (position) {
-        return this._linesByPosition[position].isVisible();
+        return this._linesByPosition[position] ? this._linesByPosition[position].isVisible() : false;
     };
     Lines.prototype.getVisibleLines = function () {
         var positions = {};
@@ -15573,14 +15617,18 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
     Lines.prototype.updateLines = function (position) {
         this._updateLinesPosition(position);
     };
-    Lines.prototype._updateLinesPosition = function (position, forceNewY) {
+    Lines.prototype._updateLinesPosition = function (position) {
         var line = this._linesByPosition[position];
         var dy = null;
         var newY;
-        if (forceNewY) {
-            newY = forceNewY;
-        } else {
+        if (line) {
             newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
+        } 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;
         }
         for (var pos in this._linesByPosition) {
             if (Utils.objectHasProperty(this._linesByPosition, pos)) {
@@ -15596,7 +15644,7 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         this._lineIndicator.updateIndicators();
         this._lineIndicator.draw();
-        this._view.drawSourcesLayer();
+        this._view.refresh();
     };
     Lines.prototype.setOffsetY = function (frameOffset) {
         for (var position in this._linesByPosition) {
@@ -15630,22 +15678,75 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         return length;
     };
-    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.stopAutomaticLineCreation = function () {
+        if (this._automaticLineCreationTimeout) {
+            clearTimeout(this._automaticLineCreationTimeout);
+        }
+        this._automaticLineCreationTimeout = null;
+        this._automaticLineCreationPosition = null;
+        this._automaticallyCreatedLineId = null;
+    };
+    Lines.prototype.manageAutomaticLineCreation = function (pos, source) {
+        if (this._automaticallyCreatedLineId !== null) {
+            return;
+        } else if (this._automaticLineCreationPosition !== null && this._automaticLineCreationPosition !== pos) {
+            this.stopAutomaticLineCreation();
+        } else if (this._automaticLineCreationTimeout) {
+            return;
+        }
+        this._automaticLineCreationPosition = pos;
+        this._automaticLineCreationTimeout = setTimeout(function () {
+            this._automaticLineCreationTimeout = null;
+            this._automaticallyCreatedLineId = this._createLine(pos);
+            this._setInteractions(pos);
+            this.moveSourceToPosition(source, pos);
+        }.bind(this), this._peaks.options.automaticLineCreationDelay);
+    };
+    Lines.prototype.manageVerticalPosition = function (source, mouseX, mouseY) {
+        if (mouseY !== null && mouseY !== undefined) {
+            var linePos = this.getLinesUnderY(mouseY);
+            if (linePos[0] !== linePos[1]) {
+                this.manageAutomaticLineCreation(linePos[0] + 1, source);
+            } else {
+                this.stopAutomaticLineCreation();
+                if (mouseX !== null && mouseX !== undefined && linePos[0] !== source.position && !this._linesByPosition[linePos[0]].isSegmentsLine()) {
+                    var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
+                    var sourceDuration = Utils.roundTime(source.endTime - source.startTime);
+                    if (this._hasSpaceForSourceAt(linePos[0], mouseTime, sourceDuration)) {
+                        this.moveSourceToPosition(source, linePos[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.getLineOnPosition = function (y) {
+    Lines.prototype.getLastPosition = function () {
+        var keys = Object.keys(this._linesByPosition);
+        return keys.pop();
+    };
+    Lines.prototype.getLinesUnderY = function (y) {
         var height;
         var pos = [
             -1,
-            Number.MAX_VALUE
+            this.getLastPosition() + 1
         ];
         for (var position in this._linesByPosition) {
             if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -15662,7 +15763,6 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
     };
     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);
@@ -15681,9 +15781,13 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
                 if (currentPos < position) {
                     y += this._linesByPosition[pos].lineHeight() + this._peaks.options.interline;
                 } else {
-                    if (this._linesByPosition[position]) {
-                        this._linesByPosition[currentPos].updatePosition(currentPos + 1);
-                        newLinesByPosition[currentPos + 1] = this._linesByPosition[currentPos];
+                    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;
+                        }
                     }
                 }
             }
@@ -15695,6 +15799,7 @@ 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) {
@@ -15704,10 +15809,10 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
     };
     Lines.prototype.manageCollision = function (source, newTimes) {
-        return this._linesBySourceId[source.id].manageCollision(source, newTimes);
+        return this._linesByPosition[source.position].manageCollision(source, newTimes);
     };
     Lines.prototype.manageSourceOrder = function (source, newTimes) {
-        return this._linesBySourceId[source.id].manageSourceOrder(source, newTimes);
+        return this._linesByPosition[source.position].manageSourceOrder(source, newTimes);
     };
     Lines.prototype._setInteractions = function (position) {
         var line = this._linesByPosition[position];
@@ -15860,7 +15965,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             autoScrollThreshold: 0.05,
             minSourceSize: 0.05,
             minSegmentSize: 0.2,
-            canMoveSourcesBetweenLines: true
+            canMoveSourcesBetweenLines: true,
+            automaticLineCreationDelay: 100
         };
         this.logger = console.error.bind(console);
         return this;
@@ -20265,7 +20371,6 @@ 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));
@@ -20308,11 +20413,14 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             }
         }
         if (positions) {
-            var frameOffset = this._view.getFrameOffset();
-            var width = this._view.getWidth();
-            this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
+            this.refresh();
         }
     };
+    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._onSourceUpdate = function (source) {
         var redraw = false;
         var sourceGroup = this._sourcesGroup[source.id];
@@ -20406,9 +20514,6 @@ 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();
@@ -20476,6 +20581,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         var mousePos = Math.min(this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(), Math.max(0, this._view.getPointerPosition().x));
         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;
         var newEnd = 0;
         var shouldRedraw = false;
@@ -20488,7 +20594,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             }
             const {initialStartTime, initialEndTime} = this._activeElements[source.id];
             newEnd = Math.max(newEnd, source.endTime);
-            shouldRedraw = this.updateSource(source, initialStartTime + diff + timeOffsetDiff, initialEndTime + diff + timeOffsetDiff, mousePosY) || shouldRedraw;
+            shouldRedraw = this.updateSource(source, initialStartTime + diff + timeOffsetDiff, initialEndTime + diff + timeOffsetDiff, mousePosX, mousePosY) || shouldRedraw;
         }.bind(this));
         if (shouldRedraw) {
             this.draw();
@@ -20502,13 +20608,13 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             return positions[source.position];
         });
     };
-    SourcesLayer.prototype.updateSource = function (source, startTime, endTime, newY) {
+    SourcesLayer.prototype.updateSource = function (source, startTime, endTime, mouseX, mouseY) {
         var newTimes = {
             start: startTime,
             end: endTime
         };
         if (this._peaks.options.canMoveSourcesBetweenLines) {
-            this.manageVerticalPosition(source, newY);
+            this.manageVerticalPosition(source, mouseX, mouseY);
         }
         newTimes = this.manageSourceOrder(source, newTimes);
         newTimes = this.manageCollision(source, newTimes);
@@ -20519,8 +20625,8 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         }
         return false;
     };
-    SourcesLayer.prototype.manageVerticalPosition = function (source, newY) {
-        return this._lines.manageVerticalPosition(source, newY);
+    SourcesLayer.prototype.manageVerticalPosition = function (source, mouseX, mouseY) {
+        return this._lines.manageVerticalPosition(source, mouseX, mouseY);
     };
     SourcesLayer.prototype.manageSourceOrder = function (source, newTimes) {
         return this._lines.manageSourceOrder(source, newTimes);
@@ -20660,7 +20766,6 @@ 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);
@@ -21497,6 +21602,9 @@ 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();
     };

package/src/data-retriever.js

@@ -59,7 +59,7 @@ define([
         this._data[url] = data;
         this._waitingForData[url] = [source];
 
-        this._fetch(url, data, 1000, 10);
+        this._fetch(url, data, 2000, 3);
     };
 
     DataRetriever.prototype._fetch = function(url, data, delay, limit) {
@@ -77,15 +77,19 @@ define([
             }
 
             return fetch(url)
+                .then(function(response) {
+                    if (!response.ok) {
+                        throw new Error('HTTP ' + response.status + ': ' + response.statusText);
+                    }
+
+                    return response.blob();
+                })
                 .catch(function(err) {
-                    later(delay)
+                    return later(delay)
                         .then(function() {
-                            recur(timesTried + 1, err);
+                            return recur(timesTried + 1, err);
                         });
                 })
-                .then(function(response) {
-                    return response.blob();
-                })
                 .then(function(blob) {
                     var type = blob.type;
 

package/src/line.js

@@ -329,21 +329,30 @@ define([
     delete this._sourcesGroup[source.id];
 
     if (isPermanent) {
-      if (this._sources[source.id].prevSourceId) {
-        this._sources[this._sources[source.id].prevSourceId].nextSourceId
-          = this._sources[source.id].nextSourceId;
+      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 (this._sources[source.id].nextSourceId) {
-        this._sources[this._sources[source.id].nextSourceId].prevSourceId
-          = this._sources[source.id].prevSourceId;
+      if (sourceData.prevSourceId) {
+        this._sources[sourceData.prevSourceId].nextSourceId
+          = sourceData.nextSourceId;
       }
 
-      if (this._firstSourceId === source.id) {
-        this._firstSourceId = this._sources[source.id].nextSourceId;
+      if (sourceData.nextSourceId) {
+        this._sources[sourceData.nextSourceId].prevSourceId
+          = sourceData.prevSourceId;
       }
 
-      delete this._sources[source.id];
+      if (this._firstSourceId === source.id) {
+        this._firstSourceId = sourceData.nextSourceId;
+      }
 
       this.updateLineHeight(sourceGroup, 'remove');
     }
@@ -643,14 +652,6 @@ define([
     return newTimes;
   };
 
-  // Line.prototype.rescale = function() {
-  //   for (var sourceId in this._sourcesGroup) {
-  //     if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
-  //       this._sourcesGroup[sourceId].rescale();
-  //     }
-  //   }
-  // };
-
   Line.prototype.getSourcesAfter = function(time) {
     const sources = [];
     var currentId = this._firstSourceId;
@@ -673,6 +674,38 @@ define([
     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)) {

package/src/lines.js

@@ -22,12 +22,15 @@ define([
     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 = {};
 
@@ -105,10 +108,8 @@ define([
   };
 
   Lines.prototype._onLineRemove = function(position) {
-    var oldLine = this.removeLine(position);
-    var lineNewY = oldLine.getY();
-
-    this._updateLinesPosition(position, lineNewY);
+    this.removeLine(position);
+    this._updateLinesPosition(position);
   };
 
   Lines.prototype.changeLineHeight = function(from, to) {
@@ -129,7 +130,6 @@ define([
 
     sourceGroup.getSource().position = position;
     this._linesByPosition[position].addSourceGroup(sourceGroup);
-    this._linesBySourceId[sourceGroup.getSource().id] = this._linesByPosition[position];
   };
 
   Lines.prototype.addSegments = function(lineId, position) {
@@ -146,10 +146,13 @@ define([
   };
 
   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);
     }
 
@@ -158,18 +161,22 @@ define([
 
   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(oldLine.getId(), false);
+    this._lineIndicator.removeIndicator(lineId, false);
 
     return oldLine;
   };
 
   Lines.prototype.isLineVisible = function(position) {
-    return this._linesByPosition[position].isVisible();
+    return this._linesByPosition[position] ? this._linesByPosition[position].isVisible() : false;
   };
 
   Lines.prototype.getVisibleLines = function() {
@@ -207,16 +214,22 @@ define([
     this._updateLinesPosition(position);
   };
 
-  Lines.prototype._updateLinesPosition = function(position, forceNewY) {
+  Lines.prototype._updateLinesPosition = function(position) {
     var line = this._linesByPosition[position];
     var dy = null;
     var newY;
 
-    if (forceNewY) {
-      newY = forceNewY;
+    if (line) {
+      newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
     }
     else {
-      newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
+      var previousLine;
+
+      while ((previousLine === undefined || previousLine === null) && position > 0) {
+        previousLine = this._linesByPosition[--position];
+      }
+
+      newY = previousLine ? previousLine.getY() + previousLine.lineHeight() + this._peaks.options.interline : 0;
     }
 
     for (var pos in this._linesByPosition) {
@@ -235,8 +248,7 @@ define([
 
     this._lineIndicator.updateIndicators();
     this._lineIndicator.draw();
-
-    this._view.drawSourcesLayer();
+    this._view.refresh();
   };
 
   Lines.prototype.setOffsetY = function(frameOffset) {
@@ -282,25 +294,100 @@ define([
     return length;
   };
 
-  Lines.prototype.manageVerticalPosition = function(source, newY) {
-    if (newY !== null && newY !== undefined) {
-      var pos = this.getLineOnPosition(newY);
+  Lines.prototype.stopAutomaticLineCreation = function() {
+    if (this._automaticLineCreationTimeout) {
+      clearTimeout(this._automaticLineCreationTimeout);
+    }
+    this._automaticLineCreationTimeout = null;
+    this._automaticLineCreationPosition = null;
+    this._automaticallyCreatedLineId = null;
+  };
 
-      if (pos[0] === pos[1]
-        && pos[0] !== source.position
-        && !this._linesByPosition[pos[0]].isSegmentsLine()) {
-        this.moveSourceToPosition(source, pos[0]);
+  Lines.prototype.manageAutomaticLineCreation = function(pos, source) {
+    if (this._automaticallyCreatedLineId !== null) {
+      return;
+    }
+    else if (
+      this._automaticLineCreationPosition !== null
+      && this._automaticLineCreationPosition !== pos
+    ) {
+      this.stopAutomaticLineCreation();
+    }
+    else if (this._automaticLineCreationTimeout) {
+      return;
+    }
+
+    this._automaticLineCreationPosition = pos;
+    this._automaticLineCreationTimeout = setTimeout(function() {
+      this._automaticLineCreationTimeout = null;
+      this._automaticallyCreatedLineId = this._createLine(pos);
+      this._setInteractions(pos);
+      this.moveSourceToPosition(source, pos);
+    }.bind(this), this._peaks.options.automaticLineCreationDelay);
+  };
+
+  Lines.prototype.manageVerticalPosition = function(source, mouseX, mouseY) {
+    if (mouseY !== null && mouseY !== undefined) {
+      var linePos = this.getLinesUnderY(mouseY);
+
+      if (linePos[0] !== linePos[1]) {
+        this.manageAutomaticLineCreation(linePos[0] + 1, source);
+      }
+      else {
+        this.stopAutomaticLineCreation();
+
+        if (
+          mouseX !== null && mouseX !== undefined
+          && linePos[0] !== source.position
+          && !this._linesByPosition[linePos[0]].isSegmentsLine()
+        ) {
+          var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
+          var sourceDuration = Utils.roundTime(source.endTime - source.startTime);
+
+          if (this._hasSpaceForSourceAt(linePos[0], mouseTime, sourceDuration)) {
+            this.moveSourceToPosition(source, linePos[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.getLineOnPosition = function(y) {
+  Lines.prototype.getLastPosition = function() {
+    var keys = Object.keys(this._linesByPosition);
+
+    return keys.pop();
+  };
+
+  Lines.prototype.getLinesUnderY = function(y) {
     var height;
-    var pos = [-1, Number.MAX_VALUE];
+    var pos = [-1, this.getLastPosition() + 1];
 
     for (var position in this._linesByPosition) {
       if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -322,8 +409,6 @@ define([
   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);
@@ -348,9 +433,17 @@ define([
           y += this._linesByPosition[pos].lineHeight() + this._peaks.options.interline;
         }
         else {
-          if (this._linesByPosition[position]) {
-            this._linesByPosition[currentPos].updatePosition(currentPos + 1);
-            newLinesByPosition[currentPos + 1] = this._linesByPosition[currentPos];
+          // This code assumes that lines are ordered in ascending order of position
+          // This is the case as the keys are integers
+          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;
+            }
           }
         }
       }
@@ -366,6 +459,8 @@ define([
 
     newLinesByPosition[position] = line;
     this._linesByPosition = newLinesByPosition;
+
+    return line.getId();
   };
 
   Lines.prototype.updateSegments = function(frameStartTime, frameEndTime) {
@@ -377,21 +472,13 @@ define([
   };
 
   Lines.prototype.manageCollision = function(source, newTimes) {
-    return this._linesBySourceId[source.id].manageCollision(source, newTimes);
+    return this._linesByPosition[source.position].manageCollision(source, newTimes);
   };
 
   Lines.prototype.manageSourceOrder = function(source, newTimes) {
-    return this._linesBySourceId[source.id].manageSourceOrder(source, newTimes);
+    return this._linesByPosition[source.position].manageSourceOrder(source, newTimes);
   };
 
-  // Lines.prototype.rescale = function() {
-  //   for (var position in this._linesByPosition) {
-  //     if (Utils.objectHasProperty(this._linesByPosition, position)) {
-  //       this._linesByPosition[position].rescale();
-  //     }
-  //   }
-  // };
-
   Lines.prototype._setInteractions = function(position) {
     var line = this._linesByPosition[position];
 

package/src/main.js

@@ -409,7 +409,13 @@ define([
        * Indicates whether or not sources can be dragged
        * from one line to another
        */
-      canMoveSourcesBetweenLines: true
+      canMoveSourcesBetweenLines: true,
+
+      /**
+       * Delay in milliseconds before a new line is created
+       * when dragging a source between 2 lines.
+       */
+      automaticLineCreationDelay: 100
     };
 
     /**

package/src/sources-layer.js

@@ -56,7 +56,6 @@ define([
     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));
@@ -120,16 +119,20 @@ define([
     }
 
     if (positions) {
-      var frameOffset = this._view.getFrameOffset();
-      var width = this._view.getWidth();
-
-      this.updateSources(
-        this._view.pixelsToTime(frameOffset),
-        this._view.pixelsToTime(frameOffset + width)
-      );
+      this.refresh();
     }
   };
 
+  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._onSourceUpdate = function(source) {
     var redraw = false;
     var sourceGroup = this._sourcesGroup[source.id];
@@ -252,10 +255,6 @@ define([
     }
   };
 
-  SourcesLayer.prototype._onSourcesRefresh = function() {
-    this._layer.draw();
-  };
-
   SourcesLayer.prototype._onSegmentsShow = function(lineId, position) {
     this._lines.addSegments(lineId, position);
     this._view.updateTimelineLength();
@@ -321,7 +320,7 @@ define([
     // Update sources in visible time range.
     var sources = this.findSources(startTime, endTime);
 
-    // Should implement virtualization on Y
+    // TODO: Should implement virtualization on Y
 
     var count = sources.length;
 
@@ -391,6 +390,7 @@ define([
 
     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;
     var newEnd = 0;
     var shouldRedraw = false;
@@ -411,6 +411,7 @@ define([
         source,
         initialStartTime + diff + timeOffsetDiff,
         initialEndTime + diff + timeOffsetDiff,
+        mousePosX,
         mousePosY
       ) || shouldRedraw;
     }.bind(this));
@@ -435,14 +436,14 @@ define([
     );
   };
 
-  SourcesLayer.prototype.updateSource = function(source, startTime, endTime, newY) {
+  SourcesLayer.prototype.updateSource = function(source, startTime, endTime, mouseX, mouseY) {
     var newTimes = {
       start: startTime,
       end: endTime
     };
 
     if (this._peaks.options.canMoveSourcesBetweenLines) {
-      this.manageVerticalPosition(source, newY);
+      this.manageVerticalPosition(source, mouseX, mouseY);
     }
 
     newTimes = this.manageSourceOrder(source, newTimes);
@@ -463,8 +464,8 @@ define([
     return false;
   };
 
-  SourcesLayer.prototype.manageVerticalPosition = function(source, newY) {
-    return this._lines.manageVerticalPosition(source, newY);
+  SourcesLayer.prototype.manageVerticalPosition = function(source, mouseX, mouseY) {
+    return this._lines.manageVerticalPosition(source, mouseX, mouseY);
   };
 
   SourcesLayer.prototype.manageSourceOrder = function(source, newTimes) {
@@ -635,7 +636,6 @@ define([
   };
 
   SourcesLayer.prototype.rescale = function(debounce) {
-    // this._lines.rescale();
     if (debounce) {
       this._debouncedRescale();
     }
@@ -686,7 +686,6 @@ define([
     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);

package/src/timeline-zoomview.js

@@ -430,6 +430,10 @@ define([
     this._sourcesLayer.draw();
   };
 
+  TimelineZoomView.prototype.refresh = function() {
+    this._sourcesLayer.refresh();
+  };
+
   TimelineZoomView.prototype.getSegmentsGroup = function() {
     return this._sourcesLayer.getSegmentsGroup();
   };