@checksub_team/peaks_timeline 1.4.27 → 1.4.28

package/package.json

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

package/peaks.js

@@ -15146,7 +15146,7 @@ module.exports = function (Konva, Utils) {
     return Line;
 }(_dereq_('konva'), _dereq_('./utils'));
 },{"./utils":110,"konva":43}],92:[function(_dereq_,module,exports){
-module.exports = function (Line, LineIndicator, Utils) {
+module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
     'use strict';
     function Lines(peaks, view, layer) {
         this._peaks = peaks;
@@ -15157,12 +15157,42 @@ module.exports = function (Line, LineIndicator, Utils) {
         this._autoAddToLayer = false;
         this._areSourceInteractionsAllowed = true;
         this._areSegmentInteractionsAllowed = true;
+        this._segmentsGroups = {};
         this._lineId = 0;
         this._lineIndicator = new LineIndicator(peaks, view, document.getElementById('line-indicator-container'));
         this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
         this._peaks.on('line.add', this._onLineAdd.bind(this));
         this._peaks.on('line.remove', this._onLineRemove.bind(this));
+        this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
+        this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
+        this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
+        this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
+        this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
     }
+    Lines.prototype._onSegmentsAdd = function (segments) {
+        var self = this;
+        segments.forEach(function (segment) {
+            if (!self._segmentsGroups[segment.line]) {
+                self._segmentsGroups[segment.line] = new SegmentsGroup(self._peaks, self._view, true);
+            }
+            self._segmentsGroups[segment.line].onSegmentsAdd([segment]);
+        });
+    };
+    Lines.prototype._onSegmentsUpdate = function (segment) {
+        this._segmentsGroups[segment.line].onSegmentsUpdate(segment);
+    };
+    Lines.prototype._onSegmentUpdated = function (segment) {
+        this._segmentsGroups[segment.line].onSegmentUpdated();
+    };
+    Lines.prototype._onSegmentsRemove = function (segments) {
+        var self = this;
+        segments.forEach(function (segment) {
+            self._segmentsGroups[segment.line].onSegmentsRemove([segment]);
+        });
+    };
+    Lines.prototype._onSegmentsRemoveAll = function (lineId) {
+        this._segmentsGroups[lineId].onSegmentsRemoveAll();
+    };
     Lines.prototype._onLineHeightChanged = function (position) {
         this._updateLinesPosition(position);
         this._view.updateTimeline();
@@ -15195,11 +15225,10 @@ module.exports = function (Line, LineIndicator, Utils) {
         this._linesByPosition[position].addSourceGroup(sourceGroup);
         this._linesBySourceId[sourceGroup.getSource().id] = this._linesByPosition[position];
     };
-    Lines.prototype.addSegments = function (segmentsGroup, position) {
+    Lines.prototype.addSegments = function (lineId, position) {
         this._createLine(position);
         this._linesByPosition[position].allowInteractions(this._areSegmentInteractionsAllowed);
-        this._linesByPosition[position].addSegments(segmentsGroup);
-        this._segmentsLine = this._linesByPosition[position];
+        this._linesByPosition[position].addSegments(this._segmentsGroups[lineId]);
         this._setInteractions(position);
         this._updateLinesPosition(position);
     };
@@ -15232,6 +15261,9 @@ module.exports = function (Line, LineIndicator, Utils) {
         }
         return positions;
     };
+    Lines.prototype.getSegmentsGroups = function () {
+        return this._segmentsGroups;
+    };
     Lines.prototype.addToLayer = function (layer) {
         for (var position in this._linesByPosition) {
             if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -15364,8 +15396,10 @@ module.exports = function (Line, LineIndicator, Utils) {
         this._linesByPosition = newLinesByPosition;
     };
     Lines.prototype.updateSegments = function (frameStartTime, frameEndTime) {
-        if (this._segmentsLine) {
-            this._segmentsLine.updateSegments(frameStartTime, frameEndTime);
+        for (var lineId in this._segmentsGroups) {
+            if (Utils.objectHasProperty(this._segmentsGroups, lineId)) {
+                this._segmentsGroups[lineId].updateSegments(frameStartTime, frameEndTime);
+            }
         }
     };
     Lines.prototype.manageCollision = function (source, newStartX, newEndX) {
@@ -15401,8 +15435,8 @@ module.exports = function (Line, LineIndicator, Utils) {
         }
     };
     return Lines;
-}(_dereq_('./line'), _dereq_('./line-indicator'), _dereq_('./utils'));
-},{"./line":91,"./line-indicator":90,"./utils":110}],93:[function(_dereq_,module,exports){
+}(_dereq_('./segments-group'), _dereq_('./line'), _dereq_('./line-indicator'), _dereq_('./utils'));
+},{"./line":91,"./line-indicator":90,"./segments-group":102,"./utils":110}],93:[function(_dereq_,module,exports){
 module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSources, KeyboardHandler, Player, MarkerFactories, TimelineZoomView, Utils) {
     'use strict';
     function Peaks() {
@@ -15579,8 +15613,11 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.hideSource = function (sourceId) {
         this.sources.hideById(sourceId);
     };
-    Peaks.prototype.showSegments = function (position) {
-        this.segments.addSegmentsToPosition(position);
+    Peaks.prototype.showSegments = function (lineId, position) {
+        this.segments.addSegmentsToPosition(lineId, position);
+    };
+    Peaks.prototype.destroySegment = function (segmentId) {
+        this.segments.removeById(segmentId);
     };
     Peaks.prototype.setDefaultMode = function () {
         this.emit('default_mode');
@@ -15604,7 +15641,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
         return this.view.selectSourceById(sourceId);
     };
     Peaks.prototype.deselectSource = function () {
-        return this.view.deselectSource();
+        return this.view.deselectElement();
     };
     Peaks.prototype._addWindowResizeHandler = function () {
         this._onResize = this._onResize.bind(this);
@@ -15693,21 +15730,29 @@ module.exports = function (Utils, SourceGroup, Konva) {
     ModeLayer.prototype.addToStage = function (stage) {
         stage.add(this._layer);
     };
-    ModeLayer.prototype.selectSourceGroup = function (sourceGroup, notify) {
-        this.deselectSourceGroup();
-        if (sourceGroup) {
-            this._selectedElement = sourceGroup;
+    ModeLayer.prototype.selectElement = function (element, notify) {
+        this.deselectElement(notify);
+        if (element) {
+            this._selectedElement = element;
             this._selectedElement.setSelected(true);
             if (notify) {
-                this._peaks.emit('source.selected', this._selectedElement.getSource());
+                if (element instanceof SourceGroup) {
+                    this._peaks.emit('source.selected', this._selectedElement.getSource());
+                } else {
+                    this._peaks.emit('segment.selected', this._selectedElement.getSegment());
+                }
             }
         }
     };
-    ModeLayer.prototype.deselectSourceGroup = function (notify) {
+    ModeLayer.prototype.deselectElement = function (notify) {
         if (this._selectedElement) {
             this._selectedElement.setSelected(false);
             if (notify) {
-                this._peaks.emit('source.deselected', this._selectedElement.getSource());
+                if (this._selectedElement instanceof SourceGroup) {
+                    this._peaks.emit('source.deselected', this._selectedElement.getSource());
+                } else {
+                    this._peaks.emit('segment.deselected', this._selectedElement.getSegment());
+                }
             }
             this._selectedElement = null;
         }
@@ -15763,14 +15808,22 @@ module.exports = function (Utils, SourceGroup, Konva) {
     ModeLayer.prototype._onMouseClickInDefaultMode = function () {
         var hoveredElement = this._view.getHoveredElement();
         if (hoveredElement) {
-            this.selectSourceGroup(hoveredElement, true);
+            this.selectElement(hoveredElement, true);
         } else {
-            this.deselectSourceGroup(true);
+            this.deselectElement(true);
         }
     };
     ModeLayer.prototype._onKeyboardDelete = function () {
         if (this._selectedElement) {
-            this._peaks.destroySource(this._selectedElement.getSource().id);
+            var selectedElement = this._selectedElement;
+            this.deselectElement(true);
+            if (selectedElement instanceof SourceGroup) {
+                this._peaks.destroySource(selectedElement.getSource().id);
+            } else {
+                if (selectedElement.getSegment().allowDeletion) {
+                    this._peaks.destroySegment(selectedElement.getSegment().id);
+                }
+            }
         }
     };
     ModeLayer.prototype._onMouseEnterInCutMode = function () {
@@ -15888,7 +15941,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
             this._peaks.off('keyboard.delete', this._onKeyboardDelete);
             break;
         }
-        this.deselectSourceGroup(true);
+        this.deselectElement(true);
         switch (mode) {
         case 'cut':
             this._stage.on('mouseover', this._onMouseEnterInCutMode);
@@ -16110,18 +16163,18 @@ module.exports = function (Utils) {
 module.exports = function (Utils, Konva) {
     'use strict';
     var HANDLE_RADIUS = 10;
-    function PlayheadLayer(peaks, view, segmentsGroup, showTime) {
+    function PlayheadLayer(peaks, view, lines, showTime) {
         this._peaks = peaks;
         this._view = view;
-        this._segmentsGroup = segmentsGroup;
+        this._lines = lines;
         this._playheadPixel = 0;
         this._playheadLineAnimation = null;
         this._playheadVisible = false;
         this._playheadColor = peaks.options.playheadColor;
         this._playheadTextColor = peaks.options.playheadTextColor;
         this._playheadLayer = new Konva.Layer();
-        this._activeSegment = null;
-        this._lastActiveSegmentId = null;
+        this._activeSegments = {};
+        this._lastActiveSegments = {};
         this._createPlayhead(this._playheadColor);
         if (showTime) {
             this._createPlayheadText(this._playheadTextColor);
@@ -16132,20 +16185,20 @@ module.exports = function (Utils, Konva) {
         this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
     }
     PlayheadLayer.prototype._onSegmentsRemoveAll = function () {
-        this._activeSegment = null;
-        this._lastActiveSegmentId = null;
+        this._activeSegments = {};
+        this._lastActiveSegments = {};
     };
     PlayheadLayer.prototype._onSegmentsRemove = function (segments) {
-        if (this._activeSegment || this._lastActiveSegmentId) {
-            var activeSegmentId = this._activeSegment ? this._activeSegment.id : null;
-            var lastActiveSegmentId = this._lastActiveSegmentId ? this._lastActiveSegmentId.id : null;
+        if (this._activeSegments || this._lastActiveSegments) {
             for (var id in segments) {
                 if (Utils.objectHasProperty(segments, id)) {
+                    var activeSegmentId = this._activeSegments[segments[id].line] ? this._activeSegments[segments[id].line].id : null;
+                    var lastActiveSegmentId = this._lastActiveSegments[segments[id].line] ? this._lastActiveSegments[segments[id].line].id : null;
                     if (segments[id].id === activeSegmentId) {
-                        this._activeSegment = null;
+                        delete this._activeSegments[segments[id].line];
                     }
                     if (segments[id].id === lastActiveSegmentId) {
-                        this._lastActiveSegmentId = null;
+                        delete this._lastActiveSegments[segments[id].line];
                     }
                 }
             }
@@ -16263,16 +16316,21 @@ module.exports = function (Utils, Konva) {
             }
             var playheadPositionDiff = this._playheadGroup.x() - playheadX;
             if (playheadPositionDiff) {
-                var newActiveSegment = this._segmentsGroup.getActiveSegment(this._view.pixelsToTime(playheadX + frameOffset), null, true);
-                if (newActiveSegment !== this._activeSegment) {
-                    if (this._activeSegment) {
-                        this._peaks.emit('segments.exit', this._activeSegment);
-                        this._activeSegment = null;
-                    }
-                    if (newActiveSegment) {
-                        this._peaks.emit('segments.enter', newActiveSegment);
-                        this._activeSegment = newActiveSegment;
-                        this._lastActiveSegment = this._activeSegment;
+                var segmentsGroup = this._lines.getSegmentsGroups();
+                for (var lineId in segmentsGroup) {
+                    if (Utils.objectHasProperty(segmentsGroup, lineId)) {
+                        var newActiveSegment = segmentsGroup[lineId].getActiveSegment(this._view.pixelsToTime(playheadX + frameOffset), null, true);
+                        if (newActiveSegment !== this._activeSegments[lineId]) {
+                            if (this._activeSegments[lineId]) {
+                                this._peaks.emit('segments.exit', this._activeSegments[lineId]);
+                                delete this._activeSegments[lineId];
+                            }
+                            if (newActiveSegment) {
+                                this._peaks.emit('segments.enter', newActiveSegment);
+                                this._activeSegments[lineId] = newActiveSegment;
+                                this._lastActiveSegments[lineId] = this._activeSegments[lineId];
+                            }
+                        }
                     }
                 }
             }
@@ -16446,6 +16504,7 @@ module.exports = function (Konva, SegmentMarker) {
         this._startMarker = null;
         this._endMarker = null;
         this._rectangle = null;
+        this._isSelected = false;
         this._segmentHeight = this._peaks.options.segmentHeight;
         this._rectangle = new Konva.Rect({
             x: this._view.timeToPixels(this._segment.startTime),
@@ -16604,12 +16663,14 @@ module.exports = function (Konva, SegmentMarker) {
     };
     SegmentShape.prototype._onMouseEnter = function () {
         this._view.setCursor('pointer');
-        this._rectangle.fill(this._segment.selectedColor + Math.round(this._segment.opacity * 255).toString(16));
+        this._view.setHoveredElement(this);
+        this._rectangle.fill(this._segment.activeColor + Math.round(this._segment.opacity * 255).toString(16));
         this._view.drawSourcesLayer();
         this._peaks.emit('segments.mouseenter', this._segment);
     };
     SegmentShape.prototype._onMouseLeave = function () {
         this._view.setCursor('default');
+        this._view.setHoveredElement(null);
         this._rectangle.fill(this._segment.color + Math.round(this._segment.opacity * 255).toString(16));
         this._view.drawSourcesLayer();
         this._peaks.emit('segments.mouseleave', this._segment);
@@ -16641,6 +16702,9 @@ module.exports = function (Konva, SegmentMarker) {
         var startMarker = segmentMarker.isStartMarker();
         this._peaks.emit('segments.dragend', this._segment, startMarker);
     };
+    SegmentShape.prototype.setSelected = function (isSelected) {
+        this._isSelected = isSelected;
+    };
     SegmentShape.prototype.fitToView = function () {
         if (this._startMarker) {
             this._startMarker.fitToView();
@@ -16693,8 +16757,11 @@ module.exports = function (Utils) {
         } else if (!Utils.isString(options.labelText)) {
             throw new TypeError('peaks.segments.' + context + ': labelText must be a string');
         }
+        if (!Utils.isInteger(options.line)) {
+            throw new TypeError('peaks.segments.' + context + ': line must be an integer');
+        }
     }
-    function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, opacity, editable) {
+    function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, opacity, editable, allowDeletion, line) {
         var opts = {
             startTime: startTime,
             endTime: endTime,
@@ -16703,7 +16770,9 @@ module.exports = function (Utils) {
             textColor: textColor,
             handleTextColor: handleTextColor,
             opacity: opacity,
-            editable: editable
+            editable: editable,
+            allowDeletion: allowDeletion,
+            line: line
         };
         validateSegment(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -16712,11 +16781,13 @@ module.exports = function (Utils) {
         this._endTime = opts.endTime;
         this._labelText = opts.labelText;
         this._color = opts.color;
-        this._selectedColor = Utils.shadeColor(color, 20);
+        this._activeColor = Utils.shadeColor(color, 20);
         this._textColor = opts.textColor;
         this._handleTextColor = opts.handleTextColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
+        this._allowDeletion = opts.allowDeletion;
+        this._line = opts.line;
         this._minSize = peaks.options.minSegmentSize;
     }
     Object.defineProperties(Segment.prototype, {
@@ -16756,10 +16827,10 @@ module.exports = function (Utils) {
                 return this._color;
             }
         },
-        selectedColor: {
+        activeColor: {
             enumerable: true,
             get: function () {
-                return this._selectedColor;
+                return this._activeColor;
             }
         },
         textColor: {
@@ -16786,6 +16857,18 @@ module.exports = function (Utils) {
                 return this._editable;
             }
         },
+        allowDeletion: {
+            enumerable: true,
+            get: function () {
+                return this._allowDeletion;
+            }
+        },
+        line: {
+            enumerable: true,
+            get: function () {
+                return this._line;
+            }
+        },
         minSize: {
             enumerable: true,
             get: function () {
@@ -16802,7 +16885,9 @@ module.exports = function (Utils) {
             textColor: this.textColor,
             handleTextColor: this.handleTextColor,
             opacity: this.opacity,
-            editable: this.editable
+            editable: this.editable,
+            allowDeletion: this.allowDeletion,
+            line: this.line
         };
         Utils.extend(opts, options);
         validateSegment(this._peaks, opts, 'update()');
@@ -16814,6 +16899,8 @@ module.exports = function (Utils) {
         this._handleTextColor = opts.handleTextColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
+        this._allowDeletion = opts.allowDeletion;
+        this._line = opts.line;
         this._peaks.emit('segment.updated', this);
     };
     Segment.prototype.isVisible = function (startTime, endTime) {
@@ -16835,11 +16922,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._group = new Konva.Group();
         this._updatedSegments = [];
         this._isMagnetized = false;
-        this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
-        this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
-        this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
-        this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
-        this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
         this._peaks.on('segments.setMagnetizing', this.setMagnetizing.bind(this));
     }
     SegmentsGroup.prototype.addToGroup = function (group) {
@@ -16882,7 +16964,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         } while (nextSegmentId);
         return activeSegment;
     };
-    SegmentsGroup.prototype._onSegmentsUpdate = function (segment) {
+    SegmentsGroup.prototype.onSegmentsUpdate = function (segment) {
         if (this._segments[segment.id]) {
             var redraw = false;
             var segmentShape = this._segmentShapes[segment.id];
@@ -16905,11 +16987,11 @@ module.exports = function (SegmentShape, Utils, Konva) {
             }
         }
     };
-    SegmentsGroup.prototype._onSegmentUpdated = function () {
+    SegmentsGroup.prototype.onSegmentUpdated = function () {
         this._peaks.emit('segments.updated', this._updatedSegments);
         this._updatedSegments = [];
     };
-    SegmentsGroup.prototype._onSegmentsAdd = function (segments) {
+    SegmentsGroup.prototype.onSegmentsAdd = function (segments) {
         var self = this;
         var frameOffset = self._view.getFrameOffset();
         var width = self._view.getWidth();
@@ -16920,7 +17002,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         });
         self.updateSegments(frameStartTime, frameEndTime);
     };
-    SegmentsGroup.prototype._onSegmentsRemove = function (segments) {
+    SegmentsGroup.prototype.onSegmentsRemove = function (segments) {
         var self = this;
         segments.forEach(function (segment) {
             var index = self._updatedSegments.indexOf(segment);
@@ -16932,7 +17014,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         });
         this._draw();
     };
-    SegmentsGroup.prototype._onSegmentsRemoveAll = function () {
+    SegmentsGroup.prototype.onSegmentsRemoveAll = function () {
         this._group.removeChildren();
         this._firstSegmentId = null;
         this._segments = {};
@@ -17013,7 +17095,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._updateSegments(segment, marker);
     };
     SegmentsGroup.prototype.updateSegments = function (startTime, endTime) {
-        var segments = this._peaks.segments.find(startTime, endTime);
+        var segments = this.find(startTime, endTime);
         var count = segments.length;
         segments.forEach(this._updateSegment.bind(this));
         count += this._removeInvisibleSegments(startTime, endTime);
@@ -17021,6 +17103,23 @@ module.exports = function (SegmentShape, Utils, Konva) {
             this._draw();
         }
     };
+    SegmentsGroup.prototype.find = function (startTime, endTime) {
+        var currentSegment = null;
+        var visibleSegments = [];
+        do {
+            if (!currentSegment) {
+                currentSegment = this._segments[this._firstSegmentId];
+            } else {
+                currentSegment = this._segments[currentSegment.nextSegmentId];
+            }
+            if (currentSegment.segment.isVisible(startTime, endTime)) {
+                visibleSegments.push(currentSegment.segment);
+            } else if (visibleSegments.length) {
+                break;
+            }
+        } while (currentSegment.nextSegmentId);
+        return visibleSegments;
+    };
     SegmentsGroup.prototype._draw = function () {
         this._view.drawSourcesLayer();
     };
@@ -17265,11 +17364,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         return endsLater || startsEarlier;
     };
     SegmentsGroup.prototype.destroy = function () {
-        this._peaks.off('segment.updated', this._onSegmentsUpdate);
-        this._peaks.off('segments.add', this._onSegmentsAdd);
-        this._peaks.off('segments.remove', this._onSegmentsRemove);
-        this._peaks.off('segments.remove_all', this._onSegmentsRemoveAll);
-        this._peaks.off('segments.dragged', this._onSegmentsDragged);
+        this._peaks.off('segments.setMagnetizing', this.setMagnetizing);
     };
     SegmentsGroup.prototype.fitToView = function () {
         for (var segmentId in this._segmentShapes) {
@@ -18552,7 +18647,7 @@ module.exports = function (Utils) {
     return Source;
 }(_dereq_('./utils'));
 },{"./utils":110}],105:[function(_dereq_,module,exports){
-module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Utils, Invoker, Konva) {
+module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Konva) {
     'use strict';
     function SourcesLayer(peaks, view, allowEditing) {
         this._peaks = peaks;
@@ -18563,7 +18658,6 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         this._dataRetriever = new DataRetriever(peaks);
         this._lines = new Lines(peaks, view, this);
         this._lines.addToLayer(this);
-        this._segmentsGroup = new SegmentsGroup(peaks, view, true);
         this._loadedData = {};
         this._debouncedRescale = new Invoker().debounce(this._rescale, 150);
         this._peaks.on('sources.add', this._onSourcesAdd.bind(this));
@@ -18582,8 +18676,8 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
     SourcesLayer.prototype.setLoadedData = function (id, data) {
         this._loadedData[id] = data;
     };
-    SourcesLayer.prototype.getSegmentsGroup = function () {
-        return this._segmentsGroup;
+    SourcesLayer.prototype.getSegmentsGroups = function () {
+        return this._lines.getSegmentsGroups();
     };
     SourcesLayer.prototype.add = function (element) {
         this._layer.add(element);
@@ -18703,8 +18797,8 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
     SourcesLayer.prototype._onSourcesRefresh = function () {
         this._layer.draw();
     };
-    SourcesLayer.prototype._onSegmentsShow = function (position) {
-        this._lines.addSegments(this._segmentsGroup, position);
+    SourcesLayer.prototype._onSegmentsShow = function (lineId, position) {
+        this._lines.addSegments(lineId, position);
         this._view.updateTimelineLength();
         this._layer.draw();
     };
@@ -18898,8 +18992,8 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         return this._lines.linesLength();
     };
     return SourcesLayer;
-}(_dereq_('./source-group'), _dereq_('./segments-group'), _dereq_('./lines'), _dereq_('./data-retriever'), _dereq_('./utils'), _dereq_('./invoker'), _dereq_('konva'));
-},{"./data-retriever":85,"./invoker":88,"./lines":92,"./segments-group":102,"./source-group":103,"./utils":110,"konva":43}],106:[function(_dereq_,module,exports){
+}(_dereq_('./source-group'), _dereq_('./lines'), _dereq_('./data-retriever'), _dereq_('./utils'), _dereq_('./invoker'), _dereq_('konva'));
+},{"./data-retriever":85,"./invoker":88,"./lines":92,"./source-group":103,"./utils":110,"konva":43}],106:[function(_dereq_,module,exports){
 module.exports = function (Utils, Konva) {
     'use strict';
     var LEFT_PADDING = 4;
@@ -19083,14 +19177,14 @@ module.exports = function (Colors, Segment, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
         }
-        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.opacity || 1, true);
+        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.opacity || 1, true, options.allowDeletion || false, options.line);
         return segment;
     };
     TimelineSegments.prototype.getSegments = function () {
         return this._segments;
     };
-    TimelineSegments.prototype.addSegmentsToPosition = function (position) {
-        this._peaks.emit('segments.show', position);
+    TimelineSegments.prototype.addSegmentsToPosition = function (lineId, position) {
+        this._peaks.emit('segments.show', lineId, position);
     };
     TimelineSegments.prototype.getSegment = function (id) {
         return this._segmentsById[id] || null;
@@ -19181,10 +19275,10 @@ module.exports = function (Colors, Segment, Utils) {
         }
         return this._removeSegments(fnFilter);
     };
-    TimelineSegments.prototype.removeAll = function () {
+    TimelineSegments.prototype.removeAll = function (lineId) {
         this._segments = [];
         this._segmentsById = {};
-        this._peaks.emit('segments.remove_all');
+        this._peaks.emit('segments.remove_all', lineId);
     };
     return TimelineSegments;
 }(_dereq_('colors.css'), _dereq_('./segment'), _dereq_('./utils'));
@@ -19428,7 +19522,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._sourcesLayer = new SourcesLayer(peaks, self, true);
         self._sourcesLayer.addToStage(self._stage);
         self._axis.addFrontToStage(self._stage);
-        self._playheadLayer = new PlayheadLayer(peaks, self, self._sourcesLayer.getSegmentsGroup(), self._options.showPlayheadTime);
+        self._playheadLayer = new PlayheadLayer(peaks, self, self._sourcesLayer, self._options.showPlayheadTime);
         self._playheadLayer.addToStage(self._stage);
         var time = self._peaks.player.getCurrentTime();
         self._syncPlayhead(time);
@@ -19576,11 +19670,11 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     TimelineZoomView.prototype.selectSourceById = function (sourceId) {
         var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
         if (sourceGroup) {
-            this._modeLayer.selectSourceGroup(sourceGroup, false);
+            this._modeLayer.selectElement(sourceGroup, false);
         }
     };
-    TimelineZoomView.prototype.deselectSource = function () {
-        this._modeLayer.deselectSourceGroup(false);
+    TimelineZoomView.prototype.deselectElement = function () {
+        this._modeLayer.deselectElement(false);
     };
     TimelineZoomView.prototype.isListening = function () {
         return this._stage.listening();

package/src/lines.js

@@ -7,10 +7,12 @@
  */
 
 define([
+  './segments-group',
   './line',
   './line-indicator',
   './utils'
 ], function(
+    SegmentsGroup,
     Line,
     LineIndicator,
     Utils) {
@@ -26,6 +28,8 @@ define([
     this._areSourceInteractionsAllowed = true;
     this._areSegmentInteractionsAllowed = true;
 
+    this._segmentsGroups = {};
+
     this._lineId = 0;
 
     this._lineIndicator = new LineIndicator(
@@ -37,8 +41,46 @@ define([
     this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
     this._peaks.on('line.add', this._onLineAdd.bind(this));
     this._peaks.on('line.remove', this._onLineRemove.bind(this));
+
+    this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
+    this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
+    this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
+    this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
+    this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
   }
 
+  Lines.prototype._onSegmentsAdd = function(segments) {
+    var self = this;
+
+    segments.forEach(function(segment) {
+      if (!self._segmentsGroups[segment.line]) {
+        self._segmentsGroups[segment.line] = new SegmentsGroup(self._peaks, self._view, true);
+      }
+
+      self._segmentsGroups[segment.line].onSegmentsAdd([segment]);
+    });
+  };
+
+  Lines.prototype._onSegmentsUpdate = function(segment) {
+    this._segmentsGroups[segment.line].onSegmentsUpdate(segment);
+  };
+
+  Lines.prototype._onSegmentUpdated = function(segment) {
+    this._segmentsGroups[segment.line].onSegmentUpdated();
+  };
+
+  Lines.prototype._onSegmentsRemove = function(segments) {
+    var self = this;
+
+    segments.forEach(function(segment) {
+      self._segmentsGroups[segment.line].onSegmentsRemove([segment]);
+    });
+  };
+
+  Lines.prototype._onSegmentsRemoveAll = function(lineId) {
+    this._segmentsGroups[lineId].onSegmentsRemoveAll();
+  };
+
   Lines.prototype._onLineHeightChanged = function(position) {
     this._updateLinesPosition(position);
     this._view.updateTimeline();
@@ -78,12 +120,11 @@ define([
     this._linesBySourceId[sourceGroup.getSource().id] = this._linesByPosition[position];
   };
 
-  Lines.prototype.addSegments = function(segmentsGroup, position) {
+  Lines.prototype.addSegments = function(lineId, position) {
     this._createLine(position);
 
     this._linesByPosition[position].allowInteractions(this._areSegmentInteractionsAllowed);
-    this._linesByPosition[position].addSegments(segmentsGroup);
-    this._segmentsLine = this._linesByPosition[position];
+    this._linesByPosition[position].addSegments(this._segmentsGroups[lineId]);
 
     this._setInteractions(position);
 
@@ -130,6 +171,10 @@ define([
     return positions;
   };
 
+  Lines.prototype.getSegmentsGroups = function() {
+    return this._segmentsGroups;
+  };
+
   Lines.prototype.addToLayer = function(layer) {
     for (var position in this._linesByPosition) {
       if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -302,8 +347,10 @@ define([
   };
 
   Lines.prototype.updateSegments = function(frameStartTime, frameEndTime) {
-    if (this._segmentsLine) {
-      this._segmentsLine.updateSegments(frameStartTime, frameEndTime);
+    for (var lineId in this._segmentsGroups) {
+      if (Utils.objectHasProperty(this._segmentsGroups, lineId)) {
+        this._segmentsGroups[lineId].updateSegments(frameStartTime, frameEndTime);
+      }
     }
   };
 

package/src/main.js

@@ -596,8 +596,18 @@ define([
     this.sources.hideById(sourceId);
   };
 
-  Peaks.prototype.showSegments = function(position) {
-    this.segments.addSegmentsToPosition(position);
+  Peaks.prototype.showSegments = function(lineId, position) {
+    this.segments.addSegmentsToPosition(lineId, position);
+  };
+
+  /**
+   * Destroy a segment from the {@link Peaks} instance.
+   *
+   * @param {String} segmentId
+   */
+
+   Peaks.prototype.destroySegment = function(segmentId) {
+    this.segments.removeById(segmentId);
   };
 
   Peaks.prototype.setDefaultMode = function() {
@@ -635,7 +645,7 @@ define([
 
   Peaks.prototype.deselectSource = function() {
     return this.view
-            .deselectSource();
+            .deselectElement();
   };
 
   Peaks.prototype._addWindowResizeHandler = function() {

package/src/mode-layer.js

@@ -61,22 +61,32 @@ define([
     stage.add(this._layer);
   };
 
-  ModeLayer.prototype.selectSourceGroup = function(sourceGroup, notify) {
-    this.deselectSourceGroup();
-    if (sourceGroup) {
-      this._selectedElement = sourceGroup;
+  ModeLayer.prototype.selectElement = function(element, notify) {
+    this.deselectElement(notify);
+    if (element) {
+      this._selectedElement = element;
       this._selectedElement.setSelected(true);
       if (notify) {
-        this._peaks.emit('source.selected', this._selectedElement.getSource());
+        if (element instanceof SourceGroup) {
+          this._peaks.emit('source.selected', this._selectedElement.getSource());
+        }
+        else {
+          this._peaks.emit('segment.selected', this._selectedElement.getSegment());
+        }
       }
     }
   };
 
-  ModeLayer.prototype.deselectSourceGroup = function(notify) {
+  ModeLayer.prototype.deselectElement = function(notify) {
     if (this._selectedElement) {
       this._selectedElement.setSelected(false);
       if (notify) {
-        this._peaks.emit('source.deselected', this._selectedElement.getSource());
+        if (this._selectedElement instanceof SourceGroup) {
+          this._peaks.emit('source.deselected', this._selectedElement.getSource());
+        }
+        else {
+          this._peaks.emit('segment.deselected', this._selectedElement.getSegment());
+        }
       }
       this._selectedElement = null;
     }
@@ -140,16 +150,27 @@ define([
     var hoveredElement = this._view.getHoveredElement();
 
     if (hoveredElement) {
-      this.selectSourceGroup(hoveredElement, true);
+      this.selectElement(hoveredElement, true);
     }
     else {
-      this.deselectSourceGroup(true);
+      this.deselectElement(true);
     }
   };
 
   ModeLayer.prototype._onKeyboardDelete = function() {
     if (this._selectedElement) {
-      this._peaks.destroySource(this._selectedElement.getSource().id);
+      var selectedElement = this._selectedElement;
+
+      this.deselectElement(true);
+
+      if (selectedElement instanceof SourceGroup) {
+        this._peaks.destroySource(selectedElement.getSource().id);
+      }
+      else {
+        if (selectedElement.getSegment().allowDeletion) {
+          this._peaks.destroySegment(selectedElement.getSegment().id);
+        }
+      }
     }
   };
 
@@ -318,7 +339,7 @@ define([
         break;
     }
 
-    this.deselectSourceGroup(true);
+    this.deselectElement(true);
 
     // Set new mode
     switch (mode) {

package/src/playhead-layer.js

@@ -26,10 +26,10 @@ define([
    *   is shown next to the playhead.
    */
 
-  function PlayheadLayer(peaks, view, segmentsGroup, showTime) {
+  function PlayheadLayer(peaks, view, lines, showTime) {
     this._peaks = peaks;
     this._view = view;
-    this._segmentsGroup = segmentsGroup;
+    this._lines = lines;
     this._playheadPixel = 0;
     this._playheadLineAnimation = null;
     this._playheadVisible = false;
@@ -38,8 +38,8 @@ define([
 
     this._playheadLayer = new Konva.Layer();
 
-    this._activeSegment = null;
-    this._lastActiveSegmentId = null;
+    this._activeSegments = {};
+    this._lastActiveSegments = {};
 
     this._createPlayhead(this._playheadColor);
 
@@ -56,22 +56,26 @@ define([
   }
 
   PlayheadLayer.prototype._onSegmentsRemoveAll = function() {
-    this._activeSegment = null;
-    this._lastActiveSegmentId = null;
+    this._activeSegments = {};
+    this._lastActiveSegments = {};
   };
 
   PlayheadLayer.prototype._onSegmentsRemove = function(segments) {
-    if (this._activeSegment || this._lastActiveSegmentId) {
-      var activeSegmentId = this._activeSegment ? this._activeSegment.id : null;
-      var lastActiveSegmentId = this._lastActiveSegmentId ? this._lastActiveSegmentId.id : null;
-
+    if (this._activeSegments || this._lastActiveSegments) {
       for (var id in segments) {
         if (Utils.objectHasProperty(segments, id)) {
+          var activeSegmentId = this._activeSegments[segments[id].line] ?
+            this._activeSegments[segments[id].line].id :
+            null;
+          var lastActiveSegmentId = this._lastActiveSegments[segments[id].line] ?
+            this._lastActiveSegments[segments[id].line].id :
+            null;
+
           if (segments[id].id === activeSegmentId) {
-            this._activeSegment = null;
+            delete this._activeSegments[segments[id].line];
           }
           if (segments[id].id === lastActiveSegmentId) {
-            this._lastActiveSegmentId = null;
+            delete this._lastActiveSegments[segments[id].line];
           }
         }
       }
@@ -279,21 +283,27 @@ define([
       var playheadPositionDiff = this._playheadGroup.x() - playheadX;
 
       if (playheadPositionDiff) {
-        var newActiveSegment = this._segmentsGroup.getActiveSegment(
-          this._view.pixelsToTime(playheadX + frameOffset),
-          null,
-          true
-        );
+        var segmentsGroup = this._lines.getSegmentsGroups();
+
+        for (var lineId in segmentsGroup) {
+          if (Utils.objectHasProperty(segmentsGroup, lineId)) {
+            var newActiveSegment = segmentsGroup[lineId].getActiveSegment(
+              this._view.pixelsToTime(playheadX + frameOffset),
+              null,
+              true
+            );
 
-        if (newActiveSegment !== this._activeSegment) {
-          if (this._activeSegment) {
-            this._peaks.emit('segments.exit', this._activeSegment);
-            this._activeSegment = null;
-          }
-          if (newActiveSegment) {
-            this._peaks.emit('segments.enter', newActiveSegment);
-            this._activeSegment = newActiveSegment;
-            this._lastActiveSegment = this._activeSegment;
+            if (newActiveSegment !== this._activeSegments[lineId]) {
+              if (this._activeSegments[lineId]) {
+                this._peaks.emit('segments.exit', this._activeSegments[lineId]);
+                delete this._activeSegments[lineId];
+              }
+              if (newActiveSegment) {
+                this._peaks.emit('segments.enter', newActiveSegment);
+                this._activeSegments[lineId] = newActiveSegment;
+                this._lastActiveSegments[lineId] = this._activeSegments[lineId];
+              }
+            }
           }
         }
       }

package/src/segment-shape.js

@@ -39,6 +39,7 @@ define([
     this._startMarker   = null;
     this._endMarker     = null;
     this._rectangle     = null;
+    this._isSelected    = false;
 
     this._segmentHeight = this._peaks.options.segmentHeight;
 
@@ -244,7 +245,9 @@ define([
   SegmentShape.prototype._onMouseEnter = function() {
     this._view.setCursor('pointer');
 
-    this._rectangle.fill(this._segment.selectedColor + Math.round(
+    this._view.setHoveredElement(this);
+
+    this._rectangle.fill(this._segment.activeColor + Math.round(
       this._segment.opacity * 255
     ).toString(16));
 
@@ -256,6 +259,8 @@ define([
   SegmentShape.prototype._onMouseLeave = function() {
     this._view.setCursor('default');
 
+    this._view.setHoveredElement(null);
+
     this._rectangle.fill(this._segment.color + Math.round(
       this._segment.opacity * 255
     ).toString(16));
@@ -315,6 +320,10 @@ define([
     this._peaks.emit('segments.dragend', this._segment, startMarker);
   };
 
+  SegmentShape.prototype.setSelected = function(isSelected) {
+    this._isSelected = isSelected;
+  };
+
   SegmentShape.prototype.fitToView = function() {
     if (this._startMarker) {
       this._startMarker.fitToView();

package/src/segment.js

@@ -50,6 +50,10 @@ define([
     else if (!Utils.isString(options.labelText)) {
       throw new TypeError('peaks.segments.' + context + ': labelText must be a string');
     }
+
+    if (!Utils.isInteger(options.line)) {
+      throw new TypeError('peaks.segments.' + context + ': line must be an integer');
+    }
   }
 
   /**
@@ -70,7 +74,7 @@ define([
    */
 
   function Segment(peaks, id, startTime, endTime, labelText, color,
-    textColor, handleTextColor, opacity, editable) {
+    textColor, handleTextColor, opacity, editable, allowDeletion, line) {
     var opts = {
       startTime:       startTime,
       endTime:         endTime,
@@ -79,7 +83,9 @@ define([
       textColor:       textColor,
       handleTextColor: handleTextColor,
       opacity:         opacity,
-      editable:        editable
+      editable:        editable,
+      allowDeletion:   allowDeletion,
+      line:            line
     };
 
     validateSegment(peaks, opts, 'add()');
@@ -90,11 +96,13 @@ define([
     this._endTime         = opts.endTime;
     this._labelText       = opts.labelText;
     this._color           = opts.color;
-    this._selectedColor   = Utils.shadeColor(color, 20);
+    this._activeColor     = Utils.shadeColor(color, 20);
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
+    this._allowDeletion   = opts.allowDeletion;
+    this._line            = opts.line;
     this._minSize         = peaks.options.minSegmentSize;
   }
 
@@ -137,10 +145,10 @@ define([
         return this._color;
       }
     },
-    selectedColor: {
+    activeColor: {
       enumerable: true,
       get: function() {
-        return this._selectedColor;
+        return this._activeColor;
       }
     },
     textColor: {
@@ -167,6 +175,18 @@ define([
         return this._editable;
       }
     },
+    allowDeletion: {
+      enumerable: true,
+      get: function() {
+        return this._allowDeletion;
+      }
+    },
+    line: {
+      enumerable: true,
+      get: function() {
+        return this._line;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -184,7 +204,9 @@ define([
       textColor:       this.textColor,
       handleTextColor: this.handleTextColor,
       opacity:         this.opacity,
-      editable:        this.editable
+      editable:        this.editable,
+      allowDeletion:   this.allowDeletion,
+      line:            this.line
     };
 
     Utils.extend(opts, options);
@@ -199,6 +221,8 @@ define([
     this._handleTextColor = opts.handleTextColor;
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
+    this._allowDeletion   = opts.allowDeletion;
+    this._line            = opts.line;
 
     this._peaks.emit('segment.updated', this);
   };

package/src/segments-group.js

@@ -44,11 +44,6 @@ define([
 
     this._isMagnetized = false;
 
-    this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
-    this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
-    this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
-    this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
-    this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
     this._peaks.on('segments.setMagnetizing', this.setMagnetizing.bind(this));
   }
 
@@ -112,7 +107,7 @@ define([
     return activeSegment;
   };
 
-  SegmentsGroup.prototype._onSegmentsUpdate = function(segment) {
+  SegmentsGroup.prototype.onSegmentsUpdate = function(segment) {
     if (this._segments[segment.id]) {
       var redraw = false;
       var segmentShape = this._segmentShapes[segment.id];
@@ -140,12 +135,12 @@ define([
     }
   };
 
-  SegmentsGroup.prototype._onSegmentUpdated = function() {
+  SegmentsGroup.prototype.onSegmentUpdated = function() {
     this._peaks.emit('segments.updated', this._updatedSegments);
     this._updatedSegments = [];
   };
 
-  SegmentsGroup.prototype._onSegmentsAdd = function(segments) {
+  SegmentsGroup.prototype.onSegmentsAdd = function(segments) {
     var self = this;
 
     var frameOffset = self._view.getFrameOffset();
@@ -161,7 +156,7 @@ define([
     self.updateSegments(frameStartTime, frameEndTime);
   };
 
-  SegmentsGroup.prototype._onSegmentsRemove = function(segments) {
+  SegmentsGroup.prototype.onSegmentsRemove = function(segments) {
     var self = this;
 
     segments.forEach(function(segment) {
@@ -178,7 +173,7 @@ define([
     this._draw();
   };
 
-  SegmentsGroup.prototype._onSegmentsRemoveAll = function() {
+  SegmentsGroup.prototype.onSegmentsRemoveAll = function() {
     this._group.removeChildren();
     this._firstSegmentId = null;
     this._segments       = {};
@@ -313,7 +308,7 @@ define([
 
   SegmentsGroup.prototype.updateSegments = function(startTime, endTime) {
     // Update segments in visible time range.
-    var segments = this._peaks.segments.find(startTime, endTime);
+    var segments = this.find(startTime, endTime);
 
     var count = segments.length;
 
@@ -327,6 +322,29 @@ define([
     }
   };
 
+  SegmentsGroup.prototype.find = function(startTime, endTime) {
+    var currentSegment = null;
+    var visibleSegments = [];
+
+    do {
+      if (!currentSegment) {
+        currentSegment = this._segments[this._firstSegmentId];
+      }
+      else {
+        currentSegment = this._segments[currentSegment.nextSegmentId];
+      }
+
+      if (currentSegment.segment.isVisible(startTime, endTime)) {
+        visibleSegments.push(currentSegment.segment);
+      }
+      else if (visibleSegments.length) {
+        break;
+      }
+    } while (currentSegment.nextSegmentId);
+
+    return visibleSegments;
+  };
+
   SegmentsGroup.prototype._draw = function() {
     this._view.drawSourcesLayer();
   };
@@ -693,11 +711,7 @@ define([
   };
 
   SegmentsGroup.prototype.destroy = function() {
-    this._peaks.off('segment.updated', this._onSegmentsUpdate);
-    this._peaks.off('segments.add', this._onSegmentsAdd);
-    this._peaks.off('segments.remove', this._onSegmentsRemove);
-    this._peaks.off('segments.remove_all', this._onSegmentsRemoveAll);
-    this._peaks.off('segments.dragged', this._onSegmentsDragged);
+    this._peaks.off('segments.setMagnetizing', this.setMagnetizing);
   };
 
   SegmentsGroup.prototype.fitToView = function() {

package/src/sources-layer.js

@@ -8,7 +8,6 @@
 
 define([
   './source-group',
-  './segments-group',
   './lines',
   './data-retriever',
   './utils',
@@ -16,7 +15,6 @@ define([
   'konva'
 ], function(
   SourceGroup,
-  SegmentsGroup,
   Lines,
   DataRetriever,
   Utils,
@@ -45,8 +43,6 @@ define([
     this._lines         = new Lines(peaks, view, this);
     this._lines.addToLayer(this);
 
-    this._segmentsGroup = new SegmentsGroup(peaks, view, true);
-
     this._loadedData = {};
 
     this._debouncedRescale = new Invoker().debounce(
@@ -72,8 +68,8 @@ define([
     this._loadedData[id] = data;
   };
 
-  SourcesLayer.prototype.getSegmentsGroup = function() {
-    return this._segmentsGroup;
+  SourcesLayer.prototype.getSegmentsGroups = function() {
+    return this._lines.getSegmentsGroups();
   };
 
   SourcesLayer.prototype.add = function(element) {
@@ -242,8 +238,8 @@ define([
     this._layer.draw();
   };
 
-  SourcesLayer.prototype._onSegmentsShow = function(position) {
-    this._lines.addSegments(this._segmentsGroup, position);
+  SourcesLayer.prototype._onSegmentsShow = function(lineId, position) {
+    this._lines.addSegments(lineId, position);
     this._view.updateTimelineLength();
     this._layer.draw();
   };

package/src/timeline-segments.js

@@ -136,7 +136,9 @@ define([
       options.textColor || '#000000',
       options.handleTextColor || '#000000',
       options.opacity || 1,
-      true // editable
+      true, // editable
+      options.allowDeletion || false,
+      options.line
     );
 
     return segment;
@@ -156,8 +158,8 @@ define([
    * Add segments to the given line so they can be displayed.
    */
 
-  TimelineSegments.prototype.addSegmentsToPosition = function(position) {
-    this._peaks.emit('segments.show', position);
+  TimelineSegments.prototype.addSegmentsToPosition = function(lineId, position) {
+    this._peaks.emit('segments.show', lineId, position);
   };
 
   /**
@@ -379,10 +381,10 @@ define([
    * <code>segments.remove_all</code> event.
    */
 
-  TimelineSegments.prototype.removeAll = function() {
+  TimelineSegments.prototype.removeAll = function(lineId) {
     this._segments = [];
     this._segmentsById = {};
-    this._peaks.emit('segments.remove_all');
+    this._peaks.emit('segments.remove_all', lineId);
   };
 
   return TimelineSegments;

package/src/timeline-zoomview.js

@@ -131,7 +131,7 @@ define([
     self._playheadLayer = new PlayheadLayer(
       peaks,
       self,
-      self._sourcesLayer.getSegmentsGroup(),
+      self._sourcesLayer,
       self._options.showPlayheadTime
     );
 
@@ -365,12 +365,12 @@ define([
     var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
 
     if (sourceGroup) {
-      this._modeLayer.selectSourceGroup(sourceGroup, false);
+      this._modeLayer.selectElement(sourceGroup, false);
     }
   };
 
-  TimelineZoomView.prototype.deselectSource = function() {
-    this._modeLayer.deselectSourceGroup(false);
+  TimelineZoomView.prototype.deselectElement = function() {
+    this._modeLayer.deselectElement(false);
   };
 
   TimelineZoomView.prototype.isListening = function() {