@checksub_team/peaks_timeline 1.8.2 → 1.9.1-beta.1

package/package.json

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

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;
     };
@@ -15613,8 +15633,11 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     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 +15710,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 +15720,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
         this._view = view;
         this._playheadLayer = playheadLayer;
         this._stage = stage;
+        this._selectedElements = {};
         this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
         this._prepareDefaultMode();
         this._onMouseClickInDefaultMode = this._onMouseClickInDefaultMode.bind(this);
@@ -15711,31 +15735,54 @@ 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;
+        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._prepareDefaultMode = function () {
@@ -15787,24 +15834,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 +15996,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 +16033,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) {
@@ -16412,7 +16465,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);
@@ -16709,9 +16761,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 +16894,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 +17074,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 +17618,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);
@@ -17615,6 +17672,10 @@ 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;
@@ -18151,9 +18212,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 +18227,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 +18240,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 +18249,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             }
         }
-        this._view.drawSourcesLayer();
     };
     SourceGroup.prototype.updatePreviews = function () {
         var self = this;
@@ -18298,6 +18358,54 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.destroy = function () {
         this._group.destroy();
     };
+    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 +18576,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 +18613,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 +18653,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 +18937,12 @@ module.exports = function (Utils) {
                 this._binaryHeight = binaryHeight;
             }
         },
+        indicators: {
+            enumerable: true,
+            get: function () {
+                return this._indicators;
+            }
+        },
         minSize: {
             enumerable: true,
             get: function () {
@@ -18947,7 +19067,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 +19104,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 +19143,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 +19290,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);
@@ -19286,6 +19424,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;
@@ -19330,6 +19471,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.off('data.retrieved', this._onDataRetrieved);
         this._peaks.off('sources.refresh', this._onSourcesRefresh);
         this._peaks.off('segments.show', this._onSegmentsShow);
+        this._peaks.off('source.setIndicators', this.setIndicators);
     };
     SourcesLayer.prototype.getHeight = function () {
         return this._layer.getHeight();
@@ -19745,7 +19887,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 () {
@@ -20077,13 +20219,19 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this._sourcesLayer.draw();
     };
     TimelineZoomView.prototype.selectSourceById = function (sourceId) {
-        var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
+        const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
         if (sourceGroup) {
             this._modeLayer.selectElement(sourceGroup, false);
         }
     };
-    TimelineZoomView.prototype.deselectElement = function () {
-        this._modeLayer.deselectElement(false);
+    TimelineZoomView.prototype.selectSourcesOnLineAfter = function (lineId, time) {
+        const sources = this._sourcesLayer.getSourcesOnLineAfter(lineId, time);
+        if (sources) {
+            this._modeLayer.selectElements(sources, false);
+        }
+    };
+    TimelineZoomView.prototype.deselectAll = function () {
+        this._modeLayer.deselectAll(false);
     };
     TimelineZoomView.prototype.isListening = function () {
         return this._stage.listening();

package/src/line.js

@@ -655,6 +655,28 @@ define([
   //   }
   // };
 
+  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)) {

package/src/lines.js

@@ -185,6 +185,10 @@ define([
     return positions;
   };
 
+  Lines.prototype.getSourcesOnLineAfter = function(lineId, time) {
+    return this._linesByPosition[lineId].getSourcesAfter(time);
+  };
+
   Lines.prototype.getSegmentsGroups = function() {
     return this._segmentsGroups;
   };

package/src/main.js

@@ -720,9 +720,14 @@ define([
             .selectSourceById(sourceId);
   };
 
-  Peaks.prototype.deselectSource = function() {
+  Peaks.prototype.selectSourcesOnLineAfter = function(lineId, time) {
     return this.view
-            .deselectElement();
+            .selectSourcesOnLineAfter(lineId, time);
+  };
+
+  Peaks.prototype.deselectAll = function() {
+    return this.view
+            .deselectAll();
   };
 
   Peaks.prototype._addWindowResizeHandler = function() {

package/src/mode-layer.js

@@ -8,9 +8,10 @@
 
 define([
   './utils',
+  './source',
   './source-group',
   'konva'
-  ], function(Utils, SourceGroup, Konva) {
+  ], function(Utils, Source, SourceGroup, Konva) {
   'use strict';
 
   var TIME_X_OFFSET = 20;
@@ -34,6 +35,8 @@ define([
     this._playheadLayer = playheadLayer;
     this._stage = stage;
 
+    this._selectedElements = {};
+
     this._layer = new Konva.Layer({
       listening: this._mode !== 'default'
     });
@@ -63,34 +66,60 @@ define([
     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;
+
+    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;
     }
   };
 
@@ -149,30 +178,39 @@ define([
   };
 
   ModeLayer.prototype._onMouseClickInDefaultMode = function() {
-    var hoveredElement = this._view.getHoveredElement();
+    const hoveredKonvaElement = this._view.getHoveredElement();
 
-    if (hoveredElement) {
-      this.selectElement(hoveredElement, true);
+    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();  // Redraw sources layer to remove selection
     }
   };
 
   ModeLayer.prototype._onKeyboardDelete = function() {
-    if (this._selectedElement) {
-      var selectedElement = this._selectedElement;
+    const selectedElements = Object.values(this._selectedElements);
+
+    // We allow deletion if there is ONLY 1 element selected
+    if (selectedElements.length) {
+      var selectedElement = selectedElements[0];
 
-      this.deselectElement(true);
+      this.deselectAll(true);
 
-      if (selectedElement instanceof SourceGroup) {
+      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);
         }
       }
     }
@@ -379,7 +417,7 @@ define([
         break;
     }
 
-    this.deselectElement(true);
+    this.deselectAll(true);
 
     // Set new mode
     switch (mode) {

package/src/segment-shape.js

@@ -46,7 +46,6 @@ define([
     this._endMarker     = null;
     this._shapeGroup    = null;
     this._rectangle     = null;
-    this._isSelected    = false;
     this._indicators    = {};
 
     var self = this;
@@ -452,10 +451,6 @@ 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

@@ -150,6 +150,7 @@ define([
     this._indicators      = opts.indicators;
     this._minSize         = peaks.options.minSegmentSize;
     this._relativeId      = 0;
+    this._selected        = false;
 
     if (shouldNotifyUpdate) {
       peaks.emit('segments.updated', [this]);
@@ -340,6 +341,11 @@ define([
     this._peaks.emit('segment.updated', this);
   };
 
+  Segment.prototype.setSelected = function(selected) {
+    this._selected = selected;
+    // this._peaks.emit('segment.update', this); // It's currently useless
+  };
+
   /**
    * Returns <code>true</code> if the segment overlaps a given time region.
    *

package/src/source-group.js

@@ -21,6 +21,9 @@ define([
   var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
   var SPACING_BETWEEN_PREVIEWS = 1.5;
   var CORNER_RADIUS = 8;
+  var INDICATOR_RADIUS = 4; // px
+  var INDICATORS_MARGIN_LEFT = 8; // px
+  var INDICATORS_MARGIN_TOP = 12; // px
 
   /**
    * Creates a source group for the given source.
@@ -39,6 +42,7 @@ define([
     this._peaks         = peaks;
     this._layer         = layer;
     this._view          = view;
+    this._indicators    = {};
 
     var self = this;
 
@@ -94,6 +98,13 @@ define([
     this._addHandles();
 
     this.setWrapping(source.wrapped);
+
+    this._setSelected();
+
+    this._indicatorsGroup = new Konva.Group();
+    this._group.add(this._indicatorsGroup);
+
+    this.createIndicators();
   }
 
   // SourceGroup.prototype.rescale = function() {
@@ -842,9 +853,9 @@ define([
     });
   };
 
-  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;
       }
@@ -861,7 +872,7 @@ define([
         });
 
         if (unwrap_background) {
-          if (isSelected) {
+          if (this._source._selected) {
             unwrap_background.stroke(this._source.selectedColor);
             unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
@@ -878,7 +889,7 @@ define([
         });
 
         if (wrap_background) {
-          if (isSelected) {
+          if (this._source._selected) {
             wrap_background.stroke(this._source.selectedColor);
             wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
@@ -888,8 +899,6 @@ define([
         }
       }
     }
-
-    this._view.drawSourcesLayer();
   };
 
   SourceGroup.prototype.updatePreviews = function() {
@@ -1039,5 +1048,69 @@ define([
     this._group.destroy();
   };
 
+  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;
 });

package/src/source.js

@@ -246,6 +246,10 @@ define([
     else if (options.wrapping === 'complete') {
       options.wrapped = false;
     }
+
+    if (Utils.isNullOrUndefined(options.indicators)) {
+      options.indicators = [];
+    }
   }
 
   /**
@@ -266,13 +270,14 @@ define([
    * @param {Number} position Position of the source on the timeline.
    *                          Correspond to the index of the line.
    * @param {Boolean} segments If <code>true</code> this source will integrate the segments.
+   * @param {Array<String>} indicators Array containing the colors of all 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) {
+    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators) {
     var opts = {
       title: title,
       url: url,
@@ -305,7 +310,8 @@ define([
       deletable: deletable,
       wrapping: wrapping,
       previewHeight: previewHeight,
-      binaryHeight: binaryHeight
+      binaryHeight: binaryHeight,
+      indicators: indicators
     };
 
     validateSource(peaks, opts, 'add()');
@@ -346,7 +352,9 @@ define([
     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, {
@@ -650,6 +658,12 @@ define([
         this._binaryHeight = binaryHeight;
       }
     },
+    indicators: {
+      enumerable: true,
+      get: function() {
+        return this._indicators;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -806,7 +820,8 @@ define([
       deletable: this.deletable,
       wrapping: this.wrapping,
       previewHeight: this.previewHeight,
-      binaryHeight: this.binaryHeight
+      binaryHeight: this.binaryHeight,
+      indicators: this.indicators
     };
 
     Utils.extend(opts, options);
@@ -845,10 +860,16 @@ define([
     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);
+  };
+
   /**
    * Returns <code>true</code> if the source overlaps a given time region.
    *
@@ -862,5 +883,16 @@ define([
     return this._startTime < endTime && startTime < this._endTime;
   };
 
+  /**
+   * Update the indicators of this source.
+   *
+   * @param {Array<String>} newIndicators The new indicators.
+   */
+
+  Source.prototype.setIndicators = function(newIndicators) {
+    this._indicators = newIndicators;
+    this._peaks.emit('source.setIndicators', this);
+  };
+
   return Source;
 });

package/src/sources-layer.js

@@ -58,6 +58,7 @@ define([
     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() {
@@ -280,6 +281,15 @@ define([
     return sourceGroup;
   };
 
+  SourcesLayer.prototype.setIndicators = function(source) {
+    var sourceGroup = this._sourcesGroup[source.id];
+
+    if (sourceGroup) {
+      sourceGroup.createIndicators();
+      this._layer.draw();
+    }
+  };
+
   /**
    * Updates the positions of all displayed sources in the view.
    *
@@ -506,6 +516,10 @@ define([
     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);
@@ -568,6 +582,7 @@ define([
     this._peaks.off('data.retrieved', this._onDataRetrieved);
     this._peaks.off('sources.refresh', this._onSourcesRefresh);
     this._peaks.off('segments.show', this._onSegmentsShow);
+    this._peaks.off('source.setIndicators', this.setIndicators);
   };
 
   SourcesLayer.prototype.getHeight = function() {

package/src/timeline-sources.js

@@ -179,7 +179,8 @@ define([
       options.deletable,
       options.wrapping,
       options.previewHeight,
-      options.binaryHeight
+      options.binaryHeight,
+      options.indicators
     );
 
     return source;

package/src/timeline-zoomview.js

@@ -366,15 +366,23 @@ define([
   };
 
   TimelineZoomView.prototype.selectSourceById = function(sourceId) {
-    var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
+    const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
 
     if (sourceGroup) {
       this._modeLayer.selectElement(sourceGroup, false);
     }
   };
 
-  TimelineZoomView.prototype.deselectElement = function() {
-    this._modeLayer.deselectElement(false);
+  TimelineZoomView.prototype.selectSourcesOnLineAfter = function(lineId, time) {
+    const sources = this._sourcesLayer.getSourcesOnLineAfter(lineId, time);
+
+    if (sources) {
+      this._modeLayer.selectElements(sources, false);
+    }
+  };
+
+  TimelineZoomView.prototype.deselectAll = function() {
+    this._modeLayer.deselectAll(false);
   };
 
   TimelineZoomView.prototype.isListening = function() {