@checksub_team/peaks_timeline 1.4.17

package/src/sources-layer.js

@@ -0,0 +1,509 @@
+/**
+ * @file
+ *
+ * Defines the {@link SourcesLayer} class.
+ *
+ * @module sources-layer
+ */
+
+define([
+  './source-group',
+  './segments-group',
+  './lines',
+  './data-retriever',
+  './utils',
+  'konva'
+], function(
+  SourceGroup,
+  SegmentsGroup,
+  Lines,
+  DataRetriever,
+  Utils,
+  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._segmentsGroup = new SegmentsGroup(peaks, view, true);
+
+    this._loadedData = {};
+
+    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));
+  }
+
+  SourcesLayer.prototype.getLoadedData = function(id) {
+    return this._loadedData[id];
+  };
+
+  SourcesLayer.prototype.setLoadedData = function(id, data) {
+    this._loadedData[id] = data;
+  };
+
+  SourcesLayer.prototype.getSegmentsGroup = function() {
+    return this._segmentsGroup;
+  };
+
+  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._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(position) {
+    this._lines.addSegments(this._segmentsGroup, 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
+    };
+
+    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._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() {
+    this._lines.rescale();
+    this._layer.draw();
+  };
+
+  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();
+  };
+
+  /**
+   * Object for storing data and UI of a source.
+   *
+   * @typedef {Object} CompleteSource
+   * @global
+   * @property {Source} data
+   * @property {Konva.Group} ui
+   */
+
+  return SourcesLayer;
+});