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

package/src/components/line-group.js

@@ -49,6 +49,10 @@ define([
     return this._line.id;
   };
 
+  LineGroup.prototype.isLocked = function() {
+    return this._line.locked;
+  };
+
   LineGroup.prototype.getLine = function() {
     return this._line;
   };

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());
 
@@ -335,19 +333,27 @@ define([
       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();
 
+      const targetLineGroup = this._lineGroupsByPosition[linePos[0]];
+
       if (
         !Utils.isNullOrUndefined(mouseX)
         && linePos[0] !== position
-        && !this._lineGroupsByPosition[linePos[0]].isSegmentsLine()
+        && !targetLineGroup.isLocked()
+        && !targetLineGroup.isSegmentsLine()
       ) {
         var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
         var sourceDuration = Utils.roundTime(endTime - startTime);
@@ -450,16 +456,17 @@ define([
     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) {
@@ -569,9 +576,9 @@ 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;
     for (var id in this._lineGroupsById) {
       if (Utils.objectHasProperty(this._lineGroupsById, id)) {

package/src/components/line-indicator.js

@@ -77,6 +77,8 @@ define([
     this._stage.height(this._height);
 
     this._separatingLine.points([this._width, 0, this._width, this._height]);
+
+    this.refreshIndicators();
   };
 
   LineIndicator.prototype._createIndicator = function(lineGroup, type, text) {
@@ -297,6 +299,9 @@ define([
       }
     }
 
+    if (anyChange) {
+      this.draw();
+    }
     return anyChange;
   };
 

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 = [];
@@ -78,17 +79,8 @@ define([
     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) {
@@ -133,16 +125,60 @@ define([
     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;
   };
@@ -419,13 +455,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 +481,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();
         }
       }
@@ -654,6 +702,15 @@ define([
     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();
   };
@@ -671,7 +728,7 @@ define([
   };
 
   SourceGroup.prototype.hideButKeepFocus = function() {
-    this._group.moveTo(this._view.getTempLayer());
+    this._group.moveTo(this._view.getTempGroup());
   };
 
   SourceGroup.prototype.getParent = function() {
@@ -874,7 +931,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 +948,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 +965,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 {
@@ -1572,6 +1629,7 @@ define([
 
     volumeSliderGroup.on('dragstart', function() {
       volumeText.visible(true);
+      self._peaks.emit('source.startVolumeChange', self._source);
     });
 
     volumeSliderGroup.on('dragmove', function() {
@@ -1587,6 +1645,7 @@ define([
 
     volumeSliderGroup.on('dragend', function() {
       volumeText.visible(false);
+      self._peaks.emit('source.endVolumeChange', self._source);
     });
 
     volumeSliderGroup.on('mouseover', function() {

package/src/components/sources-layer.js

@@ -109,20 +109,31 @@ define([
   };
 
   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;
     }
 
@@ -220,8 +231,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/line-handler.js

@@ -68,7 +68,8 @@ define([
       Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id,
       options.position,
       options.indicatorType,
-      options.indicatorText
+      options.indicatorText,
+      options.locked
     );
 
     return line;

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);
   };
 
   /**
@@ -744,18 +749,6 @@ define([
     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()

package/src/models/line.js

@@ -29,6 +29,13 @@ define([
     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');
+    }
   }
 
   /**
@@ -44,11 +51,12 @@ define([
    * @param {String} indicatorText Text to display above the line indicator.
    */
 
-  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()');
@@ -58,6 +66,7 @@ define([
     this._position        = opts.position;
     this._indicatorType   = opts.indicatorType;
     this._indicatorText   = opts.indicatorText;
+    this._locked          = opts.locked;
   }
 
   Object.defineProperties(Line.prototype, {
@@ -74,9 +83,6 @@ define([
       },
 
       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;
       }
     },
@@ -91,6 +97,12 @@ define([
       get: function() {
         return this._indicatorText;
       }
+    },
+    locked: {
+      enumerable: true,
+      get: function() {
+        return this._locked;
+      }
     }
   });
 
@@ -98,30 +110,18 @@ define([
     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);
   };

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);
   };
 
   /**