@checksub_team/peaks_timeline 1.5.8 → 1.5.9

package/package.json

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

package/peaks.js

@@ -14376,10 +14376,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 +14393,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 +14403,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 +14411,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 +14420,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();
         });
@@ -15417,8 +15421,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

@@ -140,11 +140,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 +163,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 +175,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 +184,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 +198,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();
     });

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,