@checksub_team/peaks_timeline 1.4.27 → 1.4.30

package/package.json

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

package/peaks.js

@@ -14889,6 +14889,15 @@ module.exports = function (Konva, Utils) {
         this._height = this._segmentsGroup.getCurrentHeight();
         segmentsGroup.addToGroup(this._group);
     };
+    Line.prototype.refreshSegmentsHeight = function () {
+        if (this.isSegmentsLine) {
+            var oldHeight = this._height;
+            this._height = this._segmentsGroup.getCurrentHeight();
+            if (this._height !== oldHeight) {
+                this._peaks.emit('line.heightChanged', this._position);
+            }
+        }
+    };
     Line.prototype._canBePlacedBetween = function (startTime, endTime, startLimit, endLimit) {
         var timeWidth = endTime - startTime;
         var newTimes = null;
@@ -15146,7 +15155,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 +15166,46 @@ module.exports = function (Line, LineIndicator, Utils) {
         this._autoAddToLayer = false;
         this._areSourceInteractionsAllowed = true;
         this._areSegmentInteractionsAllowed = true;
+        this._segmentsGroups = {};
+        this._segmentsGroupToLine = {};
         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();
+        if (Utils.objectHasProperty(this._segmentsGroupToLine, lineId)) {
+            this._segmentsGroupToLine[lineId].refreshSegmentsHeight();
+        }
+    };
     Lines.prototype._onLineHeightChanged = function (position) {
         this._updateLinesPosition(position);
         this._view.updateTimeline();
@@ -15195,11 +15238,11 @@ 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._segmentsGroupToLine[lineId] = this._linesByPosition[position];
         this._setInteractions(position);
         this._updateLinesPosition(position);
     };
@@ -15232,6 +15275,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 +15410,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 +15449,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 +15627,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 +15655,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 +15744,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 +15822,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 +15955,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 +16177,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 +16199,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 +16330,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 +16518,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 +16677,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 +16716,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 +16771,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 +16784,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 +16795,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 +16841,10 @@ module.exports = function (Utils) {
                 return this._color;
             }
         },
-        selectedColor: {
+        activeColor: {
             enumerable: true,
             get: function () {
-                return this._selectedColor;
+                return this._activeColor;
             }
         },
         textColor: {
@@ -16786,6 +16871,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 +16899,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 +16913,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 +16936,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 +16978,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 +17001,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 +17016,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 +17028,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 +17109,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 +17117,25 @@ module.exports = function (SegmentShape, Utils, Konva) {
             this._draw();
         }
     };
+    SegmentsGroup.prototype.find = function (startTime, endTime) {
+        var currentSegment = null;
+        var visibleSegments = [];
+        if (this._firstSegmentId) {
+            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();
     };
@@ -17036,8 +17151,12 @@ module.exports = function (SegmentShape, Utils, Konva) {
                 break;
             }
         }
-        if (!currentHeight && this._segments) {
-            currentHeight = this._peaks.options.segmentHeight;
+        if (!currentHeight) {
+            if (Object.keys(this._segments).length > 0) {
+                currentHeight = this._peaks.options.segmentHeight;
+            } else {
+                currentHeight = this._peaks.options.emptyLineHeight;
+            }
         }
         return currentHeight;
     };
@@ -17265,11 +17384,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 +18667,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 +18678,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 +18696,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 +18817,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 +19012,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 +19197,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 +19295,12 @@ module.exports = function (Colors, Segment, Utils) {
         }
         return this._removeSegments(fnFilter);
     };
-    TimelineSegments.prototype.removeAll = function () {
-        this._segments = [];
-        this._segmentsById = {};
-        this._peaks.emit('segments.remove_all');
+    TimelineSegments.prototype.removeAll = function (lineId) {
+        var indexes = this._findSegment(function (segment) {
+            return segment.line === lineId;
+        });
+        this._removeIndexes(indexes);
+        this._peaks.emit('segments.remove_all', lineId);
     };
     return TimelineSegments;
 }(_dereq_('colors.css'), _dereq_('./segment'), _dereq_('./utils'));
@@ -19428,7 +19544,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 +19692,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/line.js

@@ -279,6 +279,18 @@ define([
     segmentsGroup.addToGroup(this._group);
   };
 
+  Line.prototype.refreshSegmentsHeight = function() {
+    if (this.isSegmentsLine) {
+      var oldHeight = this._height;
+
+      this._height = this._segmentsGroup.getCurrentHeight();
+
+      if (this._height !== oldHeight) {
+        this._peaks.emit('line.heightChanged', this._position);
+      }
+    }
+  };
+
   Line.prototype._canBePlacedBetween = function(startTime, endTime, startLimit, endLimit) {
     var timeWidth = endTime - startTime;
     var newTimes = null;