@checksub_team/peaks_timeline 1.13.1 → 1.13.3

package/package.json

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

package/peaks.js

@@ -14825,7 +14825,8 @@ module.exports = function (Konva, Utils, SVGs) {
                 fontFamily: this._peaks.options.lineIndicatorFont,
                 fill: this._peaks.options.lineIndicatorTextColor,
                 align: 'center',
-                width: this._width
+                width: this._width,
+                listening: false
             });
             textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
             textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
@@ -14842,7 +14843,8 @@ module.exports = function (Konva, Utils, SVGs) {
                 radius: this._sizes.icon.default / 2,
                 fill: this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
-                lineId: line.getId()
+                lineId: line.getId(),
+                listening: false
             });
             indicatorHeight += padding;
         } else {
@@ -14855,7 +14857,8 @@ module.exports = function (Konva, Utils, SVGs) {
                     x: this._sizes.icon[type] / SVGs[type].width,
                     y: this._sizes.icon[type] / SVGs[type].height
                 },
-                lineId: line.getId()
+                lineId: line.getId(),
+                listening: false
             });
         }
         iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
@@ -14863,6 +14866,16 @@ module.exports = function (Konva, Utils, SVGs) {
         indicator.add(iconNode);
         indicatorHeight += this._sizes.icon[type];
         indicator.setAttr('trueHeight', indicatorHeight);
+        var backgroundRect = new Konva.Rect({
+            x: 0,
+            y: 0,
+            width: this._width,
+            height: indicatorHeight,
+            fill: 'transparent',
+            listening: true
+        });
+        indicator.add(backgroundRect);
+        backgroundRect.moveToTop();
         indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
         var self = this;
         indicator.on('mouseenter', function () {
@@ -19920,9 +19933,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         var frameStartTime = self._view.pixelsToTime(frameOffset);
         var frameEndTime = self._view.pixelsToTime(frameOffset + width);
         sources.forEach(function (source) {
-            if (source.isVisible(frameStartTime, frameEndTime)) {
-                self._addSourceGroup(source);
-            }
+            self._addSourceGroup(source, source.isVisible(frameStartTime, frameEndTime));
         });
         this._view.updateTimelineLength();
         this.updateSources(frameStartTime, frameEndTime);
@@ -19984,11 +19995,13 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype._createSourceGroup = function (source) {
         return new SourceGroup(source, this._peaks, this, this._view);
     };
-    SourcesLayer.prototype._addSourceGroup = function (source) {
+    SourcesLayer.prototype._addSourceGroup = function (source, startDataRetrieval = true) {
         var sourceGroup = this._createSourceGroup(source);
         this._sourcesGroup[source.id] = sourceGroup;
         this._lines.addSourceGroup(sourceGroup, source.position);
-        this._dataRetriever.retrieveData(source);
+        if (startDataRetrieval) {
+            this._dataRetriever.retrieveData(source);
+        }
         return sourceGroup;
     };
     SourcesLayer.prototype.setIndicators = function (source) {

package/src/line-indicator.js

@@ -143,7 +143,8 @@ define([
         fontFamily: this._peaks.options.lineIndicatorFont,
         fill: this._peaks.options.lineIndicatorTextColor,
         align: 'center',
-        width: this._width
+        width: this._width,
+        listening: false
       });
 
       textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
@@ -166,7 +167,8 @@ define([
         radius: this._sizes.icon.default / 2,
         fill: this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
-        lineId: line.getId()
+        lineId: line.getId(),
+        listening: false
       });
 
       indicatorHeight += padding;
@@ -181,7 +183,8 @@ define([
           x: (this._sizes.icon[type]) / SVGs[type].width,
           y: (this._sizes.icon[type]) / SVGs[type].height
         },
-        lineId: line.getId()
+        lineId: line.getId(),
+        listening: false
       });
     }
 
@@ -193,6 +196,18 @@ define([
 
     indicator.setAttr('trueHeight', indicatorHeight);
 
+    var backgroundRect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: this._width,
+      height: indicatorHeight,
+      fill: 'transparent',
+      listening: true
+    });
+
+    indicator.add(backgroundRect);
+    backgroundRect.moveToTop();
+
     indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
 
     var self = this;

package/src/sources-layer.js

@@ -185,9 +185,7 @@ define([
     var frameEndTime   = self._view.pixelsToTime(frameOffset + width);
 
     sources.forEach(function(source) {
-      if (source.isVisible(frameStartTime, frameEndTime)) {
-        self._addSourceGroup(source);
-      }
+      self._addSourceGroup(source, source.isVisible(frameStartTime, frameEndTime));
     });
 
     this._view.updateTimelineLength();
@@ -284,14 +282,16 @@ define([
    * @returns {Konva.Group}
    */
 
-  SourcesLayer.prototype._addSourceGroup = function(source) {
+  SourcesLayer.prototype._addSourceGroup = function(source, startDataRetrieval = true) {
     var sourceGroup = this._createSourceGroup(source);
 
     this._sourcesGroup[source.id] = sourceGroup;
     this._lines.addSourceGroup(sourceGroup, source.position);
 
     // After creating and referencing the new group, we can start data retrieval
-    this._dataRetriever.retrieveData(source);
+    if (startDataRetrieval) {
+      this._dataRetriever.retrieveData(source);
+    }
 
     return sourceGroup;
   };