@checksub_team/peaks_timeline 2.5.0-alpha.1 → 2.5.0-alpha.3

package/package.json

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

package/peaks.js

@@ -14753,6 +14753,9 @@ module.exports = function (Utils, Konva) {
     DefaultSegmentMarker.prototype.timeUpdated = function (time) {
         this._label.setText(Utils.formatTime(time, false));
     };
+    DefaultSegmentMarker.prototype.setTextColor = function (color) {
+        this._label.fill(color);
+    };
     DefaultSegmentMarker.prototype._batchDraw = function () {
         const group = this._options.group;
         const layer = group && group.getLayer && group.getLayer();
@@ -17227,6 +17230,11 @@ module.exports = function (Konva) {
             this._marker.timeUpdated(time);
         }
     };
+    SegmentMarker.prototype.setTextColor = function (color) {
+        if (this._marker.setTextColor) {
+            this._marker.setTextColor(color);
+        }
+    };
     SegmentMarker.prototype.destroy = function () {
         this._group.destroyChildren();
         this._group.destroy();
@@ -17253,6 +17261,8 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._shapeGroup = null;
         this._rectangle = null;
         this._indicators = {};
+        this._selected = this._segment.selected;
+        this._hovered = false;
         var self = this;
         this._segmentWidth = this._view.timeToPixels(this._segment.endTime - this._segment.startTime);
         this._segmentHeight = this._peaks.options.segmentHeight;
@@ -17302,6 +17312,7 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._indicatorsGroup = new Konva.Group();
         this._shapeGroup.add(this._indicatorsGroup);
         this.createIndicators();
+        this._applyVisualState();
     }
     SegmentShape.prototype._onShapeGroupDrag = function (draggedElement) {
         return this._view._sourcesLayer.onSegmentDrag(draggedElement);
@@ -17321,40 +17332,54 @@ module.exports = function (Konva, SegmentMarker, Utils) {
             fontSize: 12
         });
     };
-    SegmentShape.prototype._rebuildSelectionDependentNodes = function () {
-        var group = this._shapeGroup.getParent();
-        if (this._label) {
-            this._label.destroy();
-            this._label = null;
+    SegmentShape.prototype._getFillColor = function () {
+        var color = this._segment.color;
+        if (this._selected) {
+            color = this._segment.selectedColor;
+        } else if (this._hovered) {
+            color = this._segment.hoverColor;
+        }
+        return color + Math.round(this._segment.opacity * 255).toString(16);
+    };
+    SegmentShape.prototype._getStrokeColor = function () {
+        if (this._selected) {
+            return this._segment.selectedBorderColor;
+        }
+        return this._segment.borderColor || this._segment.textColor + 'FF';
+    };
+    SegmentShape.prototype._getLabelTextColor = function () {
+        return this._selected ? this._segment.selectedTextColor : this._segment.textColor;
+    };
+    SegmentShape.prototype._getHandleTextColor = function () {
+        return this._selected ? this._segment.selectedHandleTextColor : this._segment.handleTextColor;
+    };
+    SegmentShape.prototype._applyVisualState = function () {
+        var fillColor = this._getFillColor();
+        var handleTextColor = this._getHandleTextColor();
+        this._rectangle.fill(fillColor);
+        this._rectangle.stroke(this._getStrokeColor());
+        this._rectangle.fillLinearGradientColorStops([
+            0,
+            fillColor,
+            0.65,
+            this._segment.warningColor
+        ]);
+        if (this._label && this._label.fill) {
+            this._label.fill(this._getLabelTextColor());
         }
         if (this._startMarker) {
-            this._startMarker.destroy();
-            this._startMarker = null;
+            this._startMarker.setTextColor(handleTextColor);
         }
         if (this._endMarker) {
-            this._endMarker.destroy();
-            this._endMarker = null;
-        }
-        this._createLabel();
-        this._createMarkers();
-        if (group) {
-            if (this._label) {
-                this._label.moveTo(group);
-            }
-            if (this._startMarker) {
-                this._startMarker.moveTo(group);
-            }
-            if (this._endMarker) {
-                this._endMarker.moveTo(group);
-            }
+            this._endMarker.setTextColor(handleTextColor);
         }
     };
     SegmentShape.prototype.update = function () {
         this._applyDisplayTimes(this._segment.startTime, this._segment.endTime);
     };
     SegmentShape.prototype.setSelected = function () {
-        this._rebuildSelectionDependentNodes();
-        this.update();
+        this._selected = this._segment.selected;
+        this._applyVisualState();
     };
     SegmentShape.prototype._applyDisplayTimes = function (startTime, endTime) {
         var startPixel = this._view.timeToPixels(startTime);
@@ -17533,28 +17558,16 @@ module.exports = function (Konva, SegmentMarker, Utils) {
     SegmentShape.prototype._onMouseEnter = function () {
         this._view.setCursor('pointer');
         this._view.setHoveredElement(this);
-        var fillColor = this._segment.hoverColor + Math.round(this._segment.opacity * 255).toString(16);
-        this._rectangle.fill(fillColor);
-        this._rectangle.fillLinearGradientColorStops([
-            0,
-            fillColor,
-            0.65,
-            this._segment.warningColor
-        ]);
+        this._hovered = true;
+        this._applyVisualState();
         this._view.batchDrawSourcesLayer();
         this._peaks.emit('segments.mouseenter', this._segment);
     };
     SegmentShape.prototype._onMouseLeave = function () {
         this._view.setCursor('default');
         this._view.setHoveredElement(null);
-        var fillColor = this._segment.color + Math.round(this._segment.opacity * 255).toString(16);
-        this._rectangle.fill(fillColor);
-        this._rectangle.fillLinearGradientColorStops([
-            0,
-            fillColor,
-            0.65,
-            this._segment.warningColor
-        ]);
+        this._hovered = false;
+        this._applyVisualState();
         this._view.batchDrawSourcesLayer();
         this._peaks.emit('segments.mouseleave', this._segment);
     };
@@ -20109,13 +20122,12 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         }
     };
     SourcesLayer.prototype._onSourcesSetSelected = function (sources) {
-        var sourcesGroups = this._lineGroups.getSourcesGroups();
         sources.forEach(function (source) {
-            const sourceGroup = sourcesGroups[source.id];
+            const sourceGroup = this._sourcesGroup[source.id];
             if (sourceGroup) {
                 sourceGroup.setSelected();
             }
-        });
+        }.bind(this));
         this.batchDraw();
     };
     SourcesLayer.prototype._onSegmentsSetSelected = function (segments) {
@@ -21904,6 +21916,26 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.hoverColor)) {
             throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
         }
+        if (Utils.isNullOrUndefined(options.selectedColor)) {
+            options.selectedColor = options.color;
+        } else if (!Utils.isValidColor(options.selectedColor)) {
+            throw new TypeError('peaks.segments.' + context + ': selectedColor must be a valid CSS color');
+        }
+        if (Utils.isNullOrUndefined(options.selectedTextColor)) {
+            options.selectedTextColor = options.textColor;
+        } else if (!Utils.isValidColor(options.selectedTextColor)) {
+            throw new TypeError('peaks.segments.' + context + ': selectedTextColor must be a valid CSS color');
+        }
+        if (Utils.isNullOrUndefined(options.selectedHandleTextColor)) {
+            options.selectedHandleTextColor = options.handleTextColor;
+        } else if (!Utils.isValidColor(options.selectedHandleTextColor)) {
+            throw new TypeError('peaks.segments.' + context + ': selectedHandleTextColor must be a valid CSS color');
+        }
+        if (Utils.isNullOrUndefined(options.selectedBorderColor)) {
+            options.selectedBorderColor = Utils.shadeColor(options.borderColor || options.textColor + 'FF', 30);
+        } else if (!Utils.isValidColor(options.selectedBorderColor)) {
+            throw new TypeError('peaks.segments.' + context + ': selectedBorderColor must be a valid CSS color');
+        }
         if (Utils.isNullOrUndefined(options.warningColor)) {
             options.warningColor = '#E48023';
         } else if (!Utils.isValidColor(options.warningColor)) {
@@ -21911,7 +21943,7 @@ module.exports = function (Utils) {
         }
         return shouldNotifyUpdate;
     }
-    function Segment(peaks, id, startTime, endTime, duration, labelText, color, textColor, handleTextColor, hoverColor, warningColor, opacity, borderColor, borderWidth, borderRadius, editable, allowDeletion, line, indicators) {
+    function Segment(peaks, id, startTime, endTime, duration, labelText, color, textColor, handleTextColor, hoverColor, selectedColor, selectedTextColor, selectedHandleTextColor, warningColor, opacity, borderColor, selectedBorderColor, borderWidth, borderRadius, editable, allowDeletion, line, indicators) {
         var opts = {
             startTime: startTime,
             endTime: endTime,
@@ -21921,9 +21953,13 @@ module.exports = function (Utils) {
             textColor: textColor,
             handleTextColor: handleTextColor,
             hoverColor: hoverColor,
+            selectedColor: selectedColor,
+            selectedTextColor: selectedTextColor,
+            selectedHandleTextColor: selectedHandleTextColor,
             warningColor: warningColor,
             opacity: opacity,
             borderColor: borderColor,
+            selectedBorderColor: selectedBorderColor,
             borderWidth: borderWidth,
             borderRadius: borderRadius,
             editable: editable,
@@ -21942,9 +21978,13 @@ module.exports = function (Utils) {
         this._hoverColor = opts.hoverColor;
         this._textColor = opts.textColor;
         this._handleTextColor = opts.handleTextColor;
+        this._selectedColor = opts.selectedColor;
+        this._selectedTextColor = opts.selectedTextColor;
+        this._selectedHandleTextColor = opts.selectedHandleTextColor;
         this._warningColor = opts.warningColor;
         this._opacity = opts.opacity;
         this._borderColor = opts.borderColor;
+        this._selectedBorderColor = opts.selectedBorderColor;
         this._borderWidth = opts.borderWidth;
         this._borderRadius = opts.borderRadius;
         this._editable = opts.editable;
@@ -22010,18 +22050,36 @@ module.exports = function (Utils) {
                 return this._hoverColor;
             }
         },
+        selectedColor: {
+            enumerable: true,
+            get: function () {
+                return this._selectedColor;
+            }
+        },
         textColor: {
             enumerable: true,
             get: function () {
                 return this._textColor;
             }
         },
+        selectedTextColor: {
+            enumerable: true,
+            get: function () {
+                return this._selectedTextColor;
+            }
+        },
         handleTextColor: {
             enumerable: true,
             get: function () {
                 return this._handleTextColor;
             }
         },
+        selectedHandleTextColor: {
+            enumerable: true,
+            get: function () {
+                return this._selectedHandleTextColor;
+            }
+        },
         warningColor: {
             enumerable: true,
             get: function () {
@@ -22040,6 +22098,12 @@ module.exports = function (Utils) {
                 return this._borderColor;
             }
         },
+        selectedBorderColor: {
+            enumerable: true,
+            get: function () {
+                return this._selectedBorderColor;
+            }
+        },
         borderWidth: {
             enumerable: true,
             get: function () {
@@ -22111,9 +22175,13 @@ module.exports = function (Utils) {
             textColor: this.textColor,
             handleTextColor: this.handleTextColor,
             hoverColor: this.hoverColor,
+            selectedColor: this.selectedColor,
+            selectedTextColor: this.selectedTextColor,
+            selectedHandleTextColor: this.selectedHandleTextColor,
             warningColor: this.warningColor,
             opacity: this.opacity,
             borderColor: this.borderColor,
+            selectedBorderColor: this.selectedBorderColor,
             borderWidth: this.borderWidth,
             borderRadius: this.borderRadius,
             editable: this.editable,
@@ -22131,9 +22199,13 @@ module.exports = function (Utils) {
         this._textColor = opts.textColor;
         this._handleTextColor = opts.handleTextColor;
         this._hoverColor = opts.hoverColor;
+        this._selectedColor = opts.selectedColor;
+        this._selectedTextColor = opts.selectedTextColor;
+        this._selectedHandleTextColor = opts.selectedHandleTextColor;
         this._warningColor = opts.warningColor;
         this._opacity = opts.opacity;
         this._borderColor = opts.borderColor;
+        this._selectedBorderColor = opts.selectedBorderColor;
         this._borderWidth = opts.borderWidth;
         this._borderRadius = opts.borderRadius;
         this._editable = opts.editable;
@@ -23305,7 +23377,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.borderColor, options.borderWidth, options.borderRadius, 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.selectedColor, options.selectedTextColor, options.selectedHandleTextColor, options.warningColor, options.opacity || 1, options.borderColor, options.selectedBorderColor, options.borderWidth, options.borderRadius, options.editable, options.allowDeletion || false, options.line, options.indicators);
         return segment;
     };
     SegmentHandler.prototype.getSegments = function () {

package/peaks.js.d.ts

@@ -9,6 +9,10 @@ declare module 'peaks.js' {
     endTime: number;
     editable?: boolean;
     color?: string;
+    selectedColor?: string;
+    selectedTextColor?: string;
+    selectedHandleTextColor?: string;
+    selectedBorderColor?: string;
     labelText?: string;
     id?: string;
   }
@@ -18,6 +22,10 @@ declare module 'peaks.js' {
     endTime?: number;
     editable?: boolean;
     color?: string;
+    selectedColor?: string;
+    selectedTextColor?: string;
+    selectedHandleTextColor?: string;
+    selectedBorderColor?: string;
     labelText?: string;
   }
 

package/src/components/default-segment-marker.js

@@ -128,6 +128,10 @@ define([
     this._label.setText(Utils.formatTime(time, false));
   };
 
+  DefaultSegmentMarker.prototype.setTextColor = function(color) {
+    this._label.fill(color);
+  };
+
   DefaultSegmentMarker.prototype._batchDraw = function() {
     const group = this._options.group;
     const layer = group && group.getLayer && group.getLayer();

package/src/components/segment-marker.js

@@ -134,6 +134,12 @@ define([
     }
   };
 
+  SegmentMarker.prototype.setTextColor = function(color) {
+    if (this._marker.setTextColor) {
+      this._marker.setTextColor(color);
+    }
+  };
+
   SegmentMarker.prototype.destroy = function() {
     this._group.destroyChildren();
     this._group.destroy();

package/src/components/segment-shape.js

@@ -47,6 +47,8 @@ define([
     this._shapeGroup    = null;
     this._rectangle     = null;
     this._indicators    = {};
+    this._selected      = this._segment.selected;
+    this._hovered       = false;
 
     var self = this;
 
@@ -113,6 +115,7 @@ define([
     this._shapeGroup.add(this._indicatorsGroup);
 
     this.createIndicators();
+    this._applyVisualState();
   }
 
   SegmentShape.prototype._onShapeGroupDrag = function(draggedElement) {
@@ -138,39 +141,58 @@ define([
     });
   };
 
-  SegmentShape.prototype._rebuildSelectionDependentNodes = function() {
-    var group = this._shapeGroup.getParent();
+  SegmentShape.prototype._getFillColor = function() {
+    var color = this._segment.color;
 
-    if (this._label) {
-      this._label.destroy();
-      this._label = null;
+    if (this._selected) {
+      color = this._segment.selectedColor;
     }
-
-    if (this._startMarker) {
-      this._startMarker.destroy();
-      this._startMarker = null;
+    else if (this._hovered) {
+      color = this._segment.hoverColor;
     }
 
-    if (this._endMarker) {
-      this._endMarker.destroy();
-      this._endMarker = null;
+    return color + Math.round(this._segment.opacity * 255).toString(16);
+  };
+
+  SegmentShape.prototype._getStrokeColor = function() {
+    if (this._selected) {
+      return this._segment.selectedBorderColor;
     }
 
-    this._createLabel();
-    this._createMarkers();
+    return this._segment.borderColor || this._segment.textColor + 'FF';
+  };
 
-    if (group) {
-      if (this._label) {
-        this._label.moveTo(group);
-      }
+  SegmentShape.prototype._getLabelTextColor = function() {
+    return this._selected ? this._segment.selectedTextColor : this._segment.textColor;
+  };
 
-      if (this._startMarker) {
-        this._startMarker.moveTo(group);
-      }
+  SegmentShape.prototype._getHandleTextColor = function() {
+    return this._selected ?
+      this._segment.selectedHandleTextColor :
+      this._segment.handleTextColor;
+  };
 
-      if (this._endMarker) {
-        this._endMarker.moveTo(group);
-      }
+  SegmentShape.prototype._applyVisualState = function() {
+    var fillColor = this._getFillColor();
+    var handleTextColor = this._getHandleTextColor();
+
+    this._rectangle.fill(fillColor);
+    this._rectangle.stroke(this._getStrokeColor());
+    this._rectangle.fillLinearGradientColorStops([
+      0, fillColor,
+      0.65, this._segment.warningColor
+    ]);
+
+    if (this._label && this._label.fill) {
+      this._label.fill(this._getLabelTextColor());
+    }
+
+    if (this._startMarker) {
+      this._startMarker.setTextColor(handleTextColor);
+    }
+
+    if (this._endMarker) {
+      this._endMarker.setTextColor(handleTextColor);
     }
   };
 
@@ -179,8 +201,8 @@ define([
   };
 
   SegmentShape.prototype.setSelected = function() {
-    this._rebuildSelectionDependentNodes();
-    this.update();
+    this._selected = this._segment.selected;
+    this._applyVisualState();
   };
 
   SegmentShape.prototype._applyDisplayTimes = function(startTime, endTime) {
@@ -409,16 +431,8 @@ define([
     this._view.setCursor('pointer');
 
     this._view.setHoveredElement(this);
-
-    var fillColor = this._segment.hoverColor + Math.round(
-      this._segment.opacity * 255
-    ).toString(16);
-
-    this._rectangle.fill(fillColor);
-    this._rectangle.fillLinearGradientColorStops([
-      0, fillColor,
-      0.65, this._segment.warningColor
-    ]);
+    this._hovered = true;
+    this._applyVisualState();
 
     this._view.batchDrawSourcesLayer();
 
@@ -429,16 +443,8 @@ define([
     this._view.setCursor('default');
 
     this._view.setHoveredElement(null);
-
-    var fillColor = this._segment.color + Math.round(
-      this._segment.opacity * 255
-    ).toString(16);
-
-    this._rectangle.fill(fillColor);
-    this._rectangle.fillLinearGradientColorStops([
-      0, fillColor,
-      0.65, this._segment.warningColor
-    ]);
+    this._hovered = false;
+    this._applyVisualState();
 
     this._view.batchDrawSourcesLayer();
 

package/src/components/sources-layer.js

@@ -271,15 +271,13 @@ define([
   };
 
   SourcesLayer.prototype._onSourcesSetSelected = function(sources) {
-    var sourcesGroups = this._lineGroups.getSourcesGroups();
-
     sources.forEach(function(source) {
-      const sourceGroup = sourcesGroups[source.id];
+      const sourceGroup = this._sourcesGroup[source.id];
 
       if (sourceGroup) {
         sourceGroup.setSelected();
       }
-    });
+    }.bind(this));
 
     this.batchDraw();
   };

package/src/models/segment.js

@@ -71,6 +71,43 @@ define([
       throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
     }
 
+    if (Utils.isNullOrUndefined(options.selectedColor)) {
+      options.selectedColor = options.color;
+    }
+    else if (!Utils.isValidColor(options.selectedColor)) {
+      throw new TypeError('peaks.segments.' + context + ': selectedColor must be a valid CSS color');
+    }
+
+    if (Utils.isNullOrUndefined(options.selectedTextColor)) {
+      options.selectedTextColor = options.textColor;
+    }
+    else if (!Utils.isValidColor(options.selectedTextColor)) {
+      throw new TypeError(
+        'peaks.segments.' + context + ': selectedTextColor must be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.selectedHandleTextColor)) {
+      options.selectedHandleTextColor = options.handleTextColor;
+    }
+    else if (!Utils.isValidColor(options.selectedHandleTextColor)) {
+      throw new TypeError(
+        'peaks.segments.' + context + ': selectedHandleTextColor must be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.selectedBorderColor)) {
+      options.selectedBorderColor = Utils.shadeColor(
+        options.borderColor || options.textColor + 'FF',
+        30
+      );
+    }
+    else if (!Utils.isValidColor(options.selectedBorderColor)) {
+      throw new TypeError(
+        'peaks.segments.' + context + ': selectedBorderColor must be a valid CSS color'
+      );
+    }
+
     if (Utils.isNullOrUndefined(options.warningColor)) {
       options.warningColor = '#E48023';
     }
@@ -104,9 +141,10 @@ define([
    */
 
   function Segment(peaks, id, startTime, endTime, duration, labelText,
-    color, textColor, handleTextColor, hoverColor, warningColor, opacity,
-    borderColor, borderWidth, borderRadius, editable, allowDeletion, line,
-    indicators) {
+    color, textColor, handleTextColor, hoverColor, selectedColor,
+    selectedTextColor, selectedHandleTextColor, warningColor, opacity,
+    borderColor, selectedBorderColor, borderWidth, borderRadius, editable,
+    allowDeletion, line, indicators) {
     var opts = {
       startTime:       startTime,
       endTime:         endTime,
@@ -116,9 +154,13 @@ define([
       textColor:       textColor,
       handleTextColor: handleTextColor,
       hoverColor:      hoverColor,
+      selectedColor:   selectedColor,
+      selectedTextColor: selectedTextColor,
+      selectedHandleTextColor: selectedHandleTextColor,
       warningColor:    warningColor,
       opacity:         opacity,
       borderColor:     borderColor,
+      selectedBorderColor: selectedBorderColor,
       borderWidth:     borderWidth,
       borderRadius:    borderRadius,
       editable:        editable,
@@ -139,9 +181,13 @@ define([
     this._hoverColor      = opts.hoverColor;
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
+    this._selectedColor   = opts.selectedColor;
+    this._selectedTextColor = opts.selectedTextColor;
+    this._selectedHandleTextColor = opts.selectedHandleTextColor;
     this._warningColor    = opts.warningColor;
     this._opacity         = opts.opacity;
     this._borderColor     = opts.borderColor;
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._borderWidth     = opts.borderWidth;
     this._borderRadius    = opts.borderRadius;
     this._editable        = opts.editable;
@@ -213,18 +259,36 @@ define([
         return this._hoverColor;
       }
     },
+    selectedColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedColor;
+      }
+    },
     textColor: {
       enumerable: true,
       get: function() {
         return this._textColor;
       }
     },
+    selectedTextColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedTextColor;
+      }
+    },
     handleTextColor: {
       enumerable: true,
       get: function() {
         return this._handleTextColor;
       }
     },
+    selectedHandleTextColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedHandleTextColor;
+      }
+    },
     warningColor: {
       enumerable: true,
       get: function() {
@@ -243,6 +307,12 @@ define([
         return this._borderColor;
       }
     },
+    selectedBorderColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedBorderColor;
+      }
+    },
     borderWidth: {
       enumerable: true,
       get: function() {
@@ -316,9 +386,13 @@ define([
       textColor:       this.textColor,
       handleTextColor: this.handleTextColor,
       hoverColor:      this.hoverColor,
+      selectedColor:   this.selectedColor,
+      selectedTextColor: this.selectedTextColor,
+      selectedHandleTextColor: this.selectedHandleTextColor,
       warningColor:    this.warningColor,
       opacity:         this.opacity,
       borderColor:     this.borderColor,
+      selectedBorderColor: this.selectedBorderColor,
       borderWidth:     this.borderWidth,
       borderRadius:    this.borderRadius,
       editable:        this.editable,
@@ -339,9 +413,13 @@ define([
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
     this._hoverColor      = opts.hoverColor;
+    this._selectedColor   = opts.selectedColor;
+    this._selectedTextColor = opts.selectedTextColor;
+    this._selectedHandleTextColor = opts.selectedHandleTextColor;
     this._warningColor    = opts.warningColor;
     this._opacity         = opts.opacity;
     this._borderColor     = opts.borderColor;
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._borderWidth     = opts.borderWidth;
     this._borderRadius    = opts.borderRadius;
     this._editable        = opts.editable;

package/src/segment-handler.js

@@ -136,9 +136,13 @@ define([
       options.textColor || '#000000',
       options.handleTextColor || '#000000',
       options.hoverColor,
+      options.selectedColor,
+      options.selectedTextColor,
+      options.selectedHandleTextColor,
       options.warningColor,
       options.opacity || 1,
       options.borderColor,
+      options.selectedBorderColor,
       options.borderWidth,
       options.borderRadius,
       options.editable,