@checksub_team/peaks_timeline 1.8.2 → 1.9.1

package/peaks.js

@@ -15064,6 +15064,23 @@ module.exports = function (Konva, Utils) {
         }
         return newXs;
     };
+    Line.prototype.getSourcesAfter = function (time) {
+        const sources = [];
+        var currentId = this._firstSourceId;
+        while (currentId) {
+            var lineSource = this._sources[currentId];
+            if (lineSource.source.startTime >= time) {
+                while (currentId) {
+                    lineSource = this._sources[currentId];
+                    sources.push(lineSource.source);
+                    currentId = lineSource.nextSourceId;
+                }
+                break;
+            }
+            currentId = lineSource.nextSourceId;
+        }
+        return sources;
+    };
     Line.prototype.updatePosition = function (pos) {
         for (var sourceId in this._sources) {
             if (Utils.objectHasProperty(this._sources, sourceId)) {
@@ -15210,6 +15227,9 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         }
         return positions;
     };
+    Lines.prototype.getSourcesOnLineAfter = function (lineId, time) {
+        return this._linesByPosition[lineId].getSourcesAfter(time);
+    };
     Lines.prototype.getSegmentsGroups = function () {
         return this._segmentsGroups;
     };
@@ -15610,11 +15630,17 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.allowInteractions = function (forSources, forSegments) {
         return this.view.allowInteractions(forSources, forSegments);
     };
+    Peaks.prototype.getSelectedElements = function () {
+        return this.view.getSelectedElements();
+    };
     Peaks.prototype.selectSourceById = function (sourceId) {
         return this.view.selectSourceById(sourceId);
     };
-    Peaks.prototype.deselectSource = function () {
-        return this.view.deselectElement();
+    Peaks.prototype.selectSourcesOnLineAfter = function (lineId, time) {
+        return this.view.selectSourcesOnLineAfter(lineId, time);
+    };
+    Peaks.prototype.deselectAll = function () {
+        return this.view.deselectAll();
     };
     Peaks.prototype._addWindowResizeHandler = function () {
         this._onResize = this._onResize.bind(this);
@@ -15687,7 +15713,7 @@ module.exports = function (DefaultSegmentMarker, Utils, Konva) {
     };
 }(_dereq_('./default-segment-marker'), _dereq_('./utils'), _dereq_('konva'));
 },{"./default-segment-marker":88,"./utils":112,"konva":43}],96:[function(_dereq_,module,exports){
-module.exports = function (Utils, SourceGroup, Konva) {
+module.exports = function (Utils, Source, SourceGroup, Konva) {
     'use strict';
     var TIME_X_OFFSET = 20;
     var TIME_Y_OFFSET = 10;
@@ -15697,6 +15723,8 @@ module.exports = function (Utils, SourceGroup, Konva) {
         this._view = view;
         this._playheadLayer = playheadLayer;
         this._stage = stage;
+        this._selectedElements = {};
+        this._currentLine = null;
         this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
         this._prepareDefaultMode();
         this._onMouseClickInDefaultMode = this._onMouseClickInDefaultMode.bind(this);
@@ -15711,33 +15739,60 @@ module.exports = function (Utils, SourceGroup, Konva) {
     ModeLayer.prototype.addToStage = function (stage) {
         stage.add(this._layer);
     };
-    ModeLayer.prototype.selectElement = function (element, notify) {
-        this.deselectElement(notify);
-        if (element) {
-            this._selectedElement = element;
-            this._selectedElement.setSelected(true);
+    ModeLayer.prototype.selectElements = function (elements, notify) {
+        const sources = [];
+        const segments = [];
+        const self = this;
+        this.deselectAll(true);
+        elements.forEach(function (element) {
+            self._selectedElements[element.id] = element;
+            element.setSelected(true);
             if (notify) {
-                if (element instanceof SourceGroup) {
-                    this._peaks.emit('source.selected', this._selectedElement.getSource());
+                if (element instanceof Source) {
+                    sources.push(element);
                 } else {
-                    this._peaks.emit('segment.selected', this._selectedElement.getSegment());
+                    segments.push(element);
                 }
             }
+        });
+        if (notify) {
+            if (sources.length) {
+                this._peaks.emit('sources.selected', sources);
+            }
+            if (segments.length) {
+                this._peaks.emit('segments.selected', segments);
+            }
         }
     };
-    ModeLayer.prototype.deselectElement = function (notify) {
-        if (this._selectedElement) {
-            this._selectedElement.setSelected(false);
-            if (notify) {
-                if (this._selectedElement instanceof SourceGroup) {
-                    this._peaks.emit('source.deselected', this._selectedElement.getSource());
-                } else {
-                    this._peaks.emit('segment.deselected', this._selectedElement.getSegment());
+    ModeLayer.prototype.deselectAll = function (notify) {
+        const sources = [];
+        const segments = [];
+        for (var id in this._selectedElements) {
+            if (Utils.objectHasProperty(this._selectedElements, id)) {
+                const element = this._selectedElements[id];
+                element.setSelected(false);
+                if (notify) {
+                    if (element instanceof Source) {
+                        sources.push(element);
+                    } else {
+                        segments.push(element);
+                    }
                 }
+                delete this._selectedElements[id];
+            }
+        }
+        if (notify) {
+            if (sources.length) {
+                this._peaks.emit('sources.deselected', sources);
+            }
+            if (segments.length) {
+                this._peaks.emit('segments.deselected', segments);
             }
-            this._selectedElement = null;
         }
     };
+    ModeLayer.prototype.getSelectedElements = function () {
+        return this._selectedElements;
+    };
     ModeLayer.prototype._prepareDefaultMode = function () {
         this._selectedElement = null;
     };
@@ -15787,24 +15842,30 @@ module.exports = function (Utils, SourceGroup, Konva) {
         this._layer.add(this._cutGroup);
     };
     ModeLayer.prototype._onMouseClickInDefaultMode = function () {
-        var hoveredElement = this._view.getHoveredElement();
-        if (hoveredElement) {
-            this.selectElement(hoveredElement, true);
+        const hoveredKonvaElement = this._view.getHoveredElement();
+        if (hoveredKonvaElement) {
+            if (hoveredKonvaElement instanceof SourceGroup) {
+                this.selectElements([hoveredKonvaElement.getSource()], true);
+            } else {
+                this.selectElements([hoveredKonvaElement.getSegment()], true);
+            }
         } else {
-            this.deselectElement(true);
+            this.deselectAll(true);
+            this._view.drawSourcesLayer();
         }
     };
     ModeLayer.prototype._onKeyboardDelete = function () {
-        if (this._selectedElement) {
-            var selectedElement = this._selectedElement;
-            this.deselectElement(true);
-            if (selectedElement instanceof SourceGroup) {
+        const selectedElements = Object.values(this._selectedElements);
+        if (selectedElements.length) {
+            var selectedElement = selectedElements[0];
+            this.deselectAll(true);
+            if (selectedElement instanceof Source) {
                 if (selectedElement.isDeletable()) {
-                    this._peaks.destroySource(selectedElement.getSource().id);
+                    this._peaks.destroySource(selectedElement.id);
                 }
             } else {
                 if (selectedElement.getSegment().allowDeletion) {
-                    this._peaks.destroySegment(selectedElement.getSegment().id);
+                    this._peaks.destroySegment(selectedElement.id);
                 }
             }
         }
@@ -15943,7 +16004,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
             this._peaks.off('keyboard.delete', this._onKeyboardDelete);
             break;
         }
-        this.deselectElement(true);
+        this.deselectAll(true);
         switch (mode) {
         case 'cut':
             this._stage.on('mouseover', this._onMouseEnterInCutMode);
@@ -15980,8 +16041,8 @@ module.exports = function (Utils, SourceGroup, Konva) {
         return this._mode;
     };
     return ModeLayer;
-}(_dereq_('./utils'), _dereq_('./source-group'), _dereq_('konva'));
-},{"./source-group":104,"./utils":112,"konva":43}],97:[function(_dereq_,module,exports){
+}(_dereq_('./utils'), _dereq_('./source'), _dereq_('./source-group'), _dereq_('konva'));
+},{"./source":105,"./source-group":104,"./utils":112,"konva":43}],97:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     function getMarkerObject(obj) {
@@ -16184,15 +16245,15 @@ module.exports = function (Utils, Konva) {
             draggable: true,
             dragBoundFunc: function (pos) {
                 var time = Math.max(0, self._view.pixelsToTime(pos.x + self._view.getFrameOffset()));
-                var autoPos = self._view.updateWithAutoScroll(this, function () {
+                self._view.updateWithAutoScroll(function () {
                     time = Math.max(0, self._view.pixelsToTime(self._view.getPointerPosition().x + self._view.getFrameOffset()));
                     self._onPlayheadDrag(time);
                 }, function () {
                     self._onPlayheadDrag(time);
                 });
                 return {
-                    x: autoPos.x,
-                    y: autoPos.y
+                    x: Math.max(pos.x, 0),
+                    y: 0
                 };
             }
         });
@@ -16210,7 +16271,6 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._onPlayheadDragStart = function () {
         this._view.enableAutoScroll(false);
         this._dragging = true;
-        this._scrollInterval = null;
     };
     PlayheadLayer.prototype._onPlayheadDragEnd = function () {
         this._view.enableAutoScroll(true);
@@ -16412,7 +16472,6 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._endMarker = null;
         this._shapeGroup = null;
         this._rectangle = null;
-        this._isSelected = false;
         this._indicators = {};
         var self = this;
         this._segmentWidth = this._view.timeToPixels(this._segment.endTime - this._segment.startTime);
@@ -16448,14 +16507,7 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         });
         this._shapeGroup.add(this._rectangle);
         this._shapeGroup.dragBoundFunc(function () {
-            var diff = self._view.getPointerPosition().x - self._mouseDownX;
-            self._group.updateSegment(self._segment, self._initialStartPixel + diff, self._initialEndPixel + diff);
-            self._startMarker.timeUpdated(self._segment.startTime);
-            self._endMarker.timeUpdated(self._segment.endTime);
-            return {
-                x: this.absolutePosition().x,
-                y: this.absolutePosition().y
-            };
+            return self._onShapeGroupDrag(this);
         });
         this._shapeGroup.on('mouseenter', this._onMouseEnter.bind(this));
         this._shapeGroup.on('mouseleave', this._onMouseLeave.bind(this));
@@ -16480,6 +16532,16 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._shapeGroup.add(this._indicatorsGroup);
         this.createIndicators();
     }
+    SegmentShape.prototype._onShapeGroupDrag = function (draggedElement) {
+        const diff = this._view.getPointerPosition().x - this._mouseDownX;
+        this._group.updateSegment(this._segment, this._initialStartPixel + diff, this._initialEndPixel + diff);
+        this._startMarker.timeUpdated(this._segment.startTime);
+        this._endMarker.timeUpdated(this._segment.endTime);
+        return {
+            x: draggedElement.absolutePosition().x,
+            y: draggedElement.absolutePosition().y
+        };
+    };
     SegmentShape.prototype._cornerRadius = function () {
         return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ? this._segment.borderRadius : SEGMENT_CORNER_RADIUS;
     };
@@ -16709,9 +16771,6 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         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();
@@ -16845,6 +16904,7 @@ module.exports = function (Utils) {
         this._indicators = opts.indicators;
         this._minSize = peaks.options.minSegmentSize;
         this._relativeId = 0;
+        this._selected = false;
         if (shouldNotifyUpdate) {
             peaks.emit('segments.updated', [this]);
         }
@@ -17024,6 +17084,9 @@ module.exports = function (Utils) {
         this._indicators = opts.indicators;
         this._peaks.emit('segment.updated', this);
     };
+    Segment.prototype.setSelected = function (selected) {
+        this._selected = selected;
+    };
     Segment.prototype.isVisible = function (startTime, endTime) {
         return this.startTime < endTime && startTime < this.endTime;
     };
@@ -17565,11 +17628,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
     var SPACING_BETWEEN_PREVIEWS = 1.5;
     var CORNER_RADIUS = 8;
+    var INDICATOR_RADIUS = 4;
+    var INDICATORS_MARGIN_LEFT = 8;
+    var INDICATORS_MARGIN_TOP = 12;
     function SourceGroup(source, peaks, layer, view) {
         this._source = source;
         this._peaks = peaks;
         this._layer = layer;
         this._view = view;
+        this._indicators = {};
         var self = this;
         this._x = this._view.timeToPixels(source.startTime);
         this._width = this._view.timeToPixels(source.endTime - source.startTime);
@@ -17579,15 +17646,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._previewList = [];
         this._group = new Konva.Group({
             x: this._x,
+            sourceId: this._source.id,
             draggable: this._source.draggable,
             dragBoundFunc: function () {
-                return {
-                    x: this.absolutePosition().x,
-                    y: this.absolutePosition().y
-                };
+                return self._layer.onSourcesGroupDrag(this);
             }
         });
-        this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
+        this._group.on('dragstart', this._layer.onSourcesGroupDragStart.bind(this._layer));
+        this._group.on('dragend', this._layer.onSourcesGroupDragEnd.bind(this._layer));
         this._group.on('mouseover', function () {
             self._view.setHoveredElement(self);
             if (self._view.getCurrentMode() === 'cut') {
@@ -17602,7 +17668,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.toggleResizing(true);
             }
         });
-        this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
         this._group.add(new Konva.Group());
         if (this._borderWidth) {
             this._border = new Konva.Shape({
@@ -17615,48 +17680,27 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
         this._addHandles();
         this.setWrapping(source.wrapped);
+        this._setSelected();
+        this._indicatorsGroup = new Konva.Group();
+        this._group.add(this._indicatorsGroup);
+        this.createIndicators();
     }
-    SourceGroup.prototype._onSourceGroupDragStart = function () {
-        this._dragged = true;
-        this._mouseDownX = this._view.getPointerPosition().x;
-        this._initialStartTime = this._source.startTime;
-        this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
-        this._initialEndTime = this._source.endTime;
-        this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
-        this._initialFrameOffset = this._view.getFrameOffset();
-    };
-    SourceGroup.prototype._onSourceGroupDragEnd = function () {
+    SourceGroup.prototype.prepareDragEnd = function () {
         var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
         this._leftHandle.width(handleWidth);
         this._rightHandle.width(handleWidth);
         this._rightHandle.x(this._width - handleWidth);
-        this._view.drawSourcesLayer();
-        this._dragged = false;
-        this._view.updateTimelineLength();
-        this._peaks.emit('sources.updated', [this._source]);
-    };
-    SourceGroup.prototype._onSourceGroupDrag = function (draggedElement) {
-        var self = this;
-        var pos = this._view.updateWithAutoScroll(draggedElement, function () {
-            var mousePos = Math.min(self._view.getWidth() - self._peaks.options.autoScrollThreshold * self._view.getWidth(), Math.max(0, self._view.getPointerPosition().x));
-            var diff = mousePos - self._mouseDownX;
-            self._layer.updateSource(self._source, self._initialStartPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset), self._initialEndPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset), self._view.getPointerPosition().y);
-            self._view.setTimelineLength(self._view.timeToPixels(self._source.endTime) + self._view.getWidth());
-        });
-        return {
-            x: pos.x,
-            y: pos.y
-        };
     };
     SourceGroup.prototype._onSourceGroupHandleDrag = function (draggedElement, dragPos, leftHandle) {
-        var self = this;
-        var pos = this._view.updateWithAutoScroll(draggedElement, function () {
-            self._layer.updateSource(self._source, leftHandle ? dragPos.x + self._view.getFrameOffset() : null, leftHandle ? null : dragPos.x + draggedElement.width() + self._view.getFrameOffset());
-        });
+        this._view.updateWithAutoScroll(function () {
+            if (this._layer.updateSource(this._source, leftHandle ? dragPos.x + this._view.getFrameOffset() : null, leftHandle ? null : dragPos.x + draggedElement.width() + this._view.getFrameOffset())) {
+                this._layer.draw();
+            }
+        }.bind(this));
         this._view.setTimelineLength(this._view.timeToPixels(this._source.endTime) + this._view.getWidth());
         return {
-            x: pos.x,
-            y: pos.y
+            x: draggedElement.absolutePosition().x,
+            y: draggedElement.absolutePosition().y
         };
     };
     SourceGroup.prototype.update = function () {
@@ -17710,12 +17754,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             });
             if (this._source.resizable) {
-                this._leftHandle.on('dragend', function () {
-                    if (this._scrollingInterval) {
-                        clearInterval(this._scrollingInterval);
-                        this._scrollingInterval = null;
-                    }
-                });
                 this._leftHandle.on('mouseover', function () {
                     self._view.setCursor('ew-resize');
                 });
@@ -17736,12 +17774,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             });
             if (this._source.resizable) {
-                this._rightHandle.on('dragend', function () {
-                    if (this._scrollingInterval) {
-                        clearInterval(this._scrollingInterval);
-                        this._scrollingInterval = null;
-                    }
-                });
                 this._rightHandle.on('mouseover', function () {
                     self._view.setCursor('ew-resize');
                 });
@@ -17812,13 +17844,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var unwrap = new Konva.Group({
             width: this._width,
             height: this._unwrappedHeight,
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return {
-                    x: this.absolutePosition().x,
-                    y: this.absolutePosition().y
-                };
-            },
             clipFunc: function (ctx) {
                 self.drawSourceShape(ctx, null, true);
             }
@@ -17830,25 +17855,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             unwrap.on('mouseout', function () {
                 self._view.setCursor('default');
             });
-            unwrap.on('dragstart', function () {
-                this._scrollInterval = null;
-            });
-            unwrap.on('dragend', function () {
-                if (this._scrollingInterval) {
-                    clearInterval(this._scrollingInterval);
-                    this._scrollingInterval = null;
-                }
-            });
         }
         var background = new Konva.Group();
         background.add(new Konva.Shape({
             fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
                 self.drawSourceShape(ctx, shape, true);
-            },
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return self._onSourceGroupDrag(this);
             }
         }));
         unwrap.add(background);
@@ -17878,13 +17890,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var wrap = new Konva.Group({
             width: this._width,
             height: this._wrappedHeight,
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return {
-                    x: this.absolutePosition().x,
-                    y: this.absolutePosition().y
-                };
-            },
             clipFunc: function (ctx) {
                 self.drawSourceShape(ctx, null, true);
             }
@@ -17896,25 +17901,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             wrap.on('mouseout', function () {
                 self._view.setCursor('default');
             });
-            wrap.on('dragstart', function () {
-                this._scrollInterval = null;
-            });
-            wrap.on('dragend', function () {
-                if (this._scrollingInterval) {
-                    clearInterval(this._scrollingInterval);
-                    this._scrollingInterval = null;
-                }
-            });
         }
         var background = new Konva.Group();
         background.add(new Konva.Shape({
             fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
                 self.drawSourceShape(ctx, shape, true);
-            },
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return self._onSourceGroupDrag(this);
             }
         }));
         wrap.add(background);
@@ -18151,9 +18143,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             return preview.type === 'audio';
         });
     };
-    SourceGroup.prototype.setSelected = function (isSelected) {
+    SourceGroup.prototype._setSelected = function () {
         if (this._border) {
-            if (isSelected) {
+            if (this._source._selected) {
                 this._border.fill(this._source.selectedColor);
                 this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
             } else {
@@ -18166,7 +18158,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     return node.getClassName() === 'Shape';
                 });
                 if (unwrap_background) {
-                    if (isSelected) {
+                    if (this._source._selected) {
                         unwrap_background.stroke(this._source.selectedColor);
                         unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
@@ -18179,7 +18171,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     return node.getClassName() === 'Shape';
                 });
                 if (wrap_background) {
-                    if (isSelected) {
+                    if (this._source._selected) {
                         wrap_background.stroke(this._source.selectedColor);
                         wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
@@ -18188,7 +18180,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             }
         }
-        this._view.drawSourcesLayer();
     };
     SourceGroup.prototype.updatePreviews = function () {
         var self = this;
@@ -18286,9 +18277,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.isVisible = function () {
         return this._group.visible();
     };
-    SourceGroup.prototype.isDragged = function () {
-        return this._dragged;
-    };
     SourceGroup.prototype.isCuttable = function () {
         return this._source.cuttable;
     };
@@ -18298,6 +18286,57 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.destroy = function () {
         this._group.destroy();
     };
+    SourceGroup.prototype.getLine = function () {
+        return this._source.position;
+    };
+    SourceGroup.prototype.createIndicators = function () {
+        var newIndicatorsColors = this._source.indicators;
+        var oldIndicators = this._indicators;
+        var newIndicators = {};
+        if (newIndicatorsColors) {
+            newIndicatorsColors.forEach(function (indicatorColor) {
+                var oldIndicator = oldIndicators[indicatorColor];
+                if (oldIndicator) {
+                    newIndicators[indicatorColor] = oldIndicator;
+                    delete oldIndicators[indicatorColor];
+                } else {
+                    newIndicators[indicatorColor] = null;
+                }
+            });
+            for (var color in oldIndicators) {
+                if (Utils.objectHasProperty(oldIndicators, color)) {
+                    oldIndicators[color].destroy();
+                }
+            }
+        }
+        this._indicators = Object.keys(newIndicators).sort().reverse().reduce(function (objEntries, key) {
+            objEntries[key] = newIndicators[key];
+            return objEntries;
+        }, {});
+        this._createIndicators();
+    };
+    SourceGroup.prototype._createIndicators = function () {
+        var currentX = 0;
+        var zIndex = 0;
+        for (var color in this._indicators) {
+            if (Utils.objectHasProperty(this._indicators, color)) {
+                if (!this._indicators[color]) {
+                    this._indicators[color] = new Konva.Circle({
+                        radius: INDICATOR_RADIUS,
+                        fill: color,
+                        strokeEnabled: false
+                    });
+                    this._indicatorsGroup.add(this._indicators[color]);
+                }
+                this._indicators[color].x(currentX);
+                this._indicators[color].zIndex(zIndex);
+                currentX -= INDICATOR_RADIUS;
+                zIndex += 1;
+            }
+        }
+        this._indicatorsGroup.offsetX(currentX - INDICATORS_MARGIN_LEFT);
+        this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+    };
     return SourceGroup;
 }(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./utils'), _dereq_('konva'));
 },{"./utils":112,"./waveform-builder":113,"./waveform-shape":114,"konva":43}],105:[function(_dereq_,module,exports){
@@ -18468,8 +18507,11 @@ module.exports = function (Utils) {
         } else if (options.wrapping === 'complete') {
             options.wrapped = false;
         }
+        if (Utils.isNullOrUndefined(options.indicators)) {
+            options.indicators = [];
+        }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators) {
         var opts = {
             title: title,
             url: url,
@@ -18502,7 +18544,8 @@ module.exports = function (Utils) {
             deletable: deletable,
             wrapping: wrapping,
             previewHeight: previewHeight,
-            binaryHeight: binaryHeight
+            binaryHeight: binaryHeight,
+            indicators: indicators
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -18541,7 +18584,9 @@ module.exports = function (Utils) {
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
+        this._indicators = opts.indicators;
         this._minSize = peaks.options.minSourceSize;
+        this._selected = false;
     }
     Object.defineProperties(Source.prototype, {
         id: {
@@ -18823,6 +18868,12 @@ module.exports = function (Utils) {
                 this._binaryHeight = binaryHeight;
             }
         },
+        indicators: {
+            enumerable: true,
+            get: function () {
+                return this._indicators;
+            }
+        },
         minSize: {
             enumerable: true,
             get: function () {
@@ -18947,7 +18998,8 @@ module.exports = function (Utils) {
             deletable: this.deletable,
             wrapping: this.wrapping,
             previewHeight: this.previewHeight,
-            binaryHeight: this.binaryHeight
+            binaryHeight: this.binaryHeight,
+            indicators: this.indicators
         };
         Utils.extend(opts, options);
         validateSource(this._peaks, opts, 'update()');
@@ -18983,11 +19035,20 @@ module.exports = function (Utils) {
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
+        this._indicators = opts.indicators;
+        this._peaks.emit('source.update', this);
+    };
+    Source.prototype.setSelected = function (selected) {
+        this._selected = selected;
         this._peaks.emit('source.update', this);
     };
     Source.prototype.isVisible = function (startTime, endTime) {
         return this._startTime < endTime && startTime < this._endTime;
     };
+    Source.prototype.setIndicators = function (newIndicators) {
+        this._indicators = newIndicators;
+        this._peaks.emit('source.setIndicators', this);
+    };
     return Source;
 }(_dereq_('./utils'));
 },{"./utils":112}],106:[function(_dereq_,module,exports){
@@ -19013,6 +19074,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
         this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
         this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
+        this._peaks.on('source.setIndicators', this.setIndicators.bind(this));
     }
     SourcesLayer.prototype.fitToView = function () {
         this._lines.fitToView();
@@ -19159,6 +19221,13 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._dataRetriever.retrieveData(source);
         return sourceGroup;
     };
+    SourcesLayer.prototype.setIndicators = function (source) {
+        var sourceGroup = this._sourcesGroup[source.id];
+        if (sourceGroup) {
+            sourceGroup.createIndicators();
+            this._layer.draw();
+        }
+    };
     SourcesLayer.prototype.updateSources = function (startTime, endTime) {
         this._lines.updateSegments(startTime, endTime);
         var sources = this.findSources(startTime, endTime);
@@ -19170,6 +19239,57 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             this._layer.draw();
         }
     };
+    SourcesLayer.prototype.onSourcesGroupDragStart = function (element) {
+        this._initialFrameOffset = this._view.getFrameOffset();
+        this._mouseDownX = this._view.getPointerPosition().x;
+        this._selectedElements = {};
+        const draggedElementId = element.currentTarget.attrs.sourceId;
+        const shouldDragSelectedElements = Object.keys(this._view.getSelectedElements()).includes(draggedElementId);
+        this._nonSelectedElement = shouldDragSelectedElements ? null : [this._sourcesGroup[draggedElementId].getSource()];
+    };
+    SourcesLayer.prototype.onSourcesGroupDragEnd = function () {
+        const updatedSources = (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).map(function (source) {
+            const sourceGroup = this._sourcesGroup[source.id];
+            if (sourceGroup) {
+                sourceGroup.prepareDragEnd();
+            }
+            return source;
+        }.bind(this));
+        this._view.drawSourcesLayer();
+        this._view.updateTimelineLength();
+        this._selectedElements = {};
+        this._peaks.emit('sources.updated', updatedSources);
+    };
+    SourcesLayer.prototype.onSourcesGroupDrag = function (draggedElement) {
+        this._view.updateWithAutoScroll(this._updateSourcesGroup.bind(this));
+        return {
+            x: draggedElement.absolutePosition().x,
+            y: draggedElement.absolutePosition().y
+        };
+    };
+    SourcesLayer.prototype._updateSourcesGroup = function () {
+        var mousePos = Math.min(this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(), Math.max(0, this._view.getPointerPosition().x));
+        const diff = mousePos - this._mouseDownX;
+        const currentFrameOffset = this._view.getFrameOffset();
+        const mousePosY = this._view.getPointerPosition().y;
+        var newEnd = 0;
+        var shouldRedraw = false;
+        (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function (source) {
+            if (!this._selectedElements[source.id]) {
+                this._selectedElements[source.id] = {
+                    startX: this._view.timeToPixels(source.startTime),
+                    endX: this._view.timeToPixels(source.endTime)
+                };
+            }
+            const {startX, endX} = this._selectedElements[source.id];
+            newEnd = Math.max(newEnd, source.endTime);
+            shouldRedraw = this.updateSource(source, startX + diff + (currentFrameOffset - this._initialFrameOffset), endX + diff + (currentFrameOffset - this._initialFrameOffset), mousePosY) || shouldRedraw;
+        }.bind(this));
+        if (shouldRedraw) {
+            this.draw();
+        }
+        this._view.setTimelineLength(this._view.timeToPixels(newEnd) + this._view.getWidth());
+    };
     SourcesLayer.prototype.findSources = function (startTime, endTime) {
         var sources = this._peaks.sources.find(startTime, endTime);
         var positions = this._lines.getVisibleLines();
@@ -19191,8 +19311,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         source.updateTimes(newXs.startX !== null ? this._view.pixelsToTime(newXs.startX) : null, newXs.endX !== null ? this._view.pixelsToTime(newXs.endX) : null);
         if (newXs) {
             this._updateSource(source, newXs.updateWidth);
-            this.draw();
+            return true;
         }
+        return false;
     };
     SourcesLayer.prototype.manageVerticalPosition = function (source, newY) {
         return this._lines.manageVerticalPosition(source, newY);
@@ -19219,7 +19340,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         for (var sourceId in this._sourcesGroup) {
             if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
                 var source = this._sourcesGroup[sourceId].getSource();
-                if (!this._isSourceVisible(source, startTime, endTime) && !this._sourcesGroup[sourceId].isDragged()) {
+                if (!this._isSourceVisible(source, startTime, endTime)) {
                     this._removeSource(source);
                     count++;
                 }
@@ -19286,6 +19407,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.getSourceGroupById = function (sourceId) {
         return this._sourcesGroup[sourceId];
     };
+    SourcesLayer.prototype.getSourcesOnLineAfter = function (lineId, time) {
+        return this._lines.getSourcesOnLineAfter(lineId, time);
+    };
     SourcesLayer.prototype._sourcesOverlapped = function (source1, source2) {
         var endsLater = source1.startTime < source2.startTime && source1.endTime > source2.startTime;
         var startsEarlier = source1.startTime > source2.startTime && source1.startTime < source2.endTime;
@@ -19327,9 +19451,12 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.off('sources.destroy', this._onSourcesDestroy);
         this._peaks.off('sources.show', this._onSourcesShow);
         this._peaks.off('sources.hide', this._onSourcesHide);
+        this._peaks.off('source.update', this._onSourceUpdate);
         this._peaks.off('data.retrieved', this._onDataRetrieved);
         this._peaks.off('sources.refresh', this._onSourcesRefresh);
         this._peaks.off('segments.show', this._onSegmentsShow);
+        this._peaks.off('options.set.line_height', this._onOptionsLineHeightChange);
+        this._peaks.off('source.setIndicators', this.setIndicators);
     };
     SourcesLayer.prototype.getHeight = function () {
         return this._layer.getHeight();
@@ -19745,7 +19872,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators);
         return source;
     };
     TimelineSources.prototype.getSources = function () {
@@ -19995,6 +20122,9 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         });
         this._stage.on('wheel', function (e) {
             e.evt.preventDefault();
+            if (self._mouseDragHandler.isDragging()) {
+                return;
+            }
             if (self._peaks.keyboardHandler.isCtrlCmdPressed()) {
                 if (e.evt.deltaY > 0) {
                     self.setZoom(self.getTimeToPixelsScale() + Math.floor(self.getTimeToPixelsScale() / 10) + 1);
@@ -20021,46 +20151,54 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
                 }
             }
         });
+        window.addEventListener('mouseup', this._mouseUp.bind(this), false);
+        window.addEventListener('touchend', this._mouseUp.bind(this), false);
+        window.addEventListener('blur', this._mouseUp.bind(this), false);
     }
-    TimelineZoomView.prototype.updateWithAutoScroll = function (obj, updateInInterval, updateOutInterval) {
+    TimelineZoomView.prototype._mouseUp = function () {
+        this.clearScrollingInterval();
+    };
+    TimelineZoomView.prototype.getSelectedElements = function () {
+        return this._modeLayer.getSelectedElements();
+    };
+    TimelineZoomView.prototype.updateWithAutoScroll = function (updateInInterval, updateOutInterval) {
         var self = this;
         var posX = this.getPointerPosition().x;
         var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
-        obj._limited = 0;
+        this._limited = 0;
         if (posX < threshold) {
-            obj._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
+            this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
         } else if (posX > this.getWidth() - threshold) {
-            obj._limited = Math.round(30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold));
+            this._limited = Math.round(30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold));
         }
-        if (obj._limited && self.getFrameOffset() > 0 || obj._limited > 0) {
-            if (!obj._scrollingInterval) {
-                obj._scrollingInterval = setInterval(function () {
-                    var newOffset = self.getFrameOffset() + obj._limited;
+        if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
+            if (!this._scrollingInterval) {
+                this._scrollingInterval = setInterval(function () {
+                    var newOffset = self.getFrameOffset() + self._limited;
                     if (newOffset < 0) {
                         self.updateTimeline(0, null, false);
-                        clearInterval(obj._scrollingInterval);
-                        obj._scrollingInterval = null;
+                        clearInterval(self._scrollingInterval);
+                        self._scrollingInterval = null;
                     } else {
-                        self.updateTimeline(self.getFrameOffset() + obj._limited, null, false);
+                        self.updateTimeline(self.getFrameOffset() + self._limited, null, false);
                     }
                     updateInInterval();
                 }, 10);
             }
         } else {
-            if (obj._scrollingInterval) {
-                clearInterval(obj._scrollingInterval);
-                obj._scrollingInterval = null;
-            }
+            this.clearScrollingInterval();
             if (updateOutInterval) {
                 updateOutInterval();
             } else {
                 updateInInterval();
             }
         }
-        return {
-            x: obj.absolutePosition().x,
-            y: obj.absolutePosition().y
-        };
+    };
+    TimelineZoomView.prototype.clearScrollingInterval = function () {
+        if (this._scrollingInterval) {
+            clearInterval(this._scrollingInterval);
+            this._scrollingInterval = null;
+        }
     };
     TimelineZoomView.prototype.getCurrentMode = function () {
         return this._modeLayer.getCurrentMode();
@@ -20076,14 +20214,23 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this._sourcesLayer.stopDrag();
         this._sourcesLayer.draw();
     };
+    TimelineZoomView.prototype.getSelectedElements = function () {
+        return this._modeLayer.getSelectedElements();
+    };
     TimelineZoomView.prototype.selectSourceById = function (sourceId) {
-        var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
+        const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
         if (sourceGroup) {
-            this._modeLayer.selectElement(sourceGroup, false);
+            this._modeLayer.selectElements([sourceGroup.getSource()], false);
+        }
+    };
+    TimelineZoomView.prototype.selectSourcesOnLineAfter = function (lineId, time) {
+        const sources = this._sourcesLayer.getSourcesOnLineAfter(lineId, time);
+        if (sources) {
+            this._modeLayer.selectElements(sources, false);
         }
     };
-    TimelineZoomView.prototype.deselectElement = function () {
-        this._modeLayer.deselectElement(false);
+    TimelineZoomView.prototype.deselectAll = function () {
+        this._modeLayer.deselectAll(false);
     };
     TimelineZoomView.prototype.isListening = function () {
         return this._stage.listening();