@checksub_team/peaks_timeline 1.5.1 → 1.5.2

package/package.json

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

package/peaks.js

@@ -16843,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);
     };
@@ -17308,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) {
@@ -19202,6 +19217,7 @@ module.exports = function (Colors, Segment, Utils) {
             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 = [];

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

@@ -271,6 +271,8 @@ define([
       segment.relativeId = (idsByPosition[segment.line] || 0) + 1;
       idsByPosition[segment.line] = segment.relativeId;
     });
+
+    this._peaks.emit('segments.relative_ids_refreshed');
   };
 
   /**