@checksub_team/peaks_timeline 1.16.0-alpha.1 → 1.16.0-alpha.2

package/package.json

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

package/peaks.js

@@ -14809,12 +14809,6 @@ 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;
@@ -14982,9 +14976,6 @@ module.exports = function (SourceGroup, Konva, Utils) {
     Line.prototype.getId = function () {
         return this._id;
     };
-    Line.prototype.isEmpty = function () {
-        return this.isSegmentsLine() ? this._segmentsGroup.isEmpty() : Object.keys(this._sources).length === 0;
-    };
     Line.prototype.countRemainingElements = function () {
         return this.isSegmentsLine() ? this._segmentsGroup.countRemainingElements() : Object.keys(this._sources).length;
     };
@@ -15014,35 +15005,6 @@ module.exports = function (SourceGroup, Konva, Utils) {
     Line.prototype.lineHeight = function () {
         return this._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];
-            }
-            if (to > this._height) {
-                this._height = to;
-            } else if (from === this._height) {
-                this._height = 0;
-                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._addHeight = function (height) {
         if (this._sourceHeights[height]) {
             this._sourceHeights[height]++;
@@ -15240,18 +15202,27 @@ module.exports = function (SourceGroup, Konva, Utils) {
         const cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
         var newStartTime = startTime;
         var newEndTime = endTime;
-        var sourceDuration = endTime - startTime;
-        if (newStartTime !== null && newEndTime !== null) {
+        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 (cursorTime + this._view.getTimeOffset() < previousStartTime) {
-                    ({newStartTime, newEndTime} = this._changeSourcesPosition(sources, sourceDuration, cursorTime + this._view.getTimeOffset()));
+                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;
+                    }
                 }
             }
             if (this._sources[lastSource.id].nextSourceId) {
                 var nextEndTime = this._sources[this._sources[lastSource.id].nextSourceId].source.endTime;
-                if (cursorTime + this._view.getTimeOffset() > nextEndTime) {
-                    ({newStartTime, newEndTime} = this._changeSourcesPosition(sources, sourceDuration, cursorTime + this._view.getTimeOffset()));
+                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;
+                    }
                 }
             }
         }
@@ -15287,7 +15258,7 @@ module.exports = function (SourceGroup, Konva, Utils) {
             }
             if (time > startLimit && (endLimit === null || time < endLimit)) {
                 ({newStartTime, newEndTime} = this._canBePlacedBetween(time, time + sourceDuration, startLimit, endLimit));
-                if (newStartTime !== null && newEndTime !== null) {
+                if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
                     let prevSourceId = currentRange.start ? currentRange.start.source.id : null;
                     sources.forEach(function (source) {
                         this._moveSource(this._sources[source.id].source, prevSourceId);
@@ -15365,7 +15336,7 @@ module.exports = function (SourceGroup, Konva, Utils) {
                 }
             }
         }
-        if (newStartTime !== null && newEndTime !== null) {
+        if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
             var timeWidth = originalEndTime - originalStartTime;
             if (startLimited) {
                 newEndTime = Utils.roundTime(newStartTime + timeWidth);
@@ -15374,11 +15345,11 @@ module.exports = function (SourceGroup, Konva, Utils) {
                 newStartTime = Utils.roundTime(newEndTime - timeWidth);
             }
         }
-        if (newStartTime !== null && newEndTime === null) {
+        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);
             }
-        } else if (newEndTime !== null && newStartTime === null) {
+        } 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);
             }
@@ -15480,7 +15451,6 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         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));
@@ -15527,13 +15497,8 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         this._updateLinesPosition(position);
         this._view.updateTimeline();
     };
-    Lines.prototype._onLineAdd = function (position) {
-        this._createLine(position);
-        this._setInteractions(position);
-        this._updateLinesPosition(position);
-    };
     Lines.prototype._onLineRemove = function (position) {
-        this.removeLine(position);
+        this._removeLine(position);
         this._updateLinesPosition(position);
     };
     Lines.prototype._onSourcesWrappingChanged = function (sources) {
@@ -15543,15 +15508,6 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
             }
         }.bind(this));
     };
-    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);
-                }
-            }
-        }
-    };
     Lines.prototype.addSourceGroup = function (source, sourceGroup, position) {
         if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
             this._createLine(position);
@@ -15578,7 +15534,7 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         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) {
@@ -16159,11 +16115,6 @@ 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);
     };
@@ -18197,9 +18148,7 @@ 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);
-        this._roundedWidth = Math.round(this._width);
         var heights = SourceGroup.getHeights(source, peaks);
         this._unwrappedHeight = heights.unwrapped;
         this._wrappedHeight = heights.wrapped;
@@ -18301,7 +18250,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
                 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
@@ -18314,11 +18262,9 @@ 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();
@@ -18369,9 +18315,11 @@ 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) {
@@ -18453,43 +18401,45 @@ 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._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 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 xWidth = x + width;
-        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._roundedWidth, 0);
-                if (this._source.mediaEndTime < this._source.duration) {
-                    var rightStopPosition = Math.max(1 - this._source.warningWidth / this._roundedWidth, 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._roundedWidth, 0.5);
-                    gradient.addColorStop(0, this._source.warningColor);
-                    gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
+        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.fillStyle = gradient;
-                ctx.fill();
-            } else {
-                ctx.fillStyle = this._source.backgroundColor;
-                ctx.fill();
             }
-        }
-        if (shape) {
-            ctx.fillStrokeShape(shape);
+            if (shape) {
+                ctx.fillStrokeShape(shape);
+            }
         }
     };
     SourceGroup.prototype._addUnwrap = function (forceCreate) {
@@ -20408,7 +20358,6 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.on('source.update', this._onSourceUpdate.bind(this));
         this._peaks.on('data.retrieved', this._onDataRetrieved.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 () {
@@ -20435,23 +20384,6 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.isEditingEnabled = function () {
         return this._allowEditing;
     };
-    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) {
-            this.refresh();
-        }
-    };
     SourcesLayer.prototype.refresh = function () {
         var frameOffset = this._view.getFrameOffset();
         var width = this._view.getWidth();
@@ -20584,7 +20516,12 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         const draggedElementId = element.currentTarget.attrs.sourceId;
         var selectedElements = this._view.getSelectedElements();
         const shouldDragSelectedElements = Object.keys(selectedElements).includes(draggedElementId);
-        this._draggedElements = shouldDragSelectedElements ? Object.values(selectedElements).sort((a, b) => a.startTime - b.startTime) : [this._sourcesGroup[draggedElementId].getSource()];
+        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);
@@ -20617,12 +20554,12 @@ 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 diff = this._view.pixelsToTime(mousePos - this._mouseDownX);
+        const timeDiff = 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 + diff, initialEndTime + timeOffsetDiff + diff, orderable, mousePosX, mousePosY);
+        const shouldRedraw = this.manageSourceMovements(this._draggedElements, initialStartTime + timeOffsetDiff + timeDiff, initialEndTime + timeOffsetDiff + timeDiff, orderable, mousePosX, mousePosY);
         if (shouldRedraw) {
             this.draw();
         }
@@ -20648,6 +20585,8 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         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);
         }
@@ -20656,7 +20595,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         }
         ({newStartTime, newEndTime} = this.manageCollision(sources, newStartTime, newEndTime));
         this._applyTimeChangesToSources(sources, sources[0].startTime, newStartTime, newEndTime);
-        this._view.setTimelineLength(this._view.timeToPixels(newEndTime) + this._view.getWidth());
+        this._view.setTimelineLength(this._view.timeToPixels(sources[sources.length - 1].endTime) + this._view.getWidth());
         return true;
     };
     SourcesLayer.prototype.manageVerticalPosition = function (sources, startTime, endTime, mouseX, mouseY) {
@@ -20801,7 +20740,6 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.off('source.update', this._onSourceUpdate);
         this._peaks.off('data.retrieved', this._onDataRetrieved);
         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 () {

package/src/line-indicator.js

@@ -118,16 +118,6 @@ define([
     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;

package/src/line.js

@@ -52,12 +52,6 @@ define([
     return this._id;
   };
 
-  Line.prototype.isEmpty = function() {
-    return this.isSegmentsLine() ?
-      this._segmentsGroup.isEmpty() :
-      Object.keys(this._sources).length === 0;
-  };
-
   Line.prototype.countRemainingElements = function() {
     return this.isSegmentsLine() ?
       this._segmentsGroup.countRemainingElements() :
@@ -100,43 +94,6 @@ define([
     return this._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];
-      }
-
-      if (to > this._height) {
-        this._height = to;
-      }
-      else if (from === this._height) {
-        this._height = 0;
-        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._addHeight = function(height) {
     if (this._sourceHeights[height]) {
       this._sourceHeights[height]++;
@@ -418,21 +375,27 @@ define([
     const cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
     var newStartTime = startTime;
     var newEndTime = endTime;
+    var tmpTimes;
 
-    var sourceDuration = endTime - startTime;
+    var sourceDuration = Utils.roundTime(endTime - startTime);
 
-    if (newStartTime !== null && newEndTime !== null) {
+    if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
       if (this._sources[firstSource.id].prevSourceId) {
         // there is another source to the left
         var previousStartTime = this._sources[this._sources[firstSource.id].prevSourceId].source.startTime;
 
-        if (cursorTime + this._view.getTimeOffset() < previousStartTime) {
+        if (Utils.roundTime(cursorTime + this._view.getTimeOffset()) < previousStartTime) {
           // we want to change order
-          ({ newStartTime, newEndTime } = this._changeSourcesPosition(
+          tmpTimes = this._changeSourcesPosition(
             sources,
             sourceDuration,
             cursorTime + this._view.getTimeOffset()
-          ));
+          );
+
+          if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
+            newStartTime = tmpTimes.newStartTime;
+            newEndTime = tmpTimes.newEndTime;
+          }
         }
       }
 
@@ -440,13 +403,18 @@ define([
         // there is another source to the right
         var nextEndTime = this._sources[this._sources[lastSource.id].nextSourceId].source.endTime;
 
-        if (cursorTime + this._view.getTimeOffset() > nextEndTime) {
+        if (Utils.roundTime(cursorTime + this._view.getTimeOffset()) > nextEndTime) {
           // we want to change order
-          ({ newStartTime, newEndTime } = this._changeSourcesPosition(
+          tmpTimes = this._changeSourcesPosition(
             sources,
             sourceDuration,
             cursorTime + this._view.getTimeOffset()
-          ));
+          );
+
+          if (typeof tmpTimes.newStartTime === 'number' && typeof tmpTimes.newEndTime === 'number') {
+            newStartTime = tmpTimes.newStartTime;
+            newEndTime = tmpTimes.newEndTime;
+          }
         }
       }
     }
@@ -495,7 +463,7 @@ define([
           endLimit
         ));
 
-        if (newStartTime !== null && newEndTime !== null) {
+        if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
           let prevSourceId = currentRange.start
                               ? currentRange.start.source.id
                               : null;
@@ -602,7 +570,7 @@ define([
     }
 
     // Update the other edge if dragging and collision
-    if (newStartTime !== null && newEndTime !== null) {
+    if (typeof newStartTime === 'number' && typeof newEndTime === 'number') {
       var timeWidth = originalEndTime - originalStartTime;
 
       if (startLimited) {
@@ -616,12 +584,12 @@ define([
 
     // Check for minimal size of source
     // We assume that only 1 source can be resized at a time
-    if (newStartTime !== null && newEndTime === null) {
+    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);
       }
     }
-    else if (newEndTime !== null && newStartTime === null) {
+    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);
       }

package/src/lines.js

@@ -43,7 +43,6 @@ define([
     );
 
     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));
@@ -104,14 +103,8 @@ define([
     this._view.updateTimeline();
   };
 
-  Lines.prototype._onLineAdd = function(position) {
-    this._createLine(position);
-    this._setInteractions(position);
-    this._updateLinesPosition(position);
-  };
-
   Lines.prototype._onLineRemove = function(position) {
-    this.removeLine(position);
+    this._removeLine(position);
     this._updateLinesPosition(position);
   };
 
@@ -123,16 +116,6 @@ define([
     }.bind(this));
   };
 
-  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);
-        }
-      }
-    }
-  };
-
   Lines.prototype.addSourceGroup = function(source, sourceGroup, position) {
     if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
       this._createLine(position);
@@ -170,7 +153,7 @@ define([
     return sourceGroup;
   };
 
-  Lines.prototype.removeLine = function(pos) {
+  Lines.prototype._removeLine = function(pos) {
     var oldLine = this._linesByPosition[pos];
     var lineId = oldLine.getId();
 

package/src/main.js

@@ -777,13 +777,6 @@ define([
     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

package/src/source-group.js

@@ -47,9 +47,7 @@ define([
     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);
-    this._roundedWidth = Math.round(this._width);
     var heights = SourceGroup.getHeights(source, peaks);
 
     this._unwrappedHeight = heights.unwrapped;
@@ -184,10 +182,6 @@ define([
       }.bind(this)
     );
 
-    this._view.setTimelineLength(
-      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
-    );
-
     return {
       x: draggedElement.absolutePosition().x,
       y: draggedElement.absolutePosition().y
@@ -203,13 +197,11 @@ define([
     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);
 
       // the zoom was changed
       if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
@@ -277,11 +269,13 @@ define([
       start: this._source.startTime,
       end: this._source.endTime
     };
+    this._isDragged = true;
 
     this._hideButtons();
   };
 
   SourceGroup.prototype._onHandleDragEnd = function() {
+    this._isDragged = false;
     this._showButtons();
   };
 
@@ -386,7 +380,7 @@ define([
     Math.max(
       1,
       Math.min(
-        this._roundedWidth / 2,
+        this._width / 2,
         Math.min(
           CORNER_RADIUS,
           this._height / 2
@@ -395,63 +389,65 @@ define([
     );
     var x = Math.max(
       0,
-      this._view.getFrameOffset() - this._roundedX - radius
+      this._view.getFrameOffset() - this._x - 2 * radius
     );
     var width = Math.min(
-      this._roundedWidth - x,
-      this._view.getWidth() + radius - Math.max(
+      this._width - x,
+      this._view.getWidth() + 4 * radius - Math.max(
         0,
-        this._roundedX - this._view.getFrameOffset()
+        this._x - this._view.getFrameOffset()
       )
     );
     var xWidth = x + width;
 
-    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 (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._roundedWidth, 0);
+      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._roundedWidth), 0.5);
+          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);
-        }
+            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._roundedWidth, 0.5);
+          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);
-        }
+            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.fillStyle = gradient;
+          ctx.fill();
+        }
+        else {
+          ctx.fillStyle = this._source.backgroundColor;
+          ctx.fill();
+        }
       }
-    }
 
-    if (shape) {
-      ctx.fillStrokeShape(shape);
+      if (shape) {
+        ctx.fillStrokeShape(shape);
+      }
     }
   };
 

package/src/sources-layer.js

@@ -57,7 +57,6 @@ define([
     this._peaks.on('source.update', this._onSourceUpdate.bind(this));
     this._peaks.on('data.retrieved', this._onDataRetrieved.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));
   }
 
@@ -99,30 +98,6 @@ define([
     return this._allowEditing;
   };
 
-  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) {
-      this.refresh();
-    }
-  };
-
   SourcesLayer.prototype.refresh = function() {
     var frameOffset = this._view.getFrameOffset();
     var width = this._view.getWidth();
@@ -310,8 +285,6 @@ define([
     // Update sources in visible time range.
     var sources = this.findSources(startTime, endTime);
 
-    // TODO: Should implement virtualization on Y
-
     var count = sources.length;
 
     sources.forEach(this._updateSource.bind(this));
@@ -335,9 +308,13 @@ define([
       draggedElementId
     );
 
-    this._draggedElements = shouldDragSelectedElements ?
-      Object.values(selectedElements).sort((a, b) => a.startTime - b.startTime) :
-      [this._sourcesGroup[draggedElementId].getSource()];
+    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);
@@ -389,7 +366,7 @@ define([
       )
     );
 
-    const diff = this._view.pixelsToTime(mousePos - this._mouseDownX);
+    const timeDiff = 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;
@@ -397,8 +374,8 @@ define([
 
     const shouldRedraw = this.manageSourceMovements(
       this._draggedElements,
-      initialStartTime + timeOffsetDiff + diff,
-      initialEndTime + timeOffsetDiff + diff,
+      initialStartTime + timeOffsetDiff + timeDiff,
+      initialEndTime + timeOffsetDiff + timeDiff,
       orderable,
       mousePosX,
       mousePosY
@@ -451,6 +428,9 @@ define([
   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);
     }
@@ -463,7 +443,7 @@ define([
     this._applyTimeChangesToSources(sources, sources[0].startTime, newStartTime, newEndTime);
 
     this._view.setTimelineLength(
-      this._view.timeToPixels(newEndTime) + this._view.getWidth()
+      this._view.timeToPixels(sources[sources.length - 1].endTime) + this._view.getWidth()
     );
 
     return true;
@@ -692,7 +672,6 @@ define([
     this._peaks.off('source.update', this._onSourceUpdate);
     this._peaks.off('data.retrieved', this._onDataRetrieved);
     this._peaks.off('segments.show', this._onSegmentsShow);
-    this._peaks.off('options.set.line_height', this._onOptionsLineHeightChange);
     this._peaks.off('source.setIndicators', this.setIndicators);
   };