@checksub_team/peaks_timeline 1.5.0 → 1.5.1

package/package.json

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

package/peaks.js

@@ -15587,7 +15587,7 @@ module.exports = function (DefaultSegmentMarker, Utils, Konva) {
             y: options.y,
             width: options.width,
             height: options.height,
-            text: Utils.removeLineBreaks(options.segment.labelText),
+            text: '#' + options.segment.relativeId + ' ' + Utils.removeLineBreaks(options.segment.labelText),
             textAlign: 'left',
             verticalAlign: 'middle',
             wrap: 'none',
@@ -16681,6 +16681,7 @@ module.exports = function (Utils) {
         this._line = opts.line;
         this._indicators = opts.indicators;
         this._minSize = peaks.options.minSegmentSize;
+        this._relativeId = 0;
         if (shouldNotifyUpdate) {
             peaks.emit('segments.updated', [this]);
         }
@@ -16775,6 +16776,15 @@ module.exports = function (Utils) {
             get: function () {
                 return this._minSize;
             }
+        },
+        relativeId: {
+            enumerable: true,
+            get: function () {
+                return this._relativeId;
+            },
+            set: function (newId) {
+                this._relativeId = newId;
+            }
         }
     });
     Segment.prototype.update = function (options) {
@@ -19181,8 +19191,18 @@ module.exports = function (Colors, Segment, Utils) {
         segments.forEach(function (segment) {
             self._addSegment(segment);
         });
+        this.refreshRelativeIds();
         this._peaks.emit('segments.add', segments);
     };
+    TimelineSegments.prototype.refreshRelativeIds = function () {
+        var idsByPosition = {};
+        this._segments.sort(function (a, b) {
+            return a.startTime - b.startTime;
+        }).forEach(function (segment) {
+            segment.relativeId = (idsByPosition[segment.line] || 0) + 1;
+            idsByPosition[segment.line] = segment.relativeId;
+        });
+    };
     TimelineSegments.prototype._findSegment = function (predicate) {
         var indexes = [];
         for (var i = 0, length = this._segments.length; i < length; i++) {
@@ -19205,6 +19225,7 @@ module.exports = function (Colors, Segment, Utils) {
     TimelineSegments.prototype._removeSegments = function (predicate) {
         var indexes = this._findSegment(predicate);
         var removed = this._removeIndexes(indexes);
+        this.refreshRelativeIds();
         this._peaks.emit('segments.remove', removed);
         return removed;
     };

package/src/marker-factories.js

@@ -71,7 +71,10 @@ define([
       y:             options.y,
       width:         options.width,
       height:        options.height,
-      text:          Utils.removeLineBreaks(options.segment.labelText),
+      text:          '#'
+                      + options.segment.relativeId
+                      + ' '
+                      + Utils.removeLineBreaks(options.segment.labelText),
       textAlign:     'left',
       verticalAlign: 'middle',
       wrap:          'none',

package/src/segment.js

@@ -131,6 +131,7 @@ define([
     this._line            = opts.line;
     this._indicators      = opts.indicators;
     this._minSize         = peaks.options.minSegmentSize;
+    this._relativeId      = 0;
 
     if (shouldNotifyUpdate) {
       peaks.emit('segments.updated', [this]);
@@ -229,6 +230,15 @@ define([
       get: function() {
         return this._minSize;
       }
+    },
+    relativeId: {
+      enumerable: true,
+      get: function() {
+        return this._relativeId;
+      },
+      set: function(newId) {
+        this._relativeId = newId;
+      }
     }
   });
 

package/src/timeline-segments.js

@@ -251,9 +251,28 @@ define([
       self._addSegment(segment);
     });
 
+    this.refreshRelativeIds();
+
     this._peaks.emit('segments.add', segments);
   };
 
+  /**
+   * Set relative ids for all segments.
+   *
+   * @private
+   */
+
+  TimelineSegments.prototype.refreshRelativeIds = function() {
+    var idsByPosition = {};
+
+    this._segments.sort(function(a, b) {
+      return a.startTime - b.startTime;
+    }).forEach(function(segment) {
+      segment.relativeId = (idsByPosition[segment.line] || 0) + 1;
+      idsByPosition[segment.line] = segment.relativeId;
+    });
+  };
+
   /**
    * Returns the indexes of segments that match the given predicate.
    *
@@ -317,6 +336,8 @@ define([
 
     var removed = this._removeIndexes(indexes);
 
+    this.refreshRelativeIds();
+
     this._peaks.emit('segments.remove', removed);
 
     return removed;