@checksub_team/peaks_timeline 1.15.5 → 1.15.6

package/package.json

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

package/peaks.js

@@ -14776,9 +14776,6 @@ module.exports = function (Konva, Utils, SVGs) {
         });
         this._layer.add(this._separatingLine);
         this._layer.draw();
-        if (this._peaks.options.enableLineIndicatorContextMenu) {
-            this._createContextMenu();
-        }
         this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
         this._peaks.on('lineIndicator.setText', this._onSetText.bind(this));
     }
@@ -14924,8 +14921,7 @@ module.exports = function (Konva, Utils, SVGs) {
         if (this._indicators[lineId]) {
             var y = this._indicators[lineId].line.getY();
             var isVisible = y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0 && y - this._yPadding < this._height;
-            var isLineNotEmpty = !this._indicators[lineId].line.isEmpty();
-            if (isLineNotEmpty && isVisible) {
+            if (isVisible) {
                 if (!this._indicators[lineId].indicator) {
                     this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].line, this._indicators[lineId].type, this._indicators[lineId].text);
                     this._layer.add(this._indicators[lineId].indicator);
@@ -14947,118 +14943,6 @@ module.exports = function (Konva, Utils, SVGs) {
     LineIndicator.prototype.draw = function () {
         this._layer.draw();
     };
-    LineIndicator.prototype._createContextMenu = function () {
-        var menu = document.createElement('div');
-        var addLine = document.createElement('button');
-        var addLineAbove = document.createElement('button');
-        var addLineBelow = document.createElement('button');
-        var deleteLine = document.createElement('button');
-        var currentIndicator = null;
-        var self = this;
-        menu.style.display = 'none';
-        menu.style.position = 'absolute';
-        menu.style.backgroundColor = 'white';
-        menu.style.boxShadow = '0 0 5px grey';
-        menu.style.borderRadius = '3px';
-        menu.style.zIndex = 2;
-        addLine.style.display = 'none';
-        addLine.style.border = 'none';
-        addLine.style.margin = '0';
-        addLine.style.width = '100%';
-        addLine.style.backgroundColor = 'white';
-        addLine.style.padding = '10px';
-        addLine.textContent = 'Add first line';
-        addLine.onmouseover = function () {
-            this.style.backgroundColor = 'lightgray';
-        };
-        addLine.onmouseout = function () {
-            this.style.backgroundColor = 'white';
-        };
-        addLineAbove.style.display = 'none';
-        addLineAbove.style.border = 'none';
-        addLineAbove.style.margin = '0';
-        addLineAbove.style.width = '100%';
-        addLineAbove.style.backgroundColor = 'white';
-        addLineAbove.style.padding = '10px';
-        addLineAbove.textContent = 'Add line above';
-        addLineAbove.onmouseover = function () {
-            this.style.backgroundColor = 'lightgray';
-        };
-        addLineAbove.onmouseout = function () {
-            this.style.backgroundColor = 'white';
-        };
-        addLineBelow.style.display = 'none';
-        addLineBelow.style.border = 'none';
-        addLineBelow.style.margin = '0';
-        addLineBelow.style.width = '100%';
-        addLineBelow.style.backgroundColor = 'white';
-        addLineBelow.style.padding = '10px';
-        addLineBelow.textContent = 'Add line below';
-        addLineBelow.onmouseover = function () {
-            this.style.backgroundColor = 'lightgray';
-        };
-        addLineBelow.onmouseout = function () {
-            this.style.backgroundColor = 'white';
-        };
-        deleteLine.style.display = 'none';
-        deleteLine.style.border = 'none';
-        deleteLine.style.margin = '0';
-        deleteLine.style.width = '100%';
-        deleteLine.style.backgroundColor = 'white';
-        deleteLine.style.padding = '10px';
-        deleteLine.textContent = 'Delete line';
-        deleteLine.onmouseover = function () {
-            this.style.backgroundColor = 'lightgray';
-        };
-        deleteLine.onmouseout = function () {
-            this.style.backgroundColor = 'white';
-        };
-        menu.appendChild(addLine);
-        menu.appendChild(addLineAbove);
-        menu.appendChild(addLineBelow);
-        menu.appendChild(deleteLine);
-        this._container.appendChild(menu);
-        addLine.addEventListener('click', function () {
-            self._peaks.emit('line.add', 0);
-            self.draw();
-        });
-        addLineAbove.addEventListener('click', function () {
-            var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-            self._peaks.emit('line.add', Number(line.getPosition()));
-            self.draw();
-        });
-        addLineBelow.addEventListener('click', function () {
-            var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-            self._peaks.emit('line.add', Number(line.getPosition()) + 1);
-            self.draw();
-        });
-        deleteLine.addEventListener('click', function () {
-            var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-            self._peaks.emit('line.remove', Number(line.getPosition()));
-            self.draw();
-        });
-        window.addEventListener('click', function () {
-            menu.style.display = 'none';
-        });
-        this._stage.on('contextmenu', function (e) {
-            e.evt.preventDefault();
-            if (e.target === self._stage && Object.keys(self._indicators).length === 0) {
-                addLine.style.display = 'block';
-                addLineAbove.style.display = 'none';
-                addLineBelow.style.display = 'none';
-                deleteLine.style.display = 'none';
-                self._showMenu(menu);
-            } else if (e.target !== self._stage) {
-                currentIndicator = e.target;
-                addLine.style.display = 'none';
-                addLineAbove.style.display = 'block';
-                addLineBelow.style.display = 'block';
-                deleteLine.style.display = 'block';
-                deleteLine.disabled = !self._indicators[currentIndicator.getAttr('lineId')].line.isEmpty();
-                self._showMenu(menu);
-            }
-        });
-    };
     return LineIndicator;
 }(_dereq_('konva'), _dereq_('./utils'), _dereq_('./svgs'));
 },{"./svgs":108,"./utils":113,"konva":43}],92:[function(_dereq_,module,exports){
@@ -15425,19 +15309,20 @@ module.exports = function (Konva, Utils) {
         this._sources[source.id] = sourceObj;
     };
     Line.prototype.manageCollision = function (source, newStartX, newEndX) {
+        var originalStartTime = null;
+        var originalEndTime = null;
         var newStartTime = null;
         var newEndTime = null;
         var startLimited = false;
         var endLimited = false;
-        var timeWidth = this._view.pixelsToTime(newEndX - newStartX);
         var newXs = {
             startX: newStartX,
             endX: newEndX,
-            updateWidth: false,
             updateTimelineLength: false
         };
         if (newStartX !== null) {
-            newStartTime = this._view.pixelsToTime(newStartX);
+            originalStartTime = this._view.pixelsToTime(newStartX);
+            newStartTime = originalStartTime;
             if (source.startTime > newStartTime) {
                 if (this._sources[source.id].prevSourceId) {
                     var previousSource = this._sources[this._sources[source.id].prevSourceId].source;
@@ -15454,7 +15339,8 @@ module.exports = function (Konva, Utils) {
             }
         }
         if (newEndX !== null) {
-            newEndTime = this._view.pixelsToTime(newEndX);
+            originalEndTime = this._view.pixelsToTime(newEndX);
+            newEndTime = originalEndTime;
             if (source.endTime < newEndTime) {
                 if (this._sources[source.id].nextSourceId) {
                     var nextSource = this._sources[this._sources[source.id].nextSourceId].source;
@@ -15466,6 +15352,7 @@ module.exports = function (Konva, Utils) {
             }
         }
         if (newStartTime !== null && newEndTime !== null) {
+            var timeWidth = Utils.roundTime(originalEndTime - originalStartTime);
             if (startLimited) {
                 newEndTime = newStartTime + timeWidth;
             }
@@ -15491,18 +15378,15 @@ module.exports = function (Konva, Utils) {
                 }
             }
         }
-        if (newStartTime !== null) {
+        if (newStartTime !== null && newStartTime !== originalStartTime) {
             newXs.startX = this._view.timeToPixels(newStartTime);
         }
-        if (newEndTime !== null) {
+        if (newEndTime !== null && newEndTime !== originalEndTime) {
             newXs.endX = this._view.timeToPixels(newEndTime);
             if (this._sources[source.id].nextSourceId === null) {
                 newXs.updateTimelineLength = true;
             }
         }
-        if (newXs.startX !== null && newXs.endX === null || newXs.startX === null && newXs.endX !== null) {
-            newXs.updateWidth = true;
-        }
         return newXs;
     };
     Line.prototype.getSourcesAfter = function (time) {
@@ -15970,7 +15854,6 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             sourceButtonsXOffset: 8,
             sourceButtonsYOffset: 0,
             autoScrollThreshold: 0.05,
-            enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,
             minSegmentSize: 0.2,
             canMoveSourcesBetweenLines: true
@@ -18186,13 +18069,16 @@ 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);
         this._unwrappedHeight = source.binaryHeight && source.previewHeight ? source.binaryHeight + source.previewHeight : this._peaks.options.lineHeight;
         this._wrappedHeight = this._peaks.options.wrappedLineHeight;
         this._borderWidth = this._source.borderWidth || 0;
         this._height = this._unwrappedHeight;
         this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
         this._selected = this._source.selected;
+        this._isDragged = false;
         this._previewList = [];
         this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
@@ -18206,8 +18092,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
                 self.drawSourceShape(ctx, null);
             }
         });
-        this._group.on('dragstart', this._layer.onSourcesGroupDragStart.bind(this._layer));
-        this._group.on('dragend', this._layer.onSourcesGroupDragEnd.bind(this._layer));
+        this._group.on('dragstart', this._onDragStart.bind(this));
+        this._group.on('dragend', this._onDragEnd.bind(this));
         this._cursor = null;
         this._group.on('mouseenter', function () {
             self._view.setHoveredElement(self);
@@ -18253,6 +18139,17 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         this.createIndicators();
         this.setLoadingState(this._source.loading);
     }
+    SourceGroup.prototype._onDragStart = function (element) {
+        this._isDragged = true;
+        this._layer.onSourcesGroupDragStart(element);
+    };
+    SourceGroup.prototype._onDragEnd = function (element) {
+        this._isDragged = false;
+        this._layer.onSourcesGroupDragEnd(element);
+    };
+    SourceGroup.prototype.isActive = function () {
+        return this._isDragged;
+    };
     SourceGroup.prototype.addToContent = function (newChild) {
         if (this._source.wrapped) {
             this._wrap.add(newChild);
@@ -18285,9 +18182,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
         this._group.x(startPixel - frameOffset);
         this._x = startPixel;
+        this._roundedX = Math.round(this._x);
         const newWidth = endPixel - startPixel;
         if (newWidth !== this._width) {
             this._width = newWidth;
+            this._roundedWidth = Math.round(this._width);
             if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
                 this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
                 this._updateMarkers();
@@ -18418,9 +18317,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
     };
     SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth, fill) {
         var offset = addBorderWidth ? this._borderWidth : 0;
-        var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
-        var x = Math.max(0, this._view.getFrameOffset() - this._x - radius);
-        var width = Math.min(this._width - x, this._view.getWidth() + radius - Math.max(0, this._x - this._view.getFrameOffset()));
+        var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : Math.max(1, Math.min(this._roundedWidth / 2, Math.min(CORNER_RADIUS, this._height / 2)));
+        var x = Math.max(0, this._view.getFrameOffset() - this._roundedX - radius);
+        var width = Math.min(this._roundedWidth - x, this._view.getWidth() + radius - Math.max(0, this._roundedX - this._view.getFrameOffset()));
         var xWidth = x + width;
         ctx.beginPath();
         ctx.moveTo(x + radius, offset);
@@ -18435,14 +18334,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Loader, Konva)
         ctx.closePath();
         if (fill) {
             if (this._source.shouldShowWarning()) {
-                var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
+                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._width, 0.5);
+                    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._width, 0.5);
+                    var leftStopPosition = Math.min(this._source.warningWidth / this._roundedWidth, 0.5);
                     gradient.addColorStop(0, this._source.warningColor);
                     gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
                 }
@@ -20595,8 +20494,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.updateSource = function (source, newStartX, newEndX, newY) {
         var newXs = {
             startX: newStartX,
-            endX: newEndX,
-            updateWidth: false
+            endX: newEndX
         };
         if (this._peaks.options.canMoveSourcesBetweenLines) {
             this.manageVerticalPosition(source, newY);
@@ -20605,7 +20503,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         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) {
-            this._updateSource(source, newXs.updateWidth);
+            this._updateSource(source);
             return true;
         }
         return false;
@@ -20634,10 +20532,13 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         var count = 0;
         for (var sourceId in this._sourcesGroup) {
             if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
-                var source = this._sourcesGroup[sourceId].getSource();
-                if (!this._isSourceVisible(source, startTime, endTime)) {
-                    this._removeSource(source);
-                    count++;
+                var sourceGroup = this._sourcesGroup[sourceId];
+                if (!sourceGroup.isActive()) {
+                    var source = this._sourcesGroup[sourceId].getSource();
+                    if (!this._isSourceVisible(source, startTime, endTime)) {
+                        this._removeSource(source);
+                        count++;
+                    }
                 }
             }
         }
@@ -21754,7 +21655,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this.updateTimeline(this.timeToPixels(time));
     };
     TimelineZoomView.prototype.timeToPixels = function (time) {
-        return Math.round(time * this._timeToPixelsScale);
+        return Utils.roundTime(time) * this._timeToPixelsScale;
     };
     TimelineZoomView.prototype.pixelsToTime = function (pixels) {
         return Utils.roundTime(pixels / this._timeToPixelsScale);

package/src/line-indicator.js

@@ -70,10 +70,6 @@ define([
 
     this._layer.draw();
 
-    if (this._peaks.options.enableLineIndicatorContextMenu) {
-      this._createContextMenu();
-    }
-
     this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
     this._peaks.on('lineIndicator.setText', this._onSetText.bind(this));
   }
@@ -268,9 +264,8 @@ define([
       var y = this._indicators[lineId].line.getY();
       var isVisible = y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0
         && y - this._yPadding < this._height;
-      var isLineNotEmpty = !this._indicators[lineId].line.isEmpty();
 
-      if (isLineNotEmpty && isVisible) {
+      if (isVisible) {
         if (!this._indicators[lineId].indicator) {
           this._indicators[lineId].indicator = this._createIndicator(
             this._indicators[lineId].line,
@@ -304,157 +299,5 @@ define([
     this._layer.draw();
   };
 
-  LineIndicator.prototype._createContextMenu = function() {
-    var menu = document.createElement('div');
-    var addLine = document.createElement('button');
-    var addLineAbove = document.createElement('button');
-    var addLineBelow = document.createElement('button');
-    var deleteLine = document.createElement('button');
-    var currentIndicator = null;
-    var self = this;
-
-    menu.style.display         = 'none';
-    menu.style.position        = 'absolute';
-    menu.style.backgroundColor = 'white';
-    menu.style.boxShadow       = '0 0 5px grey';
-    menu.style.borderRadius    = '3px';
-    menu.style.zIndex          = 2;
-
-    addLine.style.display         = 'none';
-    addLine.style.border          = 'none';
-    addLine.style.margin          = '0';
-    addLine.style.width           = '100%';
-    addLine.style.backgroundColor = 'white';
-    addLine.style.padding         = '10px';
-
-    addLine.textContent           = 'Add first line';
-
-    addLine.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    addLine.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    addLineAbove.style.display         = 'none';
-    addLineAbove.style.border          = 'none';
-    addLineAbove.style.margin          = '0';
-    addLineAbove.style.width           = '100%';
-    addLineAbove.style.backgroundColor = 'white';
-    addLineAbove.style.padding         = '10px';
-
-    addLineAbove.textContent           = 'Add line above';
-
-    addLineAbove.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    addLineAbove.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    addLineBelow.style.display         = 'none';
-    addLineBelow.style.border          = 'none';
-    addLineBelow.style.margin          = '0';
-    addLineBelow.style.width           = '100%';
-    addLineBelow.style.backgroundColor = 'white';
-    addLineBelow.style.padding         = '10px';
-
-    addLineBelow.textContent           = 'Add line below';
-
-    addLineBelow.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    addLineBelow.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    deleteLine.style.display         = 'none';
-    deleteLine.style.border          = 'none';
-    deleteLine.style.margin          = '0';
-    deleteLine.style.width           = '100%';
-    deleteLine.style.backgroundColor = 'white';
-    deleteLine.style.padding         = '10px';
-
-    deleteLine.textContent           = 'Delete line';
-
-    deleteLine.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    deleteLine.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    menu.appendChild(addLine);
-    menu.appendChild(addLineAbove);
-    menu.appendChild(addLineBelow);
-    menu.appendChild(deleteLine);
-    this._container.appendChild(menu);
-
-    addLine.addEventListener('click', function() {
-      self._peaks.emit('line.add', 0);
-      self.draw();
-    });
-
-    addLineAbove.addEventListener('click', function() {
-      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-
-      self._peaks.emit('line.add', Number(line.getPosition()));
-      self.draw();
-    });
-
-    addLineBelow.addEventListener('click', function() {
-      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-
-      self._peaks.emit('line.add', Number(line.getPosition()) + 1);
-      self.draw();
-    });
-
-    deleteLine.addEventListener('click', function() {
-      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-
-      self._peaks.emit('line.remove', Number(line.getPosition()));
-      self.draw();
-    });
-
-    window.addEventListener('click', function() {
-      // hide menu
-      menu.style.display = 'none';
-    });
-
-    this._stage.on('contextmenu', function(e) {
-      // prevent default behavior
-      e.evt.preventDefault();
-
-      if (e.target === self._stage && Object.keys(self._indicators).length === 0) {
-        // if we are on empty place of the stage
-        // we will show the possibility to add a first line
-        addLine.style.display = 'block';
-        addLineAbove.style.display = 'none';
-        addLineBelow.style.display = 'none';
-        deleteLine.style.display = 'none';
-
-        // show menu
-        self._showMenu(menu);
-      }
-      else if (e.target !== self._stage) {
-        currentIndicator = e.target;
-
-        addLine.style.display = 'none';
-        addLineAbove.style.display = 'block';
-        addLineBelow.style.display = 'block';
-        deleteLine.style.display = 'block';
-
-        deleteLine.disabled = !self._indicators[currentIndicator.getAttr('lineId')].line.isEmpty();
-
-        // show menu
-        self._showMenu(menu);
-      }
-    });
-  };
-
   return LineIndicator;
 });

package/src/line.js

@@ -535,22 +535,23 @@ define([
   };
 
   Line.prototype.manageCollision = function(source, newStartX, newEndX) {
+    var originalStartTime = null;
+    var originalEndTime = null;
     var newStartTime = null;
     var newEndTime = null;
     var startLimited = false;
     var endLimited = false;
-    var timeWidth = this._view.pixelsToTime(newEndX - newStartX);
 
     var newXs = {
       startX: newStartX,
       endX: newEndX,
-      updateWidth: false,
       updateTimelineLength: false
     };
 
     if (newStartX !== null) {
       // startMarker changed
-      newStartTime = this._view.pixelsToTime(newStartX);
+      originalStartTime = this._view.pixelsToTime(newStartX);
+      newStartTime = originalStartTime;
 
       if (source.startTime > newStartTime) {
         // startMarker moved to the left
@@ -576,7 +577,8 @@ define([
 
     if (newEndX !== null) {
       // endMarker changed
-      newEndTime = this._view.pixelsToTime(newEndX);
+      originalEndTime = this._view.pixelsToTime(newEndX);
+      newEndTime = originalEndTime;
 
       if (source.endTime < newEndTime) {
         // endMarker moved to the right
@@ -596,6 +598,8 @@ define([
 
     // Update the other edge if dragging and collision
     if (newStartTime !== null && newEndTime !== null) {
+      var timeWidth = Utils.roundTime(originalEndTime - originalStartTime);
+
       if (startLimited) {
         newEndTime = newStartTime + timeWidth;
       }
@@ -627,11 +631,11 @@ define([
       }
     }
 
-    if (newStartTime !== null) {
+    if (newStartTime !== null && newStartTime !== originalStartTime) {
       newXs.startX = this._view.timeToPixels(newStartTime);
     }
 
-    if (newEndTime !== null) {
+    if (newEndTime !== null && newEndTime !== originalEndTime) {
       newXs.endX = this._view.timeToPixels(newEndTime);
 
       if (this._sources[source.id].nextSourceId === null) {
@@ -639,11 +643,6 @@ define([
       }
     }
 
-    if ((newXs.startX !== null && newXs.endX === null)
-      || (newXs.startX === null && newXs.endX !== null)) {
-      newXs.updateWidth = true;
-    }
-
     return newXs;
   };
 

package/src/main.js

@@ -395,12 +395,6 @@ define([
        */
       autoScrollThreshold:      0.05,
 
-      /**
-       * Indicates whether or not the context menu should be displayed
-       * on right click in the line indicator.
-       */
-      enableLineIndicatorContextMenu: true,
-
       /**
        * The minimal size of a source, in seconds
        */

package/src/source-group.js

@@ -47,7 +47,9 @@ 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);
     this._unwrappedHeight = source.binaryHeight && source.previewHeight ?
                             source.binaryHeight + source.previewHeight :
                             this._peaks.options.lineHeight;
@@ -56,6 +58,7 @@ define([
     this._height = this._unwrappedHeight;
     this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
     this._selected = this._source.selected;
+    this._isDragged = false;
 
     this._previewList = [];
 
@@ -73,8 +76,8 @@ define([
       }
     });
 
-    this._group.on('dragstart', this._layer.onSourcesGroupDragStart.bind(this._layer));
-    this._group.on('dragend', this._layer.onSourcesGroupDragEnd.bind(this._layer));
+    this._group.on('dragstart', this._onDragStart.bind(this));
+    this._group.on('dragend', this._onDragEnd.bind(this));
 
     this._cursor = null;
     this._group.on('mouseenter', function() {
@@ -132,6 +135,20 @@ define([
     this.setLoadingState(this._source.loading);
   }
 
+  SourceGroup.prototype._onDragStart = function(element) {
+    this._isDragged = true;
+    this._layer.onSourcesGroupDragStart(element);
+  };
+
+  SourceGroup.prototype._onDragEnd = function(element) {
+    this._isDragged = false;
+    this._layer.onSourcesGroupDragEnd(element);
+  };
+
+  SourceGroup.prototype.isActive = function() {
+    return this._isDragged;
+  };
+
   SourceGroup.prototype.addToContent = function(newChild) {
     if (this._source.wrapped) {
       this._wrap.add(newChild);
@@ -181,11 +198,13 @@ 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) {
@@ -355,7 +374,7 @@ define([
     Math.max(
       1,
       Math.min(
-        this._width / 2,
+        this._roundedWidth / 2,
         Math.min(
           CORNER_RADIUS,
           this._height / 2
@@ -364,13 +383,13 @@ define([
     );
     var x = Math.max(
       0,
-      this._view.getFrameOffset() - this._x - radius
+      this._view.getFrameOffset() - this._roundedX - radius
     );
     var width = Math.min(
-      this._width - x,
+      this._roundedWidth - x,
       this._view.getWidth() + radius - Math.max(
         0,
-        this._x - this._view.getFrameOffset()
+        this._roundedX - this._view.getFrameOffset()
       )
     );
     var xWidth = x + width;
@@ -394,17 +413,17 @@ define([
 
     if (fill) {
       if (this._source.shouldShowWarning()) {
-        var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
+        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._width), 0.5);
+          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._width, 0.5);
+          var leftStopPosition = Math.min(this._source.warningWidth / this._roundedWidth, 0.5);
 
           gradient.addColorStop(0, this._source.warningColor);
           gradient.addColorStop(leftStopPosition, this._source.backgroundColor);

package/src/sources-layer.js

@@ -438,8 +438,7 @@ define([
   SourcesLayer.prototype.updateSource = function(source, newStartX, newEndX, newY) {
     var newXs = {
       startX: newStartX,
-      endX: newEndX,
-      updateWidth: false
+      endX: newEndX
     };
 
     if (this._peaks.options.canMoveSourcesBetweenLines) {
@@ -457,8 +456,7 @@ define([
 
     if (newXs) {
       this._updateSource(
-        source,
-        newXs.updateWidth
+        source
       );
 
       return true;
@@ -513,11 +511,15 @@ define([
 
     for (var sourceId in this._sourcesGroup) {
       if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
-        var source = this._sourcesGroup[sourceId].getSource();
+        var sourceGroup = this._sourcesGroup[sourceId];
 
-        if (!this._isSourceVisible(source, startTime, endTime)) {
-          this._removeSource(source);
-          count++;
+        if (!sourceGroup.isActive()) {
+          var source = this._sourcesGroup[sourceId].getSource();
+
+          if (!this._isSourceVisible(source, startTime, endTime)) {
+            this._removeSource(source);
+            count++;
+          }
         }
       }
     }

package/src/timeline-zoomview.js

@@ -679,7 +679,7 @@ define([
    */
 
   TimelineZoomView.prototype.timeToPixels = function(time) {
-    return Math.round(time * this._timeToPixelsScale);
+    return Utils.roundTime(time) * this._timeToPixelsScale;
   };
 
   /**