@checksub_team/peaks_timeline 1.5.7 → 1.5.9

package/package.json

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

package/peaks.js

@@ -14296,8 +14296,16 @@ module.exports = function (Konva, Utils, SVGs) {
         this._container = container;
         this._width = this._peaks.options.lineIndicatorWidth;
         this._height = this._view.getHeight();
-        this._iconSize = this._peaks.options.lineIndicatorIconSize;
-        this._fontSize = this._peaks.options.lineIndicatorFontSize;
+        this._sizes = {
+            font: this._peaks.options.lineIndicatorFontSize,
+            icon: {
+                default: this._peaks.options.lineIndicatorDefaultIconSize,
+                volume: this._peaks.options.lineIndicatorVolumeIconSize,
+                noVolume: this._peaks.options.lineIndicatorNoVolumeIconSize,
+                visibility: this._peaks.options.lineIndicatorVisibilityIconSize,
+                noVisibility: this._peaks.options.lineIndicatorNoVisibilityIconSize
+            }
+        };
         this._defaultPadding = 5;
         this._types = ['default'].concat(Object.keys(SVGs));
         this._stage = new Konva.Stage({
@@ -14325,6 +14333,7 @@ module.exports = function (Konva, Utils, SVGs) {
             this._createContextMenu();
         }
         this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
+        this._peaks.on('lineIndicator.setText', this._onSetText.bind(this));
     }
     LineIndicator.prototype.fitToView = function () {
         this._height = this._view.getHeight();
@@ -14339,65 +14348,85 @@ module.exports = function (Konva, Utils, SVGs) {
     LineIndicator.prototype._onSetType = function (lineId, type) {
         this.removeIndicator(lineId, true);
         type = this._types.includes(type) ? type : 'default';
-        var indicator = this._createIndicator(this._indicators[lineId].line, type);
+        var indicator = this._createIndicator(this._indicators[lineId].line, type, this._indicators[lineId].text);
         this._layer.add(indicator);
         this._indicators[lineId].indicator = indicator;
         this._indicators[lineId].type = type;
         this.draw();
     };
+    LineIndicator.prototype._onSetText = function (lineId, text) {
+        this.removeIndicator(lineId, true);
+        var indicator = this._createIndicator(this._indicators[lineId].line, this._indicators[lineId].type, text);
+        this._layer.add(indicator);
+        this._indicators[lineId].indicator = indicator;
+        this._indicators[lineId].text = text;
+        this.draw();
+    };
     LineIndicator.prototype._showMenu = function (menu) {
         menu.style.display = 'block';
         var containerRect = this._stage.container().getBoundingClientRect();
         menu.style.top = containerRect.top + this._stage.getPointerPosition().y - menu.offsetHeight + 'px';
         menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
     };
-    LineIndicator.prototype._createIndicator = function (line, type) {
+    LineIndicator.prototype._createIndicator = function (line, type, text) {
         var indicator = new Konva.Group();
-        var text = new Konva.Text({
-            text: 'This is just a test',
-            fontSize: this._fontSize,
-            fontFamily: 'Arial',
-            fill: this._peaks.options.lineIndicatorColor,
-            align: 'center',
-            width: this._width
-        });
+        var indicatorHeight = 0;
+        if (text) {
+            var textNode = new Konva.Text({
+                text: text,
+                fontSize: this._sizes.font,
+                fontFamily: 'Arial',
+                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;
+        }
         type = this._types.includes(type) ? type : 'default';
-        var icon;
+        var iconNode;
         if (type === 'default') {
-            icon = new Konva.Circle({
+            var padding = text ? this._defaultPadding : 0;
+            iconNode = new Konva.Circle({
                 x: this._width / 2,
-                y: this._fontSize + this._iconSize / 2 + this._defaultPadding,
-                radius: this._iconSize / 2,
-                fill: this._peaks.options.lineIndicatorColor,
+                y: indicatorHeight + this._sizes.icon.default / 2 + padding,
+                radius: this._sizes.icon.default / 2,
+                fill: this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
                 lineId: line.getId()
             });
+            indicatorHeight += padding;
         } else {
-            icon = new Konva.Path({
-                x: (this._width - this._iconSize) / 2,
-                y: this._fontSize,
+            iconNode = new Konva.Path({
+                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._iconSize / SVGs[type].width,
-                    y: this._iconSize / SVGs[type].height
+                    x: this._sizes.icon[type] / SVGs[type].width,
+                    y: this._sizes.icon[type] / SVGs[type].height
                 },
                 lineId: line.getId()
             });
         }
-        indicator.add(text);
-        indicator.add(icon);
-        indicator.y(line.getY() + (line.lineHeight() - this._getIndicatorHeight(type)) / 2);
+        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);
+        indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
         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();
         });
@@ -14434,10 +14463,10 @@ module.exports = function (Konva, Utils, SVGs) {
             var y = this._indicators[lineId].line.getY() + this._indicators[lineId].line.lineHeight() / 2;
             if (y + this._indicators[lineId].line.lineHeight() > 0 && y < this._height) {
                 if (!this._indicators[lineId].indicator) {
-                    this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].line, this._indicators[lineId].type);
+                    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._getIndicatorHeight(this._indicators[lineId].type) / 2);
+                    this._indicators[lineId].indicator.y(y - this._indicators[lineId].indicator.getAttr('trueHeight') / 2);
                 }
             } else {
                 this.removeIndicator(lineId, true);
@@ -14454,9 +14483,6 @@ module.exports = function (Konva, Utils, SVGs) {
     LineIndicator.prototype.draw = function () {
         this._layer.draw();
     };
-    LineIndicator.prototype._getIndicatorHeight = function (type) {
-        return type === 'default' ? this._fontSize + this._iconSize + this._defaultPadding : this._fontSize + this._iconSize;
-    };
     LineIndicator.prototype._createContextMenu = function () {
         var menu = document.createElement('div');
         var addLine = document.createElement('button');
@@ -15389,10 +15415,16 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             segmentMagnetThreshold: 15,
             enableVerticalScrolling: true,
             lineIndicatorWidth: 20,
-            lineIndicatorIconSize: 10,
-            lineIndicatorFontSize: 12,
-            lineIndicatorColor: '#8A8F98',
-            lineIndicatorSelected: '#ccc',
+            lineIndicatorDefaultIconSize: 19,
+            lineIndicatorVolumeIconSize: 24,
+            lineIndicatorNoVolumeIconSize: 24,
+            lineIndicatorVisibilityIconSize: 24,
+            lineIndicatorNoVisibilityIconSize: 24,
+            lineIndicatorFontSize: 10,
+            lineIndicatorTextColor: '#8A8F98',
+            lineIndicatorIconColor: '#8A8F98',
+            lineIndicatorSelectedTextColor: '#ccc',
+            lineIndicatorSelectedIconColor: '#ccc',
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,
@@ -15534,6 +15566,10 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
         var lineId = this.view.getLineByPosition(linePosition).getId();
         this.emit('lineIndicator.setType', lineId, type);
     };
+    Peaks.prototype.setIndicatorText = function (linePosition, text) {
+        var lineId = this.view.getLineByPosition(linePosition).getId();
+        this.emit('lineIndicator.setText', lineId, text);
+    };
     Peaks.prototype.getVisibleSegments = function () {
         return this.view.getSegmentsGroup().getVisibleSegments();
     };

package/src/line-indicator.js

@@ -34,8 +34,16 @@ define([
     this._width = this._peaks.options.lineIndicatorWidth;
     this._height = this._view.getHeight();
 
-    this._iconSize = this._peaks.options.lineIndicatorIconSize;
-    this._fontSize = this._peaks.options.lineIndicatorFontSize;
+    this._sizes = {
+      font: this._peaks.options.lineIndicatorFontSize,
+      icon: {
+        default: this._peaks.options.lineIndicatorDefaultIconSize,
+        volume: this._peaks.options.lineIndicatorVolumeIconSize,
+        noVolume: this._peaks.options.lineIndicatorNoVolumeIconSize,
+        visibility: this._peaks.options.lineIndicatorVisibilityIconSize,
+        noVisibility: this._peaks.options.lineIndicatorNoVisibilityIconSize
+      }
+    };
 
     this._defaultPadding = 5;
     this._types = ['default'].concat(Object.keys(SVGs));
@@ -66,6 +74,7 @@ define([
     }
 
     this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
+    this._peaks.on('lineIndicator.setText', this._onSetText.bind(this));
   }
 
   LineIndicator.prototype.fitToView = function() {
@@ -83,7 +92,8 @@ define([
 
     var indicator = this._createIndicator(
       this._indicators[lineId].line,
-      type
+      type,
+      this._indicators[lineId].text
     );
 
     this._layer.add(indicator);
@@ -94,6 +104,23 @@ define([
     this.draw();
   };
 
+  LineIndicator.prototype._onSetText = function(lineId, text) {
+    this.removeIndicator(lineId, true);
+
+    var indicator = this._createIndicator(
+      this._indicators[lineId].line,
+      this._indicators[lineId].type,
+      text
+    );
+
+    this._layer.add(indicator);
+
+    this._indicators[lineId].indicator = indicator;
+    this._indicators[lineId].text = text;
+
+    this.draw();
+  };
+
   LineIndicator.prototype._showMenu = function(menu) {
     menu.style.display = 'block';
     var containerRect = this._stage.container().getBoundingClientRect();
@@ -104,63 +131,81 @@ define([
     menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
   };
 
-  LineIndicator.prototype._createIndicator = function(line, type) {
+  LineIndicator.prototype._createIndicator = function(line, type, text) {
     var indicator = new Konva.Group();
+    var indicatorHeight = 0;
+
+    if (text) {
+      var textNode = new Konva.Text({
+        text: text,
+        fontSize: this._sizes.font,
+        fontFamily: 'Arial',
+        fill: this._peaks.options.lineIndicatorTextColor,
+        align: 'center',
+        width: this._width
+      });
 
-    var text = new Konva.Text({
-      text: 'This is just a test',
-      fontSize: this._fontSize,
-      fontFamily: 'Arial',
-      fill: this._peaks.options.lineIndicatorColor,
-      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;
+    }
 
     type = this._types.includes(type) ? type : 'default';
 
-    var icon;
+    var iconNode;
 
     if (type === 'default') {
-      icon = new Konva.Circle({
+      var padding = text ? this._defaultPadding : 0;
+
+      iconNode = new Konva.Circle({
         x: this._width / 2,
-        y: this._fontSize + this._iconSize / 2 + this._defaultPadding,
-        radius: this._iconSize / 2,
-        fill: this._peaks.options.lineIndicatorColor,
+        y: indicatorHeight + this._sizes.icon.default / 2 + padding,
+        radius: this._sizes.icon.default / 2,
+        fill: this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
         lineId: line.getId()
       });
+
+      indicatorHeight += padding;
     }
     else {
-      icon = new Konva.Path({
-        x: (this._width - this._iconSize) / 2,
-        y: this._fontSize,
+      iconNode = new Konva.Path({
+        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._iconSize) / SVGs[type].width,
-          y: (this._iconSize) / SVGs[type].height
+          x: (this._sizes.icon[type]) / SVGs[type].width,
+          y: (this._sizes.icon[type]) / SVGs[type].height
         },
         lineId: line.getId()
       });
     }
 
-    indicator.add(text);
-    indicator.add(icon);
+    iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
+    iconNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedIconColor);
+
+    indicator.add(iconNode);
+    indicatorHeight += this._sizes.icon[type];
 
-    indicator.y(line.getY() + (line.lineHeight() - this._getIndicatorHeight(type)) / 2);
+    indicator.setAttr('trueHeight', indicatorHeight);
+
+    indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
 
     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();
     });
@@ -210,13 +255,14 @@ define([
         if (!this._indicators[lineId].indicator) {
           this._indicators[lineId].indicator = this._createIndicator(
             this._indicators[lineId].line,
-            this._indicators[lineId].type
+            this._indicators[lineId].type,
+            this._indicators[lineId].text
           );
           this._layer.add(this._indicators[lineId].indicator);
         }
         else {
           this._indicators[lineId].indicator.y(
-            y - this._getIndicatorHeight(this._indicators[lineId].type) / 2
+            y - this._indicators[lineId].indicator.getAttr('trueHeight') / 2
           );
         }
       }
@@ -239,12 +285,6 @@ define([
     this._layer.draw();
   };
 
-  LineIndicator.prototype._getIndicatorHeight = function(type) {
-    return type === 'default' ?
-      this._fontSize + this._iconSize + this._defaultPadding :
-      this._fontSize + this._iconSize;
-  };
-
   LineIndicator.prototype._createContextMenu = function() {
     var menu = document.createElement('div');
     var addLine = document.createElement('button');

package/src/main.js

@@ -283,22 +283,52 @@ define([
       /**
        * Size of the line indicators' icon, in pixels
        */
-      lineIndicatorIconSize:    10,
+      lineIndicatorDefaultIconSize:         19,
+
+      /**
+       * Size of the line indicators' volume icon, in pixels
+       */
+      lineIndicatorVolumeIconSize:          24,
+
+      /**
+       * Size of the line indicators' no volume, in pixels
+       */
+      lineIndicatorNoVolumeIconSize:        24,
+
+      /**
+       * Size of the line indicators' visibility, in pixels
+       */
+      lineIndicatorVisibilityIconSize:      24,
+
+      /**
+       * Size of the line indicators' no visibility icon, in pixels
+       */
+      lineIndicatorNoVisibilityIconSize:    24,
 
       /**
        * Font size of the line indicators' text, in pixels
        */
-      lineIndicatorFontSize:    12,
+      lineIndicatorFontSize:    10,
+
+      /**
+       * Color of the line indicators' text
+      */
+      lineIndicatorTextColor:       '#8A8F98',
+
+      /**
+       * Color of the line indicators' icon
+      */
+      lineIndicatorIconColor:       '#8A8F98',
 
       /**
-       * Color of the line indicators
+       * Color for the indicator's text when selected
        */
-      lineIndicatorColor:       '#8A8F98',
+      lineIndicatorSelectedTextColor:    '#ccc',
 
       /**
-       * Color for the indicator when selected
+       * Color for the indicator's icon when selected
        */
-      lineIndicatorSelected:    '#ccc',
+      lineIndicatorSelectedIconColor:    '#ccc',
 
       /**
        * Threshold size on the left and right border of the view,
@@ -634,6 +664,12 @@ define([
     this.emit('lineIndicator.setType', lineId, type);
   };
 
+  Peaks.prototype.setIndicatorText = function(linePosition, text) {
+    var lineId = this.view.getLineByPosition(linePosition).getId();
+
+    this.emit('lineIndicator.setText', lineId, text);
+  };
+
   Peaks.prototype.getVisibleSegments = function() {
     return this.view
             .getSegmentsGroup()