@checksub_team/peaks_timeline 2.2.0 → 2.2.1-alpha.0

package/package.json

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

package/peaks.js

@@ -15576,7 +15576,8 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
             this._peaks.addLine({
                 position: newLinePosition,
                 indicatorType: this._peaks.options.defaultLineIndicatorType,
-                indicatorText: this._peaks.options.defaultLineIndicatorText
+                indicatorText: this._peaks.options.defaultLineIndicatorText,
+                indicatorSubText: this._peaks.options.defaultLineIndicatorSubText
             }, true);
             const automaticallyCreatedLineGroup = this._lineGroupsByPosition[newLinePosition];
             if (!automaticallyCreatedLineGroup) {
@@ -15833,7 +15834,8 @@ module.exports = function (Konva, SVGs, Utils) {
             }
         };
         this._yPadding = 30;
-        this._defaultPadding = 5;
+        this._topPadding = this._peaks.options.lineIndicatorPadding.top;
+        this._bottomPadding = this._peaks.options.lineIndicatorPadding.bottom;
         this._types = ['default'].concat(Object.keys(SVGs));
         this._stage = new Konva.Stage({
             container: container,
@@ -15873,109 +15875,191 @@ module.exports = function (Konva, SVGs, Utils) {
         ]);
         this.refreshIndicators();
     };
-    LineIndicator.prototype._createIndicator = function (lineGroup, type, text) {
+    LineIndicator.prototype._createIndicator = function (lineGroup, type, text, subText) {
         const indicator = new Konva.Group();
         let indicatorHeight = 0;
+        var self = this;
+        var textGroup, iconGroup, subTextGroup;
+        var textNode, iconNode, subTextNode;
         if (text) {
-            const textNode = new Konva.Text({
-                text: text,
-                fontSize: this._sizes.font,
-                fontFamily: this._peaks.options.lineIndicatorFont,
-                fill: this._peaks.options.lineIndicatorTextColor,
-                align: 'center',
-                width: this._width,
-                listening: false
+            [textGroup, textNode] = this._createIndicatorText(text);
+            indicator.add(textGroup);
+            indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
+        }
+        [iconGroup, iconNode] = this._createIndicatorIcon(type);
+        iconGroup.y(indicatorHeight);
+        indicator.add(iconGroup);
+        indicatorHeight += iconGroup.getAttr('trueHeight');
+        if (subText) {
+            indicatorHeight += this._bottomPadding;
+            [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+            subTextGroup.y(indicatorHeight);
+            indicator.add(subTextGroup);
+            indicatorHeight += subTextGroup.getAttr('trueHeight');
+        }
+        if (textGroup) {
+            textGroup.on('mouseenter', function () {
+                textNode.fill(textNode.getAttr('selectedColor'));
+                if (iconNode) {
+                    iconNode.fill(iconNode.getAttr('selectedColor'));
+                }
+                self.batchDraw();
+                self._stage.container().style.cursor = 'pointer';
+            });
+            textGroup.on('mouseout', function () {
+                textNode.fill(textNode.getAttr('defaultColor'));
+                if (iconNode) {
+                    iconNode.fill(iconNode.getAttr('defaultColor'));
+                }
+                self.batchDraw();
+                if (!self._isDragging) {
+                    self._stage.container().style.cursor = 'default';
+                }
+            });
+            textGroup.on('click', function (e) {
+                self._peaks.emit('lineIndicator.text.click', self._indicators[lineGroup.getId()], e.evt);
+            });
+        }
+        if (iconGroup) {
+            iconGroup.on('mouseenter', function () {
+                iconNode.fill(iconNode.getAttr('selectedColor'));
+                if (textNode) {
+                    textNode.fill(textNode.getAttr('selectedColor'));
+                }
+                self.batchDraw();
+                self._stage.container().style.cursor = 'pointer';
+            });
+            iconGroup.on('mouseout', function () {
+                iconNode.fill(iconNode.getAttr('defaultColor'));
+                if (textNode) {
+                    textNode.fill(textNode.getAttr('defaultColor'));
+                }
+                self.batchDraw();
+                if (!self._isDragging) {
+                    self._stage.container().style.cursor = 'default';
+                }
+            });
+            iconGroup.on('click', function (e) {
+                self._peaks.emit('lineIndicator.icon.click', self._indicators[lineGroup.getId()], e.evt);
+            });
+            iconGroup.on('mousedown touchstart', function () {
+                self._dragLineId = lineGroup.getId();
+                self._dragContainerRect = self._stage.getContainer().getBoundingClientRect();
+                window.addEventListener('mousemove', self._onWindowMove, false);
+                window.addEventListener('touchmove', self._onWindowMove, false);
+                window.addEventListener('mouseup', self._onWindowUp, false);
+                window.addEventListener('touchend', self._onWindowUp, false);
+                window.addEventListener('blur', self._onWindowUp, false);
             });
-            textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
-            textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
-            indicator.add(textNode);
-            indicatorHeight += this._sizes.font;
         }
+        if (subTextGroup) {
+            subTextGroup.on('mouseenter', function () {
+                subTextNode.fill(subTextNode.getAttr('selectedColor'));
+                self.batchDraw();
+                self._stage.container().style.cursor = 'pointer';
+            });
+            subTextGroup.on('mouseout', function () {
+                subTextNode.fill(subTextNode.getAttr('defaultColor'));
+                self.batchDraw();
+                if (!self._isDragging) {
+                    self._stage.container().style.cursor = 'default';
+                }
+            });
+            subTextGroup.on('click', function (e) {
+                self._peaks.emit('lineIndicator.subText.click', self._indicators[lineGroup.getId()], e.evt);
+            });
+        }
+        indicator.setAttr('trueHeight', indicatorHeight);
+        indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
+        return indicator;
+    };
+    LineIndicator.prototype._createIndicatorText = function (text) {
+        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,
+            align: 'center',
+            width: this._width,
+            listening: false
+        });
+        textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
+        textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
+        var textRect = new Konva.Rect({
+            x: 0,
+            y: 0,
+            width: this._width,
+            height: this._sizes.font,
+            fill: 'transparent',
+            listening: true
+        });
+        textGroup.add(textNode);
+        textGroup.add(textRect);
+        textRect.moveToTop();
+        textGroup.setAttr('trueHeight', this._sizes.font);
+        return [
+            textGroup,
+            textNode
+        ];
+    };
+    LineIndicator.prototype._createIndicatorIcon = function (type) {
         type = this._types.includes(type) ? type : 'default';
+        const iconGroup = new Konva.Group();
+        var iconHeight = this._sizes.icon[type];
         var iconNode;
         if (type === 'default') {
-            var padding = text ? this._defaultPadding : 0;
             iconNode = new Konva.Circle({
                 x: this._width / 2,
-                y: indicatorHeight + this._sizes.icon.default / 2 + padding,
+                y: this._sizes.icon.default / 2,
                 radius: this._sizes.icon.default / 2,
                 fill: this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
-                lineId: lineGroup.getId(),
                 listening: false
             });
-            indicatorHeight += padding;
         } else {
             iconNode = new Konva.Path({
                 x: (this._width - this._sizes.icon[type]) / 2,
-                y: indicatorHeight,
+                y: 0,
                 data: SVGs[type].path,
                 fill: this._peaks.options.lineIndicatorIconColor,
                 scale: {
                     x: this._sizes.icon[type] / SVGs[type].width,
                     y: this._sizes.icon[type] / SVGs[type].height
                 },
-                lineId: lineGroup.getId(),
                 listening: false
             });
         }
         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);
-        var backgroundRect = new Konva.Rect({
+        var iconRect = new Konva.Rect({
             x: 0,
             y: 0,
             width: this._width,
-            height: indicatorHeight,
+            height: iconHeight,
             fill: 'transparent',
             listening: true
         });
-        indicator.add(backgroundRect);
-        backgroundRect.moveToTop();
-        indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
-        var self = this;
-        indicator.on('mouseenter', function () {
-            indicator.getChildren().forEach(function (child) {
-                child.fill(child.getAttr('selectedColor'));
-            });
-            self.batchDraw();
-            self._stage.container().style.cursor = 'pointer';
-        });
-        indicator.on('mouseout', function () {
-            indicator.getChildren().forEach(function (child) {
-                child.fill(child.getAttr('defaultColor'));
-            });
-            self.batchDraw();
-            if (!self._isDragging) {
-                self._stage.container().style.cursor = 'default';
-            }
-        });
-        indicator.on('click', function (e) {
-            self._peaks.emit('lineIndicator.click', self._indicators[lineGroup.getId()], e.evt);
-        });
-        indicator.on('mousedown touchstart', function () {
-            self._dragLineId = lineGroup.getId();
-            self._dragContainerRect = self._stage.getContainer().getBoundingClientRect();
-            window.addEventListener('mousemove', self._onWindowMove, false);
-            window.addEventListener('touchmove', self._onWindowMove, false);
-            window.addEventListener('mouseup', self._onWindowUp, false);
-            window.addEventListener('touchend', self._onWindowUp, false);
-            window.addEventListener('blur', self._onWindowUp, false);
-        });
-        return indicator;
+        iconGroup.add(iconNode);
+        iconGroup.add(iconRect);
+        iconRect.moveToTop();
+        iconGroup.setAttr('trueHeight', iconHeight);
+        return [
+            iconGroup,
+            iconNode
+        ];
     };
     LineIndicator.prototype.addIndicator = function (lineGroup) {
         var line = lineGroup.getLine();
         if (!this._indicators[lineGroup.id]) {
-            const indicator = this._createIndicator(lineGroup, line.indicatorType, line.indicatorText);
+            const indicator = this._createIndicator(lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText);
             this._layer.add(indicator);
             this._indicators[line.id] = {
                 lineGroup: lineGroup,
                 indicator: indicator,
                 type: line.indicatorType,
-                text: line.indicatorText
+                text: line.indicatorText,
+                subText: line.indicatorSubText
             };
         }
     };
@@ -15989,11 +16073,12 @@ module.exports = function (Konva, SVGs, Utils) {
             return;
         }
         this.removeIndicator(line.id, true);
-        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText);
+        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText);
         this._layer.add(indicator);
         indicatorData.indicator = indicator;
         indicatorData.type = line.indicatorType;
         indicatorData.text = line.indicatorText;
+        indicatorData.subText = line.indicatorSubText;
         this.batchDraw();
     };
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
@@ -16016,7 +16101,7 @@ module.exports = function (Konva, SVGs, Utils) {
             const hasNoIndicator = !this._indicators[lineId].indicator;
             if (isVisible) {
                 if (hasNoIndicator) {
-                    this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].lineGroup, this._indicators[lineId].type, this._indicators[lineId].text);
+                    this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].lineGroup, this._indicators[lineId].type, this._indicators[lineId].text, this._indicators[lineId].subText);
                     this._layer.add(this._indicators[lineId].indicator);
                     anyChange = true;
                 } else {
@@ -19994,7 +20079,7 @@ module.exports = function (Line, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.lines.add(): expected a Line object parameter');
         }
-        var line = new Line(this._peaks, Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id, options.position, options.indicatorType, options.indicatorText, options.locked);
+        var line = new Line(this._peaks, Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id, options.position, options.indicatorType, options.indicatorText, options.indicatorSubText, options.locked);
         return line;
     };
     LineHandler.prototype.getLines = function () {
@@ -20096,6 +20181,10 @@ module.exports = function (Colors, EventEmitter, SegmentHandler, SourceHandler,
             lineIndicatorIconColor: '#8A8F98',
             lineIndicatorSelectedTextColor: '#ccc',
             lineIndicatorSelectedIconColor: '#ccc',
+            lineIndicatorPadding: {
+                top: 0,
+                bottom: 3
+            },
             sourceSelectedBorderWidth: 3,
             sourceHandleWidth: 12,
             sourceTextXOffset: 10,
@@ -20112,7 +20201,8 @@ module.exports = function (Colors, EventEmitter, SegmentHandler, SourceHandler,
             canMoveSourcesBetweenLines: true,
             automaticLineCreationDelay: 100,
             defaultLineIndicatorType: 'default',
-            defaultLineIndicatorText: ''
+            defaultLineIndicatorText: '',
+            defaultLineIndicatorSubText: ''
         };
         this.logger = console.error.bind(console);
         return this;
@@ -20343,17 +20433,23 @@ module.exports = function (Utils) {
         } else if (!Utils.isString(options.indicatorText)) {
             throw new TypeError('peaks.lines.' + context + ': indicatorText must be a string');
         }
+        if (Utils.isNullOrUndefined(options.indicatorSubText)) {
+            options.indicatorSubText = '';
+        } else if (!Utils.isString(options.indicatorSubText)) {
+            throw new TypeError('peaks.lines.' + context + ': indicatorSubText must be a string');
+        }
         if (Utils.isNullOrUndefined(options.locked)) {
             options.locked = false;
         } else if (!Utils.isBoolean(options.locked)) {
             throw new TypeError('peaks.lines.' + context + ': locked must be a boolean');
         }
     }
-    function Line(peaks, id, position, indicatorType, indicatorText, locked) {
+    function Line(peaks, id, position, indicatorType, indicatorText, indicatorSubText, locked) {
         var opts = {
             position: position,
             indicatorType: indicatorType,
             indicatorText: indicatorText,
+            indicatorSubText: indicatorSubText,
             locked: locked
         };
         validateLine(opts, 'add()');
@@ -20362,6 +20458,7 @@ module.exports = function (Utils) {
         this._position = opts.position;
         this._indicatorType = opts.indicatorType;
         this._indicatorText = opts.indicatorText;
+        this._indicatorSubText = opts.indicatorSubText;
         this._locked = opts.locked;
     }
     Object.defineProperties(Line.prototype, {
@@ -20392,6 +20489,12 @@ module.exports = function (Utils) {
                 return this._indicatorText;
             }
         },
+        indicatorSubText: {
+            enumerable: true,
+            get: function () {
+                return this._indicatorSubText;
+            }
+        },
         locked: {
             enumerable: true,
             get: function () {
@@ -20404,6 +20507,7 @@ module.exports = function (Utils) {
             position: this.position,
             indicatorType: this.indicatorType,
             indicatorText: this.indicatorText,
+            indicatorSubText: this.indicatorSubText,
             locked: this.locked
         };
         Utils.extend(opts, options);
@@ -20411,6 +20515,7 @@ module.exports = function (Utils) {
         this._position = opts.position;
         this._indicatorType = opts.indicatorType;
         this._indicatorText = opts.indicatorText;
+        this._indicatorSubText = opts.indicatorSubText;
         this._locked = opts.locked;
         this._peaks.emit('model.line.update', this);
     };

package/src/components/line-groups.js

@@ -330,7 +330,8 @@ define([
       this._peaks.addLine({
         position: newLinePosition,
         indicatorType: this._peaks.options.defaultLineIndicatorType,
-        indicatorText: this._peaks.options.defaultLineIndicatorText
+        indicatorText: this._peaks.options.defaultLineIndicatorText,
+        indicatorSubText: this._peaks.options.defaultLineIndicatorSubText
       }, true);
       const automaticallyCreatedLineGroup = this._lineGroupsByPosition[newLinePosition];
 

package/src/components/line-indicator.js

@@ -46,7 +46,8 @@ define([
     };
 
     this._yPadding = 30;
-    this._defaultPadding = 5;
+    this._topPadding = this._peaks.options.lineIndicatorPadding.top;
+    this._bottomPadding = this._peaks.options.lineIndicatorPadding.bottom;
     this._types = ['default'].concat(Object.keys(SVGs));
 
     this._stage = new Konva.Stage({
@@ -88,58 +89,187 @@ define([
     this.refreshIndicators();
   };
 
-  LineIndicator.prototype._createIndicator = function(lineGroup, type, text) {
+  LineIndicator.prototype._createIndicator = function(lineGroup, type, text, subText) {
     const indicator = new Konva.Group();
     let indicatorHeight = 0;
+    var self = this;
+    var textGroup, iconGroup, subTextGroup;
+    var textNode, iconNode, subTextNode;
 
     if (text) {
-      const textNode = new Konva.Text({
-        text: text,
-        fontSize: this._sizes.font,
-        fontFamily: this._peaks.options.lineIndicatorFont,
-        fill: this._peaks.options.lineIndicatorTextColor,
-        align: 'center',
-        width: this._width,
-        listening: false
+      [textGroup, textNode] = this._createIndicatorText(text);
+
+      indicator.add(textGroup);
+      indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
+    }
+
+    [iconGroup, iconNode] = this._createIndicatorIcon(type);
+
+    iconGroup.y(indicatorHeight);
+    indicator.add(iconGroup);
+    indicatorHeight += iconGroup.getAttr('trueHeight');
+
+    if (subText) {
+      indicatorHeight += this._bottomPadding;
+
+      [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+
+      subTextGroup.y(indicatorHeight);
+      indicator.add(subTextGroup);
+      indicatorHeight += subTextGroup.getAttr('trueHeight');
+    }
+
+    if (textGroup) {
+      textGroup.on('mouseenter', function() {
+        textNode.fill(textNode.getAttr('selectedColor'));
+        if (iconNode) {
+          iconNode.fill(iconNode.getAttr('selectedColor'));
+        }
+        self.batchDraw();
+        self._stage.container().style.cursor = 'pointer';
       });
 
-      textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
-      textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
+      textGroup.on('mouseout', function() {
+        textNode.fill(textNode.getAttr('defaultColor'));
+        if (iconNode) {
+          iconNode.fill(iconNode.getAttr('defaultColor'));
+        }
+        self.batchDraw();
+        if (!self._isDragging) {
+          self._stage.container().style.cursor = 'default';
+        }
+      });
 
-      indicator.add(textNode);
-      indicatorHeight += this._sizes.font;
+      textGroup.on('click', function(e) {
+        self._peaks.emit('lineIndicator.text.click', self._indicators[lineGroup.getId()], e.evt);
+      });
     }
 
+    if (iconGroup) {
+      iconGroup.on('mouseenter', function() {
+        iconNode.fill(iconNode.getAttr('selectedColor'));
+        if (textNode) {
+          textNode.fill(textNode.getAttr('selectedColor'));
+        }
+        self.batchDraw();
+        self._stage.container().style.cursor = 'pointer';
+      });
+
+      iconGroup.on('mouseout', function() {
+        iconNode.fill(iconNode.getAttr('defaultColor'));
+        if (textNode) {
+          textNode.fill(textNode.getAttr('defaultColor'));
+        }
+        self.batchDraw();
+        if (!self._isDragging) {
+          self._stage.container().style.cursor = 'default';
+        }
+      });
+
+      iconGroup.on('click', function(e) {
+        self._peaks.emit('lineIndicator.icon.click', self._indicators[lineGroup.getId()], e.evt);
+      });
+
+      iconGroup.on('mousedown touchstart', function() {
+        self._dragLineId = lineGroup.getId();
+        self._dragContainerRect = self._stage.getContainer().getBoundingClientRect();
+
+        window.addEventListener('mousemove', self._onWindowMove, false);
+        window.addEventListener('touchmove', self._onWindowMove, false);
+        window.addEventListener('mouseup', self._onWindowUp, false);
+        window.addEventListener('touchend', self._onWindowUp, false);
+        window.addEventListener('blur', self._onWindowUp, false);
+      });
+    }
+
+    if (subTextGroup) {
+      subTextGroup.on('mouseenter', function() {
+        subTextNode.fill(subTextNode.getAttr('selectedColor'));
+        self.batchDraw();
+        self._stage.container().style.cursor = 'pointer';
+      });
+
+      subTextGroup.on('mouseout', function() {
+        subTextNode.fill(subTextNode.getAttr('defaultColor'));
+        self.batchDraw();
+        if (!self._isDragging) {
+          self._stage.container().style.cursor = 'default';
+        }
+      });
+
+      subTextGroup.on('click', function(e) {
+        self._peaks.emit('lineIndicator.subText.click', self._indicators[lineGroup.getId()], e.evt);
+      });
+    }
+
+    indicator.setAttr('trueHeight', indicatorHeight);
+    indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
+
+    return indicator;
+  };
+
+  LineIndicator.prototype._createIndicatorText = function(text) {
+    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,
+      align: 'center',
+      width: this._width,
+      listening: false
+    });
+
+    textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
+    textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
+
+    var textRect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: this._width,
+      height: this._sizes.font,
+      fill: 'transparent',
+      listening: true
+    });
+
+    textGroup.add(textNode);
+    textGroup.add(textRect);
+    textRect.moveToTop();
+
+    textGroup.setAttr('trueHeight', this._sizes.font);
+
+    return [textGroup, textNode];
+  };
+
+  LineIndicator.prototype._createIndicatorIcon = function(type) {
     type = this._types.includes(type) ? type : 'default';
 
+    const iconGroup = new Konva.Group();
+
+    var iconHeight = this._sizes.icon[type];
     var iconNode;
 
     if (type === 'default') {
-      var padding = text ? this._defaultPadding : 0;
-
       iconNode = new Konva.Circle({
         x: this._width / 2,
-        y: indicatorHeight + this._sizes.icon.default / 2 + padding,
+        y: this._sizes.icon.default / 2,
         radius: this._sizes.icon.default / 2,
         fill: this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
-        lineId: lineGroup.getId(),
         listening: false
       });
-
-      indicatorHeight += padding;
     }
     else {
       iconNode = new Konva.Path({
         x: (this._width - this._sizes.icon[type]) / 2,
-        y: indicatorHeight,
+        y: 0,
         data: SVGs[type].path,
         fill: this._peaks.options.lineIndicatorIconColor,
         scale: {
           x: (this._sizes.icon[type]) / SVGs[type].width,
           y: (this._sizes.icon[type]) / SVGs[type].height
         },
-        lineId: lineGroup.getId(),
         listening: false
       });
     }
@@ -147,61 +277,22 @@ define([
     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);
-
-    var backgroundRect = new Konva.Rect({
+    var iconRect = new Konva.Rect({
       x: 0,
       y: 0,
       width: this._width,
-      height: indicatorHeight,
+      height: iconHeight,
       fill: 'transparent',
       listening: true
     });
 
-    indicator.add(backgroundRect);
-    backgroundRect.moveToTop();
-
-    indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
-
-    var self = this;
-
-    indicator.on('mouseenter', function() {
-      indicator.getChildren().forEach(function(child) {
-        child.fill(child.getAttr('selectedColor'));
-      });
-      self.batchDraw();
-      self._stage.container().style.cursor = 'pointer';
-    });
-
-    indicator.on('mouseout', function() {
-      indicator.getChildren().forEach(function(child) {
-        child.fill(child.getAttr('defaultColor'));
-      });
-      self.batchDraw();
-      if (!self._isDragging) {
-        self._stage.container().style.cursor = 'default';
-      }
-    });
-
-    indicator.on('click', function(e) {
-      self._peaks.emit('lineIndicator.click', self._indicators[lineGroup.getId()], e.evt);
-    });
+    iconGroup.add(iconNode);
+    iconGroup.add(iconRect);
+    iconRect.moveToTop();
 
-    indicator.on('mousedown touchstart', function() {
-      self._dragLineId = lineGroup.getId();
-      self._dragContainerRect = self._stage.getContainer().getBoundingClientRect();
+    iconGroup.setAttr('trueHeight', iconHeight);
 
-      window.addEventListener('mousemove', self._onWindowMove, false);
-      window.addEventListener('touchmove', self._onWindowMove, false);
-      window.addEventListener('mouseup', self._onWindowUp, false);
-      window.addEventListener('touchend', self._onWindowUp, false);
-      window.addEventListener('blur', self._onWindowUp, false);
-    });
-
-    return indicator;
+    return [iconGroup, iconNode];
   };
 
   LineIndicator.prototype.addIndicator = function(lineGroup) {
@@ -211,7 +302,8 @@ define([
       const indicator = this._createIndicator(
         lineGroup,
         line.indicatorType,
-        line.indicatorText
+        line.indicatorText,
+        line.indicatorSubText
       );
 
       this._layer.add(indicator);
@@ -220,7 +312,8 @@ define([
         lineGroup: lineGroup,
         indicator: indicator,
         type: line.indicatorType,
-        text: line.indicatorText
+        text: line.indicatorText,
+        subText: line.indicatorSubText
       };
     }
   };
@@ -242,7 +335,8 @@ define([
     var indicator = this._createIndicator(
       indicatorData.lineGroup,
       line.indicatorType,
-      line.indicatorText
+      line.indicatorText,
+      line.indicatorSubText
     );
 
     this._layer.add(indicator);
@@ -250,6 +344,7 @@ define([
     indicatorData.indicator = indicator;
     indicatorData.type = line.indicatorType;
     indicatorData.text = line.indicatorText;
+    indicatorData.subText = line.indicatorSubText;
 
     this.batchDraw();
   };
@@ -282,7 +377,8 @@ define([
           this._indicators[lineId].indicator = this._createIndicator(
             this._indicators[lineId].lineGroup,
             this._indicators[lineId].type,
-            this._indicators[lineId].text
+            this._indicators[lineId].text,
+            this._indicators[lineId].subText
           );
           this._layer.add(this._indicators[lineId].indicator);
           anyChange = true;

package/src/line-handler.js

@@ -21,6 +21,8 @@ define([
    * @param {Number} position Position of the line on the timeline.
    * @param {String} indicatorType Type of the line indicator.
    * @param {String} indicatorText Text to display above the line indicator.
+   * @param {String} indicatorSubText Text to display below the line indicator.
+   * @param {Boolean} locked Whether the line is locked in place.
    */
 
   /**
@@ -69,6 +71,7 @@ define([
       options.position,
       options.indicatorType,
       options.indicatorText,
+      options.indicatorSubText,
       options.locked
     );
 

package/src/main.js

@@ -316,6 +316,14 @@ define([
        */
       lineIndicatorSelectedIconColor:    '#ccc',
 
+      /**
+       * Line indicators' top and bottom padding, in pixels
+       */
+      lineIndicatorPadding: {
+        top: 0,
+        bottom: 3
+      },
+
       /**
        * Border width of a source when selected
        */
@@ -409,7 +417,13 @@ define([
        * Default text of the line indicator.
        * This will be used when a new line is automatically created by a component.
        */
-      defaultLineIndicatorText: ''
+      defaultLineIndicatorText: '',
+
+      /**
+       * Default sub text of the line indicator.
+       * This will be used when a new line is automatically created by a component.
+       */
+      defaultLineIndicatorSubText: ''
     };
 
     /**
@@ -446,7 +460,7 @@ define([
     }
 
     /*
-     Setup the fonts
+     * Setup the fonts
      */
     var fonts = [
       'https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2',

package/src/models/line.js

@@ -30,6 +30,13 @@ define([
       throw new TypeError('peaks.lines.' + context + ': indicatorText must be a string');
     }
 
+    if (Utils.isNullOrUndefined(options.indicatorSubText)) {
+      options.indicatorSubText = '';
+    }
+    else if (!Utils.isString(options.indicatorSubText)) {
+      throw new TypeError('peaks.lines.' + context + ': indicatorSubText must be a string');
+    }
+
     if (Utils.isNullOrUndefined(options.locked)) {
       options.locked = false;
     }
@@ -51,22 +58,24 @@ define([
    * @param {String} indicatorText Text to display above the line indicator.
    */
 
-  function Line(peaks, id, position, indicatorType, indicatorText, locked) {
+  function Line(peaks, id, position, indicatorType, indicatorText, indicatorSubText, locked) {
     var opts = {
-      position:       position,
-      indicatorType:  indicatorType,
-      indicatorText:  indicatorText,
-      locked:         locked
+      position:         position,
+      indicatorType:    indicatorType,
+      indicatorText:    indicatorText,
+      indicatorSubText: indicatorSubText,
+      locked:           locked
     };
 
     validateLine(opts, 'add()');
 
-    this._peaks           = peaks;
-    this._id              = id;
-    this._position        = opts.position;
-    this._indicatorType   = opts.indicatorType;
-    this._indicatorText   = opts.indicatorText;
-    this._locked          = opts.locked;
+    this._peaks            = peaks;
+    this._id               = id;
+    this._position         = opts.position;
+    this._indicatorType    = opts.indicatorType;
+    this._indicatorText    = opts.indicatorText;
+    this._indicatorSubText = opts.indicatorSubText;
+    this._locked           = opts.locked;
   }
 
   Object.defineProperties(Line.prototype, {
@@ -98,6 +107,12 @@ define([
         return this._indicatorText;
       }
     },
+    indicatorSubText: {
+      enumerable: true,
+      get: function() {
+        return this._indicatorSubText;
+      }
+    },
     locked: {
       enumerable: true,
       get: function() {
@@ -108,20 +123,22 @@ define([
 
   Line.prototype.update = function(options) {
     var opts = {
-      position:       this.position,
-      indicatorType:  this.indicatorType,
-      indicatorText:  this.indicatorText,
-      locked:         this.locked
+      position:         this.position,
+      indicatorType:    this.indicatorType,
+      indicatorText:    this.indicatorText,
+      indicatorSubText: this.indicatorSubText,
+      locked:           this.locked
     };
 
     Utils.extend(opts, options);
 
     validateLine(opts, 'update()');
 
-    this._position        = opts.position;
-    this._indicatorType   = opts.indicatorType;
-    this._indicatorText   = opts.indicatorText;
-    this._locked          = opts.locked;
+    this._position         = opts.position;
+    this._indicatorType    = opts.indicatorType;
+    this._indicatorText    = opts.indicatorText;
+    this._indicatorSubText = opts.indicatorSubText;
+    this._locked           = opts.locked;
 
     this._peaks.emit('model.line.update', this);
   };