@checksub_team/peaks_timeline 2.5.0-alpha.0 → 2.5.0-alpha.1

package/package.json

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

package/peaks.js

@@ -17297,16 +17297,7 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._onSegmentHandleDrag = this._onSegmentHandleDrag.bind(this);
         this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
         this._onSegmentHandleDragEnd = this._onSegmentHandleDragEnd.bind(this);
-        this._label = this._peaks.options.createSegmentLabel({
-            x: this._view.timeToPixels(segment.startTime),
-            y: this._segmentY,
-            width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
-            height: this._segmentHeight,
-            segment: segment,
-            view: this._view.getName(),
-            group: this._group,
-            fontSize: 12
-        });
+        this._createLabel();
         this._createMarkers();
         this._indicatorsGroup = new Konva.Group();
         this._shapeGroup.add(this._indicatorsGroup);
@@ -17318,9 +17309,53 @@ module.exports = function (Konva, SegmentMarker, Utils) {
     SegmentShape.prototype._cornerRadius = function () {
         return !Utils.isNullOrUndefined(this._segment.borderRadius) ? this._segment.borderRadius : SEGMENT_CORNER_RADIUS;
     };
+    SegmentShape.prototype._createLabel = function () {
+        this._label = this._peaks.options.createSegmentLabel({
+            x: this._view.timeToPixels(this._segment.startTime),
+            y: this._segmentY,
+            width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+            height: this._segmentHeight,
+            segment: this._segment,
+            view: this._view.getName(),
+            group: this._group,
+            fontSize: 12
+        });
+    };
+    SegmentShape.prototype._rebuildSelectionDependentNodes = function () {
+        var group = this._shapeGroup.getParent();
+        if (this._label) {
+            this._label.destroy();
+            this._label = null;
+        }
+        if (this._startMarker) {
+            this._startMarker.destroy();
+            this._startMarker = null;
+        }
+        if (this._endMarker) {
+            this._endMarker.destroy();
+            this._endMarker = null;
+        }
+        this._createLabel();
+        this._createMarkers();
+        if (group) {
+            if (this._label) {
+                this._label.moveTo(group);
+            }
+            if (this._startMarker) {
+                this._startMarker.moveTo(group);
+            }
+            if (this._endMarker) {
+                this._endMarker.moveTo(group);
+            }
+        }
+    };
     SegmentShape.prototype.update = function () {
         this._applyDisplayTimes(this._segment.startTime, this._segment.endTime);
     };
+    SegmentShape.prototype.setSelected = function () {
+        this._rebuildSelectionDependentNodes();
+        this.update();
+    };
     SegmentShape.prototype._applyDisplayTimes = function (startTime, endTime) {
         var startPixel = this._view.timeToPixels(startTime);
         var endPixel = this._view.timeToPixels(endTime);
@@ -17923,6 +17958,13 @@ module.exports = function (SegmentShape, Utils, Konva) {
             this._draw();
         }
     };
+    SegmentsGroup.prototype.setSelected = function (segment) {
+        var segmentShape = this._segmentShapes[segment.id];
+        if (segmentShape) {
+            segmentShape.setSelected();
+            this._draw();
+        }
+    };
     SegmentsGroup.prototype.addToUpdatedSegments = function (segment) {
         if (this._updatedSegments.indexOf(segment) === -1) {
             this._updatedSegments.push(segment);
@@ -19946,6 +19988,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
         this._peaks.on('handler.sources.hide', this._onSourcesHide.bind(this));
         this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
+        this._peaks.on('segments.setSelected', this._onSegmentsSetSelected.bind(this));
         this._peaks.on('model.source.update', this._onSourceUpdate.bind(this));
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
         this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
@@ -20066,12 +20109,23 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         }
     };
     SourcesLayer.prototype._onSourcesSetSelected = function (sources) {
+        var sourcesGroups = this._lineGroups.getSourcesGroups();
         sources.forEach(function (source) {
-            const sourceGroup = this._sourcesGroup[source.id];
+            const sourceGroup = sourcesGroups[source.id];
             if (sourceGroup) {
                 sourceGroup.setSelected();
             }
-        }.bind(this));
+        });
+        this.batchDraw();
+    };
+    SourcesLayer.prototype._onSegmentsSetSelected = function (segments) {
+        var segmentsGroups = this._lineGroups.getSegmentsGroups();
+        segments.forEach(function (segment) {
+            var segmentsGroup = segmentsGroups[segment.line];
+            if (segmentsGroup) {
+                segmentsGroup.setSelected(segment);
+            }
+        });
         this.batchDraw();
     };
     SourcesLayer.prototype._onSourcesAdd = function (sources) {
@@ -22096,10 +22150,6 @@ module.exports = function (Utils) {
             this._endTime = Utils.roundTime(newEndTime);
         }
     };
-    Segment.prototype.setSelected = function (selected) {
-        this._selected = selected;
-        this._peaks.emit('model.segment.selected', this);
-    };
     Segment.prototype.isVisible = function (startTime, endTime) {
         return this.startTime < endTime && startTime < this.endTime;
     };

package/src/components/segment-shape.js

@@ -105,16 +105,7 @@ define([
     this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
     this._onSegmentHandleDragEnd   = this._onSegmentHandleDragEnd.bind(this);
 
-    this._label = this._peaks.options.createSegmentLabel({
-      x:        this._view.timeToPixels(segment.startTime),
-      y:        this._segmentY,
-      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
-      height:   this._segmentHeight,
-      segment:  segment,
-      view:     this._view.getName(),
-      group:    this._group,
-      fontSize: 12
-    });
+    this._createLabel();
 
     this._createMarkers();
 
@@ -134,10 +125,64 @@ define([
       SEGMENT_CORNER_RADIUS;
   };
 
+  SegmentShape.prototype._createLabel = function() {
+    this._label = this._peaks.options.createSegmentLabel({
+      x:        this._view.timeToPixels(this._segment.startTime),
+      y:        this._segmentY,
+      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+      height:   this._segmentHeight,
+      segment:  this._segment,
+      view:     this._view.getName(),
+      group:    this._group,
+      fontSize: 12
+    });
+  };
+
+  SegmentShape.prototype._rebuildSelectionDependentNodes = function() {
+    var group = this._shapeGroup.getParent();
+
+    if (this._label) {
+      this._label.destroy();
+      this._label = null;
+    }
+
+    if (this._startMarker) {
+      this._startMarker.destroy();
+      this._startMarker = null;
+    }
+
+    if (this._endMarker) {
+      this._endMarker.destroy();
+      this._endMarker = null;
+    }
+
+    this._createLabel();
+    this._createMarkers();
+
+    if (group) {
+      if (this._label) {
+        this._label.moveTo(group);
+      }
+
+      if (this._startMarker) {
+        this._startMarker.moveTo(group);
+      }
+
+      if (this._endMarker) {
+        this._endMarker.moveTo(group);
+      }
+    }
+  };
+
   SegmentShape.prototype.update = function() {
     this._applyDisplayTimes(this._segment.startTime, this._segment.endTime);
   };
 
+  SegmentShape.prototype.setSelected = function() {
+    this._rebuildSelectionDependentNodes();
+    this.update();
+  };
+
   SegmentShape.prototype._applyDisplayTimes = function(startTime, endTime) {
     var startPixel  = this._view.timeToPixels(startTime);
     var endPixel    = this._view.timeToPixels(endTime);

package/src/components/segments-group.js

@@ -546,6 +546,15 @@ define([
     }
   };
 
+  SegmentsGroup.prototype.setSelected = function(segment) {
+    var segmentShape = this._segmentShapes[segment.id];
+
+    if (segmentShape) {
+      segmentShape.setSelected();
+      this._draw();
+    }
+  };
+
   SegmentsGroup.prototype.addToUpdatedSegments = function(segment) {
     if (this._updatedSegments.indexOf(segment) === -1) {
       this._updatedSegments.push(segment);

package/src/components/sources-layer.js

@@ -77,6 +77,7 @@ define([
     this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
     this._peaks.on('handler.sources.hide', this._onSourcesHide.bind(this));
     this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
+    this._peaks.on('segments.setSelected', this._onSegmentsSetSelected.bind(this));
     this._peaks.on('model.source.update', this._onSourceUpdate.bind(this));
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
@@ -270,13 +271,29 @@ define([
   };
 
   SourcesLayer.prototype._onSourcesSetSelected = function(sources) {
+    var sourcesGroups = this._lineGroups.getSourcesGroups();
+
     sources.forEach(function(source) {
-      const sourceGroup = this._sourcesGroup[source.id];
+      const sourceGroup = sourcesGroups[source.id];
 
       if (sourceGroup) {
         sourceGroup.setSelected();
       }
-    }.bind(this));
+    });
+
+    this.batchDraw();
+  };
+
+  SourcesLayer.prototype._onSegmentsSetSelected = function(segments) {
+    var segmentsGroups = this._lineGroups.getSegmentsGroups();
+
+    segments.forEach(function(segment) {
+      var segmentsGroup = segmentsGroups[segment.line];
+
+      if (segmentsGroup) {
+        segmentsGroup.setSelected(segment);
+      }
+    });
 
     this.batchDraw();
   };

package/src/models/segment.js

@@ -371,11 +371,6 @@ define([
     }
   };
 
-  Segment.prototype.setSelected = function(selected) {
-    this._selected = selected;
-    this._peaks.emit('model.segment.selected', this);
-  };
-
   /**
    * Returns <code>true</code> if the segment overlaps a given time region.
    *