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

package/peaks.js

@@ -14827,6 +14827,9 @@ module.exports = function (SourceGroup, Utils, Konva) {
     LineGroup.prototype.getId = function () {
         return this._line.id;
     };
+    LineGroup.prototype.isLocked = function () {
+        return this._line.locked;
+    };
     LineGroup.prototype.getLine = function () {
         return this._line;
     };
@@ -15397,12 +15400,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();
     };
@@ -15526,13 +15528,18 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         if (Utils.isNullOrUndefined(mouseX)) {
             return;
         }
-        const position = this._lineGroupsById[sources[0].lineId].getPosition();
+        const currentLineGroup = this._lineGroupsById[sources[0].lineId];
+        const position = currentLineGroup.getPosition();
         const linePos = this.getLinesUnderY(mouseY);
+        if (currentLineGroup.isLocked()) {
+            return;
+        }
         if (linePos[0] !== linePos[1]) {
             this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
         } else {
             this.stopAutomaticLineCreation();
-            if (!Utils.isNullOrUndefined(mouseX) && linePos[0] !== position && !this._lineGroupsByPosition[linePos[0]].isSegmentsLine()) {
+            const targetLineGroup = this._lineGroupsByPosition[linePos[0]];
+            if (!Utils.isNullOrUndefined(mouseX) && linePos[0] !== position && !targetLineGroup.isLocked() && !targetLineGroup.isSegmentsLine()) {
                 var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
                 var sourceDuration = Utils.roundTime(endTime - startTime);
                 this._moveSourcesToPositionIfPossible(sources, linePos[0], mouseTime, sourceDuration);
@@ -15606,15 +15613,16 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         for (var position in this._lineGroupsByPosition) {
             if (Utils.objectHasProperty(this._lineGroupsByPosition, position)) {
                 if (this._lineGroupsByPosition[position].y() !== y) {
-                    anyChange = true;
                     this._lineGroupsByPosition[position].y(y);
+                    anyChange = true;
                 }
                 y += this._lineGroupsByPosition[position].lineHeight() + this._peaks.options.interline;
             }
         }
-        if (anyChange && this._lineIndicator.refreshIndicators()) {
-            this._lineIndicator.draw();
+        if (anyChange) {
+            this._view.updateTimeline();
         }
+        this._lineIndicator.refreshIndicators();
     };
     LineGroups.prototype._setLinePosition = function (lineId, position) {
         const lineGroup = this._lineGroupsById[lineId];
@@ -15690,8 +15698,8 @@ 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;
         for (var id in this._lineGroupsById) {
             if (Utils.objectHasProperty(this._lineGroupsById, id)) {
                 this._setInteractions(id);
@@ -15753,6 +15761,7 @@ module.exports = function (Konva, SVGs, Utils) {
             this._width,
             this._height
         ]);
+        this.refreshIndicators();
     };
     LineIndicator.prototype._createIndicator = function (lineGroup, type, text) {
         const indicator = new Konva.Group();
@@ -15911,6 +15920,9 @@ module.exports = function (Konva, SVGs, Utils) {
                 anyChange = this.refreshIndicator(lineId) || anyChange;
             }
         }
+        if (anyChange) {
+            this.draw();
+        }
         return anyChange;
     };
     LineIndicator.prototype.draw = function () {
@@ -17633,6 +17645,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();
@@ -17650,16 +17663,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._group.on('dragstart', this._onDragStart.bind(this));
         this._group.on('dragend', this._onDragEnd.bind(this));
         this._cursor = null;
-        this._group.on('mouseenter', function () {
-            self._view.setHoveredElement(self);
-            if (!self._source.loading) {
-                self._showButtons();
-            }
-        });
-        this._group.on('mouseleave', function () {
-            self._view.setHoveredElement(null);
-            self._hideButtons();
-        });
+        this._group.on('mouseenter', this._onHoverStart.bind(this));
+        this._group.on('mouseleave', this._onHoverEnd.bind(this));
         this._group.on('mouseover', function () {
             if (self._source.draggable) {
                 self._view.setCursor(self._cursor || 'pointer');
@@ -17694,14 +17699,48 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this.createIndicators();
         this.setLoadingState(this._source.loading);
     }
+    SourceGroup.prototype._onHoverStart = function () {
+        this._hovered = true;
+        this._view.setHoveredElement(this);
+        if (!this._source.loading) {
+            this._showButtons();
+        }
+        this._group.draw();
+    };
+    SourceGroup.prototype._onHoverEnd = function () {
+        this._hovered = false;
+        this._manualHover = false;
+        this._view.setHoveredElement(null);
+        this._hideButtons();
+        this._group.draw();
+    };
     SourceGroup.prototype._onDragStart = function (element) {
         this._isDragged = true;
+        this._peaks.on('handler.view.mouseup', this.stopDrag.bind(this));
         this._layer.onSourcesGroupDragStart(element);
     };
     SourceGroup.prototype._onDragEnd = function (element) {
         this._isDragged = false;
+        this._peaks.off('handler.view.mouseup', this.stopDrag.bind(this));
+        this._manageManualHoverStop();
         this._layer.onSourcesGroupDragEnd(element);
     };
+    SourceGroup.prototype._manageManualHoverStop = function () {
+        if (!this._manualHover) {
+            return;
+        }
+        var pointer = this._view.getPointerPosition();
+        if (pointer) {
+            var absPos = this._group.absolutePosition();
+            var inside = pointer.x >= absPos.x && pointer.x <= absPos.x + this._width && pointer.y >= absPos.y && pointer.y <= absPos.y + this._height;
+            if (!inside) {
+                this.stopHover();
+            }
+        }
+    };
+    SourceGroup.prototype.isHovered = function () {
+        return this._hovered;
+    };
     SourceGroup.prototype.isActive = function () {
         return this._isDragged;
     };
@@ -17895,22 +17934,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();
                 }
             }
@@ -18081,6 +18128,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     SourceGroup.prototype.getSource = function () {
         return this._source;
     };
+    SourceGroup.prototype.startHover = function () {
+        this._manualHover = true;
+        this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
+    };
+    SourceGroup.prototype.stopHover = function () {
+        this._group.fire('mouseleave', { evt: new MouseEvent('mouseleave') }, true);
+    };
     SourceGroup.prototype.startDrag = function () {
         return this._group.startDrag();
     };
@@ -18094,7 +18148,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         return group.isAncestorOf(this._group);
     };
     SourceGroup.prototype.hideButKeepFocus = function () {
-        this._group.moveTo(this._view.getTempLayer());
+        this._group.moveTo(this._view.getTempGroup());
     };
     SourceGroup.prototype.getParent = function () {
         return this._group.getParent();
@@ -18249,7 +18303,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 +18316,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 +18329,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);
@@ -18785,6 +18839,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         volumeSliderGroup.add(volumeSliderLine);
         volumeSliderGroup.on('dragstart', function () {
             volumeText.visible(true);
+            self._peaks.emit('source.startVolumeChange', self._source);
         });
         volumeSliderGroup.on('dragmove', function () {
             var volume = self._getVolumeFromY(volumeSliderGroup.y());
@@ -18795,6 +18850,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         });
         volumeSliderGroup.on('dragend', function () {
             volumeText.visible(false);
+            self._peaks.emit('source.endVolumeChange', self._source);
         });
         volumeSliderGroup.on('mouseover', function () {
             self._cursor = 'ns-resize';
@@ -18883,18 +18939,28 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
     };
     SourcesLayer.prototype._onSourceUpdate = function (source) {
+        const sourceGroup = this._sourcesGroup[source.id];
+        const frameOffset = this._view.getFrameOffset();
+        const width = this._view.getWidth();
+        const frameStartTime = this._view.pixelsToTime(frameOffset);
+        const frameEndTime = this._view.pixelsToTime(frameOffset + width);
         var redraw = false;
-        var sourceGroup = this._sourcesGroup[source.id];
-        var frameOffset = this._view.getFrameOffset();
-        var width = this._view.getWidth();
-        var frameStartTime = this._view.pixelsToTime(frameOffset);
-        var frameEndTime = this._view.pixelsToTime(frameOffset + width);
+        var isSourceGroupHovered = false;
+        var isSourceGroupActive = false;
         if (sourceGroup) {
+            isSourceGroupHovered = sourceGroup.isHovered();
+            isSourceGroupActive = sourceGroup.isActive();
             this._destroySourceGroup(source);
             redraw = true;
         }
-        if (source.isVisible(frameStartTime, frameEndTime)) {
-            this._addSourceGroup(source);
+        if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupActive) {
+            const newSourceGroup = this._addSourceGroup(source);
+            if (isSourceGroupHovered) {
+                newSourceGroup.startHover();
+            }
+            if (isSourceGroupActive) {
+                newSourceGroup.startDrag();
+            }
             redraw = true;
         }
         if (redraw) {
@@ -18968,8 +19034,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();
     };
@@ -19666,7 +19732,7 @@ module.exports = function (Line, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.lines.add(): expected a Line object parameter');
         }
-        var line = new Line(this._peaks, Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id, options.position, options.indicatorType, options.indicatorText);
+        var line = new Line(this._peaks, Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id, options.position, options.indicatorType, options.indicatorText, options.locked);
         return line;
     };
     LineHandler.prototype.getLines = function () {
@@ -19733,6 +19799,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 +19989,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);
@@ -19934,14 +20001,6 @@ module.exports = function (Colors, EventEmitter, SegmentHandler, SourceHandler,
     Peaks.prototype.setCutMode = function () {
         this.emit('handler.view.cutmode');
     };
-    Peaks.prototype.setIndicatorType = function (linePosition, type) {
-        var lineId = this.view.getLineByPosition(linePosition).getId();
-        this.emit('lineIndicator.setType', lineId, type);
-    };
-    Peaks.prototype.setIndicatorText = function (linePosition, text) {
-        var lineId = this.view.getLineByPosition(linePosition).getId();
-        this.emit('lineIndicator.setText', lineId, text);
-    };
     Peaks.prototype.getVisibleSegments = function () {
         return this.view.getSegmentsGroup().getVisibleSegments();
     };
@@ -20022,12 +20081,18 @@ module.exports = function (Utils) {
         } else if (!Utils.isString(options.indicatorText)) {
             throw new TypeError('peaks.lines.' + context + ': indicatorText must be a string');
         }
+        if (Utils.isNullOrUndefined(options.locked)) {
+            options.locked = false;
+        } else if (!Utils.isBoolean(options.locked)) {
+            throw new TypeError('peaks.lines.' + context + ': locked must be a boolean');
+        }
     }
-    function Line(peaks, id, position, indicatorType, indicatorText) {
+    function Line(peaks, id, position, indicatorType, indicatorText, locked) {
         var opts = {
             position: position,
             indicatorType: indicatorType,
-            indicatorText: indicatorText
+            indicatorText: indicatorText,
+            locked: locked
         };
         validateLine(opts, 'add()');
         this._peaks = peaks;
@@ -20035,6 +20100,7 @@ module.exports = function (Utils) {
         this._position = opts.position;
         this._indicatorType = opts.indicatorType;
         this._indicatorText = opts.indicatorText;
+        this._locked = opts.locked;
     }
     Object.defineProperties(Line.prototype, {
         id: {
@@ -20049,9 +20115,6 @@ module.exports = function (Utils) {
                 return this._position;
             },
             set: function (pos) {
-                if (!Utils.isInteger(pos) || pos < 0) {
-                    throw new TypeError('peaks.lines.setPosition(): position must be a non-negative integer');
-                }
                 this._position = pos;
             }
         },
@@ -20066,33 +20129,27 @@ module.exports = function (Utils) {
             get: function () {
                 return this._indicatorText;
             }
+        },
+        locked: {
+            enumerable: true,
+            get: function () {
+                return this._locked;
+            }
         }
     });
     Line.prototype.update = function (options) {
         var opts = {
             position: this.position,
             indicatorType: this.indicatorType,
-            indicatorText: this.indicatorText
+            indicatorText: this.indicatorText,
+            locked: this.locked
         };
         Utils.extend(opts, options);
-        validateLine(this._peaks, opts, 'update()');
-        this._startTime = opts.startTime;
-        this._endTime = opts.endTime;
-        this._duration = opts.duration;
-        this._labelText = opts.labelText;
-        this._color = opts.color;
-        this._textColor = opts.textColor;
-        this._handleTextColor = opts.handleTextColor;
-        this._hoverColor = opts.hoverColor;
-        this._warningColor = opts.warningColor;
-        this._opacity = opts.opacity;
-        this._borderColor = opts.borderColor;
-        this._borderWidth = opts.borderWidth;
-        this._borderRadius = opts.borderRadius;
-        this._editable = opts.editable;
-        this._allowDeletion = opts.allowDeletion;
-        this._line = opts.line;
-        this._indicators = opts.indicators;
+        validateLine(opts, 'update()');
+        this._position = opts.position;
+        this._indicatorType = opts.indicatorType;
+        this._indicatorText = opts.indicatorText;
+        this._locked = opts.locked;
         this._peaks.emit('model.line.update', this);
     };
     Line.prototype.toSerializable = function () {
@@ -20507,13 +20564,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 +20731,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 +20747,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 +20802,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 +20979,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 +21006,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 +21362,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 +21414,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 +21583,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 +21727,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 +21778,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 +21793,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 +21858,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;
@@ -22023,7 +22127,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._timelineLength = 0;
         self._timeToPixelsScale = self._options.initialZoomLevel;
         self._timeToPixelsMinScale = self._options.minScale;
-        self._resizeTimeoutId = null;
         self._isFocused = false;
         self._isClickable = true;
         self._width = container.clientWidth;
@@ -22051,8 +22154,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             width: self._width - self._peaks.options.lineIndicatorWidth,
             height: self._height
         });
-        self._tempLayer = new Konva.Layer();
-        self._stage.add(self._tempLayer);
+        self._tempGroup = new Konva.Group({ listening: false });
         self._width -= self._peaks.options.lineIndicatorWidth;
         self._axis = new Axis(self._peaks, self, {
             axisGridlineColor: this._options.axisGridlineColor,
@@ -22061,6 +22163,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._axis.addBackToStage(self._stage);
         self._sourcesLayer = new SourcesLayer(peaks, self, true);
         self._sourcesLayer.addToStage(self._stage);
+        self._sourcesLayer.add(self._tempGroup);
         self._axis.addFrontToStage(self._stage);
         self._playheadLayer = new PlayheadLayer(peaks, self, self._sourcesLayer, self._options.showPlayheadTime);
         self._playheadLayer.addToStage(self._stage);
@@ -22165,12 +22268,13 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     }
     View.prototype._mouseUp = function () {
         this.clearScrollingInterval();
+        this._peaks.emit('handler.view.mouseup');
     };
     View.prototype.setClickable = function (clickable) {
         this._isClickable = clickable;
     };
-    View.prototype.getTempLayer = function () {
-        return this._tempLayer;
+    View.prototype.getTempGroup = function () {
+        return this._tempGroup;
     };
     View.prototype.getSelectedElements = function () {
         return Object.values(this._modeLayer.getSelectedElements());
@@ -22540,10 +22644,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         return this._sourcesLayer.getFullHeight();
     };
     View.prototype.destroy = function () {
-        if (this._resizeTimeoutId) {
-            clearTimeout(this._resizeTimeoutId);
-            this._resizeTimeoutId = null;
-        }
         this._peaks.off('player_time_update', this._onTimeUpdate);
         this._peaks.off('user_seek', this._onSeek);
         this._peaks.off('player_play', this._onPlay);