@checksub_team/peaks_timeline 1.15.4-alpha.1 → 1.15.5

package/package.json

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

package/peaks.js

@@ -15425,20 +15425,19 @@ 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) {
-            originalStartTime = this._view.pixelsToTime(newStartX);
-            newStartTime = originalStartTime;
+            newStartTime = this._view.pixelsToTime(newStartX);
             if (source.startTime > newStartTime) {
                 if (this._sources[source.id].prevSourceId) {
                     var previousSource = this._sources[this._sources[source.id].prevSourceId].source;
@@ -15455,8 +15454,7 @@ module.exports = function (Konva, Utils) {
             }
         }
         if (newEndX !== null) {
-            originalEndTime = this._view.pixelsToTime(newEndX);
-            newEndTime = originalEndTime;
+            newEndTime = this._view.pixelsToTime(newEndX);
             if (source.endTime < newEndTime) {
                 if (this._sources[source.id].nextSourceId) {
                     var nextSource = this._sources[this._sources[source.id].nextSourceId].source;
@@ -15468,7 +15466,6 @@ module.exports = function (Konva, Utils) {
             }
         }
         if (newStartTime !== null && newEndTime !== null) {
-            var timeWidth = Utils.roundTime(originalEndTime - originalStartTime);
             if (startLimited) {
                 newEndTime = newStartTime + timeWidth;
             }
@@ -15494,15 +15491,18 @@ module.exports = function (Konva, Utils) {
                 }
             }
         }
-        if (newStartTime !== null && newStartTime !== originalStartTime) {
+        if (newStartTime !== null) {
             newXs.startX = this._view.timeToPixels(newStartTime);
         }
-        if (newEndTime !== null && newEndTime !== originalEndTime) {
+        if (newEndTime !== null) {
             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) {
@@ -17632,6 +17632,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){
@@ -20299,6 +20313,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){
@@ -20562,7 +20595,8 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.updateSource = function (source, newStartX, newEndX, newY) {
         var newXs = {
             startX: newStartX,
-            endX: newEndX
+            endX: newEndX,
+            updateWidth: false
         };
         if (this._peaks.options.canMoveSourcesBetweenLines) {
             this.manageVerticalPosition(source, newY);
@@ -20571,7 +20605,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);
+            this._updateSource(source, newXs.updateWidth);
             return true;
         }
         return false;
@@ -20952,6 +20986,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 +21207,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;
     };

package/src/line.js

@@ -535,23 +535,22 @@ 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
-      originalStartTime = this._view.pixelsToTime(newStartX);
-      newStartTime = originalStartTime;
+      newStartTime = this._view.pixelsToTime(newStartX);
 
       if (source.startTime > newStartTime) {
         // startMarker moved to the left
@@ -577,8 +576,7 @@ define([
 
     if (newEndX !== null) {
       // endMarker changed
-      originalEndTime = this._view.pixelsToTime(newEndX);
-      newEndTime = originalEndTime;
+      newEndTime = this._view.pixelsToTime(newEndX);
 
       if (source.endTime < newEndTime) {
         // endMarker moved to the right
@@ -598,8 +596,6 @@ 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;
       }
@@ -631,11 +627,11 @@ define([
       }
     }
 
-    if (newStartTime !== null && newStartTime !== originalStartTime) {
+    if (newStartTime !== null) {
       newXs.startX = this._view.timeToPixels(newStartTime);
     }
 
-    if (newEndTime !== null && newEndTime !== originalEndTime) {
+    if (newEndTime !== null) {
       newXs.endX = this._view.timeToPixels(newEndTime);
 
       if (this._sources[source.id].nextSourceId === null) {
@@ -643,6 +639,11 @@ define([
       }
     }
 
+    if ((newXs.startX !== null && newXs.endX === null)
+      || (newXs.startX === null && newXs.endX !== null)) {
+      newXs.updateWidth = true;
+    }
+
     return newXs;
   };
 

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.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

@@ -438,7 +438,8 @@ define([
   SourcesLayer.prototype.updateSource = function(source, newStartX, newEndX, newY) {
     var newXs = {
       startX: newStartX,
-      endX: newEndX
+      endX: newEndX,
+      updateWidth: false
     };
 
     if (this._peaks.options.canMoveSourcesBetweenLines) {
@@ -456,7 +457,8 @@ define([
 
     if (newXs) {
       this._updateSource(
-        source
+        source,
+        newXs.updateWidth
       );
 
       return true;

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.
    *