@checksub_team/peaks_timeline 2.5.0-alpha.0 → 2.5.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "2.5.0-alpha.0",
+  "version": "2.5.0-alpha.2",
   "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;
@@ -17297,20 +17307,12 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._onSegmentHandleDrag = this._onSegmentHandleDrag.bind(this);
         this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
         this._onSegmentHandleDragEnd = this._onSegmentHandleDragEnd.bind(this);
-        this._label = this._peaks.options.createSegmentLabel({
-            x: this._view.timeToPixels(segment.startTime),
-            y: this._segmentY,
-            width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
-            height: this._segmentHeight,
-            segment: segment,
-            view: this._view.getName(),
-            group: this._group,
-            fontSize: 12
-        });
+        this._createLabel();
         this._createMarkers();
         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);
@@ -17318,9 +17320,67 @@ module.exports = function (Konva, SegmentMarker, Utils) {
     SegmentShape.prototype._cornerRadius = function () {
         return !Utils.isNullOrUndefined(this._segment.borderRadius) ? this._segment.borderRadius : SEGMENT_CORNER_RADIUS;
     };
+    SegmentShape.prototype._createLabel = function () {
+        this._label = this._peaks.options.createSegmentLabel({
+            x: this._view.timeToPixels(this._segment.startTime),
+            y: this._segmentY,
+            width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+            height: this._segmentHeight,
+            segment: this._segment,
+            view: this._view.getName(),
+            group: this._group,
+            fontSize: 12
+        });
+    };
+    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.setTextColor(handleTextColor);
+        }
+        if (this._endMarker) {
+            this._endMarker.setTextColor(handleTextColor);
+        }
+    };
     SegmentShape.prototype.update = function () {
         this._applyDisplayTimes(this._segment.startTime, this._segment.endTime);
     };
+    SegmentShape.prototype.setSelected = function () {
+        this._selected = this._segment.selected;
+        this._applyVisualState();
+    };
     SegmentShape.prototype._applyDisplayTimes = function (startTime, endTime) {
         var startPixel = this._view.timeToPixels(startTime);
         var endPixel = this._view.timeToPixels(endTime);
@@ -17498,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);
     };
@@ -17923,6 +17971,13 @@ module.exports = function (SegmentShape, Utils, Konva) {
             this._draw();
         }
     };
+    SegmentsGroup.prototype.setSelected = function (segment) {
+        var segmentShape = this._segmentShapes[segment.id];
+        if (segmentShape) {
+            segmentShape.setSelected();
+            this._draw();
+        }
+    };
     SegmentsGroup.prototype.addToUpdatedSegments = function (segment) {
         if (this._updatedSegments.indexOf(segment) === -1) {
             this._updatedSegments.push(segment);
@@ -19946,6 +20001,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
         this._peaks.on('handler.sources.hide', this._onSourcesHide.bind(this));
         this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
+        this._peaks.on('segments.setSelected', this._onSegmentsSetSelected.bind(this));
         this._peaks.on('model.source.update', this._onSourceUpdate.bind(this));
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
         this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
@@ -20066,12 +20122,23 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         }
     };
     SourcesLayer.prototype._onSourcesSetSelected = function (sources) {
+        var sourcesGroups = this._lineGroups.getSourcesGroups();
         sources.forEach(function (source) {
-            const sourceGroup = this._sourcesGroup[source.id];
+            const sourceGroup = sourcesGroups[source.id];
             if (sourceGroup) {
                 sourceGroup.setSelected();
             }
-        }.bind(this));
+        });
+        this.batchDraw();
+    };
+    SourcesLayer.prototype._onSegmentsSetSelected = function (segments) {
+        var segmentsGroups = this._lineGroups.getSegmentsGroups();
+        segments.forEach(function (segment) {
+            var segmentsGroup = segmentsGroups[segment.line];
+            if (segmentsGroup) {
+                segmentsGroup.setSelected(segment);
+            }
+        });
         this.batchDraw();
     };
     SourcesLayer.prototype._onSourcesAdd = function (sources) {
@@ -21850,6 +21917,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)) {
@@ -21857,7 +21944,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,
@@ -21867,9 +21954,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,
@@ -21888,9 +21979,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;
@@ -21956,18 +22051,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 () {
@@ -21986,6 +22099,12 @@ module.exports = function (Utils) {
                 return this._borderColor;
             }
         },
+        selectedBorderColor: {
+            enumerable: true,
+            get: function () {
+                return this._selectedBorderColor;
+            }
+        },
         borderWidth: {
             enumerable: true,
             get: function () {
@@ -22057,9 +22176,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,
@@ -22077,9 +22200,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;
@@ -22096,10 +22223,6 @@ module.exports = function (Utils) {
             this._endTime = Utils.roundTime(newEndTime);
         }
     };
-    Segment.prototype.setSelected = function (selected) {
-        this._selected = selected;
-        this._peaks.emit('model.segment.selected', this);
-    };
     Segment.prototype.isVisible = function (startTime, endTime) {
         return this.startTime < endTime && startTime < this.endTime;
     };
@@ -23255,7 +23378,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;
 
@@ -105,16 +107,7 @@ define([
     this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
     this._onSegmentHandleDragEnd   = this._onSegmentHandleDragEnd.bind(this);
 
-    this._label = this._peaks.options.createSegmentLabel({
-      x:        this._view.timeToPixels(segment.startTime),
-      y:        this._segmentY,
-      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
-      height:   this._segmentHeight,
-      segment:  segment,
-      view:     this._view.getName(),
-      group:    this._group,
-      fontSize: 12
-    });
+    this._createLabel();
 
     this._createMarkers();
 
@@ -122,6 +115,7 @@ define([
     this._shapeGroup.add(this._indicatorsGroup);
 
     this.createIndicators();
+    this._applyVisualState();
   }
 
   SegmentShape.prototype._onShapeGroupDrag = function(draggedElement) {
@@ -134,10 +128,83 @@ define([
       SEGMENT_CORNER_RADIUS;
   };
 
+  SegmentShape.prototype._createLabel = function() {
+    this._label = this._peaks.options.createSegmentLabel({
+      x:        this._view.timeToPixels(this._segment.startTime),
+      y:        this._segmentY,
+      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+      height:   this._segmentHeight,
+      segment:  this._segment,
+      view:     this._view.getName(),
+      group:    this._group,
+      fontSize: 12
+    });
+  };
+
+  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.setTextColor(handleTextColor);
+    }
+
+    if (this._endMarker) {
+      this._endMarker.setTextColor(handleTextColor);
+    }
+  };
+
   SegmentShape.prototype.update = function() {
     this._applyDisplayTimes(this._segment.startTime, this._segment.endTime);
   };
 
+  SegmentShape.prototype.setSelected = function() {
+    this._selected = this._segment.selected;
+    this._applyVisualState();
+  };
+
   SegmentShape.prototype._applyDisplayTimes = function(startTime, endTime) {
     var startPixel  = this._view.timeToPixels(startTime);
     var endPixel    = this._view.timeToPixels(endTime);
@@ -364,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();
 
@@ -384,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/segments-group.js

@@ -546,6 +546,15 @@ define([
     }
   };
 
+  SegmentsGroup.prototype.setSelected = function(segment) {
+    var segmentShape = this._segmentShapes[segment.id];
+
+    if (segmentShape) {
+      segmentShape.setSelected();
+      this._draw();
+    }
+  };
+
   SegmentsGroup.prototype.addToUpdatedSegments = function(segment) {
     if (this._updatedSegments.indexOf(segment) === -1) {
       this._updatedSegments.push(segment);

package/src/components/sources-layer.js

@@ -77,6 +77,7 @@ define([
     this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
     this._peaks.on('handler.sources.hide', this._onSourcesHide.bind(this));
     this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
+    this._peaks.on('segments.setSelected', this._onSegmentsSetSelected.bind(this));
     this._peaks.on('model.source.update', this._onSourceUpdate.bind(this));
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
@@ -270,13 +271,29 @@ define([
   };
 
   SourcesLayer.prototype._onSourcesSetSelected = function(sources) {
+    var sourcesGroups = this._lineGroups.getSourcesGroups();
+
     sources.forEach(function(source) {
-      const sourceGroup = this._sourcesGroup[source.id];
+      const sourceGroup = sourcesGroups[source.id];
 
       if (sourceGroup) {
         sourceGroup.setSelected();
       }
-    }.bind(this));
+    });
+
+    this.batchDraw();
+  };
+
+  SourcesLayer.prototype._onSegmentsSetSelected = function(segments) {
+    var segmentsGroups = this._lineGroups.getSegmentsGroups();
+
+    segments.forEach(function(segment) {
+      var segmentsGroup = segmentsGroups[segment.line];
+
+      if (segmentsGroup) {
+        segmentsGroup.setSelected(segment);
+      }
+    });
 
     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;
@@ -371,11 +449,6 @@ define([
     }
   };
 
-  Segment.prototype.setSelected = function(selected) {
-    this._selected = selected;
-    this._peaks.emit('model.segment.selected', this);
-  };
-
   /**
    * Returns <code>true</code> if the segment overlaps a given time region.
    *

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,