@checksub_team/peaks_timeline 1.4.40 → 1.4.41

package/src/sources-layer.js

@@ -1,592 +1,592 @@
-/**
- * @file
- *
- * Defines the {@link SourcesLayer} class.
- *
- * @module sources-layer
- */
-
-define([
-  './source-group',
-  './lines',
-  './data-retriever',
-  './utils',
-  './invoker',
-  'konva'
-], function(
-  SourceGroup,
-  Lines,
-  DataRetriever,
-  Utils,
-  Invoker,
-  Konva) {
-  'use strict';
-
-  /**
-   * Creates a Konva.Layer that displays sources on the timeline.
-   *
-   * @class
-   * @alias SourcesLayer
-   *
-   * @param {Peaks} peaks
-   * @param {WaveformOverview|WaveformZoomView} view
-   * @param {Boolean} allowEditing
-   */
-
-  function SourcesLayer(peaks, view, allowEditing) {
-    this._peaks         = peaks;
-    this._view          = view;
-    this._allowEditing  = allowEditing;
-    this._sourcesGroup  = {};
-    this._layer         = new Konva.Layer();
-    this._dataRetriever = new DataRetriever(peaks);
-    this._lines         = new Lines(peaks, view, this);
-    this._lines.addToLayer(this);
-
-    this._loadedData = {};
-
-    this._debouncedRescale = new Invoker().debounce(
-      this._rescale, 150
-    );
-
-    this._peaks.on('sources.add', this._onSourcesAdd.bind(this));
-    this._peaks.on('sources.destroy', this._onSourcesDestroy.bind(this));
-    this._peaks.on('sources.show', this._onSourcesShow.bind(this));
-    this._peaks.on('sources.hide', this._onSourcesHide.bind(this));
-    this._peaks.on('source.update', this._onSourceUpdate.bind(this));
-    this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
-    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));
-  }
-
-  SourcesLayer.prototype.getLoadedData = function(id) {
-    return this._loadedData[id];
-  };
-
-  SourcesLayer.prototype.setLoadedData = function(id, data) {
-    this._loadedData[id] = data;
-  };
-
-  SourcesLayer.prototype.getSegmentsGroups = function() {
-    return this._lines.getSegmentsGroups();
-  };
-
-  SourcesLayer.prototype.add = function(element) {
-    this._layer.add(element);
-  };
-
-  /**
-   * Adds the layer to the given {Konva.Stage}.
-   *
-   * @param {Konva.Stage} stage
-   */
-
-  SourcesLayer.prototype.addToStage = function(stage) {
-    stage.add(this._layer);
-  };
-
-  SourcesLayer.prototype.enableEditing = function(enable) {
-    this._allowEditing = enable;
-  };
-
-  SourcesLayer.prototype.isEditingEnabled = function() {
-    return this._allowEditing;
-  };
-
-  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
-    var positions = [];
-
-    for (var sourceId in this._sourcesGroup) {
-      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
-        var source = this._sourcesGroup[sourceId].getSource();
-
-        if (!positions.includes(source.position)) {
-          this._lines.changeLineHeight(
-            oldHeight,
-            this._peaks.options.lineHeight
-          );
-          positions.push(source.position);
-        }
-        this._removeSource(source);
-        this._addSourceGroup(source);
-      }
-    }
-
-    if (positions) {
-      var frameOffset = this._view.getFrameOffset();
-      var width = this._view.getWidth();
-
-      this.updateSources(
-        this._view.pixelsToTime(frameOffset),
-        this._view.pixelsToTime(frameOffset + width)
-      );
-    }
-  };
-
-  SourcesLayer.prototype._onSourceUpdate = function(source) {
-    var redraw = false;
-    var sourceGroup = this._sourcesGroup[source.id];
-    var frameOffset = this._view.getFrameOffset();
-    var width = this._view.getWidth();
-    var frameStartTime = this._view.pixelsToTime(frameOffset);
-    var frameEndTime   = this._view.pixelsToTime(frameOffset + width);
-
-    if (sourceGroup) {
-      this._removeSource(source);
-      redraw = true;
-    }
-
-    if (source.isVisible(frameStartTime, frameEndTime)) {
-      this._addSourceGroup(source);
-      redraw = true;
-    }
-
-    if (redraw) {
-      this.updateSources(frameStartTime, frameEndTime);
-    }
-  };
-
-  SourcesLayer.prototype._onSourcesShow = function(sources) {
-    var self = this;
-
-    sources.forEach(function(source) {
-      self._sourcesGroup[source.id].unwrap(true);
-    });
-
-    this._layer.draw();
-  };
-
-  SourcesLayer.prototype._onSourcesAdd = function(sources) {
-    var self = this;
-
-    var frameOffset = self._view.getFrameOffset();
-    var width = self._view.getWidth();
-
-    var frameStartTime = self._view.pixelsToTime(frameOffset);
-    var frameEndTime   = self._view.pixelsToTime(frameOffset + width);
-
-    sources.forEach(function(source) {
-      self._addSourceGroup(source);
-    });
-
-    this._view.updateTimelineLength();
-
-    this.updateSources(frameStartTime, frameEndTime);
-  };
-
-  SourcesLayer.prototype._onSourcesDestroy = function(sources) {
-    var self = this;
-
-    sources.forEach(function(source) {
-      self._removeSource(source, true);
-    });
-
-    this._view.updateTimelineLength();
-
-    this._layer.draw();
-  };
-
-  SourcesLayer.prototype._onSourcesShow = function(sources) {
-    var self = this;
-
-    sources.forEach(function(source) {
-      self._sourcesGroup[source.id].unwrap(true);
-    });
-
-    this._layer.draw();
-  };
-
-  SourcesLayer.prototype._onSourcesHide = function(sources) {
-    var self = this;
-
-    sources.forEach(function(source) {
-      self._sourcesGroup[source.id].wrap(true);
-    });
-
-    this._layer.draw();
-  };
-
-  SourcesLayer.prototype._onDataRetrieved = function(data, source, url) {
-    if (data) {
-      var type = data.type.split('/')[0];
-      var sourceGroup = this._sourcesGroup[source.id];
-
-      if (sourceGroup) {
-        switch (type) {
-          case 'image':
-            sourceGroup.addImagePreview(data.content, url, true);
-            break;
-          case 'video':
-            sourceGroup.addVideoPreview(data.content, url, true);
-            break;
-          case 'binary':
-          case 'text':
-          case 'application':
-          case 'other':
-          case 'audio':
-            sourceGroup.addAudioPreview(type, data.content, url, true);
-            break;
-          default:
-            // Type not handled
-        }
-      }
-    }
-  };
-
-  SourcesLayer.prototype._onSourcesRefresh = function() {
-    this._layer.draw();
-  };
-
-  SourcesLayer.prototype._onSegmentsShow = function(lineId, position) {
-    this._lines.addSegments(lineId, position);
-    this._view.updateTimelineLength();
-    this._layer.draw();
-  };
-
-  /**
-   * Creates the Konva UI objects for a given source.
-   *
-   * @private
-   * @param {Source} source
-   * @returns {Kanva.Group}
-   */
-
-  SourcesLayer.prototype._createSourceGroup = function(source) {
-    return new SourceGroup(source, this._peaks, this, this._view);
-  };
-
-  /**
-   * Adds a Konva UI object to the layer for a given source.
-   *
-   * @private
-   * @param {Source} source
-   * @returns {Konva.Group}
-   */
-
-  SourcesLayer.prototype._addSourceGroup = function(source) {
-    var sourceGroup = this._createSourceGroup(source);
-
-    this._sourcesGroup[source.id] = sourceGroup;
-    this._lines.addSourceGroup(sourceGroup, source.position);
-
-    // After creating and referencing the new group, we can start data retrieval
-    this._dataRetriever.retrieveData(source);
-
-    return sourceGroup;
-  };
-
-  /**
-   * Updates the positions of all displayed sources in the view.
-   *
-   * @param {Number} startTime The start of the visible range in the view,
-   *   in seconds.
-   * @param {Number} endTime The end of the visible range in the view,
-   *   in seconds.
-   */
-
-  SourcesLayer.prototype.updateSources = function(startTime, endTime) {
-    // Update segments
-    this._lines.updateSegments(startTime, endTime);
-
-    // Update sources in visible time range.
-    var sources = this.findSources(startTime, endTime);
-
-    // Should implement virtualization on Y
-
-    var count = sources.length;
-
-    sources.forEach(this._updateSource.bind(this));
-    this._lines.setOffsetY(this._view.getFrameOffsetY());
-
-    count += this._removeInvisibleSources(startTime, endTime);
-
-    if (count > 0) {
-      this._layer.draw();
-    }
-  };
-
-  SourcesLayer.prototype.findSources = function(startTime, endTime) {
-    var sources = this._peaks.sources.find(startTime, endTime);
-    var positions = this._lines.getVisibleLines();
-
-    return sources.filter(
-      function(source) {
-        return positions[source.position];
-      }
-    );
-  };
-
-  SourcesLayer.prototype.updateSource = function(source, newStartX, newEndX, newY) {
-    var newXs = {
-      startX: newStartX,
-      endX: newEndX,
-      updateWidth: false
-    };
-
-    if (this._peaks.options.canMoveSourcesBetweenLines) {
-      this.manageVerticalPosition(source, newY);
-    }
-
-    newXs = this.manageSourceOrder(source, newStartX, newEndX);
-
-    newXs = this.manageCollision(source, newXs.startX, newXs.endX);
-
-    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();
-    }
-  };
-
-  SourcesLayer.prototype.manageVerticalPosition = function(source, newY) {
-    return this._lines.manageVerticalPosition(source, newY);
-  };
-
-  SourcesLayer.prototype.manageSourceOrder = function(source, newStartX, newEndX) {
-    return this._lines.manageSourceOrder(source, newStartX, newEndX);
-  };
-
-  SourcesLayer.prototype.manageCollision = function(source, newStartX, newEndX) {
-    return this._lines.manageCollision(source, newStartX, newEndX);
-  };
-
-  /**
-   * @private
-   */
-
-  SourcesLayer.prototype._updateSource = function(source) {
-    var sourceGroup = this._findOrAddSourceGroup(source);
-
-    sourceGroup.update();
-  };
-
-  SourcesLayer.prototype._findOrAddSourceGroup = function(source) {
-    var sourceGroup = this._sourcesGroup[source.id];
-
-    if (!sourceGroup) {
-      sourceGroup = this._addSourceGroup(source);
-    }
-
-    return sourceGroup;
-  };
-
-  /**
-   * Removes any sources that are not visible, i.e., are not within and do not
-   * overlap the given time range.
-   *
-   * @private
-   * @param {Number} startTime The start of the visible time range, in seconds.
-   * @param {Number} endTime The end of the visible time range, in seconds.
-   * @returns {Number} The number of sources removed.
-   */
-
-  SourcesLayer.prototype._removeInvisibleSources = function(startTime, endTime) {
-    var count = 0;
-
-    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()) {
-          this._removeSource(source);
-          count++;
-        }
-      }
-    }
-
-    return count;
-  };
-
-  SourcesLayer.prototype._isSourceVisible = function(source, startTime, endTime) {
-    return source.isVisible(startTime, endTime) && this._lines.isLineVisible(source.position);
-  };
-
-  /**
-   * Get all visible sources.
-   *
-   * @private
-   * @returns {Array<Source>} The visible sources.
-   */
-
-  SourcesLayer.prototype._getVisibleSources = function() {
-    var frameOffset = this._view.getFrameOffset();
-    var width = this._view.getWidth();
-    var frameStartTime = this._view.pixelsToTime(frameOffset);
-    var frameEndTime   = this._view.pixelsToTime(frameOffset + width);
-
-    var visibleSources = [];
-
-    for (var sourceId in this._sourcesGroup) {
-      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
-        var source = this._sourcesGroup[sourceId].data;
-
-        if (source.isVisible(frameStartTime, frameEndTime)) {
-          visibleSources.push(source);
-        }
-      }
-    }
-
-    return visibleSources;
-  };
-
-  SourcesLayer.prototype._getOverlappedSources = function() {
-    var self = this;
-    var sources = this._getVisibleSources();
-
-    return sources.reduce(function(result, source) {
-      sources.forEach(function(source2) {
-        if (self._sourcesGroupOverlapped(source, source2)) {
-          if (!result.includes(source2.id)) {
-            result.push(source2);
-          }
-        }
-      });
-
-      return result;
-    }, []);
-  };
-
-  /**
-   * Removes the given source from the view.
-   *
-   * @param {Source} source
-   */
-
-  SourcesLayer.prototype._removeSource = function(source, isPermanent) {
-    var sourceGroup = this._sourcesGroup[source.id];
-
-    if (sourceGroup) {
-      delete this._sourcesGroup[source.id];
-      this._lines.removeSourceGroup(source, isPermanent);
-      sourceGroup.destroy();
-    }
-
-    if (isPermanent) {
-      this._peaks.emit('source.destroyed', source);
-    }
-  };
-
-  /**
-   * Toggles visibility of the sources layer.
-   *
-   * @param {Boolean} visible
-   */
-
-  SourcesLayer.prototype.setVisible = function(visible) {
-    this._layer.setVisible(visible);
-  };
-
-  SourcesLayer.prototype.draw = function() {
-    this._layer.draw();
-  };
-
-  SourcesLayer.prototype.listening = function(bool) {
-    this._layer.listening(bool);
-  };
-
-  SourcesLayer.prototype.stopDrag = function() {
-    this._layer.stopDrag();
-  };
-
-  SourcesLayer.prototype.getSourceGroupById = function(sourceId) {
-    return this._sourcesGroup[sourceId];
-  };
-
-  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);
-
-    return endsLater || startsEarlier;
-  };
-
-  SourcesLayer.prototype.rescale = function(debounce) {
-    // this._lines.rescale();
-    if (debounce) {
-      this._debouncedRescale();
-    }
-    else {
-      this._rescale();
-    }
-  };
-
-  SourcesLayer.prototype._rescale = function() {
-    var id, audioPreviews, urls = [], self = this;
-
-    for (id in this._sourcesGroup) {
-      if (Utils.objectHasProperty(this._sourcesGroup, id)) {
-        audioPreviews = this._sourcesGroup[id].getAudioPreview();
-
-        audioPreviews.forEach(function(audioPreview) {
-          if (self._shouldResampleAudio(audioPreview.url, urls)) {
-            self._loadedData[audioPreview.url + '-scaled'] = {
-              data: self._resampleAudio(audioPreview.url),
-              scale: self._view.getTimeToPixelsScale()
-            };
-
-            urls.push(audioPreview.url);
-          }
-        });
-      }
-    }
-    this._layer.draw();
-  };
-
-  SourcesLayer.prototype._shouldResampleAudio = function(audioUrl, urls) {
-    return this._loadedData[audioUrl + '-scaled']
-      && !urls.includes(audioUrl)
-      && this._loadedData[audioUrl + '-scaled'].scale !== this._view.getTimeToPixelsScale();
-  };
-
-  SourcesLayer.prototype._resampleAudio = function(audioUrl) {
-    return this._loadedData[audioUrl].resample({
-      scale: this._loadedData[audioUrl].sample_rate
-              / this._view.getTimeToPixelsScale()
-    });
-  };
-
-  SourcesLayer.prototype.destroy = function() {
-    this._peaks.off('sources.add', this._onSourcesAdd);
-    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.wrappingChanged', this._onSourceWrappingChanged);
-    this._peaks.off('data.retrieved', this._onDataRetrieved);
-    this._peaks.off('sources.refresh', this._onSourcesRefresh);
-    this._peaks.off('segments.show', this._onSegmentsShow);
-  };
-
-  SourcesLayer.prototype.getHeight = function() {
-    return this._layer.getHeight();
-  };
-
-  SourcesLayer.prototype.getLength = function() {
-    return this._lines.linesLength();
-  };
-
-  SourcesLayer.prototype.getLineByPosition = function(pos) {
-    return this._lines.getLineByPosition(pos);
-  };
-
-  /**
-   * Object for storing data and UI of a source.
-   *
-   * @typedef {Object} CompleteSource
-   * @global
-   * @property {Source} data
-   * @property {Konva.Group} ui
-   */
-
-  return SourcesLayer;
-});
+/**
+ * @file
+ *
+ * Defines the {@link SourcesLayer} class.
+ *
+ * @module sources-layer
+ */
+
+define([
+  './source-group',
+  './lines',
+  './data-retriever',
+  './utils',
+  './invoker',
+  'konva'
+], function(
+  SourceGroup,
+  Lines,
+  DataRetriever,
+  Utils,
+  Invoker,
+  Konva) {
+  'use strict';
+
+  /**
+   * Creates a Konva.Layer that displays sources on the timeline.
+   *
+   * @class
+   * @alias SourcesLayer
+   *
+   * @param {Peaks} peaks
+   * @param {WaveformOverview|WaveformZoomView} view
+   * @param {Boolean} allowEditing
+   */
+
+  function SourcesLayer(peaks, view, allowEditing) {
+    this._peaks         = peaks;
+    this._view          = view;
+    this._allowEditing  = allowEditing;
+    this._sourcesGroup  = {};
+    this._layer         = new Konva.Layer();
+    this._dataRetriever = new DataRetriever(peaks);
+    this._lines         = new Lines(peaks, view, this);
+    this._lines.addToLayer(this);
+
+    this._loadedData = {};
+
+    this._debouncedRescale = new Invoker().debounce(
+      this._rescale, 150
+    );
+
+    this._peaks.on('sources.add', this._onSourcesAdd.bind(this));
+    this._peaks.on('sources.destroy', this._onSourcesDestroy.bind(this));
+    this._peaks.on('sources.show', this._onSourcesShow.bind(this));
+    this._peaks.on('sources.hide', this._onSourcesHide.bind(this));
+    this._peaks.on('source.update', this._onSourceUpdate.bind(this));
+    this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
+    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));
+  }
+
+  SourcesLayer.prototype.getLoadedData = function(id) {
+    return this._loadedData[id];
+  };
+
+  SourcesLayer.prototype.setLoadedData = function(id, data) {
+    this._loadedData[id] = data;
+  };
+
+  SourcesLayer.prototype.getSegmentsGroups = function() {
+    return this._lines.getSegmentsGroups();
+  };
+
+  SourcesLayer.prototype.add = function(element) {
+    this._layer.add(element);
+  };
+
+  /**
+   * Adds the layer to the given {Konva.Stage}.
+   *
+   * @param {Konva.Stage} stage
+   */
+
+  SourcesLayer.prototype.addToStage = function(stage) {
+    stage.add(this._layer);
+  };
+
+  SourcesLayer.prototype.enableEditing = function(enable) {
+    this._allowEditing = enable;
+  };
+
+  SourcesLayer.prototype.isEditingEnabled = function() {
+    return this._allowEditing;
+  };
+
+  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
+    var positions = [];
+
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        var source = this._sourcesGroup[sourceId].getSource();
+
+        if (!positions.includes(source.position)) {
+          this._lines.changeLineHeight(
+            oldHeight,
+            this._peaks.options.lineHeight
+          );
+          positions.push(source.position);
+        }
+        this._removeSource(source);
+        this._addSourceGroup(source);
+      }
+    }
+
+    if (positions) {
+      var frameOffset = this._view.getFrameOffset();
+      var width = this._view.getWidth();
+
+      this.updateSources(
+        this._view.pixelsToTime(frameOffset),
+        this._view.pixelsToTime(frameOffset + width)
+      );
+    }
+  };
+
+  SourcesLayer.prototype._onSourceUpdate = function(source) {
+    var redraw = false;
+    var sourceGroup = this._sourcesGroup[source.id];
+    var frameOffset = this._view.getFrameOffset();
+    var width = this._view.getWidth();
+    var frameStartTime = this._view.pixelsToTime(frameOffset);
+    var frameEndTime   = this._view.pixelsToTime(frameOffset + width);
+
+    if (sourceGroup) {
+      this._removeSource(source);
+      redraw = true;
+    }
+
+    if (source.isVisible(frameStartTime, frameEndTime)) {
+      this._addSourceGroup(source);
+      redraw = true;
+    }
+
+    if (redraw) {
+      this.updateSources(frameStartTime, frameEndTime);
+    }
+  };
+
+  SourcesLayer.prototype._onSourcesShow = function(sources) {
+    var self = this;
+
+    sources.forEach(function(source) {
+      self._sourcesGroup[source.id].unwrap(true);
+    });
+
+    this._layer.draw();
+  };
+
+  SourcesLayer.prototype._onSourcesAdd = function(sources) {
+    var self = this;
+
+    var frameOffset = self._view.getFrameOffset();
+    var width = self._view.getWidth();
+
+    var frameStartTime = self._view.pixelsToTime(frameOffset);
+    var frameEndTime   = self._view.pixelsToTime(frameOffset + width);
+
+    sources.forEach(function(source) {
+      self._addSourceGroup(source);
+    });
+
+    this._view.updateTimelineLength();
+
+    this.updateSources(frameStartTime, frameEndTime);
+  };
+
+  SourcesLayer.prototype._onSourcesDestroy = function(sources, shouldBlockEvent) {
+    var self = this;
+
+    sources.forEach(function(source) {
+      self._removeSource(source, true, shouldBlockEvent);
+    });
+
+    this._view.updateTimelineLength();
+
+    this._layer.draw();
+  };
+
+  SourcesLayer.prototype._onSourcesShow = function(sources) {
+    var self = this;
+
+    sources.forEach(function(source) {
+      self._sourcesGroup[source.id].unwrap(true);
+    });
+
+    this._layer.draw();
+  };
+
+  SourcesLayer.prototype._onSourcesHide = function(sources) {
+    var self = this;
+
+    sources.forEach(function(source) {
+      self._sourcesGroup[source.id].wrap(true);
+    });
+
+    this._layer.draw();
+  };
+
+  SourcesLayer.prototype._onDataRetrieved = function(data, source, url) {
+    if (data) {
+      var type = data.type.split('/')[0];
+      var sourceGroup = this._sourcesGroup[source.id];
+
+      if (sourceGroup) {
+        switch (type) {
+          case 'image':
+            sourceGroup.addImagePreview(data.content, url, true);
+            break;
+          case 'video':
+            sourceGroup.addVideoPreview(data.content, url, true);
+            break;
+          case 'binary':
+          case 'text':
+          case 'application':
+          case 'other':
+          case 'audio':
+            sourceGroup.addAudioPreview(type, data.content, url, true);
+            break;
+          default:
+            // Type not handled
+        }
+      }
+    }
+  };
+
+  SourcesLayer.prototype._onSourcesRefresh = function() {
+    this._layer.draw();
+  };
+
+  SourcesLayer.prototype._onSegmentsShow = function(lineId, position) {
+    this._lines.addSegments(lineId, position);
+    this._view.updateTimelineLength();
+    this._layer.draw();
+  };
+
+  /**
+   * Creates the Konva UI objects for a given source.
+   *
+   * @private
+   * @param {Source} source
+   * @returns {Kanva.Group}
+   */
+
+  SourcesLayer.prototype._createSourceGroup = function(source) {
+    return new SourceGroup(source, this._peaks, this, this._view);
+  };
+
+  /**
+   * Adds a Konva UI object to the layer for a given source.
+   *
+   * @private
+   * @param {Source} source
+   * @returns {Konva.Group}
+   */
+
+  SourcesLayer.prototype._addSourceGroup = function(source) {
+    var sourceGroup = this._createSourceGroup(source);
+
+    this._sourcesGroup[source.id] = sourceGroup;
+    this._lines.addSourceGroup(sourceGroup, source.position);
+
+    // After creating and referencing the new group, we can start data retrieval
+    this._dataRetriever.retrieveData(source);
+
+    return sourceGroup;
+  };
+
+  /**
+   * Updates the positions of all displayed sources in the view.
+   *
+   * @param {Number} startTime The start of the visible range in the view,
+   *   in seconds.
+   * @param {Number} endTime The end of the visible range in the view,
+   *   in seconds.
+   */
+
+  SourcesLayer.prototype.updateSources = function(startTime, endTime) {
+    // Update segments
+    this._lines.updateSegments(startTime, endTime);
+
+    // Update sources in visible time range.
+    var sources = this.findSources(startTime, endTime);
+
+    // Should implement virtualization on Y
+
+    var count = sources.length;
+
+    sources.forEach(this._updateSource.bind(this));
+    this._lines.setOffsetY(this._view.getFrameOffsetY());
+
+    count += this._removeInvisibleSources(startTime, endTime);
+
+    if (count > 0) {
+      this._layer.draw();
+    }
+  };
+
+  SourcesLayer.prototype.findSources = function(startTime, endTime) {
+    var sources = this._peaks.sources.find(startTime, endTime);
+    var positions = this._lines.getVisibleLines();
+
+    return sources.filter(
+      function(source) {
+        return positions[source.position];
+      }
+    );
+  };
+
+  SourcesLayer.prototype.updateSource = function(source, newStartX, newEndX, newY) {
+    var newXs = {
+      startX: newStartX,
+      endX: newEndX,
+      updateWidth: false
+    };
+
+    if (this._peaks.options.canMoveSourcesBetweenLines) {
+      this.manageVerticalPosition(source, newY);
+    }
+
+    newXs = this.manageSourceOrder(source, newStartX, newEndX);
+
+    newXs = this.manageCollision(source, newXs.startX, newXs.endX);
+
+    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();
+    }
+  };
+
+  SourcesLayer.prototype.manageVerticalPosition = function(source, newY) {
+    return this._lines.manageVerticalPosition(source, newY);
+  };
+
+  SourcesLayer.prototype.manageSourceOrder = function(source, newStartX, newEndX) {
+    return this._lines.manageSourceOrder(source, newStartX, newEndX);
+  };
+
+  SourcesLayer.prototype.manageCollision = function(source, newStartX, newEndX) {
+    return this._lines.manageCollision(source, newStartX, newEndX);
+  };
+
+  /**
+   * @private
+   */
+
+  SourcesLayer.prototype._updateSource = function(source) {
+    var sourceGroup = this._findOrAddSourceGroup(source);
+
+    sourceGroup.update();
+  };
+
+  SourcesLayer.prototype._findOrAddSourceGroup = function(source) {
+    var sourceGroup = this._sourcesGroup[source.id];
+
+    if (!sourceGroup) {
+      sourceGroup = this._addSourceGroup(source);
+    }
+
+    return sourceGroup;
+  };
+
+  /**
+   * Removes any sources that are not visible, i.e., are not within and do not
+   * overlap the given time range.
+   *
+   * @private
+   * @param {Number} startTime The start of the visible time range, in seconds.
+   * @param {Number} endTime The end of the visible time range, in seconds.
+   * @returns {Number} The number of sources removed.
+   */
+
+  SourcesLayer.prototype._removeInvisibleSources = function(startTime, endTime) {
+    var count = 0;
+
+    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()) {
+          this._removeSource(source);
+          count++;
+        }
+      }
+    }
+
+    return count;
+  };
+
+  SourcesLayer.prototype._isSourceVisible = function(source, startTime, endTime) {
+    return source.isVisible(startTime, endTime) && this._lines.isLineVisible(source.position);
+  };
+
+  /**
+   * Get all visible sources.
+   *
+   * @private
+   * @returns {Array<Source>} The visible sources.
+   */
+
+  SourcesLayer.prototype._getVisibleSources = function() {
+    var frameOffset = this._view.getFrameOffset();
+    var width = this._view.getWidth();
+    var frameStartTime = this._view.pixelsToTime(frameOffset);
+    var frameEndTime   = this._view.pixelsToTime(frameOffset + width);
+
+    var visibleSources = [];
+
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        var source = this._sourcesGroup[sourceId].data;
+
+        if (source.isVisible(frameStartTime, frameEndTime)) {
+          visibleSources.push(source);
+        }
+      }
+    }
+
+    return visibleSources;
+  };
+
+  SourcesLayer.prototype._getOverlappedSources = function() {
+    var self = this;
+    var sources = this._getVisibleSources();
+
+    return sources.reduce(function(result, source) {
+      sources.forEach(function(source2) {
+        if (self._sourcesGroupOverlapped(source, source2)) {
+          if (!result.includes(source2.id)) {
+            result.push(source2);
+          }
+        }
+      });
+
+      return result;
+    }, []);
+  };
+
+  /**
+   * Removes the given source from the view.
+   *
+   * @param {Source} source
+   */
+
+  SourcesLayer.prototype._removeSource = function(source, isPermanent, shouldBlockEvent) {
+    var sourceGroup = this._sourcesGroup[source.id];
+
+    if (sourceGroup) {
+      delete this._sourcesGroup[source.id];
+      this._lines.removeSourceGroup(source, isPermanent);
+      sourceGroup.destroy();
+    }
+
+    if (isPermanent && !shouldBlockEvent) {
+      this._peaks.emit('source.destroyed', source);
+    }
+  };
+
+  /**
+   * Toggles visibility of the sources layer.
+   *
+   * @param {Boolean} visible
+   */
+
+  SourcesLayer.prototype.setVisible = function(visible) {
+    this._layer.setVisible(visible);
+  };
+
+  SourcesLayer.prototype.draw = function() {
+    this._layer.draw();
+  };
+
+  SourcesLayer.prototype.listening = function(bool) {
+    this._layer.listening(bool);
+  };
+
+  SourcesLayer.prototype.stopDrag = function() {
+    this._layer.stopDrag();
+  };
+
+  SourcesLayer.prototype.getSourceGroupById = function(sourceId) {
+    return this._sourcesGroup[sourceId];
+  };
+
+  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);
+
+    return endsLater || startsEarlier;
+  };
+
+  SourcesLayer.prototype.rescale = function(debounce) {
+    // this._lines.rescale();
+    if (debounce) {
+      this._debouncedRescale();
+    }
+    else {
+      this._rescale();
+    }
+  };
+
+  SourcesLayer.prototype._rescale = function() {
+    var id, audioPreviews, urls = [], self = this;
+
+    for (id in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, id)) {
+        audioPreviews = this._sourcesGroup[id].getAudioPreview();
+
+        audioPreviews.forEach(function(audioPreview) {
+          if (self._shouldResampleAudio(audioPreview.url, urls)) {
+            self._loadedData[audioPreview.url + '-scaled'] = {
+              data: self._resampleAudio(audioPreview.url),
+              scale: self._view.getTimeToPixelsScale()
+            };
+
+            urls.push(audioPreview.url);
+          }
+        });
+      }
+    }
+    this._layer.draw();
+  };
+
+  SourcesLayer.prototype._shouldResampleAudio = function(audioUrl, urls) {
+    return this._loadedData[audioUrl + '-scaled']
+      && !urls.includes(audioUrl)
+      && this._loadedData[audioUrl + '-scaled'].scale !== this._view.getTimeToPixelsScale();
+  };
+
+  SourcesLayer.prototype._resampleAudio = function(audioUrl) {
+    return this._loadedData[audioUrl].resample({
+      scale: this._loadedData[audioUrl].sample_rate
+              / this._view.getTimeToPixelsScale()
+    });
+  };
+
+  SourcesLayer.prototype.destroy = function() {
+    this._peaks.off('sources.add', this._onSourcesAdd);
+    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.wrappingChanged', this._onSourceWrappingChanged);
+    this._peaks.off('data.retrieved', this._onDataRetrieved);
+    this._peaks.off('sources.refresh', this._onSourcesRefresh);
+    this._peaks.off('segments.show', this._onSegmentsShow);
+  };
+
+  SourcesLayer.prototype.getHeight = function() {
+    return this._layer.getHeight();
+  };
+
+  SourcesLayer.prototype.getLength = function() {
+    return this._lines.linesLength();
+  };
+
+  SourcesLayer.prototype.getLineByPosition = function(pos) {
+    return this._lines.getLineByPosition(pos);
+  };
+
+  /**
+   * Object for storing data and UI of a source.
+   *
+   * @typedef {Object} CompleteSource
+   * @global
+   * @property {Source} data
+   * @property {Konva.Group} ui
+   */
+
+  return SourcesLayer;
+});