@checksub_team/peaks_timeline 1.5.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "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) {
@@ -16833,7 +16843,20 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._isMagnetized = false;
         this._peaks.on('segments.setMagnetizing', this.setMagnetizing.bind(this));
         this._peaks.on('segment.setIndicators', this.setIndicators.bind(this));
+        this._peaks.on('segments.relative_ids_refreshed', this._onRelativeIdsRefreshed.bind(this));
     }
+    SegmentsGroup.prototype._onRelativeIdsRefreshed = function () {
+        for (var id in this._segmentShapes) {
+            if (Utils.objectHasProperty(this._segmentShapes, id)) {
+                var segmentShape = this._segmentShapes[id];
+                var newText = '#' + segmentShape._segment.relativeId + ' ' + Utils.removeLineBreaks(segmentShape._segment.labelText);
+                if (newText === segmentShape._label.text) {
+                    return;
+                }
+                segmentShape._label.setText(newText);
+            }
+        }
+    };
     SegmentsGroup.prototype.addToGroup = function (group) {
         group.add(this._group);
     };
@@ -17298,6 +17321,8 @@ module.exports = function (SegmentShape, Utils, Konva) {
     };
     SegmentsGroup.prototype.destroy = function () {
         this._peaks.off('segments.setMagnetizing', this.setMagnetizing);
+        this._peaks.off('segment.setIndicators', this.setIndicators);
+        this._peaks.off('segments.relative_ids_refreshed', this._onRelativeIdsRefreshed);
     };
     SegmentsGroup.prototype.fitToView = function () {
         for (var segmentId in this._segmentShapes) {
@@ -19181,8 +19206,19 @@ 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;
+        });
+        this._peaks.emit('segments.relative_ids_refreshed');
+    };
     TimelineSegments.prototype._findSegment = function (predicate) {
         var indexes = [];
         for (var i = 0, length = this._segments.length; i < length; i++) {
@@ -19205,6 +19241,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/segments-group.js

@@ -46,8 +46,28 @@ define([
 
     this._peaks.on('segments.setMagnetizing', this.setMagnetizing.bind(this));
     this._peaks.on('segment.setIndicators', this.setIndicators.bind(this));
+    this._peaks.on('segments.relative_ids_refreshed', this._onRelativeIdsRefreshed.bind(this));
   }
 
+  SegmentsGroup.prototype._onRelativeIdsRefreshed = function() {
+    for (var id in this._segmentShapes) {
+      if (Utils.objectHasProperty(this._segmentShapes, id)) {
+        var segmentShape = this._segmentShapes[id];
+
+        var newText = '#'
+          + segmentShape._segment.relativeId
+          + ' '
+          + Utils.removeLineBreaks(segmentShape._segment.labelText);
+
+        if (newText === segmentShape._label.text) {
+          return;
+        }
+
+        segmentShape._label.setText(newText);
+      }
+    }
+  };
+
   /**
    * Adds the group to the given {Konva.Group}.
    *
@@ -743,6 +763,8 @@ define([
 
   SegmentsGroup.prototype.destroy = function() {
     this._peaks.off('segments.setMagnetizing', this.setMagnetizing);
+    this._peaks.off('segment.setIndicators', this.setIndicators);
+    this._peaks.off('segments.relative_ids_refreshed', this._onRelativeIdsRefreshed);
   };
 
   SegmentsGroup.prototype.fitToView = function() {

package/src/timeline-segments.js

@@ -251,9 +251,30 @@ 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;
+    });
+
+    this._peaks.emit('segments.relative_ids_refreshed');
+  };
+
   /**
    * Returns the indexes of segments that match the given predicate.
    *
@@ -317,6 +338,8 @@ define([
 
     var removed = this._removeIndexes(indexes);
 
+    this.refreshRelativeIds();
+
     this._peaks.emit('segments.remove', removed);
 
     return removed;