@checksub_team/peaks_timeline 1.5.4 → 1.5.6

package/package.json

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

package/peaks.js

@@ -16331,9 +16331,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 +16379,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,16 +16632,17 @@ 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;
@@ -16698,7 +16702,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 +16714,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 +16735,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 +16824,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 +16894,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 +16914,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;
@@ -17535,6 +17569,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             this.unwrap();
             this._height = this._unwrappedHeight;
         }
+        if (this._title) {
+            this._title.y(this._getTitleY());
+        }
         this.setHandlesWrapping(wrap);
     };
     SourceGroup.prototype.setHandlesWrapping = function (wrap) {
@@ -17638,7 +17675,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
     };
     SourceGroup.prototype.drawSourceShape = function (ctx, shape) {
-        var radius = Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
+        var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
         var x = Math.max(0, this._view.getFrameOffset() - this._x - radius);
         var width = Math.min(this._width - x, this._view.getOriginalWidth() + radius - Math.max(0, this._x - this._view.getFrameOffset()));
         var xWidth = x + width;
@@ -17760,6 +17797,16 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
         this._group.add(this._title);
     };
+    SourceGroup.prototype._getTitleY = function () {
+        if (!this._title) {
+            return 0;
+        }
+        if (this._source.textPosition === 'bottom') {
+            return Math.max(this._height - this._title.getClientRect().height - 5, 5);
+        } else {
+            return 5;
+        }
+    };
     SourceGroup.prototype._createTitle = function () {
         var title = new Konva.Text({
             x: 5,
@@ -18217,6 +18264,11 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.textColor)) {
             throw new TypeError('peaks.sources.' + context + ': textColor should be a valid CSS color');
         }
+        if (Utils.isNullOrUndefined(options.textPosition)) {
+            options.textPosition = 'bottom';
+        } else if (!Utils.isString(options.textPosition)) {
+            throw new TypeError('peaks.sources.' + context + ': textPosition must be a string');
+        }
         if (Utils.isNullOrUndefined(options.borderWidth)) {
             options.borderWidth = 0;
         }
@@ -18269,7 +18321,7 @@ module.exports = function (Utils) {
             options.wrapped = false;
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
         var opts = {
             title: title,
             url: url,
@@ -18287,7 +18339,9 @@ module.exports = function (Utils) {
             borderColor: borderColor,
             selectedColor: selectedColor,
             textColor: textColor,
+            textPosition: textPosition,
             borderWidth: borderWidth,
+            borderRadius: borderRadius,
             wrapped: wrapped,
             position: position,
             draggable: draggable,
@@ -18317,7 +18371,9 @@ module.exports = function (Utils) {
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
+        this._textPosition = opts.textPosition;
         this._borderWidth = opts.borderWidth;
+        this._borderRadius = opts.borderRadius;
         this._wrapped = opts.wrapped;
         this._position = opts.position;
         this._draggable = opts.draggable;
@@ -18472,6 +18528,15 @@ module.exports = function (Utils) {
                 this._textColor = textColor;
             }
         },
+        textPosition: {
+            enumerable: true,
+            get: function () {
+                return this._textPosition;
+            },
+            set: function (textPosition) {
+                this._textPosition = textPosition;
+            }
+        },
         borderWidth: {
             enumerable: true,
             get: function () {
@@ -18481,6 +18546,15 @@ module.exports = function (Utils) {
                 this._borderWidth = borderWidth;
             }
         },
+        borderRadius: {
+            enumerable: true,
+            get: function () {
+                return this._borderRadius;
+            },
+            set: function (borderRadius) {
+                this._borderRadius = borderRadius;
+            }
+        },
         wrapped: {
             enumerable: true,
             get: function () {
@@ -18653,7 +18727,9 @@ module.exports = function (Utils) {
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
             textColor: this.textColor,
+            textPosition: this.textPosition,
             borderWidth: this.borderWidth,
+            borderRadius: this.borderRadius,
             wrapped: this.wrapped,
             position: this.position,
             draggable: this.draggable,
@@ -18680,7 +18756,9 @@ module.exports = function (Utils) {
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
+        this._textPosition = opts.textPosition;
         this._borderWidth = opts.borderWidth;
+        this._borderRadius = opts.borderRadius;
         this._wrapped = opts.wrapped;
         this._position = opts.position;
         this._draggable = opts.draggable;
@@ -19233,7 +19311,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 () {
@@ -19390,7 +19468,9 @@ module.exports = function (Source, Utils) {
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
                 textColor: sourceToCut.textColor,
+                textPosition: sourceToCut.textPosition,
                 borderWidth: sourceToCut.borderWidth,
+                borderRadius: sourceToCut.borderRadius,
                 wrapped: sourceToCut.wrapped,
                 position: sourceToCut.position,
                 draggable: sourceToCut.draggable,
@@ -19412,7 +19492,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

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/source-group.js

@@ -220,6 +220,10 @@ define([
       this._height = this._unwrappedHeight;
     }
 
+    if (this._title) {
+      this._title.y(this._getTitleY());
+    }
+
     this.setHandlesWrapping(wrap);
   };
 
@@ -343,16 +347,18 @@ define([
   };
 
   SourceGroup.prototype.drawSourceShape = function(ctx, shape) {
-    var radius = Math.max(
-      1,
-      Math.min(
-        this._width / 2,
+    var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ?
+      this._source.borderRadius :
+      Math.max(
+        1,
         Math.min(
-          CORNER_RADIUS,
-          this._height / 2
+          this._width / 2,
+          Math.min(
+            CORNER_RADIUS,
+            this._height / 2
+          )
         )
-      )
-    );
+      );
     var x = Math.max(
       0,
       this._view.getFrameOffset() - this._x - radius
@@ -506,6 +512,19 @@ define([
     this._group.add(this._title);
   };
 
+  SourceGroup.prototype._getTitleY = function() {
+    if (!this._title) {
+      return 0;
+    }
+
+    if (this._source.textPosition === 'bottom') {
+      return Math.max(this._height - this._title.getClientRect().height - 5, 5);
+    }
+    else {
+      return 5;
+    }
+  };
+
   SourceGroup.prototype._createTitle = function() {
     var title = new Konva.Text({
       x: 5,

package/src/source.js

@@ -134,6 +134,13 @@ define([
       throw new TypeError('peaks.sources.' + context + ': textColor should be a valid CSS color');
     }
 
+    if (Utils.isNullOrUndefined(options.textPosition)) {
+      options.textPosition = 'bottom';
+    }
+    else if (!Utils.isString(options.textPosition)) {
+      throw new TypeError('peaks.sources.' + context + ': textPosition must be a string');
+    }
+
     if (Utils.isNullOrUndefined(options.borderWidth)) {
       options.borderWidth = 0;
     }
@@ -227,8 +234,8 @@ define([
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable,
-    wrapping, previewHeight, binaryHeight) {
+    borderColor, selectedColor, textColor, textPosition, borderWidth, borderRadius, wrapped,
+    position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
     var opts = {
       title: title,
       url: url,
@@ -246,7 +253,9 @@ define([
       borderColor: borderColor,
       selectedColor: selectedColor,
       textColor: textColor,
+      textPosition: textPosition,
       borderWidth: borderWidth,
+      borderRadius: borderRadius,
       wrapped: wrapped,
       position: position,
       draggable: draggable,
@@ -278,7 +287,9 @@ define([
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
+    this._textPosition = opts.textPosition;
     this._borderWidth = opts.borderWidth;
+    this._borderRadius = opts.borderRadius;
     this._wrapped = opts.wrapped;
     this._position = opts.position;
     this._draggable = opts.draggable;
@@ -444,6 +455,16 @@ define([
         this._textColor = textColor;
       }
     },
+    textPosition: {
+      enumerable: true,
+      get: function() {
+        return this._textPosition;
+      },
+
+      set: function(textPosition) {
+        this._textPosition = textPosition;
+      }
+    },
     borderWidth: {
       enumerable: true,
       get: function() {
@@ -454,6 +475,16 @@ define([
         this._borderWidth = borderWidth;
       }
     },
+    borderRadius: {
+      enumerable: true,
+      get: function() {
+        return this._borderRadius;
+      },
+
+      set: function(borderRadius) {
+        this._borderRadius = borderRadius;
+      }
+    },
     wrapped: {
       enumerable: true,
       get: function() {
@@ -663,7 +694,9 @@ define([
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
       textColor: this.textColor,
+      textPosition: this.textPosition,
       borderWidth: this.borderWidth,
+      borderRadius: this.borderRadius,
       wrapped: this.wrapped,
       position: this.position,
       draggable: this.draggable,
@@ -693,7 +726,9 @@ define([
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
+    this._textPosition = opts.textPosition;
     this._borderWidth = opts.borderWidth;
+    this._borderRadius = opts.borderRadius;
     this._wrapped = opts.wrapped;
     this._position = opts.position;
     this._draggable = opts.draggable;

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,

package/src/timeline-sources.js

@@ -82,7 +82,9 @@ define([
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
       textColor: sourceToCut.textColor,
+      textPosition: sourceToCut.textPosition,
       borderWidth: sourceToCut.borderWidth,
+      borderRadius: sourceToCut.borderRadius,
       wrapped: sourceToCut.wrapped,
       position: sourceToCut.position,
       draggable: sourceToCut.draggable,
@@ -156,7 +158,9 @@ define([
       options.borderColor,
       options.selectedColor,
       options.textColor,
+      options.textPosition,
       options.borderWidth,
+      options.borderRadius,
       options.wrapped,
       options.position,
       options.draggable,