@checksub_team/peaks_timeline 2.2.1 → 2.2.3

package/package.json

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

package/peaks.js

@@ -15875,24 +15875,24 @@ module.exports = function (Konva, SVGs, Utils) {
         ]);
         this.refreshIndicators();
     };
-    LineIndicator.prototype._createIndicator = function (lineGroup, type, text, subText) {
+    LineIndicator.prototype._createIndicator = function (lineGroup, type, text, subText, defaultStyle = {}) {
         const indicator = new Konva.Group();
         let indicatorHeight = 0;
         var self = this;
         var textGroup, iconGroup, subTextGroup;
         var textNode, iconNode, subTextNode;
         if (text) {
-            [textGroup, textNode] = this._createIndicatorText(text);
+            [textGroup, textNode] = this._createIndicatorText(text, 'line-indicator-text', defaultStyle);
             indicator.add(textGroup);
             indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
         }
-        [iconGroup, iconNode] = this._createIndicatorIcon(type);
+        [iconGroup, iconNode] = this._createIndicatorIcon(type, 'line-indicator-icon', defaultStyle);
         iconGroup.y(indicatorHeight);
         indicator.add(iconGroup);
         indicatorHeight += iconGroup.getAttr('trueHeight');
         if (subText) {
             indicatorHeight += this._bottomPadding;
-            [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+            [subTextGroup, subTextNode] = this._createIndicatorText(subText, 'line-indicator-subText', defaultStyle);
             subTextGroup.y(indicatorHeight);
             indicator.add(subTextGroup);
             indicatorHeight += subTextGroup.getAttr('trueHeight');
@@ -15973,16 +15973,18 @@ module.exports = function (Konva, SVGs, Utils) {
         indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
         return indicator;
     };
-    LineIndicator.prototype._createIndicatorText = function (text) {
+    LineIndicator.prototype._createIndicatorText = function (text, role, defaultStyle = {}) {
+        defaultStyle = defaultStyle[role] || {};
         const textGroup = new Konva.Group();
         const textNode = new Konva.Text({
             text: text,
             fontSize: this._sizes.font,
             fontFamily: this._peaks.options.lineIndicatorFont,
-            fill: this._peaks.options.lineIndicatorTextColor,
+            fill: defaultStyle.fill || this._peaks.options.lineIndicatorTextColor,
             align: 'center',
             width: this._width,
-            listening: false
+            listening: false,
+            name: role
         });
         textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
         textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
@@ -16003,7 +16005,8 @@ module.exports = function (Konva, SVGs, Utils) {
             textNode
         ];
     };
-    LineIndicator.prototype._createIndicatorIcon = function (type) {
+    LineIndicator.prototype._createIndicatorIcon = function (type, role, defaultStyle = {}) {
+        defaultStyle = defaultStyle[role] || {};
         type = this._types.includes(type) ? type : 'default';
         const iconGroup = new Konva.Group();
         var iconHeight = this._sizes.icon[type];
@@ -16013,21 +16016,23 @@ module.exports = function (Konva, SVGs, Utils) {
                 x: this._width / 2,
                 y: this._sizes.icon.default / 2,
                 radius: this._sizes.icon.default / 2,
-                fill: this._peaks.options.lineIndicatorIconColor,
+                fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
-                listening: false
+                listening: false,
+                name: role
             });
         } else {
             iconNode = new Konva.Path({
                 x: (this._width - this._sizes.icon[type]) / 2,
                 y: 0,
                 data: SVGs[type].path,
-                fill: this._peaks.options.lineIndicatorIconColor,
+                fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
                 scale: {
                     x: this._sizes.icon[type] / SVGs[type].width,
                     y: this._sizes.icon[type] / SVGs[type].height
                 },
-                listening: false
+                listening: false,
+                name: role
             });
         }
         iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
@@ -16069,11 +16074,11 @@ module.exports = function (Konva, SVGs, Utils) {
             this._peaks.logger('peaks.line-indicator.update(): line indicator not found: ' + line.id);
             return;
         }
-        if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText) {
+        if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText && indicatorData.subText === line.indicatorSubText) {
             return;
         }
-        this.removeIndicator(line.id, true);
-        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText);
+        const styleData = this.removeIndicator(line.id, true);
+        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText, styleData);
         this._layer.add(indicator);
         indicatorData.indicator = indicator;
         indicatorData.type = line.indicatorType;
@@ -16081,17 +16086,40 @@ module.exports = function (Konva, SVGs, Utils) {
         indicatorData.subText = line.indicatorSubText;
         this.batchDraw();
     };
+    LineIndicator.prototype._getStyleData = function (konvaItem) {
+        if (!konvaItem) {
+            return {};
+        }
+        var styleData = {};
+        const name = konvaItem.name();
+        if (name) {
+            styleData[name] = { fill: konvaItem.fill() };
+        }
+        if (typeof konvaItem.getChildren === 'function') {
+            const children = konvaItem.getChildren();
+            if (children && children.length > 0) {
+                children.forEach(function (child) {
+                    styleData = Object.assign(styleData, this._getStyleData(child));
+                }.bind(this));
+            }
+        }
+        return styleData;
+    };
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
+        var styleData = {};
         if (this._indicators[lineId]) {
-            if (this._indicators[lineId].indicator) {
-                this._indicators[lineId].indicator.destroy();
-            }
+            const indicator = this._indicators[lineId].indicator;
             if (!keepInList) {
                 delete this._indicators[lineId];
             } else {
                 this._indicators[lineId].indicator = null;
+                styleData = this._getStyleData(indicator);
+            }
+            if (indicator) {
+                indicator.destroy();
             }
         }
+        return styleData;
     };
     LineIndicator.prototype.refreshIndicator = function (lineId) {
         var anyChange = false;

package/src/components/line-indicator.js

@@ -89,7 +89,7 @@ define([
     this.refreshIndicators();
   };
 
-  LineIndicator.prototype._createIndicator = function(lineGroup, type, text, subText) {
+  LineIndicator.prototype._createIndicator = function(lineGroup, type, text, subText, defaultStyle = {}) {
     const indicator = new Konva.Group();
     let indicatorHeight = 0;
     var self = this;
@@ -97,13 +97,13 @@ define([
     var textNode, iconNode, subTextNode;
 
     if (text) {
-      [textGroup, textNode] = this._createIndicatorText(text);
+      [textGroup, textNode] = this._createIndicatorText(text, 'line-indicator-text', defaultStyle);
 
       indicator.add(textGroup);
       indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
     }
 
-    [iconGroup, iconNode] = this._createIndicatorIcon(type);
+    [iconGroup, iconNode] = this._createIndicatorIcon(type, 'line-indicator-icon', defaultStyle);
 
     iconGroup.y(indicatorHeight);
     indicator.add(iconGroup);
@@ -112,7 +112,7 @@ define([
     if (subText) {
       indicatorHeight += this._bottomPadding;
 
-      [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+      [subTextGroup, subTextNode] = this._createIndicatorText(subText, 'line-indicator-subText', defaultStyle);
 
       subTextGroup.y(indicatorHeight);
       indicator.add(subTextGroup);
@@ -208,17 +208,19 @@ define([
     return indicator;
   };
 
-  LineIndicator.prototype._createIndicatorText = function(text) {
+  LineIndicator.prototype._createIndicatorText = function(text, role, defaultStyle = {}) {
+    defaultStyle = defaultStyle[role] || {};
     const textGroup = new Konva.Group();
 
     const textNode = new Konva.Text({
       text: text,
       fontSize: this._sizes.font,
       fontFamily: this._peaks.options.lineIndicatorFont,
-      fill: this._peaks.options.lineIndicatorTextColor,
+      fill: defaultStyle.fill || this._peaks.options.lineIndicatorTextColor,
       align: 'center',
       width: this._width,
-      listening: false
+      listening: false,
+      name: role
     });
 
     textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
@@ -242,7 +244,8 @@ define([
     return [textGroup, textNode];
   };
 
-  LineIndicator.prototype._createIndicatorIcon = function(type) {
+  LineIndicator.prototype._createIndicatorIcon = function(type, role, defaultStyle = {}) {
+    defaultStyle = defaultStyle[role] || {};
     type = this._types.includes(type) ? type : 'default';
 
     const iconGroup = new Konva.Group();
@@ -255,9 +258,10 @@ define([
         x: this._width / 2,
         y: this._sizes.icon.default / 2,
         radius: this._sizes.icon.default / 2,
-        fill: this._peaks.options.lineIndicatorIconColor,
+        fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
-        listening: false
+        listening: false,
+        name: role
       });
     }
     else {
@@ -265,12 +269,13 @@ define([
         x: (this._width - this._sizes.icon[type]) / 2,
         y: 0,
         data: SVGs[type].path,
-        fill: this._peaks.options.lineIndicatorIconColor,
+        fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
         scale: {
           x: (this._sizes.icon[type]) / SVGs[type].width,
           y: (this._sizes.icon[type]) / SVGs[type].height
         },
-        listening: false
+        listening: false,
+        name: role
       });
     }
 
@@ -326,17 +331,20 @@ define([
       return;
     }
 
-    if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText) {
+    if (indicatorData.type === line.indicatorType
+      && indicatorData.text === line.indicatorText
+      && indicatorData.subText === line.indicatorSubText) {
       return;
     }
 
-    this.removeIndicator(line.id, true);
+    const styleData = this.removeIndicator(line.id, true);
 
     var indicator = this._createIndicator(
       indicatorData.lineGroup,
       line.indicatorType,
       line.indicatorText,
-      line.indicatorSubText
+      line.indicatorSubText,
+      styleData
     );
 
     this._layer.add(indicator);
@@ -349,18 +357,51 @@ define([
     this.batchDraw();
   };
 
+  LineIndicator.prototype._getStyleData = function(konvaItem) {
+    if (!konvaItem) {
+      return {};
+    }
+
+    var styleData = {};
+    const name = konvaItem.name();
+
+    if (name) {
+      styleData[name] = {
+        fill: konvaItem.fill()
+      };
+    }
+
+    if (typeof konvaItem.getChildren === 'function') {
+      const children = konvaItem.getChildren();
+
+      if (children && children.length > 0) {
+        children.forEach(function(child) {
+          styleData = Object.assign(styleData, this._getStyleData(child));
+        }.bind(this));
+      }
+    }
+
+    return styleData;
+  };
+
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
+    var styleData = {};
+
     if (this._indicators[lineId]) {
-      if (this._indicators[lineId].indicator) {
-        this._indicators[lineId].indicator.destroy();
-      }
+      const indicator = this._indicators[lineId].indicator;
+
       if (!keepInList) {
         delete this._indicators[lineId];
       }
       else {
         this._indicators[lineId].indicator = null;
+        styleData = this._getStyleData(indicator);
+      }
+      if (indicator) {
+        indicator.destroy();
       }
     }
+    return styleData;
   };
 
   LineIndicator.prototype.refreshIndicator = function(lineId) {