@checksub_team/peaks_timeline 1.4.25 → 1.4.26

package/package.json

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

package/peaks.js

@@ -14754,6 +14754,35 @@ module.exports = function (Konva, Utils) {
     Line.prototype.lineHeight = function () {
         return this._height;
     };
+    Line.prototype.changeHeight = function (from, to) {
+        if (this._sourceHeights[from]) {
+            var oldHeight = this._height;
+            if (this._sourceHeights[to]) {
+                this._sourceHeights[to] += this._sourceHeights[from];
+            } else {
+                this._sourceHeights[to] = this._sourceHeights[from];
+            }
+            if (to > this._height) {
+                this._height = to;
+            } else if (from === this._height) {
+                this._height = 0;
+                for (var height in this._sourceHeights) {
+                    if (Utils.objectHasProperty(this._sourceHeights, height)) {
+                        var parsedHeight = parseInt(height, 10);
+                        if (parsedHeight !== from) {
+                            if (parsedHeight > this._height) {
+                                this._height = parsedHeight;
+                            }
+                        }
+                    }
+                }
+            }
+            if (this._height !== oldHeight) {
+                this._peaks.emit('line.heightChanged', this._position);
+            }
+            delete this._sourceHeights[from];
+        }
+    };
     Line.prototype.updateLineHeight = function (sourceGroup, action) {
         var oldHeight = this._height;
         var sourceGroupHeight;
@@ -14782,7 +14811,7 @@ module.exports = function (Konva, Utils) {
                     for (var height in this._sourceHeights) {
                         if (Utils.objectHasProperty(this._sourceHeights, height)) {
                             var parsedHeight = parseInt(height, 10);
-                            if (parseInt(height, 10) > this._height) {
+                            if (parsedHeight > this._height) {
                                 this._height = parsedHeight;
                             }
                         }
@@ -15148,6 +15177,15 @@ module.exports = function (Line, LineIndicator, Utils) {
         var lineNewY = oldLine.getY();
         this._updateLinesPosition(position, lineNewY);
     };
+    Lines.prototype.changeLineHeight = function (from, to) {
+        for (var position in this._linesByPosition) {
+            if (Utils.objectHasProperty(this._linesByPosition, position)) {
+                if (!this._linesByPosition[position].isSegmentsLine()) {
+                    this._linesByPosition[position].changeHeight(from, to);
+                }
+            }
+        }
+    };
     Lines.prototype.addSourceGroup = function (sourceGroup, position) {
         if (!this._linesByPosition[position]) {
             this._createLine(position);
@@ -15572,6 +15610,11 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype._removeWindowResizeHandler = function () {
         window.removeEventListener('resize', this._onResize);
     };
+    Peaks.prototype.setLineHeight = function (newLineHeight) {
+        var oldHeight = this.options.lineHeight;
+        this.options.lineHeight = newLineHeight;
+        this.emit('options.set.line_height', oldHeight);
+    };
     Peaks.prototype.destroy = function () {
         this._removeWindowResizeHandler();
         if (this.keyboardHandler) {
@@ -15697,12 +15740,15 @@ module.exports = function (Utils, SourceGroup, Konva) {
         if (hoveredElement) {
             if (this._selectedElement) {
                 this._selectedElement.setSelected(false);
+                this._peaks.emit('source.deselected', this._selectedElement.getSource());
             }
             this._selectedElement = hoveredElement;
             this._selectedElement.setSelected(true);
+            this._peaks.emit('source.selected', this._selectedElement.getSource());
         } else {
             if (this._selectedElement) {
                 this._selectedElement.setSelected(false);
+                this._peaks.emit('source.deselected', this._selectedElement.getSource());
                 this._selectedElement = null;
             }
         }
@@ -18516,6 +18562,7 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
         this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
         this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
+        this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
     }
     SourcesLayer.prototype.getLoadedData = function (id) {
         return this._loadedData[id];
@@ -18538,6 +18585,25 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
     SourcesLayer.prototype.isEditingEnabled = function () {
         return this._allowEditing;
     };
+    SourcesLayer.prototype._onOptionsLineHeightChange = function (oldHeight) {
+        var positions = [];
+        for (var sourceId in this._sourcesGroup) {
+            if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+                var source = this._sourcesGroup[sourceId].getSource();
+                if (!positions.includes(source.position)) {
+                    this._lines.changeLineHeight(oldHeight, this._peaks.options.lineHeight);
+                    positions.push(source.position);
+                }
+                this._removeSource(source);
+                this._addSourceGroup(source);
+            }
+        }
+        if (positions) {
+            var frameOffset = this._view.getFrameOffset();
+            var width = this._view.getWidth();
+            this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
+        }
+    };
     SourcesLayer.prototype._onSourceUpdate = function (source) {
         var redraw = false;
         var sourceGroup = this._sourcesGroup[source.id];

package/src/line.js

@@ -91,6 +91,43 @@ define([
     return this._height;
   };
 
+  Line.prototype.changeHeight = function(from, to) {
+    if (this._sourceHeights[from]) {
+      var oldHeight = this._height;
+
+      if (this._sourceHeights[to]) {
+        this._sourceHeights[to] += this._sourceHeights[from];
+      }
+      else {
+        this._sourceHeights[to] = this._sourceHeights[from];
+      }
+
+      if (to > this._height) {
+        this._height = to;
+      }
+      else if (from === this._height) {
+        this._height = 0;
+        for (var height in this._sourceHeights) {
+          if (Utils.objectHasProperty(this._sourceHeights, height)) {
+            var parsedHeight = parseInt(height, 10);
+
+            if (parsedHeight !== from) {
+              if (parsedHeight > this._height) {
+                this._height = parsedHeight;
+              }
+            }
+          }
+        }
+      }
+
+      if (this._height !== oldHeight) {
+        this._peaks.emit('line.heightChanged', this._position);
+      }
+
+      delete this._sourceHeights[from];
+    }
+  };
+
   Line.prototype.updateLineHeight = function(sourceGroup, action) {
     var oldHeight = this._height;
     var sourceGroupHeight;
@@ -127,7 +164,7 @@ define([
               if (Utils.objectHasProperty(this._sourceHeights, height)) {
                 var parsedHeight = parseInt(height, 10);
 
-                if (parseInt(height, 10) > this._height) {
+                if (parsedHeight > this._height) {
                   this._height = parsedHeight;
                 }
               }

package/src/lines.js

@@ -57,6 +57,16 @@ define([
     this._updateLinesPosition(position, lineNewY);
   };
 
+  Lines.prototype.changeLineHeight = function(from, to) {
+    for (var position in this._linesByPosition) {
+      if (Utils.objectHasProperty(this._linesByPosition, position)) {
+        if (!this._linesByPosition[position].isSegmentsLine()) {
+          this._linesByPosition[position].changeHeight(from, to);
+        }
+      }
+    }
+  };
+
   Lines.prototype.addSourceGroup = function(sourceGroup, position) {
     if (!this._linesByPosition[position]) {
       this._createLine(position);

package/src/main.js

@@ -233,7 +233,7 @@ define([
       lineHeight:               80,
 
       /**
-       * Ratio by which lineHeight must be multiplied to obtain the segment's line height.
+       * Height of a segment, in pixels.
        */
       segmentHeight:            32,
 
@@ -641,6 +641,13 @@ define([
     window.removeEventListener('resize', this._onResize);
   };
 
+  Peaks.prototype.setLineHeight = function(newLineHeight) {
+    var oldHeight = this.options.lineHeight;
+
+    this.options.lineHeight = newLineHeight;
+    this.emit('options.set.line_height', oldHeight);
+  };
+
   /**
    * Cleans up a Peaks instance after use.
    */

package/src/mode-layer.js

@@ -121,15 +121,19 @@ define([
     if (hoveredElement) {
       if (this._selectedElement) {
         this._selectedElement.setSelected(false);
+        this._peaks.emit('source.deselected', this._selectedElement.getSource());
       }
 
       this._selectedElement = hoveredElement;
 
       this._selectedElement.setSelected(true);
+
+      this._peaks.emit('source.selected', this._selectedElement.getSource());
     }
     else {
       if (this._selectedElement) {
         this._selectedElement.setSelected(false);
+        this._peaks.emit('source.deselected', this._selectedElement.getSource());
         this._selectedElement = null;
       }
     }

package/src/sources-layer.js

@@ -61,6 +61,7 @@ define([
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
     this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
+    this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
   }
 
   SourcesLayer.prototype.getLoadedData = function(id) {
@@ -97,6 +98,36 @@ define([
     return this._allowEditing;
   };
 
+  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
+    var positions = [];
+
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        var source = this._sourcesGroup[sourceId].getSource();
+
+        if (!positions.includes(source.position)) {
+          this._lines.changeLineHeight(
+            oldHeight,
+            this._peaks.options.lineHeight
+          );
+          positions.push(source.position);
+        }
+        this._removeSource(source);
+        this._addSourceGroup(source);
+      }
+    }
+
+    if (positions) {
+      var frameOffset = this._view.getFrameOffset();
+      var width = this._view.getWidth();
+
+      this.updateSources(
+        this._view.pixelsToTime(frameOffset),
+        this._view.pixelsToTime(frameOffset + width)
+      );
+    }
+  };
+
   SourcesLayer.prototype._onSourceUpdate = function(source) {
     var redraw = false;
     var sourceGroup = this._sourcesGroup[source.id];