@checksub_team/peaks_timeline 1.5.5 → 1.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.5.5",
+  "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;
@@ -19277,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 () {

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/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,