@checksub_team/peaks_timeline 1.15.4-alpha.1 → 1.15.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.15.4-alpha.1",
+  "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){
@@ -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
@@ -17632,6 +17515,20 @@ module.exports = function (Utils) {
     Segment.prototype.shouldShowWarning = function () {
         return this.duration > Utils.roundTime(this.endTime - this.startTime);
     };
+    Segment.prototype.toSerializable = function () {
+        var serializable = {};
+        var proto = Object.getPrototypeOf(this);
+        var descriptors = Object.getOwnPropertyDescriptors(proto);
+        for (var prop in descriptors) {
+            if (Object.prototype.hasOwnProperty.call(descriptors, prop)) {
+                var descriptor = descriptors[prop];
+                if (descriptor.enumerable && descriptor.get && typeof descriptor.get === 'function') {
+                    serializable[prop] = this[prop];
+                }
+            }
+        }
+        return serializable;
+    };
     return Segment;
 }(_dereq_('./utils'));
 },{"./utils":113}],104:[function(_dereq_,module,exports){
@@ -18172,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({
@@ -18192,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);
@@ -18239,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);
@@ -18271,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();
@@ -18404,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);
@@ -18421,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);
                 }
@@ -20299,6 +20212,25 @@ module.exports = function (Utils) {
             return visibleTitle;
         }.bind(this), []).join(' ');
     };
+    Source.prototype.toSerializable = function () {
+        var serializable = {};
+        for (var key in this) {
+            if (Object.prototype.hasOwnProperty.call(this, key) && key.startsWith('custom_')) {
+                serializable[key] = this[key];
+            }
+        }
+        var proto = Object.getPrototypeOf(this);
+        var descriptors = Object.getOwnPropertyDescriptors(proto);
+        for (var prop in descriptors) {
+            if (Object.prototype.hasOwnProperty.call(descriptors, prop)) {
+                var descriptor = descriptors[prop];
+                if (descriptor.enumerable && descriptor.get && typeof descriptor.get === 'function') {
+                    serializable[prop] = this[prop];
+                }
+            }
+        }
+        return serializable;
+    };
     return Source;
 }(_dereq_('./utils'));
 },{"./utils":113}],107:[function(_dereq_,module,exports){
@@ -20600,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++;
+                    }
                 }
             }
         }
@@ -20952,6 +20887,11 @@ module.exports = function (Colors, Segment, Utils) {
     TimelineSegments.prototype.getSegments = function () {
         return this._segments;
     };
+    TimelineSegments.prototype.getSegmentsSerialized = function () {
+        return this._segments.map(function (segment) {
+            return segment.toSerializable();
+        });
+    };
     TimelineSegments.prototype.addSegmentsToPosition = function (lineId, position) {
         this._peaks.emit('segments.show', lineId, position);
     };
@@ -21168,6 +21108,11 @@ module.exports = function (Source, Utils) {
     TimelineSources.prototype.getSources = function () {
         return this._sources;
     };
+    TimelineSources.prototype.getSourcesSerialized = function () {
+        return this._sources.map(function (source) {
+            return source.toSerializable();
+        });
+    };
     TimelineSources.prototype.getSource = function (id) {
         return this._sourcesById[id] || null;
     };
@@ -21710,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/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/segment.js

@@ -389,5 +389,31 @@ define([
     return this.duration > Utils.roundTime(this.endTime - this.startTime);
   };
 
+  /**
+   * Returns a serializable object containing only the properties defined with Object.defineProperties.
+   * This includes all enumerable properties that can be safely serialized.
+   *
+   * @returns {Object} A plain object containing the serializable properties of the segment.
+   */
+  Segment.prototype.toSerializable = function() {
+    var serializable = {};
+
+    // Add all the enumerable properties from the prototype
+    var proto = Object.getPrototypeOf(this);
+    var descriptors = Object.getOwnPropertyDescriptors(proto);
+
+    for (var prop in descriptors) {
+      if (Object.prototype.hasOwnProperty.call(descriptors, prop)) {
+        var descriptor = descriptors[prop];
+
+        if (descriptor.enumerable && descriptor.get && typeof descriptor.get === 'function') {
+          serializable[prop] = this[prop];
+        }
+      }
+    }
+
+    return serializable;
+  };
+
   return Segment;
 });

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/source.js

@@ -1232,5 +1232,38 @@ define([
     }.bind(this), []).join(' ');
   };
 
+  /**
+   * Returns a serializable object containing only the properties defined with Object.defineProperties.
+   * This includes all enumerable properties that can be safely serialized.
+   *
+   * @returns {Object} A plain object containing the serializable properties of the source.
+   */
+  Source.prototype.toSerializable = function() {
+    var serializable = {};
+
+    // Get all custom properties
+    for (var key in this) {
+      if (Object.prototype.hasOwnProperty.call(this, key) && key.startsWith('custom_')) {
+        serializable[key] = this[key];
+      }
+    }
+
+    // Add all the enumerable properties from the prototype
+    var proto = Object.getPrototypeOf(this);
+    var descriptors = Object.getOwnPropertyDescriptors(proto);
+
+    for (var prop in descriptors) {
+      if (Object.prototype.hasOwnProperty.call(descriptors, prop)) {
+        var descriptor = descriptors[prop];
+
+        if (descriptor.enumerable && descriptor.get && typeof descriptor.get === 'function') {
+          serializable[prop] = this[prop];
+        }
+      }
+    }
+
+    return serializable;
+  };
+
   return Source;
 });

package/src/sources-layer.js

@@ -511,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 (!sourceGroup.isActive()) {
+          var source = this._sourcesGroup[sourceId].getSource();
 
-        if (!this._isSourceVisible(source, startTime, endTime)) {
-          this._removeSource(source);
-          count++;
+          if (!this._isSourceVisible(source, startTime, endTime)) {
+            this._removeSource(source);
+            count++;
+          }
         }
       }
     }

package/src/timeline-segments.js

@@ -160,6 +160,18 @@ define([
     return this._segments;
   };
 
+  /**
+   * Returns all segments, serialized to a plain object.
+   *
+   * @returns {Array<Object>}
+   */
+
+  TimelineSegments.prototype.getSegmentsSerialized = function() {
+    return this._segments.map(function(segment) {
+      return segment.toSerializable();
+    });
+  };
+
   /**
    * Add segments to the given line so they can be displayed.
    */

package/src/timeline-sources.js

@@ -240,6 +240,18 @@ define([
     return this._sources;
   };
 
+  /**
+   * Returns all sources, serialized to a plain object.
+   *
+   * @returns {Array<Object>}
+   */
+
+  TimelineSources.prototype.getSourcesSerialized = function() {
+    return this._sources.map(function(source) {
+      return source.toSerializable();
+    });
+  };
+
   /**
    * Returns the Source with the given id, or <code>null</code> if not found.
    *

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;
   };
 
   /**