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

package/package.json

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

package/peaks.js

@@ -15397,12 +15397,11 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         }
         lineGroup.addSource(source, sourceGroup, sourcesAround);
     };
-    LineGroups.prototype.addSegments = function (lineId, lineOptions) {
-        this._peaks.addLine(lineOptions, true);
-        const lineGroup = this._lineGroupsByPosition[lineOptions.position];
+    LineGroups.prototype.addSegments = function (segmentsGroupId, lineId) {
+        const lineGroup = this._lineGroupsById[lineId];
         lineGroup.allowInteractions(this._areSegmentInteractionsAllowed);
-        lineGroup.addSegments(this._segmentsGroups[lineId]);
-        this._segmentsGroupToLine[lineId] = lineGroup;
+        lineGroup.addSegments(this._segmentsGroups[segmentsGroupId]);
+        this._segmentsGroupToLine[segmentsGroupId] = lineGroup;
         this._setInteractions(lineGroup.getId());
         this.refreshLineYs();
     };
@@ -15690,8 +15689,9 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         }
     };
     LineGroups.prototype.allowInteractions = function (forSources, forSegments) {
-        this._areSourceInteractionsAllowed = typeof forSources !== 'undefined' ? forSources : this._areSourceInteractionsAllowed;
-        this._areSegmentInteractionsAllowed = typeof forSegments !== 'undefined' ? forSegments : this._areSegmentInteractionsAllowed;
+        this._areSourceInteractionsAllowed = !Utils.isNullOrUndefined(forSources) ? forSources : this._areSourceInteractionsAllowed;
+        this._areSegmentInteractionsAllowed = !Utils.isNullOrUndefined(forSegments) ? forSegments : this._areSegmentInteractionsAllowed;
+        console.log('peaks.lines.allowInteractions(): ' + 'forSources: ' + this._areSourceInteractionsAllowed + ', forSegments: ' + this._areSegmentInteractionsAllowed);
         for (var id in this._lineGroupsById) {
             if (Utils.objectHasProperty(this._lineGroupsById, id)) {
                 this._setInteractions(id);
@@ -17633,6 +17633,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._borderWidth = this._source.borderWidth || 0;
         this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
         this._selected = this._source.selected;
+        this._hovered = false;
         this._isDragged = false;
         this._previewList = [];
         this._markersGroup = this._createMarkers();
@@ -17651,12 +17652,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._group.on('dragend', this._onDragEnd.bind(this));
         this._cursor = null;
         this._group.on('mouseenter', function () {
+            self._setHovered(true);
             self._view.setHoveredElement(self);
             if (!self._source.loading) {
                 self._showButtons();
             }
         });
         this._group.on('mouseleave', function () {
+            self._setHovered(false);
             self._view.setHoveredElement(null);
             self._hideButtons();
         });
@@ -17694,6 +17697,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this.createIndicators();
         this.setLoadingState(this._source.loading);
     }
+    SourceGroup.prototype._setHovered = function (newValue) {
+        this._hovered = newValue;
+        this._group.draw();
+    };
     SourceGroup.prototype._onDragStart = function (element) {
         this._isDragged = true;
         this._layer.onSourcesGroupDragStart(element);
@@ -17895,22 +17902,30 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
             ctx.closePath();
             if (fill) {
+                var backgroundColor;
+                if (this._selected) {
+                    backgroundColor = this._source.selectedBackgroundColor;
+                } else if (this._hovered) {
+                    backgroundColor = this._source.hoverBackgroundColor;
+                } else {
+                    backgroundColor = this._source.backgroundColor;
+                }
                 if (this._source.shouldShowWarning()) {
                     var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
                     if (this._source.mediaEndTime < this._source.duration) {
                         var rightStopPosition = Math.max(1 - this._source.warningWidth / this._width, 0.5);
-                        gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
+                        gradient.addColorStop(rightStopPosition, backgroundColor);
                         gradient.addColorStop(1, this._source.warningColor);
                     }
                     if (this._source.mediaStartTime > 0) {
                         var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
                         gradient.addColorStop(0, this._source.warningColor);
-                        gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
+                        gradient.addColorStop(leftStopPosition, backgroundColor);
                     }
                     ctx.fillStyle = gradient;
                     ctx.fill();
                 } else {
-                    ctx.fillStyle = this._source.backgroundColor;
+                    ctx.fillStyle = backgroundColor;
                     ctx.fill();
                 }
             }
@@ -18249,7 +18264,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._selected = this._source.selected;
         if (this._border) {
             if (this._selected) {
-                this._border.fill(this._source.selectedColor);
+                this._border.fill(this._source.selectedBorderColor);
                 this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
             } else {
                 this._border.fill(this._source.borderColor);
@@ -18262,7 +18277,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 })[0];
                 if (unwrap_background) {
                     if (this._selected) {
-                        unwrap_background.stroke(this._source.selectedColor);
+                        unwrap_background.stroke(this._source.selectedBorderColor);
                         unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
                         unwrap_background.strokeWidth(0);
@@ -18275,7 +18290,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 })[0];
                 if (wrap_background) {
                     if (this._selected) {
-                        wrap_background.stroke(this._source.selectedColor);
+                        wrap_background.stroke(this._source.selectedBorderColor);
                         wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
                         wrap_background.strokeWidth(0);
@@ -18968,8 +18983,8 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             }
         }
     };
-    SourcesLayer.prototype._onSegmentsShow = function (lineId, lineOptions) {
-        this._lineGroups.addSegments(lineId, lineOptions);
+    SourcesLayer.prototype._onSegmentsShow = function (segmentsGroupId, lineId) {
+        this._lineGroups.addSegments(segmentsGroupId, lineId);
         this._view.updateTimelineLength();
         this._layer.draw();
     };
@@ -19733,6 +19748,7 @@ module.exports = function (Colors, EventEmitter, SegmentHandler, SourceHandler,
             nudgeIncrement: 1,
             zoomWaveformColor: 'rgba(180, 180, 180, 1)',
             randomizeSegmentColor: true,
+            blockUpdatingOnMouseClickWithCtrlKey: false,
             blockUpdatingOnMouseClickWithMetaKey: false,
             height: 200,
             segmentColor: Colors.orange,
@@ -19922,8 +19938,8 @@ module.exports = function (Colors, EventEmitter, SegmentHandler, SourceHandler,
     Peaks.prototype.moveLine = function (lineId, position) {
         this.lineHandler.moveById(lineId, position);
     };
-    Peaks.prototype.showSegments = function (lineId, lineOptions) {
-        this.segmentHandler.addSegmentsToPosition(lineId, lineOptions);
+    Peaks.prototype.showSegments = function (segmentsGroupId, lineId) {
+        this.segmentHandler.addSegmentsToLine(segmentsGroupId, lineId);
     };
     Peaks.prototype.destroySegment = function (segmentId) {
         this.segmentHandler.removeById(segmentId);
@@ -20507,13 +20523,25 @@ module.exports = function (Utils) {
         if (!Utils.isValidColor(options.backgroundColor)) {
             throw new TypeError('peaks.sources.' + context + ': backgroundColor should be a valid CSS color');
         }
-        if (!Utils.isValidColor(options.borderColor)) {
+        if (Utils.isNullOrUndefined(options.selectedBackgroundColor)) {
+            options.selectedBackgroundColor = options.backgroundColor;
+        } else if (!Utils.isValidColor(options.selectedBackgroundColor)) {
+            throw new TypeError('peaks.sources.' + context + ': selectedBackgroundColor should be a valid CSS color');
+        }
+        if (Utils.isNullOrUndefined(options.hoverBackgroundColor)) {
+            options.hoverBackgroundColor = Utils.shadeColor(options.backgroundColor, 30);
+        } else if (!Utils.isValidColor(options.hoverBackgroundColor)) {
+            throw new TypeError('peaks.sources.' + context + ': hoverBackgroundColor should be a valid CSS color');
+        }
+        if (Utils.isNullOrUndefined(options.borderColor)) {
             options.borderColor = options.color;
+        } else if (!Utils.isValidColor(options.borderColor)) {
+            throw new TypeError('peaks.sources.' + context + ': borderColor should be a valid CSS color');
         }
-        if (Utils.isNullOrUndefined(options.selectedColor)) {
-            options.selectedColor = null;
-        } else if (!Utils.isValidColor(options.selectedColor)) {
-            throw new TypeError('peaks.sources.' + context + ': selectedColor should be a valid CSS color');
+        if (Utils.isNullOrUndefined(options.selectedBorderColor)) {
+            options.selectedBorderColor = Utils.shadeColor(options.borderColor, 30);
+        } else if (!Utils.isValidColor(options.selectedBorderColor)) {
+            throw new TypeError('peaks.sources.' + context + ': selectedBorderColor should be a valid CSS color');
         }
         if (Utils.isNullOrUndefined(options.warningColor)) {
             options.warningColor = null;
@@ -20662,7 +20690,7 @@ module.exports = function (Utils) {
             throw new TypeError('peaks.sources.' + context + ': loading must be a boolean');
         }
     }
-    function Source(peaks, id, lineId, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor, markerWidth, volume, volumeRange, loading, ...customParams) {
+    function Source(peaks, id, lineId, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, hoverBackgroundColor, selectedBackgroundColor, borderColor, selectedBorderColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor, markerWidth, volume, volumeRange, loading, ...customParams) {
         var opts = {
             title: title,
             titleAlignments: titleAlignments,
@@ -20678,8 +20706,10 @@ module.exports = function (Utils) {
             mediaEndTime: mediaEndTime,
             color: color,
             backgroundColor: backgroundColor,
+            hoverBackgroundColor: hoverBackgroundColor,
+            selectedBackgroundColor: selectedBackgroundColor,
             borderColor: borderColor,
-            selectedColor: selectedColor,
+            selectedBorderColor: selectedBorderColor,
             warningColor: warningColor,
             warningWidth: warningWidth,
             textFont: textFont,
@@ -20731,8 +20761,10 @@ module.exports = function (Utils) {
         this._mediaEndTime = opts.mediaEndTime;
         this._color = opts.color;
         this._backgroundColor = opts.backgroundColor;
+        this._hoverBackgroundColor = opts.hoverBackgroundColor;
+        this._selectedBackgroundColor = opts.selectedBackgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._selectedBorderColor = opts.selectedBorderColor;
         this._warningColor = opts.warningColor;
         this._warningWidth = opts.warningWidth;
         this._volumeSliderColor = opts.volumeSliderColor;
@@ -20906,6 +20938,24 @@ module.exports = function (Utils) {
                 this._backgroundColor = backgroundColor;
             }
         },
+        hoverBackgroundColor: {
+            enumerable: true,
+            get: function () {
+                return this._hoverBackgroundColor;
+            },
+            set: function (hoverBackgroundColor) {
+                this._hoverBackgroundColor = hoverBackgroundColor;
+            }
+        },
+        selectedBackgroundColor: {
+            enumerable: true,
+            get: function () {
+                return this._selectedBackgroundColor;
+            },
+            set: function (selectedBackgroundColor) {
+                this._selectedBackgroundColor = selectedBackgroundColor;
+            }
+        },
         borderColor: {
             enumerable: true,
             get: function () {
@@ -20915,13 +20965,13 @@ module.exports = function (Utils) {
                 this._borderColor = borderColor;
             }
         },
-        selectedColor: {
+        selectedBorderColor: {
             enumerable: true,
             get: function () {
-                return this._selectedColor;
+                return this._selectedBorderColor;
             },
-            set: function (selectedColor) {
-                this._selectedColor = selectedColor;
+            set: function (selectedBorderColor) {
+                this._selectedBorderColor = selectedBorderColor;
             }
         },
         warningColor: {
@@ -21271,8 +21321,10 @@ module.exports = function (Utils) {
             mediaEndTime: this.mediaEndTime,
             color: this.color,
             backgroundColor: this.backgroundColor,
+            hoverBackgroundColor: this.hoverBackgroundColor,
+            selectedBackgroundColor: this.selectedBackgroundColor,
             borderColor: this.borderColor,
-            selectedColor: this.selectedColor,
+            selectedBorderColor: this.selectedBorderColor,
             warningColor: this.warningColor,
             warningWidth: this.warningWidth,
             volumeSliderColor: this.volumeSliderColor,
@@ -21321,7 +21373,7 @@ module.exports = function (Utils) {
         this._color = opts.color;
         this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._selectedBorderColor = opts.selectedBorderColor;
         this._warningColor = opts.warningColor;
         this._warningWidth = opts.warningWidth;
         this._volumeSliderColor = opts.volumeSliderColor;
@@ -21490,8 +21542,11 @@ module.exports = function (Colors, Segment, Utils) {
             return segment.toSerializable();
         });
     };
-    SegmentHandler.prototype.addSegmentsToPosition = function (lineId, lineOptions) {
-        this._peaks.emit('handler.segments.show', lineId, lineOptions);
+    SegmentHandler.prototype.addSegmentsToLine = function (segmentsGroupId, lineId) {
+        if (!Utils.isString(lineId) || Utils.isNullOrUndefined(this._peaks.lineHandler.getLine(lineId))) {
+            throw new Error('peaks.segmentHandler.addSegmentsToLine(): line with id ' + lineId + ' does not exist');
+        }
+        this._peaks.emit('handler.segments.show', segmentsGroupId, lineId);
     };
     SegmentHandler.prototype.getSegment = function (id) {
         return this._segmentsById[id] || null;
@@ -21631,8 +21686,10 @@ module.exports = function (Source, Utils) {
             mediaEndTime: originalMediaEndTime,
             color: sourceToCut.color,
             backgroundColor: sourceToCut.backgroundColor,
+            hoverBackgroundColor: sourceToCut.hoverBackgroundColor,
+            selectedBackgroundColor: sourceToCut.selectedBackgroundColor,
             borderColor: sourceToCut.borderColor,
-            selectedColor: sourceToCut.selectedColor,
+            selectedBorderColor: sourceToCut.selectedBorderColor,
             warningColor: sourceToCut.warningColor,
             warningWidth: sourceToCut.warningWidth,
             volumeSliderColor: sourceToCut.volumeSliderColor,
@@ -21680,8 +21737,10 @@ module.exports = function (Source, Utils) {
     SourceHandler.prototype._addSource = function (source) {
         this._sources.push(source);
         this._sourcesById[source.id] = source;
-        this._sourcesByLineId[source.lineId] = this._sourcesByLineId[source.lineId] || [];
-        this._sourcesByLineId[source.lineId].push(source);
+        if (Utils.isNullOrUndefined(this._sourcesByLineId[source.lineId])) {
+            this._sourcesByLineId[source.lineId] = {};
+        }
+        this._sourcesByLineId[source.lineId][source.id] = source;
     };
     SourceHandler.prototype._createSource = function (options) {
         if (!Utils.isObject(options)) {
@@ -21693,12 +21752,15 @@ module.exports = function (Source, Utils) {
                 customParams.push(key, value);
             }
         });
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.lineId, options.originId, options.elementId, options.title, options.titleAlignments, 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.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.buttons, options.markerColor, options.markerWidth, options.volume, options.volumeRange, options.loading, ...customParams);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.lineId, options.originId, options.elementId, options.title, options.titleAlignments, 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.hoverBackgroundColor, options.selectedBackgroundColor, options.borderColor, options.selectedBorderColor, options.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.buttons, options.markerColor, options.markerWidth, options.volume, options.volumeRange, options.loading, ...customParams);
         return source;
     };
     SourceHandler.prototype.getSources = function () {
         return this._sources;
     };
+    SourceHandler.prototype.getSourcesByLineId = function (lineId) {
+        return Utils.isNullOrUndefined(lineId) ? this._sourcesByLineId : this._sourcesByLineId[lineId];
+    };
     SourceHandler.prototype.getSourcesSerialized = function () {
         return this._sources.map(function (source) {
             return source.toSerializable();
@@ -21755,6 +21817,7 @@ module.exports = function (Source, Utils) {
             var index = indexes[i] - destroyed.length;
             var itemDestroyed = this._sources.splice(index, 1)[0];
             delete this._sourcesById[itemDestroyed.id];
+            delete this._sourcesByLineId[itemDestroyed.lineId][itemDestroyed.id];
             destroyed.push(itemDestroyed);
         }
         return destroyed;

package/src/components/line-groups.js

@@ -159,15 +159,13 @@ define([
     lineGroup.addSource(source, sourceGroup, sourcesAround);
   };
 
-  LineGroups.prototype.addSegments = function(lineId, lineOptions) {
-    this._peaks.addLine(lineOptions, true);
-
-    const lineGroup = this._lineGroupsByPosition[lineOptions.position];
+  LineGroups.prototype.addSegments = function(segmentsGroupId, lineId) {
+    const lineGroup = this._lineGroupsById[lineId];
 
     lineGroup.allowInteractions(this._areSegmentInteractionsAllowed);
-    lineGroup.addSegments(this._segmentsGroups[lineId]);
+    lineGroup.addSegments(this._segmentsGroups[segmentsGroupId]);
 
-    this._segmentsGroupToLine[lineId] = lineGroup;
+    this._segmentsGroupToLine[segmentsGroupId] = lineGroup;
 
     this._setInteractions(lineGroup.getId());
 
@@ -569,10 +567,13 @@ define([
   };
 
   LineGroups.prototype.allowInteractions = function(forSources, forSegments) {
-    this._areSourceInteractionsAllowed = typeof forSources !== 'undefined' ?
+    this._areSourceInteractionsAllowed = !Utils.isNullOrUndefined(forSources) ?
       forSources : this._areSourceInteractionsAllowed;
-    this._areSegmentInteractionsAllowed = typeof forSegments !== 'undefined' ?
+    this._areSegmentInteractionsAllowed = !Utils.isNullOrUndefined(forSegments) ?
       forSegments : this._areSegmentInteractionsAllowed;
+    console.log('peaks.lines.allowInteractions(): ' +
+      'forSources: ' + this._areSourceInteractionsAllowed + ', forSegments: ' + this._areSegmentInteractionsAllowed
+    );
     for (var id in this._lineGroupsById) {
       if (Utils.objectHasProperty(this._lineGroupsById, id)) {
         this._setInteractions(id);

package/src/components/source-group.js

@@ -56,6 +56,7 @@ define([
     this._borderWidth = this._source.borderWidth || 0;
     this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
     this._selected = this._source.selected;
+    this._hovered = false;
     this._isDragged = false;
 
     this._previewList = [];
@@ -79,6 +80,7 @@ define([
 
     this._cursor = null;
     this._group.on('mouseenter', function() {
+      self._setHovered(true);
       self._view.setHoveredElement(self);
       if (!self._source.loading) {
         self._showButtons();
@@ -86,6 +88,7 @@ define([
     });
 
     this._group.on('mouseleave', function() {
+      self._setHovered(false);
       self._view.setHoveredElement(null);
       self._hideButtons();
     });
@@ -133,6 +136,11 @@ define([
     this.setLoadingState(this._source.loading);
   }
 
+  SourceGroup.prototype._setHovered = function(newValue) {
+    this._hovered = newValue;
+    this._group.draw();
+  };
+
   SourceGroup.prototype._onDragStart = function(element) {
     this._isDragged = true;
     this._layer.onSourcesGroupDragStart(element);
@@ -419,13 +427,25 @@ define([
       ctx.closePath();
 
       if (fill) {
+        var backgroundColor;
+
+        if (this._selected) {
+          backgroundColor = this._source.selectedBackgroundColor;
+        }
+        else if (this._hovered) {
+          backgroundColor = this._source.hoverBackgroundColor;
+        }
+        else {
+          backgroundColor = this._source.backgroundColor;
+        }
+
         if (this._source.shouldShowWarning()) {
           var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
 
           if (this._source.mediaEndTime < this._source.duration) {
             var rightStopPosition = Math.max(1 - (this._source.warningWidth / this._width), 0.5);
 
-            gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
+            gradient.addColorStop(rightStopPosition, backgroundColor);
             gradient.addColorStop(1, this._source.warningColor);
           }
 
@@ -433,14 +453,14 @@ define([
             var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
 
             gradient.addColorStop(0, this._source.warningColor);
-            gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
+            gradient.addColorStop(leftStopPosition, backgroundColor);
           }
 
           ctx.fillStyle = gradient;
           ctx.fill();
         }
         else {
-          ctx.fillStyle = this._source.backgroundColor;
+          ctx.fillStyle = backgroundColor;
           ctx.fill();
         }
       }
@@ -874,7 +894,7 @@ define([
     this._selected = this._source.selected;
     if (this._border) {
       if (this._selected) {
-        this._border.fill(this._source.selectedColor);
+        this._border.fill(this._source.selectedBorderColor);
         this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
       }
       else {
@@ -891,7 +911,7 @@ define([
 
         if (unwrap_background) {
           if (this._selected) {
-            unwrap_background.stroke(this._source.selectedColor);
+            unwrap_background.stroke(this._source.selectedBorderColor);
             unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
           else {
@@ -908,7 +928,7 @@ define([
 
         if (wrap_background) {
           if (this._selected) {
-            wrap_background.stroke(this._source.selectedColor);
+            wrap_background.stroke(this._source.selectedBorderColor);
             wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
           else {

package/src/components/sources-layer.js

@@ -220,8 +220,8 @@ define([
     }
   };
 
-  SourcesLayer.prototype._onSegmentsShow = function(lineId, lineOptions) {
-    this._lineGroups.addSegments(lineId, lineOptions);
+  SourcesLayer.prototype._onSegmentsShow = function(segmentsGroupId, lineId) {
+    this._lineGroups.addSegments(segmentsGroupId, lineId);
     this._view.updateTimelineLength();
     this._layer.draw();
   };

package/src/main.js

@@ -135,6 +135,11 @@ define([
        */
       randomizeSegmentColor: true,
 
+      /**
+       * Block mouse clicks if a control key is pressed
+       */
+      blockUpdatingOnMouseClickWithCtrlKey: false,
+
       /**
        * Block mouse clicks if a meta key is pressed
        */
@@ -722,8 +727,8 @@ define([
     this.lineHandler.moveById(lineId, position);
   };
 
-  Peaks.prototype.showSegments = function(lineId, lineOptions) {
-    this.segmentHandler.addSegmentsToPosition(lineId, lineOptions);
+  Peaks.prototype.showSegments = function(segmentsGroupId, lineId) {
+    this.segmentHandler.addSegmentsToLine(segmentsGroupId, lineId);
   };
 
   /**

package/src/models/source.js

@@ -121,16 +121,39 @@ define([
       );
     }
 
-    if (!Utils.isValidColor(options.borderColor)) {
+    if (Utils.isNullOrUndefined(options.selectedBackgroundColor)) {
+      options.selectedBackgroundColor = options.backgroundColor;
+    }
+    else if (!Utils.isValidColor(options.selectedBackgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': selectedBackgroundColor should be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.hoverBackgroundColor)) {
+      options.hoverBackgroundColor = Utils.shadeColor(options.backgroundColor, 30);
+    }
+    else if (!Utils.isValidColor(options.hoverBackgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': hoverBackgroundColor should be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.borderColor)) {
       options.borderColor = options.color;
     }
+    else if (!Utils.isValidColor(options.borderColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': borderColor should be a valid CSS color'
+      );
+    }
 
-    if (Utils.isNullOrUndefined(options.selectedColor)) {
-      options.selectedColor = null;
+    if (Utils.isNullOrUndefined(options.selectedBorderColor)) {
+      options.selectedBorderColor = Utils.shadeColor(options.borderColor, 30);
     }
-    else if (!Utils.isValidColor(options.selectedColor)) {
+    else if (!Utils.isValidColor(options.selectedBorderColor)) {
       throw new TypeError(
-        'peaks.sources.' + context + ': selectedColor should be a valid CSS color'
+        'peaks.sources.' + context + ': selectedBorderColor should be a valid CSS color'
       );
     }
 
@@ -374,7 +397,7 @@ define([
    * @param {String} color Primary color of the source representation.
    * @param {String} backgroundColor Background color of the source.
    * @param {String} borderColor Border color of the source.
-   * @param {String} selectedColor Color when the source is selected.
+   * @param {String} selectedBorderColor Color when the source is selected.
    * @param {String} warningColor Color used for warning states.
    * @param {String} volumeSliderColor Color of the volume slider.
    * @param {Number} volumeSliderWidth Width of the volume slider.
@@ -407,9 +430,9 @@ define([
    */
 
   function Source(peaks, id, lineId, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind,
-    subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth,
-    volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition,
+    subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, hoverBackgroundColor,
+    selectedBackgroundColor, borderColor, selectedBorderColor, warningColor, warningWidth, volumeSliderColor,
+    volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition,
     textAutoScroll, borderWidth, borderRadius, wrapped, draggable, orderable, resizable,
     cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor,
     markerWidth, volume, volumeRange, loading, ...customParams) {
@@ -428,8 +451,10 @@ define([
       mediaEndTime: mediaEndTime,
       color: color,
       backgroundColor: backgroundColor,
+      hoverBackgroundColor: hoverBackgroundColor,
+      selectedBackgroundColor: selectedBackgroundColor,
       borderColor: borderColor,
-      selectedColor: selectedColor,
+      selectedBorderColor: selectedBorderColor,
       warningColor: warningColor,
       warningWidth: warningWidth,
       textFont: textFont,
@@ -483,8 +508,10 @@ define([
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
     this._backgroundColor = opts.backgroundColor;
+    this._hoverBackgroundColor = opts.hoverBackgroundColor;
+    this._selectedBackgroundColor = opts.selectedBackgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._warningColor = opts.warningColor;
     this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;
@@ -669,6 +696,26 @@ define([
         this._backgroundColor = backgroundColor;
       }
     },
+    hoverBackgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._hoverBackgroundColor;
+      },
+
+      set: function(hoverBackgroundColor) {
+        this._hoverBackgroundColor = hoverBackgroundColor;
+      }
+    },
+    selectedBackgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedBackgroundColor;
+      },
+
+      set: function(selectedBackgroundColor) {
+        this._selectedBackgroundColor = selectedBackgroundColor;
+      }
+    },
     borderColor: {
       enumerable: true,
       get: function() {
@@ -679,14 +726,14 @@ define([
         this._borderColor = borderColor;
       }
     },
-    selectedColor: {
+    selectedBorderColor: {
       enumerable: true,
       get: function() {
-        return this._selectedColor;
+        return this._selectedBorderColor;
       },
 
-      set: function(selectedColor) {
-        this._selectedColor = selectedColor;
+      set: function(selectedBorderColor) {
+        this._selectedBorderColor = selectedBorderColor;
       }
     },
     warningColor: {
@@ -1084,8 +1131,10 @@ define([
       mediaEndTime: this.mediaEndTime,
       color: this.color,
       backgroundColor: this.backgroundColor,
+      hoverBackgroundColor: this.hoverBackgroundColor,
+      selectedBackgroundColor: this.selectedBackgroundColor,
       borderColor: this.borderColor,
-      selectedColor: this.selectedColor,
+      selectedBorderColor: this.selectedBorderColor,
       warningColor: this.warningColor,
       warningWidth: this.warningWidth,
       volumeSliderColor: this.volumeSliderColor,
@@ -1137,7 +1186,7 @@ define([
     this._color = opts.color;
     this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._warningColor = opts.warningColor;
     this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;

package/src/segment-handler.js

@@ -176,8 +176,16 @@ define([
    * Add segments to the given line so they can be displayed.
    */
 
-  SegmentHandler.prototype.addSegmentsToPosition = function(lineId, lineOptions) {
-    this._peaks.emit('handler.segments.show', lineId, lineOptions);
+  SegmentHandler.prototype.addSegmentsToLine = function(segmentsGroupId, lineId) {
+    if (
+      !Utils.isString(lineId) ||
+      Utils.isNullOrUndefined(this._peaks.lineHandler.getLine(lineId))
+    ) {
+      throw new Error('peaks.segmentHandler.addSegmentsToLine(): line with id ' + lineId +
+        ' does not exist');
+    }
+
+    this._peaks.emit('handler.segments.show', segmentsGroupId, lineId);
   };
 
   /**

package/src/source-handler.js

@@ -78,8 +78,10 @@ define([
       mediaEndTime: originalMediaEndTime,
       color: sourceToCut.color,
       backgroundColor: sourceToCut.backgroundColor,
+      hoverBackgroundColor: sourceToCut.hoverBackgroundColor,
+      selectedBackgroundColor: sourceToCut.selectedBackgroundColor,
       borderColor: sourceToCut.borderColor,
-      selectedColor: sourceToCut.selectedColor,
+      selectedBorderColor: sourceToCut.selectedBorderColor,
       warningColor: sourceToCut.warningColor,
       warningWidth: sourceToCut.warningWidth,
       volumeSliderColor: sourceToCut.volumeSliderColor,
@@ -143,8 +145,10 @@ define([
   SourceHandler.prototype._addSource = function(source) {
     this._sources.push(source);
     this._sourcesById[source.id] = source;
-    this._sourcesByLineId[source.lineId] = this._sourcesByLineId[source.lineId] || [];
-    this._sourcesByLineId[source.lineId].push(source);
+    if (Utils.isNullOrUndefined(this._sourcesByLineId[source.lineId])) {
+      this._sourcesByLineId[source.lineId] = {};
+    }
+    this._sourcesByLineId[source.lineId][source.id] = source;
   };
 
   /**
@@ -190,8 +194,10 @@ define([
       options.mediaEndTime,
       options.color,
       options.backgroundColor,
+      options.hoverBackgroundColor,
+      options.selectedBackgroundColor,
       options.borderColor,
-      options.selectedColor,
+      options.selectedBorderColor,
       options.warningColor,
       options.warningWidth,
       options.volumeSliderColor,
@@ -238,6 +244,10 @@ define([
     return this._sources;
   };
 
+  SourceHandler.prototype.getSourcesByLineId = function(lineId) {
+    return Utils.isNullOrUndefined(lineId) ? this._sourcesByLineId : this._sourcesByLineId[lineId];
+  };
+
   /**
    * Returns all sources, serialized to a plain object.
    *
@@ -380,6 +390,7 @@ define([
       var itemDestroyed = this._sources.splice(index, 1)[0];
 
       delete this._sourcesById[itemDestroyed.id];
+      delete this._sourcesByLineId[itemDestroyed.lineId][itemDestroyed.id];
 
       destroyed.push(itemDestroyed);
     }