@checksub_team/peaks_timeline 1.5.5 → 1.5.7

package/package.json

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

package/peaks.js

@@ -14155,7 +14155,7 @@ module.exports = function (Utils, Konva) {
     };
     return DefaultSegmentMarker;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":111,"konva":43}],89:[function(_dereq_,module,exports){
+},{"./utils":112,"konva":43}],89:[function(_dereq_,module,exports){
 module.exports = function () {
     'use strict';
     function Invoker() {
@@ -14288,7 +14288,7 @@ module.exports = function () {
     return KeyboardHandler;
 }();
 },{}],91:[function(_dereq_,module,exports){
-module.exports = function (Konva, Utils) {
+module.exports = function (Konva, Utils, SVGs) {
     'use strict';
     function LineIndicator(peaks, view, container) {
         this._peaks = peaks;
@@ -14296,7 +14296,10 @@ module.exports = function (Konva, Utils) {
         this._container = container;
         this._width = this._peaks.options.lineIndicatorWidth;
         this._height = this._view.getHeight();
-        this._indicatorRadius = this._width / 4;
+        this._iconSize = this._peaks.options.lineIndicatorIconSize;
+        this._fontSize = this._peaks.options.lineIndicatorFontSize;
+        this._defaultPadding = 5;
+        this._types = ['default'].concat(Object.keys(SVGs));
         this._stage = new Konva.Stage({
             container: container,
             width: this._width,
@@ -14321,15 +14324,7 @@ module.exports = function (Konva, Utils) {
         if (this._peaks.options.enableLineIndicatorContextMenu) {
             this._createContextMenu();
         }
-        this.ICON_SIZE = 18;
-        this._volumeSVGPath = 'M0 6.00001V12H4L9 17V1.00001L4 6.00001H0ZM13.5 9.00001C13.5 7.23001 12.48 5.71001 11 4.97001V13.02C12.48 12.29 13.5 10.77 13.5 9.00001ZM11 0.230011V2.29001C13.89 3.15001 16 5.83001 16 9.00001C16 12.17 13.89 14.85 11 15.71V17.77C15.01 16.86 18 13.28 18 9.00001C18 4.72001 15.01 1.14001 11 0.230011Z';
-        this._noVolumeSVGPath = 'M13.5 9C13.5 7.23 12.48 5.71 11 4.97V7.18L13.45 9.63C13.48 9.43 13.5 9.22 13.5 9ZM16 9C16 9.94 15.8 10.82 15.46 11.64L16.97 13.15C17.63 11.91 18 10.5 18 9C18 4.72 15.01 1.14 11 0.23V2.29C13.89 3.15 16 5.83 16 9ZM1.27 0L0 1.27L4.73 6H0V12H4L9 17V10.27L13.25 14.52C12.58 15.04 11.83 15.45 11 15.7V17.76C12.38 17.45 13.63 16.81 14.69 15.95L16.73 18L18 16.73L9 7.73L1.27 0ZM9 1L6.91 3.09L9 5.18V1Z';
         this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
-        this._types = [
-            'default',
-            'volume',
-            'noVolume'
-        ];
     }
     LineIndicator.prototype.fitToView = function () {
         this._height = this._view.getHeight();
@@ -14357,38 +14352,53 @@ module.exports = function (Konva, Utils) {
         menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
     };
     LineIndicator.prototype._createIndicator = function (line, type) {
-        var indicator;
-        type = typeof type !== 'undefined' ? type : 'default';
+        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
+        });
+        type = this._types.includes(type) ? type : 'default';
+        var icon;
         if (type === 'default') {
-            indicator = new Konva.Circle({
+            icon = new Konva.Circle({
                 x: this._width / 2,
-                y: line.getY() + line.lineHeight() / 2,
-                radius: this._indicatorRadius,
+                y: this._fontSize + this._iconSize / 2 + this._defaultPadding,
+                radius: this._iconSize / 2,
                 fill: this._peaks.options.lineIndicatorColor,
                 strokeWidth: 0,
                 lineId: line.getId()
             });
         } else {
-            var scaleFactor = this._width / 2 / this.ICON_SIZE;
-            indicator = new Konva.Path({
-                x: this._width / 4,
-                y: line.getY() + line.lineHeight() / 2 - this._width / 4,
-                data: type === 'volume' ? this._volumeSVGPath : this._noVolumeSVGPath,
+            icon = new Konva.Path({
+                x: (this._width - this._iconSize) / 2,
+                y: this._fontSize,
+                data: SVGs[type].path,
                 fill: this._peaks.options.lineIndicatorColor,
                 scale: {
-                    x: scaleFactor,
-                    y: scaleFactor
+                    x: this._iconSize / SVGs[type].width,
+                    y: this._iconSize / SVGs[type].height
                 },
                 lineId: line.getId()
             });
         }
+        indicator.add(text);
+        indicator.add(icon);
+        indicator.y(line.getY() + (line.lineHeight() - this._getIndicatorHeight(type)) / 2);
         var self = this;
         indicator.on('mouseover', function () {
-            indicator.fill(self._peaks.options.lineIndicatorSelected);
+            indicator.getChildren().forEach(function (child) {
+                child.fill(self._peaks.options.lineIndicatorSelected);
+            });
             self.draw();
         });
         indicator.on('mouseout', function () {
-            indicator.fill(self._peaks.options.lineIndicatorColor);
+            indicator.getChildren().forEach(function (child) {
+                child.fill(self._peaks.options.lineIndicatorColor);
+            });
             self.draw();
         });
         indicator.on('click', function (e) {
@@ -14419,18 +14429,15 @@ module.exports = function (Konva, Utils) {
             }
         }
     };
-    LineIndicator.prototype.getPixelsFromCenter = function (lineId) {
-        return this._indicators[lineId].type === 'default' ? 0 : this._width / 4;
-    };
     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._indicatorRadius > 0 && y - this._indicatorRadius < this._height) {
+            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._layer.add(this._indicators[lineId].indicator);
                 } else {
-                    this._indicators[lineId].indicator.y(y - this.getPixelsFromCenter(lineId));
+                    this._indicators[lineId].indicator.y(y - this._getIndicatorHeight(this._indicators[lineId].type) / 2);
                 }
             } else {
                 this.removeIndicator(lineId, true);
@@ -14447,6 +14454,9 @@ module.exports = function (Konva, Utils) {
     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');
@@ -14560,8 +14570,8 @@ module.exports = function (Konva, Utils) {
         });
     };
     return LineIndicator;
-}(_dereq_('konva'), _dereq_('./utils'));
-},{"./utils":111,"konva":43}],92:[function(_dereq_,module,exports){
+}(_dereq_('konva'), _dereq_('./utils'), _dereq_('./svgs'));
+},{"./svgs":107,"./utils":112,"konva":43}],92:[function(_dereq_,module,exports){
 module.exports = function (Konva, Utils) {
     'use strict';
     function Line(peaks, view, y, id, position) {
@@ -15024,7 +15034,7 @@ module.exports = function (Konva, Utils) {
     };
     return Line;
 }(_dereq_('konva'), _dereq_('./utils'));
-},{"./utils":111,"konva":43}],93:[function(_dereq_,module,exports){
+},{"./utils":112,"konva":43}],93:[function(_dereq_,module,exports){
 module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
     'use strict';
     function Lines(peaks, view, layer) {
@@ -15329,7 +15339,7 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
     };
     return Lines;
 }(_dereq_('./segments-group'), _dereq_('./line'), _dereq_('./line-indicator'), _dereq_('./utils'));
-},{"./line":92,"./line-indicator":91,"./segments-group":103,"./utils":111}],94:[function(_dereq_,module,exports){
+},{"./line":92,"./line-indicator":91,"./segments-group":103,"./utils":112}],94:[function(_dereq_,module,exports){
 module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSources, KeyboardHandler, Player, MarkerFactories, TimelineZoomView, Utils) {
     'use strict';
     function Peaks() {
@@ -15379,6 +15389,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             segmentMagnetThreshold: 15,
             enableVerticalScrolling: true,
             lineIndicatorWidth: 20,
+            lineIndicatorIconSize: 10,
+            lineIndicatorFontSize: 12,
             lineIndicatorColor: '#8A8F98',
             lineIndicatorSelected: '#ccc',
             autoScrollThreshold: 0.05,
@@ -15572,7 +15584,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     };
     return Peaks;
 }(_dereq_('colors.css'), _dereq_('eventemitter2'), _dereq_('./timeline-segments'), _dereq_('./timeline-sources'), _dereq_('./keyboard-handler'), _dereq_('./player'), _dereq_('./marker-factories'), _dereq_('./timeline-zoomview'), _dereq_('./utils'));
-},{"./keyboard-handler":90,"./marker-factories":95,"./player":98,"./timeline-segments":108,"./timeline-sources":109,"./timeline-zoomview":110,"./utils":111,"colors.css":1,"eventemitter2":2}],95:[function(_dereq_,module,exports){
+},{"./keyboard-handler":90,"./marker-factories":95,"./player":98,"./timeline-segments":109,"./timeline-sources":110,"./timeline-zoomview":111,"./utils":112,"colors.css":1,"eventemitter2":2}],95:[function(_dereq_,module,exports){
 module.exports = function (DefaultSegmentMarker, Utils, Konva) {
     'use strict';
     function createSegmentMarker(options) {
@@ -15604,7 +15616,7 @@ module.exports = function (DefaultSegmentMarker, Utils, Konva) {
         createSegmentLabel: createSegmentLabel
     };
 }(_dereq_('./default-segment-marker'), _dereq_('./utils'), _dereq_('konva'));
-},{"./default-segment-marker":88,"./utils":111,"konva":43}],96:[function(_dereq_,module,exports){
+},{"./default-segment-marker":88,"./utils":112,"konva":43}],96:[function(_dereq_,module,exports){
 module.exports = function (Utils, SourceGroup, Konva) {
     'use strict';
     var TIME_X_OFFSET = 20;
@@ -15880,7 +15892,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
     };
     return ModeLayer;
 }(_dereq_('./utils'), _dereq_('./source-group'), _dereq_('konva'));
-},{"./source-group":104,"./utils":111,"konva":43}],97:[function(_dereq_,module,exports){
+},{"./source-group":104,"./utils":112,"konva":43}],97:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     function getMarkerObject(obj) {
@@ -16009,7 +16021,7 @@ module.exports = function (Utils) {
     };
     return Player;
 }(_dereq_('./utils'));
-},{"./utils":111}],99:[function(_dereq_,module,exports){
+},{"./utils":112}],99:[function(_dereq_,module,exports){
 module.exports = function (Utils, Konva) {
     'use strict';
     var HANDLE_RADIUS = 10;
@@ -16195,7 +16207,7 @@ module.exports = function (Utils, Konva) {
     };
     return PlayheadLayer;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":111,"konva":43}],100:[function(_dereq_,module,exports){
+},{"./utils":112,"konva":43}],100:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     function SegmentMarker(options) {
@@ -16331,9 +16343,9 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._rectangle = new Konva.Rect({
             width: width,
             height: this._segmentHeight,
-            cornerRadius: SEGMENT_CORNER_RADIUS,
-            stroke: segment.textColor + 'FF',
-            strokeWidth: 2,
+            cornerRadius: this._cornerRadius(),
+            stroke: segment.borderColor || segment.textColor + 'FF',
+            strokeWidth: segment.borderWidth !== undefined && segment.borderWidth !== null ? segment.borderWidth : 2,
             fillPriority: segment.shouldShowWarning() ? 'linear-gradient' : 'color',
             fill: fillColor,
             fillLinearGradientColorStops: [
@@ -16379,6 +16391,9 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._shapeGroup.add(this._indicatorsGroup);
         this.createIndicators();
     }
+    SegmentShape.prototype._cornerRadius = function () {
+        return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ? this._segment.borderRadius : SEGMENT_CORNER_RADIUS;
+    };
     SegmentShape.prototype.update = function () {
         var startPixel = this._view.timeToPixels(this._segment.startTime);
         var endPixel = this._view.timeToPixels(this._segment.endTime);
@@ -16629,21 +16644,22 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         }
     };
     SegmentShape.prototype._drawRect = function (ctx) {
+        var cornerRadius = this._cornerRadius();
         ctx.beginPath();
-        ctx.moveTo(SEGMENT_CORNER_RADIUS + 1.5, 0);
-        ctx.lineTo(this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5, 0);
-        ctx.quadraticCurveTo(this._segmentWidth, 0, this._segmentWidth, SEGMENT_CORNER_RADIUS + 1.5);
-        ctx.lineTo(this._segmentWidth, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5);
-        ctx.quadraticCurveTo(this._segmentWidth, this._segmentHeight, this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5, this._segmentHeight);
-        ctx.lineTo(SEGMENT_CORNER_RADIUS + 1.5, this._segmentHeight);
-        ctx.quadraticCurveTo(0, this._segmentHeight, 0, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5);
-        ctx.lineTo(0, SEGMENT_CORNER_RADIUS + 1.5);
-        ctx.quadraticCurveTo(0, 0, SEGMENT_CORNER_RADIUS + 1.5, 0);
+        ctx.moveTo(cornerRadius + 1.5, 0);
+        ctx.lineTo(this._segmentWidth - cornerRadius - 1.5, 0);
+        ctx.quadraticCurveTo(this._segmentWidth, 0, this._segmentWidth, cornerRadius + 1.5);
+        ctx.lineTo(this._segmentWidth, this._segmentHeight - cornerRadius - 1.5);
+        ctx.quadraticCurveTo(this._segmentWidth, this._segmentHeight, this._segmentWidth - cornerRadius - 1.5, this._segmentHeight);
+        ctx.lineTo(cornerRadius + 1.5, this._segmentHeight);
+        ctx.quadraticCurveTo(0, this._segmentHeight, 0, this._segmentHeight - cornerRadius - 1.5);
+        ctx.lineTo(0, cornerRadius + 1.5);
+        ctx.quadraticCurveTo(0, 0, cornerRadius + 1.5, 0);
         ctx.closePath();
     };
     return SegmentShape;
 }(_dereq_('konva'), _dereq_('./segment-marker'), _dereq_('./utils'));
-},{"./segment-marker":100,"./utils":111,"konva":43}],102:[function(_dereq_,module,exports){
+},{"./segment-marker":100,"./utils":112,"konva":43}],102:[function(_dereq_,module,exports){
 module.exports = function (Utils) {
     'use strict';
     function validateSegment(peaks, options, context) {
@@ -16698,7 +16714,7 @@ module.exports = function (Utils) {
         }
         return shouldNotifyUpdate;
     }
-    function Segment(peaks, id, startTime, endTime, duration, labelText, color, textColor, handleTextColor, hoverColor, warningColor, opacity, editable, allowDeletion, line, indicators) {
+    function Segment(peaks, id, startTime, endTime, duration, labelText, color, textColor, handleTextColor, hoverColor, warningColor, opacity, borderColor, borderWidth, borderRadius, editable, allowDeletion, line, indicators) {
         var opts = {
             startTime: startTime,
             endTime: endTime,
@@ -16710,6 +16726,9 @@ module.exports = function (Utils) {
             hoverColor: hoverColor,
             warningColor: warningColor,
             opacity: opacity,
+            borderColor: borderColor,
+            borderWidth: borderWidth,
+            borderRadius: borderRadius,
             editable: editable,
             allowDeletion: allowDeletion,
             line: line,
@@ -16728,6 +16747,9 @@ module.exports = function (Utils) {
         this._handleTextColor = opts.handleTextColor;
         this._warningColor = opts.warningColor;
         this._opacity = opts.opacity;
+        this._borderColor = opts.borderColor;
+        this._borderWidth = opts.borderWidth;
+        this._borderRadius = opts.borderRadius;
         this._editable = opts.editable;
         this._allowDeletion = opts.allowDeletion;
         this._line = opts.line;
@@ -16814,6 +16836,24 @@ module.exports = function (Utils) {
                 return this._opacity;
             }
         },
+        borderColor: {
+            enumerable: true,
+            get: function () {
+                return this._borderColor;
+            }
+        },
+        borderWidth: {
+            enumerable: true,
+            get: function () {
+                return this._borderWidth;
+            }
+        },
+        borderRadius: {
+            enumerable: true,
+            get: function () {
+                return this._borderRadius;
+            }
+        },
         editable: {
             enumerable: true,
             get: function () {
@@ -16866,6 +16906,9 @@ module.exports = function (Utils) {
             hoverColor: this.hoverColor,
             warningColor: this.warningColor,
             opacity: this.opacity,
+            borderColor: this.borderColor,
+            borderWidth: this.borderWidth,
+            borderRadius: this.borderRadius,
             editable: this.editable,
             allowDeletion: this.allowDeletion,
             line: this.line,
@@ -16883,6 +16926,9 @@ module.exports = function (Utils) {
         this._hoverColor = opts.hoverColor;
         this._warningColor = opts.warningColor;
         this._opacity = opts.opacity;
+        this._borderColor = opts.borderColor;
+        this._borderWidth = opts.borderWidth;
+        this._borderRadius = opts.borderRadius;
         this._editable = opts.editable;
         this._allowDeletion = opts.allowDeletion;
         this._line = opts.line;
@@ -16901,7 +16947,7 @@ module.exports = function (Utils) {
     };
     return Segment;
 }(_dereq_('./utils'));
-},{"./utils":111}],103:[function(_dereq_,module,exports){
+},{"./utils":112}],103:[function(_dereq_,module,exports){
 module.exports = function (SegmentShape, Utils, Konva) {
     'use strict';
     function SegmentsGroup(peaks, view, allowEditing) {
@@ -17421,7 +17467,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
     };
     return SegmentsGroup;
 }(_dereq_('./segment-shape'), _dereq_('./utils'), _dereq_('konva'));
-},{"./segment-shape":101,"./utils":111,"konva":43}],104:[function(_dereq_,module,exports){
+},{"./segment-shape":101,"./utils":112,"konva":43}],104:[function(_dereq_,module,exports){
 module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     'use strict';
     var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
@@ -18142,7 +18188,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     };
     return SourceGroup;
 }(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./utils'), _dereq_('konva'));
-},{"./utils":111,"./waveform-builder":112,"./waveform-shape":113,"konva":43}],105:[function(_dereq_,module,exports){
+},{"./utils":112,"./waveform-builder":113,"./waveform-shape":114,"konva":43}],105:[function(_dereq_,module,exports){
 module.exports = function (Utils) {
     'use strict';
     function validateSource(peaks, options, context) {
@@ -18739,7 +18785,7 @@ module.exports = function (Utils) {
     };
     return Source;
 }(_dereq_('./utils'));
-},{"./utils":111}],106:[function(_dereq_,module,exports){
+},{"./utils":112}],106:[function(_dereq_,module,exports){
 module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Konva) {
     'use strict';
     function SourcesLayer(peaks, view, allowEditing) {
@@ -19092,7 +19138,34 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     };
     return SourcesLayer;
 }(_dereq_('./source-group'), _dereq_('./lines'), _dereq_('./data-retriever'), _dereq_('./utils'), _dereq_('./invoker'), _dereq_('konva'));
-},{"./data-retriever":86,"./invoker":89,"./lines":93,"./source-group":104,"./utils":111,"konva":43}],107:[function(_dereq_,module,exports){
+},{"./data-retriever":86,"./invoker":89,"./lines":93,"./source-group":104,"./utils":112,"konva":43}],107:[function(_dereq_,module,exports){
+module.exports = function () {
+    'use strict';
+    var SVGs = {
+        volume: {
+            width: 24,
+            height: 24,
+            path: 'M15.35 20.7262C15.0167 20.8595 14.7083 20.8179 14.425 20.6012C14.1417 20.3845 14 20.0845 14 19.7012C14 19.5179 14.0543 19.3555 14.163 19.2142C14.271 19.0722 14.4083 18.9679 14.575 18.9012C15.9083 18.3679 16.9793 17.5179 17.788 16.3512C18.596 15.1845 19 13.8679 19 12.4012C19 10.9345 18.596 9.61786 17.788 8.45119C16.9793 7.28452 15.9083 6.43452 14.575 5.90119C14.3917 5.83452 14.25 5.72619 14.15 5.57619C14.05 5.42619 14 5.25952 14 5.07619C14 4.70952 14.1417 4.41786 14.425 4.20119C14.7083 3.98452 15.0167 3.94286 15.35 4.07619C17.05 4.75952 18.4167 5.85119 19.45 7.35119C20.4833 8.85119 21 10.5345 21 12.4012C21 14.2679 20.4833 15.9512 19.45 17.4512C18.4167 18.9512 17.05 20.0429 15.35 20.7262ZM4 15.4262C3.71667 15.4262 3.47933 15.3302 3.288 15.1382C3.096 14.9469 3 14.7095 3 14.4262V10.4262C3 10.1429 3.096 9.90519 3.288 9.71319C3.47933 9.52186 3.71667 9.42619 4 9.42619H7L10.3 6.12619C10.6167 5.80952 10.979 5.73852 11.387 5.91319C11.7957 6.08852 12 6.40119 12 6.85119V18.0012C12 18.4512 11.7957 18.7635 11.387 18.9382C10.979 19.1135 10.6167 19.0429 10.3 18.7262L7 15.4262H4ZM14 16.4262V8.37619C14.75 8.72619 15.354 9.26786 15.812 10.0012C16.2707 10.7345 16.5 11.5429 16.5 12.4262C16.5 13.3095 16.2707 14.1095 15.812 14.8262C15.354 15.5429 14.75 16.0762 14 16.4262ZM10 9.27619L7.85 11.4262H5V13.4262H7.85L10 15.5762V9.27619Z'
+        },
+        noVolume: {
+            width: 24,
+            height: 24,
+            path: 'M19.275 21.675L16.95 19.35C16.7167 19.4833 16.4833 19.6123 16.25 19.737C16.0167 19.8623 15.775 19.975 15.525 20.075C15.1917 20.2083 14.8833 20.1667 14.6 19.95C14.3167 19.7333 14.175 19.4333 14.175 19.05C14.175 18.8667 14.2293 18.7043 14.338 18.563C14.446 18.421 14.5833 18.3167 14.75 18.25C14.8833 18.2 15.0127 18.1457 15.138 18.087C15.2627 18.029 15.3833 17.9667 15.5 17.9L12.175 14.575V17.35C12.175 17.8 11.9707 18.1123 11.562 18.287C11.154 18.4623 10.7917 18.3917 10.475 18.075L7.175 14.775H4.175C3.89167 14.775 3.65433 14.679 3.463 14.487C3.271 14.2957 3.175 14.0583 3.175 13.775V9.775C3.175 9.49167 3.271 9.254 3.463 9.062C3.65433 8.87067 3.89167 8.775 4.175 8.775H6.375L2.275 4.675C2.09167 4.49167 2 4.25833 2 3.975C2 3.69167 2.09167 3.45833 2.275 3.275C2.45833 3.09167 2.69167 3 2.975 3C3.25833 3 3.49167 3.09167 3.675 3.275L20.675 20.275C20.8583 20.4583 20.95 20.6917 20.95 20.975C20.95 21.2583 20.8583 21.4917 20.675 21.675C20.4917 21.8583 20.2583 21.95 19.975 21.95C19.6917 21.95 19.4583 21.8583 19.275 21.675ZM15.525 3.425C17.225 4.10833 18.5917 5.2 19.625 6.7C20.6583 8.2 21.175 9.88333 21.175 11.75C21.175 12.6333 21.0543 13.4833 20.813 14.3C20.571 15.1167 20.225 15.875 19.775 16.575L18.325 15.125C18.6083 14.6083 18.821 14.0667 18.963 13.5C19.1043 12.9333 19.175 12.35 19.175 11.75C19.175 10.2833 18.771 8.96667 17.963 7.8C17.1543 6.63333 16.0833 5.78333 14.75 5.25C14.5667 5.18333 14.425 5.075 14.325 4.925C14.225 4.775 14.175 4.60833 14.175 4.425C14.175 4.05833 14.3167 3.76667 14.6 3.55C14.8833 3.33333 15.1917 3.29167 15.525 3.425ZM16.425 13.225L14.175 10.975V7.725C14.9583 8.09167 15.571 8.64167 16.013 9.375C16.4543 10.1083 16.675 10.9083 16.675 11.775C16.675 12.025 16.6543 12.271 16.613 12.513C16.571 12.7543 16.5083 12.9917 16.425 13.225ZM12.175 8.975L9.575 6.375L10.475 5.475C10.7917 5.15833 11.154 5.08733 11.562 5.262C11.9707 5.43733 12.175 5.75 12.175 6.2V8.975ZM10.175 14.925V12.575L8.375 10.775H5.175V12.775H8.025L10.175 14.925Z'
+        },
+        visibility: {
+            width: 24,
+            height: 24,
+            path: 'M11.9998 17C13.2498 17 14.3125 16.5627 15.1878 15.688C16.0625 14.8127 16.4998 13.75 16.4998 12.5C16.4998 11.25 16.0625 10.1873 15.1878 9.312C14.3125 8.43733 13.2498 8 11.9998 8C10.7498 8 9.68714 8.43733 8.8118 9.312C7.93714 10.1873 7.4998 11.25 7.4998 12.5C7.4998 13.75 7.93714 14.8127 8.8118 15.688C9.68714 16.5627 10.7498 17 11.9998 17ZM11.9998 15.2C11.2498 15.2 10.6125 14.9373 10.0878 14.412C9.56247 13.8873 9.2998 13.25 9.2998 12.5C9.2998 11.75 9.56247 11.1123 10.0878 10.587C10.6125 10.0623 11.2498 9.8 11.9998 9.8C12.7498 9.8 13.3875 10.0623 13.9128 10.587C14.4375 11.1123 14.6998 11.75 14.6998 12.5C14.6998 13.25 14.4375 13.8873 13.9128 14.412C13.3875 14.9373 12.7498 15.2 11.9998 15.2ZM11.9998 20C9.68314 20 7.56647 19.3877 5.64981 18.163C3.73314 16.9377 2.28314 15.2833 1.2998 13.2C1.2498 13.1167 1.21647 13.0123 1.1998 12.887C1.18314 12.7623 1.1748 12.6333 1.1748 12.5C1.1748 12.3667 1.18314 12.2373 1.1998 12.112C1.21647 11.9873 1.2498 11.8833 1.2998 11.8C2.28314 9.71667 3.73314 8.06267 5.64981 6.838C7.56647 5.61267 9.68314 5 11.9998 5C14.3165 5 16.4331 5.61267 18.3498 6.838C20.2665 8.06267 21.7165 9.71667 22.6998 11.8C22.7498 11.8833 22.7831 11.9873 22.7998 12.112C22.8165 12.2373 22.8248 12.3667 22.8248 12.5C22.8248 12.6333 22.8165 12.7623 22.7998 12.887C22.7831 13.0123 22.7498 13.1167 22.6998 13.2C21.7165 15.2833 20.2665 16.9377 18.3498 18.163C16.4331 19.3877 14.3165 20 11.9998 20ZM11.9998 18C13.8831 18 15.6125 17.504 17.1878 16.512C18.7625 15.5207 19.9665 14.1833 20.7998 12.5C19.9665 10.8167 18.7625 9.479 17.1878 8.487C15.6125 7.49567 13.8831 7 11.9998 7C10.1165 7 8.38714 7.49567 6.8118 8.487C5.23714 9.479 4.03314 10.8167 3.1998 12.5C4.03314 14.1833 5.23714 15.5207 6.8118 16.512C8.38714 17.504 10.1165 18 11.9998 18Z'
+        },
+        noVisibility: {
+            width: 24,
+            height: 24,
+            path: 'M16.0998 13.3L14.6498 11.85C14.7998 11.0666 14.5748 10.3333 13.9748 9.64998C13.3748 8.96664 12.5998 8.69998 11.6498 8.84998L10.1998 7.39998C10.4831 7.26664 10.7705 7.16664 11.0618 7.09998C11.3538 7.03331 11.6665 6.99998 11.9998 6.99998C13.2498 6.99998 14.3125 7.43731 15.1878 8.31198C16.0625 9.18731 16.4998 10.25 16.4998 11.5C16.4998 11.8333 16.4665 12.146 16.3998 12.438C16.3331 12.7293 16.2331 13.0166 16.0998 13.3ZM19.2998 16.45L17.8498 15.05C18.4831 14.5666 19.0458 14.0373 19.5378 13.462C20.0291 12.8873 20.4498 12.2333 20.7998 11.5C19.9665 9.81664 18.7705 8.47898 17.2118 7.48698C15.6538 6.49564 13.9165 5.99998 11.9998 5.99998C11.5165 5.99998 11.0415 6.03331 10.5748 6.09998C10.1081 6.16664 9.6498 6.26664 9.1998 6.39998L7.64981 4.84998C8.33314 4.56664 9.03314 4.35398 9.7498 4.21198C10.4665 4.07064 11.2165 3.99998 11.9998 3.99998C14.3831 3.99998 16.5248 4.62898 18.4248 5.88698C20.3248 7.14564 21.7498 8.78331 22.6998 10.8C22.7498 10.8833 22.7831 10.9873 22.7998 11.112C22.8165 11.2373 22.8248 11.3666 22.8248 11.5C22.8248 11.6333 22.8125 11.7623 22.7878 11.887C22.7625 12.0123 22.7331 12.1166 22.6998 12.2C22.3165 13.05 21.8375 13.8333 21.2628 14.55C20.6875 15.2666 20.0331 15.9 19.2998 16.45ZM19.0998 21.9L15.5998 18.45C15.0165 18.6333 14.4291 18.771 13.8378 18.863C13.2458 18.9543 12.6331 19 11.9998 19C9.61647 19 7.4748 18.371 5.5748 17.113C3.6748 15.8543 2.2498 14.2166 1.2998 12.2C1.2498 12.1166 1.21647 12.0123 1.1998 11.887C1.18314 11.7623 1.1748 11.6333 1.1748 11.5C1.1748 11.3666 1.18314 11.2416 1.1998 11.125C1.21647 11.0083 1.2498 10.9083 1.2998 10.825C1.6498 10.075 2.06647 9.38331 2.5498 8.74998C3.03314 8.11664 3.56647 7.53331 4.1498 6.99998L2.0748 4.89998C1.89147 4.71664 1.7998 4.48731 1.7998 4.21198C1.7998 3.93731 1.8998 3.69998 2.0998 3.49998C2.28314 3.31664 2.51647 3.22498 2.7998 3.22498C3.08314 3.22498 3.31647 3.31664 3.4998 3.49998L20.4998 20.5C20.6831 20.6833 20.7791 20.9126 20.7878 21.188C20.7958 21.4626 20.6998 21.7 20.4998 21.9C20.3165 22.0833 20.0831 22.175 19.7998 22.175C19.5165 22.175 19.2831 22.0833 19.0998 21.9ZM5.5498 8.39998C5.06647 8.83331 4.6248 9.30831 4.2248 9.82498C3.8248 10.3416 3.48314 10.9 3.1998 11.5C4.03314 13.1833 5.22881 14.5206 6.78681 15.512C8.34547 16.504 10.0831 17 11.9998 17C12.3331 17 12.6581 16.9793 12.9748 16.938C13.2915 16.896 13.6165 16.85 13.9498 16.8L13.0498 15.85C12.8665 15.9 12.6915 15.9373 12.5248 15.962C12.3581 15.9873 12.1831 16 11.9998 16C10.7498 16 9.68714 15.5626 8.8118 14.688C7.93714 13.8126 7.4998 12.75 7.4998 11.5C7.4998 11.3166 7.51214 11.1416 7.53681 10.975C7.56214 10.8083 7.5998 10.6333 7.64981 10.45L5.5498 8.39998Z'
+        }
+    };
+    return SVGs;
+}();
+},{}],108:[function(_dereq_,module,exports){
 module.exports = function (Utils, Konva) {
     'use strict';
     var LEFT_PADDING = 4;
@@ -19234,7 +19307,7 @@ module.exports = function (Utils, Konva) {
     };
     return TimelineAxis;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":111,"konva":43}],108:[function(_dereq_,module,exports){
+},{"./utils":112,"konva":43}],109:[function(_dereq_,module,exports){
 module.exports = function (Colors, Segment, Utils) {
     'use strict';
     function TimelineSegments(peaks) {
@@ -19277,7 +19350,7 @@ module.exports = function (Colors, Segment, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
         }
-        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.duration, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.hoverColor, options.warningColor, options.opacity || 1, options.editable, options.allowDeletion || false, options.line, options.indicators);
+        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.duration, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.hoverColor, options.warningColor, options.opacity || 1, options.borderColor, options.borderWidth, options.borderRadius, options.editable, options.allowDeletion || false, options.line, options.indicators);
         return segment;
     };
     TimelineSegments.prototype.getSegments = function () {
@@ -19396,7 +19469,7 @@ module.exports = function (Colors, Segment, Utils) {
     };
     return TimelineSegments;
 }(_dereq_('colors.css'), _dereq_('./segment'), _dereq_('./utils'));
-},{"./segment":102,"./utils":111,"colors.css":1}],109:[function(_dereq_,module,exports){
+},{"./segment":102,"./utils":112,"colors.css":1}],110:[function(_dereq_,module,exports){
 module.exports = function (Source, Utils) {
     'use strict';
     function TimelineSources(peaks) {
@@ -19567,7 +19640,7 @@ module.exports = function (Source, Utils) {
     };
     return TimelineSources;
 }(_dereq_('./source'), _dereq_('./utils'));
-},{"./source":105,"./utils":111}],110:[function(_dereq_,module,exports){
+},{"./source":105,"./utils":112}],111:[function(_dereq_,module,exports){
 module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLayer, TimelineAxis, Utils, Konva) {
     'use strict';
     function TimelineZoomView(container, peaks) {
@@ -20127,7 +20200,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     };
     return TimelineZoomView;
 }(_dereq_('./mouse-drag-handler'), _dereq_('./playhead-layer'), _dereq_('./sources-layer'), _dereq_('./mode-layer'), _dereq_('./timeline-axis'), _dereq_('./utils'), _dereq_('konva'));
-},{"./mode-layer":96,"./mouse-drag-handler":97,"./playhead-layer":99,"./sources-layer":106,"./timeline-axis":107,"./utils":111,"konva":43}],111:[function(_dereq_,module,exports){
+},{"./mode-layer":96,"./mouse-drag-handler":97,"./playhead-layer":99,"./sources-layer":106,"./timeline-axis":108,"./utils":112,"konva":43}],112:[function(_dereq_,module,exports){
 module.exports = function (UUID) {
     'use strict';
     if (typeof Number.isFinite !== 'function') {
@@ -20291,7 +20364,7 @@ module.exports = function (UUID) {
         }
     };
 }(_dereq_('uuid'));
-},{"uuid":62}],112:[function(_dereq_,module,exports){
+},{"uuid":62}],113:[function(_dereq_,module,exports){
 module.exports = function (WaveformData, Utils) {
     'use strict';
     var isXhr2 = 'withCredentials' in new XMLHttpRequest();
@@ -20483,7 +20556,7 @@ module.exports = function (WaveformData, Utils) {
     };
     return WaveformBuilder;
 }(_dereq_('waveform-data'), _dereq_('./utils'));
-},{"./utils":111,"waveform-data":85}],113:[function(_dereq_,module,exports){
+},{"./utils":112,"waveform-data":85}],114:[function(_dereq_,module,exports){
 module.exports = function (Utils, Konva) {
     'use strict';
     function scaleY(amplitude, height, scale) {
@@ -20573,6 +20646,6 @@ module.exports = function (Utils, Konva) {
     };
     return WaveformShape;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":111,"konva":43}]},{},[94])(94)
+},{"./utils":112,"konva":43}]},{},[94])(94)
 });
 //# sourceMappingURL=peaks.js.map

package/src/line-indicator.js

@@ -8,10 +8,12 @@
 
 define([
   'konva',
-  './utils'
+  './utils',
+  './svgs'
 ], function(
   Konva,
-  Utils) {
+  Utils,
+  SVGs) {
   'use strict';
 
   /**
@@ -32,7 +34,11 @@ define([
     this._width = this._peaks.options.lineIndicatorWidth;
     this._height = this._view.getHeight();
 
-    this._indicatorRadius = this._width / 4;
+    this._iconSize = this._peaks.options.lineIndicatorIconSize;
+    this._fontSize = this._peaks.options.lineIndicatorFontSize;
+
+    this._defaultPadding = 5;
+    this._types = ['default'].concat(Object.keys(SVGs));
 
     this._stage = new Konva.Stage({
       container: container,
@@ -59,15 +65,7 @@ define([
       this._createContextMenu();
     }
 
-    /* eslint-disable max-len */
-    this.ICON_SIZE = 18;
-    this._volumeSVGPath = 'M0 6.00001V12H4L9 17V1.00001L4 6.00001H0ZM13.5 9.00001C13.5 7.23001 12.48 5.71001 11 4.97001V13.02C12.48 12.29 13.5 10.77 13.5 9.00001ZM11 0.230011V2.29001C13.89 3.15001 16 5.83001 16 9.00001C16 12.17 13.89 14.85 11 15.71V17.77C15.01 16.86 18 13.28 18 9.00001C18 4.72001 15.01 1.14001 11 0.230011Z';
-    this._noVolumeSVGPath = 'M13.5 9C13.5 7.23 12.48 5.71 11 4.97V7.18L13.45 9.63C13.48 9.43 13.5 9.22 13.5 9ZM16 9C16 9.94 15.8 10.82 15.46 11.64L16.97 13.15C17.63 11.91 18 10.5 18 9C18 4.72 15.01 1.14 11 0.23V2.29C13.89 3.15 16 5.83 16 9ZM1.27 0L0 1.27L4.73 6H0V12H4L9 17V10.27L13.25 14.52C12.58 15.04 11.83 15.45 11 15.7V17.76C12.38 17.45 13.63 16.81 14.69 15.95L16.73 18L18 16.73L9 7.73L1.27 0ZM9 1L6.91 3.09L9 5.18V1Z';
-    /* eslint-enable max-len */
-
     this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
-
-    this._types = ['default', 'volume', 'noVolume'];
   }
 
   LineIndicator.prototype.fitToView = function() {
@@ -107,47 +105,63 @@ define([
   };
 
   LineIndicator.prototype._createIndicator = function(line, type) {
-    var indicator;
+    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
+    });
 
-    type = typeof type !== 'undefined' ? type : 'default';
+    type = this._types.includes(type) ? type : 'default';
+
+    var icon;
 
     if (type === 'default') {
-      indicator = new Konva.Circle({
+      icon = new Konva.Circle({
         x: this._width / 2,
-        y: line.getY() + (line.lineHeight() / 2),
-        radius: this._indicatorRadius,
+        y: this._fontSize + this._iconSize / 2 + this._defaultPadding,
+        radius: this._iconSize / 2,
         fill: this._peaks.options.lineIndicatorColor,
         strokeWidth: 0,
         lineId: line.getId()
       });
     }
     else {
-      var scaleFactor = (this._width / 2) / this.ICON_SIZE;
-
-      indicator = new Konva.Path({
-        x: this._width / 4,
-        y: line.getY() + (line.lineHeight() / 2) - (this._width / 4),
-        data: type === 'volume' ?
-          this._volumeSVGPath :
-          this._noVolumeSVGPath,
+      icon = new Konva.Path({
+        x: (this._width - this._iconSize) / 2,
+        y: this._fontSize,
+        data: SVGs[type].path,
         fill: this._peaks.options.lineIndicatorColor,
         scale: {
-          x: scaleFactor,
-          y: scaleFactor
+          x: (this._iconSize) / SVGs[type].width,
+          y: (this._iconSize) / SVGs[type].height
         },
         lineId: line.getId()
       });
     }
 
+    indicator.add(text);
+    indicator.add(icon);
+
+    indicator.y(line.getY() + (line.lineHeight() - this._getIndicatorHeight(type)) / 2);
+
     var self = this;
 
     indicator.on('mouseover', function() {
-      indicator.fill(self._peaks.options.lineIndicatorSelected);
+      indicator.getChildren().forEach(function(child) {
+        child.fill(self._peaks.options.lineIndicatorSelected);
+      });
       self.draw();
     });
 
     indicator.on('mouseout', function() {
-      indicator.fill(self._peaks.options.lineIndicatorColor);
+      indicator.getChildren().forEach(function(child) {
+        child.fill(self._peaks.options.lineIndicatorColor);
+      });
       self.draw();
     });
 
@@ -186,18 +200,12 @@ define([
     }
   };
 
-  LineIndicator.prototype.getPixelsFromCenter = function(lineId) {
-    return this._indicators[lineId].type === 'default' ?
-      0 :
-      this._width / 4;
-  };
-
   LineIndicator.prototype.updateIndicator = function(lineId) {
     if (this._indicators[lineId]) {
       var y = this._indicators[lineId].line.getY()
-              + (this._indicators[lineId].line.lineHeight() / 2);
+        + (this._indicators[lineId].line.lineHeight() / 2);
 
-      if (y + this._indicatorRadius > 0 && y - this._indicatorRadius < this._height) {
+      if (y + this._indicators[lineId].line.lineHeight() > 0 && y < this._height) {
         // The indicator is visible
         if (!this._indicators[lineId].indicator) {
           this._indicators[lineId].indicator = this._createIndicator(
@@ -207,7 +215,9 @@ define([
           this._layer.add(this._indicators[lineId].indicator);
         }
         else {
-          this._indicators[lineId].indicator.y(y - this.getPixelsFromCenter(lineId));
+          this._indicators[lineId].indicator.y(
+            y - this._getIndicatorHeight(this._indicators[lineId].type) / 2
+          );
         }
       }
       else {
@@ -229,6 +239,12 @@ 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

@@ -280,6 +280,16 @@ define([
        */
       lineIndicatorWidth:       20,
 
+      /**
+       * Size of the line indicators' icon, in pixels
+       */
+      lineIndicatorIconSize:    10,
+
+      /**
+       * Font size of the line indicators' text, in pixels
+       */
+      lineIndicatorFontSize:    12,
+
       /**
        * Color of the line indicators
        */

package/src/segment-shape.js

@@ -71,9 +71,11 @@ define([
     this._rectangle = new Konva.Rect({
       width: width,
       height: this._segmentHeight,
-      cornerRadius: SEGMENT_CORNER_RADIUS,
-      stroke: segment.textColor + 'FF',
-      strokeWidth: 2,
+      cornerRadius: this._cornerRadius(),
+      stroke: segment.borderColor || segment.textColor + 'FF',
+      strokeWidth: segment.borderWidth !== undefined && segment.borderWidth !== null ?
+        segment.borderWidth :
+        2,
       fillPriority: segment.shouldShowWarning() ? 'linear-gradient' : 'color',
       fill: fillColor,
       fillLinearGradientColorStops: [
@@ -136,6 +138,12 @@ define([
     this.createIndicators();
   }
 
+  SegmentShape.prototype._cornerRadius = function() {
+    return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ?
+      this._segment.borderRadius :
+      SEGMENT_CORNER_RADIUS;
+  };
+
   SegmentShape.prototype.update = function() {
     var startPixel  = this._view.timeToPixels(this._segment.startTime);
     var endPixel    = this._view.timeToPixels(this._segment.endTime);
@@ -475,23 +483,25 @@ define([
   };
 
   SegmentShape.prototype._drawRect = function(ctx) {
+    var cornerRadius = this._cornerRadius();
+
     ctx.beginPath();
-    ctx.moveTo(SEGMENT_CORNER_RADIUS + 1.5, 0);
-    ctx.lineTo(this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5, 0);
-    ctx.quadraticCurveTo(this._segmentWidth, 0, this._segmentWidth, SEGMENT_CORNER_RADIUS + 1.5);
-    ctx.lineTo(this._segmentWidth, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5);
+    ctx.moveTo(cornerRadius + 1.5, 0);
+    ctx.lineTo(this._segmentWidth - cornerRadius - 1.5, 0);
+    ctx.quadraticCurveTo(this._segmentWidth, 0, this._segmentWidth, cornerRadius + 1.5);
+    ctx.lineTo(this._segmentWidth, this._segmentHeight - cornerRadius - 1.5);
     ctx.quadraticCurveTo(
       this._segmentWidth,
       this._segmentHeight,
-      this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5,
+      this._segmentWidth - cornerRadius - 1.5,
       this._segmentHeight
     );
-    ctx.lineTo(SEGMENT_CORNER_RADIUS + 1.5, this._segmentHeight);
+    ctx.lineTo(cornerRadius + 1.5, this._segmentHeight);
     ctx.quadraticCurveTo(
-      0, this._segmentHeight, 0, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5
+      0, this._segmentHeight, 0, this._segmentHeight - cornerRadius - 1.5
     );
-    ctx.lineTo(0, SEGMENT_CORNER_RADIUS + 1.5);
-    ctx.quadraticCurveTo(0, 0, SEGMENT_CORNER_RADIUS + 1.5, 0);
+    ctx.lineTo(0, cornerRadius + 1.5);
+    ctx.quadraticCurveTo(0, 0, cornerRadius + 1.5, 0);
     ctx.closePath();
   };
 

package/src/segment.js

@@ -105,7 +105,8 @@ define([
 
   function Segment(peaks, id, startTime, endTime, duration, labelText,
     color, textColor, handleTextColor, hoverColor, warningColor, opacity,
-    editable, allowDeletion, line, indicators) {
+    borderColor, borderWidth, borderRadius, editable, allowDeletion, line,
+    indicators) {
     var opts = {
       startTime:       startTime,
       endTime:         endTime,
@@ -117,6 +118,9 @@ define([
       hoverColor:      hoverColor,
       warningColor:    warningColor,
       opacity:         opacity,
+      borderColor:     borderColor,
+      borderWidth:     borderWidth,
+      borderRadius:    borderRadius,
       editable:        editable,
       allowDeletion:   allowDeletion,
       line:            line,
@@ -137,6 +141,9 @@ define([
     this._handleTextColor = opts.handleTextColor;
     this._warningColor    = opts.warningColor;
     this._opacity         = opts.opacity;
+    this._borderColor     = opts.borderColor;
+    this._borderWidth     = opts.borderWidth;
+    this._borderRadius    = opts.borderRadius;
     this._editable        = opts.editable;
     this._allowDeletion   = opts.allowDeletion;
     this._line            = opts.line;
@@ -228,6 +235,24 @@ define([
         return this._opacity;
       }
     },
+    borderColor: {
+      enumerable: true,
+      get: function() {
+        return this._borderColor;
+      }
+    },
+    borderWidth: {
+      enumerable: true,
+      get: function() {
+        return this._borderWidth;
+      }
+    },
+    borderRadius: {
+      enumerable: true,
+      get: function() {
+        return this._borderRadius;
+      }
+    },
     editable: {
       enumerable: true,
       get: function() {
@@ -281,6 +306,9 @@ define([
       hoverColor:      this.hoverColor,
       warningColor:    this.warningColor,
       opacity:         this.opacity,
+      borderColor:     this.borderColor,
+      borderWidth:     this.borderWidth,
+      borderRadius:    this.borderRadius,
       editable:        this.editable,
       allowDeletion:   this.allowDeletion,
       line:            this.line,
@@ -301,6 +329,9 @@ define([
     this._hoverColor      = opts.hoverColor;
     this._warningColor    = opts.warningColor;
     this._opacity         = opts.opacity;
+    this._borderColor     = opts.borderColor;
+    this._borderWidth     = opts.borderWidth;
+    this._borderRadius    = opts.borderRadius;
     this._editable        = opts.editable;
     this._allowDeletion   = opts.allowDeletion;
     this._line            = opts.line;

package/src/svgs.js

@@ -0,0 +1,49 @@
+/**
+ * @file
+ *
+ * Defines the {@link data} class.
+ *
+ * @module data
+ */
+
+define([
+], function() {
+  'use strict';
+
+  /**
+   * A data object associated with a source.
+   *
+   * @class
+   * @alias Data
+   *
+   * @param {String} type The MIME type (image, video, audio...)
+   * @param {Object} content Content of the data retrieved.
+  */
+
+ /* eslint-disable max-len */
+  var SVGs = {
+    volume: {
+      width: 24,
+      height: 24,
+      path: 'M15.35 20.7262C15.0167 20.8595 14.7083 20.8179 14.425 20.6012C14.1417 20.3845 14 20.0845 14 19.7012C14 19.5179 14.0543 19.3555 14.163 19.2142C14.271 19.0722 14.4083 18.9679 14.575 18.9012C15.9083 18.3679 16.9793 17.5179 17.788 16.3512C18.596 15.1845 19 13.8679 19 12.4012C19 10.9345 18.596 9.61786 17.788 8.45119C16.9793 7.28452 15.9083 6.43452 14.575 5.90119C14.3917 5.83452 14.25 5.72619 14.15 5.57619C14.05 5.42619 14 5.25952 14 5.07619C14 4.70952 14.1417 4.41786 14.425 4.20119C14.7083 3.98452 15.0167 3.94286 15.35 4.07619C17.05 4.75952 18.4167 5.85119 19.45 7.35119C20.4833 8.85119 21 10.5345 21 12.4012C21 14.2679 20.4833 15.9512 19.45 17.4512C18.4167 18.9512 17.05 20.0429 15.35 20.7262ZM4 15.4262C3.71667 15.4262 3.47933 15.3302 3.288 15.1382C3.096 14.9469 3 14.7095 3 14.4262V10.4262C3 10.1429 3.096 9.90519 3.288 9.71319C3.47933 9.52186 3.71667 9.42619 4 9.42619H7L10.3 6.12619C10.6167 5.80952 10.979 5.73852 11.387 5.91319C11.7957 6.08852 12 6.40119 12 6.85119V18.0012C12 18.4512 11.7957 18.7635 11.387 18.9382C10.979 19.1135 10.6167 19.0429 10.3 18.7262L7 15.4262H4ZM14 16.4262V8.37619C14.75 8.72619 15.354 9.26786 15.812 10.0012C16.2707 10.7345 16.5 11.5429 16.5 12.4262C16.5 13.3095 16.2707 14.1095 15.812 14.8262C15.354 15.5429 14.75 16.0762 14 16.4262ZM10 9.27619L7.85 11.4262H5V13.4262H7.85L10 15.5762V9.27619Z'
+    },
+    noVolume: {
+      width: 24,
+      height: 24,
+      path: 'M19.275 21.675L16.95 19.35C16.7167 19.4833 16.4833 19.6123 16.25 19.737C16.0167 19.8623 15.775 19.975 15.525 20.075C15.1917 20.2083 14.8833 20.1667 14.6 19.95C14.3167 19.7333 14.175 19.4333 14.175 19.05C14.175 18.8667 14.2293 18.7043 14.338 18.563C14.446 18.421 14.5833 18.3167 14.75 18.25C14.8833 18.2 15.0127 18.1457 15.138 18.087C15.2627 18.029 15.3833 17.9667 15.5 17.9L12.175 14.575V17.35C12.175 17.8 11.9707 18.1123 11.562 18.287C11.154 18.4623 10.7917 18.3917 10.475 18.075L7.175 14.775H4.175C3.89167 14.775 3.65433 14.679 3.463 14.487C3.271 14.2957 3.175 14.0583 3.175 13.775V9.775C3.175 9.49167 3.271 9.254 3.463 9.062C3.65433 8.87067 3.89167 8.775 4.175 8.775H6.375L2.275 4.675C2.09167 4.49167 2 4.25833 2 3.975C2 3.69167 2.09167 3.45833 2.275 3.275C2.45833 3.09167 2.69167 3 2.975 3C3.25833 3 3.49167 3.09167 3.675 3.275L20.675 20.275C20.8583 20.4583 20.95 20.6917 20.95 20.975C20.95 21.2583 20.8583 21.4917 20.675 21.675C20.4917 21.8583 20.2583 21.95 19.975 21.95C19.6917 21.95 19.4583 21.8583 19.275 21.675ZM15.525 3.425C17.225 4.10833 18.5917 5.2 19.625 6.7C20.6583 8.2 21.175 9.88333 21.175 11.75C21.175 12.6333 21.0543 13.4833 20.813 14.3C20.571 15.1167 20.225 15.875 19.775 16.575L18.325 15.125C18.6083 14.6083 18.821 14.0667 18.963 13.5C19.1043 12.9333 19.175 12.35 19.175 11.75C19.175 10.2833 18.771 8.96667 17.963 7.8C17.1543 6.63333 16.0833 5.78333 14.75 5.25C14.5667 5.18333 14.425 5.075 14.325 4.925C14.225 4.775 14.175 4.60833 14.175 4.425C14.175 4.05833 14.3167 3.76667 14.6 3.55C14.8833 3.33333 15.1917 3.29167 15.525 3.425ZM16.425 13.225L14.175 10.975V7.725C14.9583 8.09167 15.571 8.64167 16.013 9.375C16.4543 10.1083 16.675 10.9083 16.675 11.775C16.675 12.025 16.6543 12.271 16.613 12.513C16.571 12.7543 16.5083 12.9917 16.425 13.225ZM12.175 8.975L9.575 6.375L10.475 5.475C10.7917 5.15833 11.154 5.08733 11.562 5.262C11.9707 5.43733 12.175 5.75 12.175 6.2V8.975ZM10.175 14.925V12.575L8.375 10.775H5.175V12.775H8.025L10.175 14.925Z'
+    },
+    visibility: {
+      width: 24,
+      height: 24,
+      path: 'M11.9998 17C13.2498 17 14.3125 16.5627 15.1878 15.688C16.0625 14.8127 16.4998 13.75 16.4998 12.5C16.4998 11.25 16.0625 10.1873 15.1878 9.312C14.3125 8.43733 13.2498 8 11.9998 8C10.7498 8 9.68714 8.43733 8.8118 9.312C7.93714 10.1873 7.4998 11.25 7.4998 12.5C7.4998 13.75 7.93714 14.8127 8.8118 15.688C9.68714 16.5627 10.7498 17 11.9998 17ZM11.9998 15.2C11.2498 15.2 10.6125 14.9373 10.0878 14.412C9.56247 13.8873 9.2998 13.25 9.2998 12.5C9.2998 11.75 9.56247 11.1123 10.0878 10.587C10.6125 10.0623 11.2498 9.8 11.9998 9.8C12.7498 9.8 13.3875 10.0623 13.9128 10.587C14.4375 11.1123 14.6998 11.75 14.6998 12.5C14.6998 13.25 14.4375 13.8873 13.9128 14.412C13.3875 14.9373 12.7498 15.2 11.9998 15.2ZM11.9998 20C9.68314 20 7.56647 19.3877 5.64981 18.163C3.73314 16.9377 2.28314 15.2833 1.2998 13.2C1.2498 13.1167 1.21647 13.0123 1.1998 12.887C1.18314 12.7623 1.1748 12.6333 1.1748 12.5C1.1748 12.3667 1.18314 12.2373 1.1998 12.112C1.21647 11.9873 1.2498 11.8833 1.2998 11.8C2.28314 9.71667 3.73314 8.06267 5.64981 6.838C7.56647 5.61267 9.68314 5 11.9998 5C14.3165 5 16.4331 5.61267 18.3498 6.838C20.2665 8.06267 21.7165 9.71667 22.6998 11.8C22.7498 11.8833 22.7831 11.9873 22.7998 12.112C22.8165 12.2373 22.8248 12.3667 22.8248 12.5C22.8248 12.6333 22.8165 12.7623 22.7998 12.887C22.7831 13.0123 22.7498 13.1167 22.6998 13.2C21.7165 15.2833 20.2665 16.9377 18.3498 18.163C16.4331 19.3877 14.3165 20 11.9998 20ZM11.9998 18C13.8831 18 15.6125 17.504 17.1878 16.512C18.7625 15.5207 19.9665 14.1833 20.7998 12.5C19.9665 10.8167 18.7625 9.479 17.1878 8.487C15.6125 7.49567 13.8831 7 11.9998 7C10.1165 7 8.38714 7.49567 6.8118 8.487C5.23714 9.479 4.03314 10.8167 3.1998 12.5C4.03314 14.1833 5.23714 15.5207 6.8118 16.512C8.38714 17.504 10.1165 18 11.9998 18Z'
+    },
+    noVisibility: {
+      width: 24,
+      height: 24,
+      path: 'M16.0998 13.3L14.6498 11.85C14.7998 11.0666 14.5748 10.3333 13.9748 9.64998C13.3748 8.96664 12.5998 8.69998 11.6498 8.84998L10.1998 7.39998C10.4831 7.26664 10.7705 7.16664 11.0618 7.09998C11.3538 7.03331 11.6665 6.99998 11.9998 6.99998C13.2498 6.99998 14.3125 7.43731 15.1878 8.31198C16.0625 9.18731 16.4998 10.25 16.4998 11.5C16.4998 11.8333 16.4665 12.146 16.3998 12.438C16.3331 12.7293 16.2331 13.0166 16.0998 13.3ZM19.2998 16.45L17.8498 15.05C18.4831 14.5666 19.0458 14.0373 19.5378 13.462C20.0291 12.8873 20.4498 12.2333 20.7998 11.5C19.9665 9.81664 18.7705 8.47898 17.2118 7.48698C15.6538 6.49564 13.9165 5.99998 11.9998 5.99998C11.5165 5.99998 11.0415 6.03331 10.5748 6.09998C10.1081 6.16664 9.6498 6.26664 9.1998 6.39998L7.64981 4.84998C8.33314 4.56664 9.03314 4.35398 9.7498 4.21198C10.4665 4.07064 11.2165 3.99998 11.9998 3.99998C14.3831 3.99998 16.5248 4.62898 18.4248 5.88698C20.3248 7.14564 21.7498 8.78331 22.6998 10.8C22.7498 10.8833 22.7831 10.9873 22.7998 11.112C22.8165 11.2373 22.8248 11.3666 22.8248 11.5C22.8248 11.6333 22.8125 11.7623 22.7878 11.887C22.7625 12.0123 22.7331 12.1166 22.6998 12.2C22.3165 13.05 21.8375 13.8333 21.2628 14.55C20.6875 15.2666 20.0331 15.9 19.2998 16.45ZM19.0998 21.9L15.5998 18.45C15.0165 18.6333 14.4291 18.771 13.8378 18.863C13.2458 18.9543 12.6331 19 11.9998 19C9.61647 19 7.4748 18.371 5.5748 17.113C3.6748 15.8543 2.2498 14.2166 1.2998 12.2C1.2498 12.1166 1.21647 12.0123 1.1998 11.887C1.18314 11.7623 1.1748 11.6333 1.1748 11.5C1.1748 11.3666 1.18314 11.2416 1.1998 11.125C1.21647 11.0083 1.2498 10.9083 1.2998 10.825C1.6498 10.075 2.06647 9.38331 2.5498 8.74998C3.03314 8.11664 3.56647 7.53331 4.1498 6.99998L2.0748 4.89998C1.89147 4.71664 1.7998 4.48731 1.7998 4.21198C1.7998 3.93731 1.8998 3.69998 2.0998 3.49998C2.28314 3.31664 2.51647 3.22498 2.7998 3.22498C3.08314 3.22498 3.31647 3.31664 3.4998 3.49998L20.4998 20.5C20.6831 20.6833 20.7791 20.9126 20.7878 21.188C20.7958 21.4626 20.6998 21.7 20.4998 21.9C20.3165 22.0833 20.0831 22.175 19.7998 22.175C19.5165 22.175 19.2831 22.0833 19.0998 21.9ZM5.5498 8.39998C5.06647 8.83331 4.6248 9.30831 4.2248 9.82498C3.8248 10.3416 3.48314 10.9 3.1998 11.5C4.03314 13.1833 5.22881 14.5206 6.78681 15.512C8.34547 16.504 10.0831 17 11.9998 17C12.3331 17 12.6581 16.9793 12.9748 16.938C13.2915 16.896 13.6165 16.85 13.9498 16.8L13.0498 15.85C12.8665 15.9 12.6915 15.9373 12.5248 15.962C12.3581 15.9873 12.1831 16 11.9998 16C10.7498 16 9.68714 15.5626 8.8118 14.688C7.93714 13.8126 7.4998 12.75 7.4998 11.5C7.4998 11.3166 7.51214 11.1416 7.53681 10.975C7.56214 10.8083 7.5998 10.6333 7.64981 10.45L5.5498 8.39998Z'
+    }
+  };
+  /* eslint-enable max-len */
+
+  return SVGs;
+});

package/src/timeline-segments.js

@@ -139,6 +139,9 @@ define([
       options.hoverColor,
       options.warningColor,
       options.opacity || 1,
+      options.borderColor,
+      options.borderWidth,
+      options.borderRadius,
       options.editable,
       options.allowDeletion || false,
       options.line,