@checksub_team/peaks_timeline 1.5.8 → 1.5.10

package/package.json

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

package/peaks.js

@@ -14306,6 +14306,7 @@ module.exports = function (Konva, Utils, SVGs) {
                 noVisibility: this._peaks.options.lineIndicatorNoVisibilityIconSize
             }
         };
+        this._yPadding = 30;
         this._defaultPadding = 5;
         this._types = ['default'].concat(Object.keys(SVGs));
         this._stage = new Konva.Stage({
@@ -14376,10 +14377,12 @@ module.exports = function (Konva, Utils, SVGs) {
                 text: text,
                 fontSize: this._sizes.font,
                 fontFamily: 'Arial',
-                fill: this._peaks.options.lineIndicatorColor,
+                fill: this._peaks.options.lineIndicatorTextColor,
                 align: 'center',
                 width: this._width
             });
+            textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
+            textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
             indicator.add(textNode);
             indicatorHeight += this._sizes.font;
         }
@@ -14391,7 +14394,7 @@ module.exports = function (Konva, Utils, SVGs) {
                 x: this._width / 2,
                 y: indicatorHeight + this._sizes.icon.default / 2 + padding,
                 radius: this._sizes.icon.default / 2,
-                fill: this._peaks.options.lineIndicatorColor,
+                fill: this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
                 lineId: line.getId()
             });
@@ -14401,7 +14404,7 @@ module.exports = function (Konva, Utils, SVGs) {
                 x: (this._width - this._sizes.icon[type]) / 2,
                 y: indicatorHeight,
                 data: SVGs[type].path,
-                fill: this._peaks.options.lineIndicatorColor,
+                fill: this._peaks.options.lineIndicatorIconColor,
                 scale: {
                     x: this._sizes.icon[type] / SVGs[type].width,
                     y: this._sizes.icon[type] / SVGs[type].height
@@ -14409,6 +14412,8 @@ module.exports = function (Konva, Utils, SVGs) {
                 lineId: line.getId()
             });
         }
+        iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
+        iconNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedIconColor);
         indicator.add(iconNode);
         indicatorHeight += this._sizes.icon[type];
         indicator.setAttr('trueHeight', indicatorHeight);
@@ -14416,13 +14421,13 @@ module.exports = function (Konva, Utils, SVGs) {
         var self = this;
         indicator.on('mouseover', function () {
             indicator.getChildren().forEach(function (child) {
-                child.fill(self._peaks.options.lineIndicatorSelected);
+                child.fill(child.getAttr('selectedColor'));
             });
             self.draw();
         });
         indicator.on('mouseout', function () {
             indicator.getChildren().forEach(function (child) {
-                child.fill(self._peaks.options.lineIndicatorColor);
+                child.fill(child.getAttr('defaultColor'));
             });
             self.draw();
         });
@@ -14445,6 +14450,7 @@ module.exports = function (Konva, Utils, SVGs) {
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
         if (this._indicators[lineId]) {
             if (this._indicators[lineId].indicator) {
+                console.log('remove', lineId);
                 this._indicators[lineId].indicator.destroy();
             }
             if (!keepInList) {
@@ -14456,13 +14462,13 @@ module.exports = function (Konva, Utils, SVGs) {
     };
     LineIndicator.prototype.updateIndicator = function (lineId) {
         if (this._indicators[lineId]) {
-            var y = this._indicators[lineId].line.getY() + this._indicators[lineId].line.lineHeight() / 2;
-            if (y + this._indicators[lineId].line.lineHeight() > 0 && y < this._height) {
+            var y = this._indicators[lineId].line.getY();
+            if (y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0 && y - this._yPadding < this._height) {
                 if (!this._indicators[lineId].indicator) {
                     this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].line, this._indicators[lineId].type, this._indicators[lineId].text);
                     this._layer.add(this._indicators[lineId].indicator);
                 } else {
-                    this._indicators[lineId].indicator.y(y - this._indicators[lineId].indicator.getAttr('trueHeight') / 2);
+                    this._indicators[lineId].indicator.y(y + this._indicators[lineId].line.lineHeight() / 2 - this._indicators[lineId].indicator.getAttr('trueHeight') / 2);
                 }
             } else {
                 this.removeIndicator(lineId, true);
@@ -15417,8 +15423,10 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             lineIndicatorVisibilityIconSize: 24,
             lineIndicatorNoVisibilityIconSize: 24,
             lineIndicatorFontSize: 10,
-            lineIndicatorColor: '#8A8F98',
-            lineIndicatorSelected: '#ccc',
+            lineIndicatorTextColor: '#8A8F98',
+            lineIndicatorIconColor: '#8A8F98',
+            lineIndicatorSelectedTextColor: '#ccc',
+            lineIndicatorSelectedIconColor: '#ccc',
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,

package/src/line-indicator.js

@@ -45,6 +45,7 @@ define([
       }
     };
 
+    this._yPadding = 30;
     this._defaultPadding = 5;
     this._types = ['default'].concat(Object.keys(SVGs));
 
@@ -140,11 +141,14 @@ define([
         text: text,
         fontSize: this._sizes.font,
         fontFamily: 'Arial',
-        fill: this._peaks.options.lineIndicatorColor,
+        fill: this._peaks.options.lineIndicatorTextColor,
         align: 'center',
         width: this._width
       });
 
+      textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
+      textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
+
       indicator.add(textNode);
       indicatorHeight += this._sizes.font;
     }
@@ -160,7 +164,7 @@ define([
         x: this._width / 2,
         y: indicatorHeight + this._sizes.icon.default / 2 + padding,
         radius: this._sizes.icon.default / 2,
-        fill: this._peaks.options.lineIndicatorColor,
+        fill: this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
         lineId: line.getId()
       });
@@ -172,7 +176,7 @@ define([
         x: (this._width - this._sizes.icon[type]) / 2,
         y: indicatorHeight,
         data: SVGs[type].path,
-        fill: this._peaks.options.lineIndicatorColor,
+        fill: this._peaks.options.lineIndicatorIconColor,
         scale: {
           x: (this._sizes.icon[type]) / SVGs[type].width,
           y: (this._sizes.icon[type]) / SVGs[type].height
@@ -181,6 +185,9 @@ define([
       });
     }
 
+    iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
+    iconNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedIconColor);
+
     indicator.add(iconNode);
     indicatorHeight += this._sizes.icon[type];
 
@@ -192,14 +199,14 @@ define([
 
     indicator.on('mouseover', function() {
       indicator.getChildren().forEach(function(child) {
-        child.fill(self._peaks.options.lineIndicatorSelected);
+        child.fill(child.getAttr('selectedColor'));
       });
       self.draw();
     });
 
     indicator.on('mouseout', function() {
       indicator.getChildren().forEach(function(child) {
-        child.fill(self._peaks.options.lineIndicatorColor);
+        child.fill(child.getAttr('defaultColor'));
       });
       self.draw();
     });
@@ -228,6 +235,7 @@ define([
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
     if (this._indicators[lineId]) {
       if (this._indicators[lineId].indicator) {
+        console.log('remove', lineId);
         this._indicators[lineId].indicator.destroy();
       }
       if (!keepInList) {
@@ -241,10 +249,9 @@ define([
 
   LineIndicator.prototype.updateIndicator = function(lineId) {
     if (this._indicators[lineId]) {
-      var y = this._indicators[lineId].line.getY()
-        + (this._indicators[lineId].line.lineHeight() / 2);
+      var y = this._indicators[lineId].line.getY();
 
-      if (y + this._indicators[lineId].line.lineHeight() > 0 && y < this._height) {
+      if (y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0 && y - this._yPadding < this._height) {
         // The indicator is visible
         if (!this._indicators[lineId].indicator) {
           this._indicators[lineId].indicator = this._createIndicator(
@@ -256,7 +263,8 @@ define([
         }
         else {
           this._indicators[lineId].indicator.y(
-            y - this._indicators[lineId].indicator.getAttr('trueHeight') / 2
+            y + this._indicators[lineId].line.lineHeight() / 2
+              - this._indicators[lineId].indicator.getAttr('trueHeight') / 2
           );
         }
       }

package/src/main.js

@@ -311,14 +311,24 @@ define([
       lineIndicatorFontSize:    10,
 
       /**
-       * Color of the line indicators
+       * Color of the line indicators' text
       */
-      lineIndicatorColor:       '#8A8F98',
+      lineIndicatorTextColor:       '#8A8F98',
 
       /**
-       * Color for the indicator when selected
+       * Color of the line indicators' icon
+      */
+      lineIndicatorIconColor:       '#8A8F98',
+
+      /**
+       * Color for the indicator's text when selected
+       */
+      lineIndicatorSelectedTextColor:    '#ccc',
+
+      /**
+       * Color for the indicator's icon when selected
        */
-      lineIndicatorSelected:    '#ccc',
+      lineIndicatorSelectedIconColor:    '#ccc',
 
       /**
        * Threshold size on the left and right border of the view,