@checksub_team/peaks_timeline 1.15.6 → 1.15.8-alpha.0

package/package.json

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

package/peaks.js

@@ -15105,7 +15105,7 @@ module.exports = function (Konva, Utils) {
                         var startLimit = currentSource.prevSourceId ? this._sources[currentSource.prevSourceId].source.endTime : 0;
                         var newTimes = this._canBePlacedBetween(source.startTime, source.endTime, startLimit, currentSource.source.startTime);
                         if (newTimes) {
-                            source.updateTimes(newTimes.startTime, newTimes.endTime);
+                            source.updateTimes(newTimes.start, newTimes.end);
                             if (currentSource.prevSourceId) {
                                 this._sources[currentSource.prevSourceId].nextSourceId = source.id;
                                 newSource.prevSourceId = currentSource.prevSourceId;
@@ -15153,23 +15153,23 @@ module.exports = function (Konva, Utils) {
         }
     };
     Line.prototype._canBePlacedBetween = function (startTime, endTime, startLimit, endLimit) {
-        var timeWidth = endTime - startTime;
+        var timeWidth = Utils.roundTime(endTime - startTime);
         var newTimes = null;
         if (!endLimit && startTime > startLimit || startTime > startLimit && endTime < endLimit) {
             newTimes = {
-                startTime: startTime,
-                endTime: endTime
+                start: startTime,
+                end: endTime
             };
-        } else if (endLimit - startLimit >= timeWidth) {
+        } else if (Utils.roundTime(endLimit - startLimit) >= timeWidth) {
             if (startTime > startLimit) {
                 newTimes = {
-                    startTime: endLimit - timeWidth,
-                    endTime: endLimit
+                    start: Utils.roundTime(endLimit - timeWidth),
+                    end: endLimit
                 };
             } else {
                 newTimes = {
-                    startTime: startLimit,
-                    endTime: startLimit + timeWidth
+                    start: startLimit,
+                    end: Utils.roundTime(startLimit + timeWidth)
                 };
             }
         }
@@ -15212,39 +15212,41 @@ module.exports = function (Konva, Utils) {
         this._y += dy;
         this._group.y(this._group.y() + dy);
     };
-    Line.prototype.manageSourceOrder = function (source, newStartX, newEndX) {
-        var cursorX = this._view.getPointerPosition().x;
-        var tmpXs;
-        var newXs = {
-            startX: newStartX,
-            endX: newEndX
-        };
-        var sourceWidth = this._view.timeToPixels(source.endTime - source.startTime);
-        if (newStartX !== null && newEndX !== null) {
+    Line.prototype.manageSourceOrder = function (source, newTimes) {
+        var cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
+        var tmpTimes;
+        var sourceDuration = source.endTime - source.startTime;
+        if (newTimes.start !== null && newTimes.end !== null) {
             if (this._sources[source.id].prevSourceId) {
-                var previousStartX = this._view.timeToPixels(this._sources[this._sources[source.id].prevSourceId].source.startTime);
-                if (cursorX + this._view.getFrameOffset() < previousStartX) {
-                    tmpXs = this._changeSourcePosition(source, sourceWidth, cursorX + this._view.getFrameOffset());
-                    if (tmpXs) {
-                        newXs.startX = tmpXs.startTime;
-                        newXs.endX = tmpXs.endTime;
+                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[source.id].nextSourceId) {
-                var nextEndX = this._view.timeToPixels(this._sources[this._sources[source.id].nextSourceId].source.endTime);
-                if (cursorX + this._view.getFrameOffset() > nextEndX) {
-                    tmpXs = this._changeSourcePosition(source, sourceWidth, cursorX + this._view.getFrameOffset());
-                    if (tmpXs) {
-                        newXs.startX = tmpXs.startTime;
-                        newXs.endX = tmpXs.endTime;
+                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 newXs;
+        if (newTimes.start) {
+            newTimes.start = Utils.roundTime(newTimes.start);
+        }
+        if (newTimes.end) {
+            newTimes.end = Utils.roundTime(newTimes.end);
+        }
+        return newTimes;
     };
-    Line.prototype._changeSourcePosition = function (source, sourceWidth, x) {
+    Line.prototype._changeSourcePosition = function (source, sourceDuration, time) {
         if (source.orderable && this._firstSourceId) {
             var currentRange = {
                 start: null,
@@ -15260,19 +15262,25 @@ module.exports = function (Konva, Utils) {
                     currentRange.end = this._sources[currentRange.start.nextSourceId];
                 }
                 if (currentRange.start) {
-                    startLimit = this._view.timeToPixels(currentRange.start.source.endTime);
+                    startLimit = currentRange.start.source.endTime;
                 } else {
                     startLimit = 0;
                 }
                 if (currentRange.end) {
-                    endLimit = this._view.timeToPixels(currentRange.end.source.startTime);
+                    endLimit = currentRange.end.source.startTime;
                 } else {
                     endLimit = null;
                 }
-                if (x > startLimit && (endLimit === null || x < endLimit)) {
-                    var newTimes = this._canBePlacedBetween(x, x + sourceWidth, startLimit, endLimit);
+                if (time > startLimit && (endLimit === null || time < endLimit)) {
+                    var newTimes = this._canBePlacedBetween(time, time + sourceDuration, startLimit, endLimit);
                     if (newTimes) {
-                        source.updateTimes(this._view.pixelsToTime(newTimes.startTime), this._view.pixelsToTime(newTimes.endTime));
+                        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);
                         return newTimes;
@@ -15308,20 +15316,16 @@ module.exports = function (Konva, Utils) {
         }
         this._sources[source.id] = sourceObj;
     };
-    Line.prototype.manageCollision = function (source, newStartX, newEndX) {
+    Line.prototype.manageCollision = function (source, newTimes) {
         var originalStartTime = null;
         var originalEndTime = null;
         var newStartTime = null;
         var newEndTime = null;
         var startLimited = false;
         var endLimited = false;
-        var newXs = {
-            startX: newStartX,
-            endX: newEndX,
-            updateTimelineLength: false
-        };
-        if (newStartX !== null) {
-            originalStartTime = this._view.pixelsToTime(newStartX);
+        newTimes.updateTimelineLength = false;
+        if (newTimes.start !== null) {
+            originalStartTime = newTimes.start;
             newStartTime = originalStartTime;
             if (source.startTime > newStartTime) {
                 if (this._sources[source.id].prevSourceId) {
@@ -15338,8 +15342,8 @@ module.exports = function (Konva, Utils) {
                 }
             }
         }
-        if (newEndX !== null) {
-            originalEndTime = this._view.pixelsToTime(newEndX);
+        if (newTimes.end !== null) {
+            originalEndTime = newTimes.end;
             newEndTime = originalEndTime;
             if (source.endTime < newEndTime) {
                 if (this._sources[source.id].nextSourceId) {
@@ -15352,42 +15356,42 @@ module.exports = function (Konva, Utils) {
             }
         }
         if (newStartTime !== null && newEndTime !== null) {
-            var timeWidth = Utils.roundTime(originalEndTime - originalStartTime);
+            var timeWidth = originalEndTime - originalStartTime;
             if (startLimited) {
-                newEndTime = newStartTime + timeWidth;
+                newEndTime = Utils.roundTime(newStartTime + timeWidth);
             }
             if (endLimited) {
-                newStartTime = newEndTime - timeWidth;
+                newStartTime = Utils.roundTime(newEndTime - timeWidth);
             }
         }
         if (newStartTime !== null && newEndTime === null) {
-            if (source.endTime - newStartTime < source.minSize) {
-                newStartTime = source.endTime - source.minSize;
+            if (Utils.roundTime(source.endTime - newStartTime) < source.minSize) {
+                newStartTime = Utils.roundTime(source.endTime - source.minSize);
             }
         } else if (newEndTime !== null && newStartTime === null) {
-            if (newEndTime - source.startTime < source.minSize) {
-                newEndTime = source.startTime + source.minSize;
+            if (Utils.roundTime(newEndTime - source.startTime) < source.minSize) {
+                newEndTime = Utils.roundTime(source.startTime + source.minSize);
             }
         } else {
-            if (newEndTime - newStartTime < source.minSize) {
+            if (Utils.roundTime(newEndTime - newStartTime) < source.minSize) {
                 if (source.endTime !== newEndTime) {
-                    newEndTime = newStartTime + source.minSize;
+                    newEndTime = Utils.roundTime(newStartTime + source.minSize);
                 }
                 if (source.startTime !== newStartTime) {
-                    newStartTime = newEndTime - source.minSize;
+                    newStartTime = Utils.roundTime(newEndTime - source.minSize);
                 }
             }
         }
         if (newStartTime !== null && newStartTime !== originalStartTime) {
-            newXs.startX = this._view.timeToPixels(newStartTime);
+            newTimes.start = newStartTime;
         }
         if (newEndTime !== null && newEndTime !== originalEndTime) {
-            newXs.endX = this._view.timeToPixels(newEndTime);
+            newTimes.end = newEndTime;
             if (this._sources[source.id].nextSourceId === null) {
-                newXs.updateTimelineLength = true;
+                newTimes.updateTimelineLength = true;
             }
         }
-        return newXs;
+        return newTimes;
     };
     Line.prototype.getSourcesAfter = function (time) {
         const sources = [];
@@ -15699,11 +15703,11 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
             }
         }
     };
-    Lines.prototype.manageCollision = function (source, newStartX, newEndX) {
-        return this._linesBySourceId[source.id].manageCollision(source, newStartX, newEndX);
+    Lines.prototype.manageCollision = function (source, newTimes) {
+        return this._linesBySourceId[source.id].manageCollision(source, newTimes);
     };
-    Lines.prototype.manageSourceOrder = function (source, newStartX, newEndX) {
-        return this._linesBySourceId[source.id].manageSourceOrder(source, newStartX, newEndX);
+    Lines.prototype.manageSourceOrder = function (source, newTimes) {
+        return this._linesBySourceId[source.id].manageSourceOrder(source, newTimes);
     };
     Lines.prototype._setInteractions = function (position) {
         var line = this._linesByPosition[position];
@@ -18164,8 +18168,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         this._rightHandle.x(this._width - handleWidth);
     };
     SourceGroup.prototype._onSourceGroupHandleDrag = function (draggedElement, dragPos, leftHandle) {
+        const diff = this._view.pixelsToTime(dragPos.x - this._mouseDownX);
+        const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
+        const {start, end} = this._initialTimes;
         this._view.updateWithAutoScroll(function () {
-            if (this._layer.updateSource(this._source, leftHandle ? dragPos.x + this._view.getFrameOffset() : null, leftHandle ? null : dragPos.x + draggedElement.width() + this._view.getFrameOffset())) {
+            if (this._layer.updateSource(this._source, leftHandle ? start + diff + timeOffsetDiff : null, leftHandle ? null : end + diff + timeOffsetDiff)) {
                 this._layer.draw();
             }
         }.bind(this));
@@ -18230,6 +18237,18 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
             this._rightHandle.height(this._unwrappedHeight);
         }
     };
+    SourceGroup.prototype._onHandleDragStart = function () {
+        this._initialTimeOffset = this._view.getTimeOffset();
+        this._mouseDownX = this._view.getPointerPosition().x;
+        this._initialTimes = {
+            start: this._source.startTime,
+            end: this._source.endTime
+        };
+        this._hideButtons();
+    };
+    SourceGroup.prototype._onHandleDragEnd = function () {
+        this._showButtons();
+    };
     SourceGroup.prototype._addHandles = function (forceCreate) {
         var self = this;
         var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
@@ -18244,12 +18263,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
                     return self._onSourceGroupHandleDrag(this, pos, true);
                 }
             });
-            this._leftHandle.on('dragstart', function () {
-                self._hideButtons();
-            });
-            this._leftHandle.on('dragend', function () {
-                self._showButtons();
-            });
+            this._leftHandle.on('dragstart', this._onHandleDragStart.bind(this));
+            this._leftHandle.on('dragend', this._onHandleDragEnd.bind(this));
             if (this._source.resizable) {
                 this._leftHandle.on('mouseover', function () {
                     self._cursor = 'ew-resize';
@@ -18270,12 +18285,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
                     return self._onSourceGroupHandleDrag(this, pos, false);
                 }
             });
-            this._rightHandle.on('dragstart', function () {
-                self._hideButtons();
-            });
-            this._rightHandle.on('dragend', function () {
-                self._showButtons();
-            });
+            this._rightHandle.on('dragstart', this._onHandleDragStart.bind(this));
+            this._rightHandle.on('dragend', this._onHandleDragEnd.bind(this));
             if (this._source.resizable) {
                 this._rightHandle.on('mouseover', function () {
                     self._cursor = 'ew-resize';
@@ -20434,9 +20445,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         }
     };
     SourcesLayer.prototype.onSourcesGroupDragStart = function (element) {
-        this._initialFrameOffset = this._view.getFrameOffset();
+        this._initialTimeOffset = this._view.getTimeOffset();
         this._mouseDownX = this._view.getPointerPosition().x;
-        this._selectedElements = {};
+        this._activeElements = {};
         const draggedElementId = element.currentTarget.attrs.sourceId;
         const shouldDragSelectedElements = Object.keys(this._view.getSelectedElements()).includes(draggedElementId);
         this._nonSelectedElement = shouldDragSelectedElements ? null : [this._sourcesGroup[draggedElementId].getSource()];
@@ -20451,33 +20462,33 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         }.bind(this));
         this._view.drawSourcesLayer();
         this._view.updateTimelineLength();
-        this._selectedElements = {};
+        this._activeElements = {};
         this._peaks.emit('sources.updated', updatedSources);
     };
     SourcesLayer.prototype.onSourcesGroupDrag = function (draggedElement) {
-        this._view.updateWithAutoScroll(this._updateSourcesGroup.bind(this));
+        this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
         return {
             x: draggedElement.absolutePosition().x,
             y: draggedElement.absolutePosition().y
         };
     };
-    SourcesLayer.prototype._updateSourcesGroup = function () {
+    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 = mousePos - this._mouseDownX;
-        const currentFrameOffset = this._view.getFrameOffset();
+        const diff = this._view.pixelsToTime(mousePos - this._mouseDownX);
+        const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
         const mousePosY = this._view.getPointerPosition().y;
         var newEnd = 0;
         var shouldRedraw = false;
         (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function (source) {
-            if (!this._selectedElements[source.id]) {
-                this._selectedElements[source.id] = {
-                    startX: this._view.timeToPixels(source.startTime),
-                    endX: this._view.timeToPixels(source.endTime)
+            if (!this._activeElements[source.id]) {
+                this._activeElements[source.id] = {
+                    initialStartTime: source.startTime,
+                    initialEndTime: source.endTime
                 };
             }
-            const {startX, endX} = this._selectedElements[source.id];
+            const {initialStartTime, initialEndTime} = this._activeElements[source.id];
             newEnd = Math.max(newEnd, source.endTime);
-            shouldRedraw = this.updateSource(source, startX + diff + (currentFrameOffset - this._initialFrameOffset), endX + diff + (currentFrameOffset - this._initialFrameOffset), mousePosY) || shouldRedraw;
+            shouldRedraw = this.updateSource(source, initialStartTime + diff + timeOffsetDiff, initialEndTime + diff + timeOffsetDiff, mousePosY) || shouldRedraw;
         }.bind(this));
         if (shouldRedraw) {
             this.draw();
@@ -20491,18 +20502,18 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             return positions[source.position];
         });
     };
-    SourcesLayer.prototype.updateSource = function (source, newStartX, newEndX, newY) {
-        var newXs = {
-            startX: newStartX,
-            endX: newEndX
+    SourcesLayer.prototype.updateSource = function (source, startTime, endTime, newY) {
+        var newTimes = {
+            start: startTime,
+            end: endTime
         };
         if (this._peaks.options.canMoveSourcesBetweenLines) {
             this.manageVerticalPosition(source, newY);
         }
-        newXs = this.manageSourceOrder(source, newStartX, newEndX);
-        newXs = this.manageCollision(source, newXs.startX, newXs.endX);
-        source.updateTimes(newXs.startX !== null ? this._view.pixelsToTime(newXs.startX) : null, newXs.endX !== null ? this._view.pixelsToTime(newXs.endX) : null);
-        if (newXs) {
+        newTimes = this.manageSourceOrder(source, newTimes);
+        newTimes = this.manageCollision(source, newTimes);
+        source.updateTimes(newTimes.start, newTimes.end);
+        if (newTimes) {
             this._updateSource(source);
             return true;
         }
@@ -20511,11 +20522,11 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.manageVerticalPosition = function (source, newY) {
         return this._lines.manageVerticalPosition(source, newY);
     };
-    SourcesLayer.prototype.manageSourceOrder = function (source, newStartX, newEndX) {
-        return this._lines.manageSourceOrder(source, newStartX, newEndX);
+    SourcesLayer.prototype.manageSourceOrder = function (source, newTimes) {
+        return this._lines.manageSourceOrder(source, newTimes);
     };
-    SourcesLayer.prototype.manageCollision = function (source, newStartX, newEndX) {
-        return this._lines.manageCollision(source, newStartX, newEndX);
+    SourcesLayer.prototype.manageCollision = function (source, newTimes) {
+        return this._lines.manageCollision(source, newTimes);
     };
     SourcesLayer.prototype._updateSource = function (source) {
         var sourceGroup = this._findOrAddSourceGroup(source);
@@ -21608,6 +21619,9 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     };
     TimelineZoomView.prototype.setZoom = function (newScale) {
         newScale = Math.min(Math.max(this._options.zoomRange[0], newScale), this._options.zoomRange[1]);
+        if (newScale === this._timeToPixelsScale) {
+            return false;
+        }
         var currentTime = this._peaks.player.getCurrentTime();
         var apexTime;
         var playheadOffsetPixels = this._playheadLayer.getPlayheadOffset();
@@ -21621,10 +21635,12 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this._timeToPixelsScale = newScale;
         var apexPixel = this.timeToPixels(apexTime);
         this.setFrameOffset(apexPixel - playheadOffsetPixels);
+        this.overrideInteractions(true, true);
         this.updateTimeline(this._frameOffset, undefined, undefined, true);
         this._sourcesLayer.rescale(true);
         this._playheadLayer.updatePlayheadTime(currentTime);
         this._peaks.emit('zoom.update', newScale, prevScale);
+        this.overrideInteractions(false, true);
         return true;
     };
     TimelineZoomView.prototype.getTimelineLength = function () {
@@ -21655,7 +21671,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this.updateTimeline(this.timeToPixels(time));
     };
     TimelineZoomView.prototype.timeToPixels = function (time) {
-        return Utils.roundTime(time) * this._timeToPixelsScale;
+        return Math.round(time * this._timeToPixelsScale);
     };
     TimelineZoomView.prototype.pixelsToTime = function (pixels) {
         return Utils.roundTime(pixels / this._timeToPixelsScale);
@@ -21665,14 +21681,14 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     };
     TimelineZoomView.prototype.setFrameOffset = function (newFrameOffset) {
         newFrameOffset = Math.max(0, newFrameOffset);
-        this._frameOffset = newFrameOffset;
+        this._frameOffset = Math.round(newFrameOffset);
         this._timeOffset = this.pixelsToTime(this._frameOffset);
     };
     TimelineZoomView.prototype.getTimeOffset = function () {
         return this._timeOffset;
     };
     TimelineZoomView.prototype.setTimeOffset = function (newTimeOffset) {
-        this._timeOffset = newTimeOffset;
+        this._timeOffset = Utils.roundTime(newTimeOffset);
         this._frameOffset = this.timeToPixels(this._timeOffset);
     };
     TimelineZoomView.prototype.getFrameOffsetY = function () {

package/src/line.js

@@ -226,7 +226,7 @@ define([
             );
 
             if (newTimes) {
-              source.updateTimes(newTimes.startTime, newTimes.endTime);
+              source.updateTimes(newTimes.start, newTimes.end);
 
               if (currentSource.prevSourceId) {
                 this._sources[currentSource.prevSourceId].nextSourceId = source.id;
@@ -294,28 +294,28 @@ define([
   };
 
   Line.prototype._canBePlacedBetween = function(startTime, endTime, startLimit, endLimit) {
-    var timeWidth = endTime - startTime;
+    var timeWidth = Utils.roundTime(endTime - startTime);
     var newTimes = null;
 
     if ((!endLimit && startTime > startLimit) || (startTime > startLimit && endTime < endLimit)) {
       // Can be placed at its wanted position with wanted start/end time
       newTimes = {
-        startTime: startTime,
-        endTime: endTime
+        start: startTime,
+        end: endTime
       };
     }
-    else if (endLimit - startLimit >= timeWidth) {
+    else if (Utils.roundTime(endLimit - startLimit) >= timeWidth) {
       // Can be placed at its wanted position but not with its wanted start/end time
       if (startTime > startLimit) {
         newTimes = {
-          startTime: endLimit - timeWidth,
-          endTime: endLimit
+          start: Utils.roundTime(endLimit - timeWidth),
+          end: endLimit
         };
       }
       else {
         newTimes = {
-          startTime: startLimit,
-          endTime: startLimit + timeWidth
+          start: startLimit,
+          end: Utils.roundTime(startLimit + timeWidth)
         };
       }
     }
@@ -375,65 +375,63 @@ define([
     this._group.y(this._group.y() + dy);
   };
 
-  Line.prototype.manageSourceOrder = function(source, newStartX, newEndX) {
-    var cursorX = this._view.getPointerPosition().x;
-    var tmpXs;
+  Line.prototype.manageSourceOrder = function(source, newTimes) {
+    var cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
+    var tmpTimes;
 
-    var newXs = {
-      startX: newStartX,
-      endX: newEndX
-    };
+    var sourceDuration = source.endTime - source.startTime;
 
-    var sourceWidth = this._view.timeToPixels(source.endTime - source.startTime);
-
-    if (newStartX !== null && newEndX !== null) {
+    if (newTimes.start !== null && newTimes.end !== null) {
       if (this._sources[source.id].prevSourceId) {
         // there is another source to the left
-        var previousStartX = this._view.timeToPixels(
-          this._sources[this._sources[source.id].prevSourceId].source.startTime
-        );
+        var previousStartTime = this._sources[this._sources[source.id].prevSourceId].source.startTime;
 
-        if (cursorX + this._view.getFrameOffset() < previousStartX) {
+        if (cursorTime + this._view.getTimeOffset() < previousStartTime) {
           // we want to change order
-          tmpXs = this._changeSourcePosition(
+          tmpTimes = this._changeSourcePosition(
             source,
-            sourceWidth,
-            cursorX + this._view.getFrameOffset()
+            sourceDuration,
+            cursorTime + this._view.getTimeOffset()
           );
 
-          if (tmpXs) {
-            newXs.startX = tmpXs.startTime;
-            newXs.endX = tmpXs.endTime;
+          if (tmpTimes) {
+            newTimes.start = tmpTimes.start;
+            newTimes.end = tmpTimes.end;
           }
         }
       }
 
       if (this._sources[source.id].nextSourceId) {
         // there is another source to the right
-        var nextEndX = this._view.timeToPixels(
-          this._sources[this._sources[source.id].nextSourceId].source.endTime
-        );
+        var nextEndTime = this._sources[this._sources[source.id].nextSourceId].source.endTime;
 
-        if (cursorX + this._view.getFrameOffset() > nextEndX) {
+        if (cursorTime + this._view.getTimeOffset() > nextEndTime) {
           // we want to change order
-          tmpXs = this._changeSourcePosition(
+          tmpTimes = this._changeSourcePosition(
             source,
-            sourceWidth,
-            cursorX + this._view.getFrameOffset()
+            sourceDuration,
+            cursorTime + this._view.getTimeOffset()
           );
 
-          if (tmpXs) {
-            newXs.startX = tmpXs.startTime;
-            newXs.endX = tmpXs.endTime;
+          if (tmpTimes) {
+            newTimes.start = tmpTimes.start;
+            newTimes.end = tmpTimes.end;
           }
         }
       }
     }
 
-    return newXs;
+    if (newTimes.start) {
+      newTimes.start = Utils.roundTime(newTimes.start);
+    }
+    if (newTimes.end) {
+      newTimes.end = Utils.roundTime(newTimes.end);
+    }
+
+    return newTimes;
   };
 
-  Line.prototype._changeSourcePosition = function(source, sourceWidth, x) {
+  Line.prototype._changeSourcePosition = function(source, sourceDuration, time) {
     if (source.orderable && this._firstSourceId) {
       var currentRange = {
         start: null,
@@ -452,35 +450,38 @@ define([
         }
 
         if (currentRange.start) {
-          startLimit = this._view.timeToPixels(
-            currentRange.start.source.endTime
-          );
+          startLimit = currentRange.start.source.endTime;
         }
         else {
           startLimit = 0;
         }
 
         if (currentRange.end) {
-          endLimit = this._view.timeToPixels(
-            currentRange.end.source.startTime
-          );
+          endLimit = currentRange.end.source.startTime;
         }
         else {
           endLimit = null;
         }
 
-        if (x > startLimit && (endLimit === null || x < endLimit)) {
+        if (time > startLimit && (endLimit === null || time < endLimit)) {
           var newTimes = this._canBePlacedBetween(
-            x,
-            x + sourceWidth,
+            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(
-              this._view.pixelsToTime(newTimes.startTime),
-              this._view.pixelsToTime(newTimes.endTime)
+              newTimes.start,
+              newTimes.end
             );
             var prevSourceId = currentRange.start
                                 ? currentRange.start.source.id
@@ -534,7 +535,7 @@ define([
     this._sources[source.id] = sourceObj;
   };
 
-  Line.prototype.manageCollision = function(source, newStartX, newEndX) {
+  Line.prototype.manageCollision = function(source, newTimes) {
     var originalStartTime = null;
     var originalEndTime = null;
     var newStartTime = null;
@@ -542,15 +543,11 @@ define([
     var startLimited = false;
     var endLimited = false;
 
-    var newXs = {
-      startX: newStartX,
-      endX: newEndX,
-      updateTimelineLength: false
-    };
+    newTimes.updateTimelineLength = false;
 
-    if (newStartX !== null) {
+    if (newTimes.start !== null) {
       // startMarker changed
-      originalStartTime = this._view.pixelsToTime(newStartX);
+      originalStartTime = newTimes.start;
       newStartTime = originalStartTime;
 
       if (source.startTime > newStartTime) {
@@ -575,9 +572,9 @@ define([
       }
     }
 
-    if (newEndX !== null) {
+    if (newTimes.end !== null) {
       // endMarker changed
-      originalEndTime = this._view.pixelsToTime(newEndX);
+      originalEndTime = newTimes.end;
       newEndTime = originalEndTime;
 
       if (source.endTime < newEndTime) {
@@ -598,52 +595,52 @@ define([
 
     // Update the other edge if dragging and collision
     if (newStartTime !== null && newEndTime !== null) {
-      var timeWidth = Utils.roundTime(originalEndTime - originalStartTime);
+      var timeWidth = originalEndTime - originalStartTime;
 
       if (startLimited) {
-        newEndTime = newStartTime + timeWidth;
+        newEndTime = Utils.roundTime(newStartTime + timeWidth);
       }
 
       if (endLimited) {
-        newStartTime = newEndTime - timeWidth;
+        newStartTime = Utils.roundTime(newEndTime - timeWidth);
       }
     }
 
     // Check for minimal size of source
     if (newStartTime !== null && newEndTime === null) {
-      if (source.endTime - newStartTime < source.minSize) {
-        newStartTime = source.endTime - source.minSize;
+      if (Utils.roundTime(source.endTime - newStartTime) < source.minSize) {
+        newStartTime = Utils.roundTime(source.endTime - source.minSize);
       }
     }
     else if (newEndTime !== null && newStartTime === null) {
-      if (newEndTime - source.startTime < source.minSize) {
-        newEndTime = source.startTime + source.minSize;
+      if (Utils.roundTime(newEndTime - source.startTime) < source.minSize) {
+        newEndTime = Utils.roundTime(source.startTime + source.minSize);
       }
     }
     else {
-      if (newEndTime - newStartTime < source.minSize) {
+      if (Utils.roundTime(newEndTime - newStartTime) < source.minSize) {
         if (source.endTime !== newEndTime) {
-          newEndTime = newStartTime + source.minSize;
+          newEndTime = Utils.roundTime(newStartTime + source.minSize);
         }
         if (source.startTime !== newStartTime) {
-          newStartTime = newEndTime - source.minSize;
+          newStartTime = Utils.roundTime(newEndTime - source.minSize);
         }
       }
     }
 
     if (newStartTime !== null && newStartTime !== originalStartTime) {
-      newXs.startX = this._view.timeToPixels(newStartTime);
+      newTimes.start = newStartTime;
     }
 
     if (newEndTime !== null && newEndTime !== originalEndTime) {
-      newXs.endX = this._view.timeToPixels(newEndTime);
+      newTimes.end = newEndTime;
 
       if (this._sources[source.id].nextSourceId === null) {
-        newXs.updateTimelineLength = true;
+        newTimes.updateTimelineLength = true;
       }
     }
 
-    return newXs;
+    return newTimes;
   };
 
   // Line.prototype.rescale = function() {

package/src/lines.js

@@ -376,12 +376,12 @@ define([
     }
   };
 
-  Lines.prototype.manageCollision = function(source, newStartX, newEndX) {
-    return this._linesBySourceId[source.id].manageCollision(source, newStartX, newEndX);
+  Lines.prototype.manageCollision = function(source, newTimes) {
+    return this._linesBySourceId[source.id].manageCollision(source, newTimes);
   };
 
-  Lines.prototype.manageSourceOrder = function(source, newStartX, newEndX) {
-    return this._linesBySourceId[source.id].manageSourceOrder(source, newStartX, newEndX);
+  Lines.prototype.manageSourceOrder = function(source, newTimes) {
+    return this._linesBySourceId[source.id].manageSourceOrder(source, newTimes);
   };
 
   // Lines.prototype.rescale = function() {

package/src/source-group.js

@@ -167,12 +167,17 @@ define([
   };
 
   SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
+    const diff = this._view.pixelsToTime(dragPos.x - this._mouseDownX);
+    const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
+
+    const { start, end } = this._initialTimes;
+
     this._view.updateWithAutoScroll(
       function() {
         if (this._layer.updateSource(
           this._source,
-          leftHandle ? dragPos.x + this._view.getFrameOffset() : null,
-          leftHandle ? null : dragPos.x + draggedElement.width() + this._view.getFrameOffset()
+          leftHandle ? start + diff + timeOffsetDiff : null,
+          leftHandle ? null : end + diff + timeOffsetDiff
         )) {
           this._layer.draw();
         }
@@ -265,6 +270,21 @@ define([
     }
   };
 
+  SourceGroup.prototype._onHandleDragStart = function() {
+    this._initialTimeOffset = this._view.getTimeOffset();
+    this._mouseDownX = this._view.getPointerPosition().x;
+    this._initialTimes = {
+      start: this._source.startTime,
+      end: this._source.endTime
+    };
+
+    this._hideButtons();
+  };
+
+  SourceGroup.prototype._onHandleDragEnd = function() {
+    this._showButtons();
+  };
+
   SourceGroup.prototype._addHandles = function(forceCreate) {
     var self = this;
     var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
@@ -281,13 +301,9 @@ define([
         }
       });
 
-      this._leftHandle.on('dragstart', function() {
-        self._hideButtons();
-      });
+      this._leftHandle.on('dragstart', this._onHandleDragStart.bind(this));
 
-      this._leftHandle.on('dragend', function() {
-        self._showButtons();
-      });
+      this._leftHandle.on('dragend', this._onHandleDragEnd.bind(this));
 
       if (this._source.resizable) {
         this._leftHandle.on('mouseover', function() {
@@ -312,13 +328,9 @@ define([
         }
       });
 
-      this._rightHandle.on('dragstart', function() {
-        self._hideButtons();
-      });
+      this._rightHandle.on('dragstart', this._onHandleDragStart.bind(this));
 
-      this._rightHandle.on('dragend', function() {
-        self._showButtons();
-      });
+      this._rightHandle.on('dragend', this._onHandleDragEnd.bind(this));
 
       if (this._source.resizable) {
         this._rightHandle.on('mouseover', function() {

package/src/sources-layer.js

@@ -336,9 +336,9 @@ define([
   };
 
   SourcesLayer.prototype.onSourcesGroupDragStart = function(element) {
-    this._initialFrameOffset = this._view.getFrameOffset();
+    this._initialTimeOffset = this._view.getTimeOffset();
     this._mouseDownX = this._view.getPointerPosition().x;
-    this._selectedElements = {};
+    this._activeElements = {};
 
     const draggedElementId = element.currentTarget.attrs.sourceId;
     const shouldDragSelectedElements = Object.keys(this._view.getSelectedElements()).includes(
@@ -366,13 +366,13 @@ define([
     this._view.drawSourcesLayer();
     this._view.updateTimelineLength();
 
-    this._selectedElements = {};
+    this._activeElements = {};
 
     this._peaks.emit('sources.updated', updatedSources);
   };
 
   SourcesLayer.prototype.onSourcesGroupDrag = function(draggedElement) {
-    this._view.updateWithAutoScroll(this._updateSourcesGroup.bind(this));
+    this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
 
     return {
       x: draggedElement.absolutePosition().x,
@@ -380,7 +380,7 @@ define([
     };
   };
 
-  SourcesLayer.prototype._updateSourcesGroup = function() {
+  SourcesLayer.prototype._dragSourcesGroup = function() {
     var mousePos = Math.min(
       this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(),
       Math.max(
@@ -389,28 +389,28 @@ define([
       )
     );
 
-    const diff = mousePos - this._mouseDownX;
-    const currentFrameOffset = this._view.getFrameOffset();
+    const diff = this._view.pixelsToTime(mousePos - this._mouseDownX);
+    const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
     const mousePosY = this._view.getPointerPosition().y;
     var newEnd = 0;
     var shouldRedraw = false;
 
     (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function(source) {
-      if (!this._selectedElements[source.id]) {
-        this._selectedElements[source.id] = {
-          startX: this._view.timeToPixels(source.startTime),
-          endX: this._view.timeToPixels(source.endTime)
+      if (!this._activeElements[source.id]) {
+        this._activeElements[source.id] = {
+          initialStartTime: source.startTime,
+          initialEndTime: source.endTime
         };
       }
 
-      const { startX, endX } = this._selectedElements[source.id];
+      const { initialStartTime, initialEndTime } = this._activeElements[source.id];
 
       newEnd = Math.max(newEnd, source.endTime);
 
       shouldRedraw = this.updateSource(
         source,
-        startX + diff + (currentFrameOffset - this._initialFrameOffset),
-        endX + diff + (currentFrameOffset - this._initialFrameOffset),
+        initialStartTime + diff + timeOffsetDiff,
+        initialEndTime + diff + timeOffsetDiff,
         mousePosY
       ) || shouldRedraw;
     }.bind(this));
@@ -435,26 +435,25 @@ define([
     );
   };
 
-  SourcesLayer.prototype.updateSource = function(source, newStartX, newEndX, newY) {
-    var newXs = {
-      startX: newStartX,
-      endX: newEndX
+  SourcesLayer.prototype.updateSource = function(source, startTime, endTime, newY) {
+    var newTimes = {
+      start: startTime,
+      end: endTime
     };
 
     if (this._peaks.options.canMoveSourcesBetweenLines) {
       this.manageVerticalPosition(source, newY);
     }
 
-    newXs = this.manageSourceOrder(source, newStartX, newEndX);
-
-    newXs = this.manageCollision(source, newXs.startX, newXs.endX);
+    newTimes = this.manageSourceOrder(source, newTimes);
+    newTimes = this.manageCollision(source, newTimes);
 
     source.updateTimes(
-      newXs.startX !== null ? this._view.pixelsToTime(newXs.startX) : null,
-      newXs.endX !== null ? this._view.pixelsToTime(newXs.endX) : null
+      newTimes.start,
+      newTimes.end
     );
 
-    if (newXs) {
+    if (newTimes) {
       this._updateSource(
         source
       );
@@ -468,12 +467,12 @@ define([
     return this._lines.manageVerticalPosition(source, newY);
   };
 
-  SourcesLayer.prototype.manageSourceOrder = function(source, newStartX, newEndX) {
-    return this._lines.manageSourceOrder(source, newStartX, newEndX);
+  SourcesLayer.prototype.manageSourceOrder = function(source, newTimes) {
+    return this._lines.manageSourceOrder(source, newTimes);
   };
 
-  SourcesLayer.prototype.manageCollision = function(source, newStartX, newEndX) {
-    return this._lines.manageCollision(source, newStartX, newEndX);
+  SourcesLayer.prototype.manageCollision = function(source, newTimes) {
+    return this._lines.manageCollision(source, newTimes);
   };
 
   /**

package/src/timeline-zoomview.js

@@ -599,6 +599,10 @@ define([
   TimelineZoomView.prototype.setZoom = function(newScale) {
     newScale = Math.min(Math.max(this._options.zoomRange[0], newScale), this._options.zoomRange[1]);
 
+    if (newScale === this._timeToPixelsScale) {
+      return false;
+    }
+
     var currentTime = this._peaks.player.getCurrentTime();
     var apexTime;
     var playheadOffsetPixels = this._playheadLayer.getPlayheadOffset();
@@ -623,6 +627,9 @@ define([
 
     this.setFrameOffset(apexPixel - playheadOffsetPixels);
 
+    // Block interactions while updating the view.
+    this.overrideInteractions(true, true);
+
     this.updateTimeline(this._frameOffset, undefined, undefined, true);
 
     this._sourcesLayer.rescale(true);
@@ -632,6 +639,9 @@ define([
 
     this._peaks.emit('zoom.update', newScale, prevScale);
 
+    // Re-enable interactions after updating the view.
+    this.overrideInteractions(false, true);
+
     return true;
   };
 
@@ -679,7 +689,7 @@ define([
    */
 
   TimelineZoomView.prototype.timeToPixels = function(time) {
-    return Utils.roundTime(time) * this._timeToPixelsScale;
+    return Math.round(time * this._timeToPixelsScale);
   };
 
   /**
@@ -704,7 +714,7 @@ define([
 
   TimelineZoomView.prototype.setFrameOffset = function(newFrameOffset) {
     newFrameOffset = Math.max(0, newFrameOffset);
-    this._frameOffset = newFrameOffset;
+    this._frameOffset = Math.round(newFrameOffset);
     this._timeOffset = this.pixelsToTime(this._frameOffset);
   };
 
@@ -713,7 +723,7 @@ define([
   };
 
   TimelineZoomView.prototype.setTimeOffset = function(newTimeOffset) {
-    this._timeOffset = newTimeOffset;
+    this._timeOffset = Utils.roundTime(newTimeOffset);
     this._frameOffset = this.timeToPixels(this._timeOffset);
   };
 
@@ -722,7 +732,7 @@ define([
    *   in pixels.
    */
 
-   TimelineZoomView.prototype.getFrameOffsetY = function() {
+  TimelineZoomView.prototype.getFrameOffsetY = function() {
     return this._frameOffsetY;
   };
 
@@ -738,7 +748,7 @@ define([
    * @returns {Number} The width of the whole view, in pixels.
    */
 
-   TimelineZoomView.prototype.getOriginalWidth = function() {
+  TimelineZoomView.prototype.getOriginalWidth = function() {
     return this._originalWidth;
   };