@checksub_team/peaks_timeline 1.4.17

package/src/timeline-axis.js

@@ -0,0 +1,238 @@
+/**
+ * @file
+ *
+ * Defines the {@link TimelineAxis} class.
+ *
+ * @module timeline-axis
+ */
+
+define([
+  './utils',
+  'konva'
+], function(Utils, Konva) {
+  'use strict';
+
+  var LEFT_PADDING = 4;
+
+  /**
+   * Creates the timeline axis shapes and adds them to the given view layer.
+   *
+   * @class
+   * @alias TimelineAxis
+   *
+   * @param {WaveformOverview|TimelineZoomView} view
+   * @param {Object} options
+   * @param {String} options.axisGridlineColor
+   * @param {String} options.axisLabelColor
+   */
+
+  function TimelineAxis(peaks, view, options) {
+    var self = this;
+
+    peaks.on('playhead.moved', this._onPlayheadMoved.bind(this));
+    peaks.on('playhead.hidden', this._onPlayheadHidden.bind(this));
+
+    self._axisGridlineColor = options.axisGridlineColor;
+    self._axisLabelColor    = options.axisLabelColor;
+
+    self._backLayer = new Konva.Layer({
+      listening: false
+    });
+
+    self._frontLayer = new Konva.Layer({
+      listening: false
+    });
+
+    self._axisShape = new Konva.Shape({
+      sceneFunc: function(context) {
+        self.drawAxis(context, view);
+      }
+    });
+    self._backLayer.add(self._axisShape);
+
+    self._timesShape = new Konva.Shape({
+      sceneFunc: function(context) {
+        self.drawTimes(context, view);
+      }
+    });
+    self._frontLayer.add(self._timesShape);
+  }
+
+  TimelineAxis.prototype._onPlayheadMoved = function(playheadX, playheadWidth) {
+    this._maskStart = playheadX;
+    this._maskEnd = playheadX + playheadWidth;
+    this._frontLayer.draw();
+  };
+
+  TimelineAxis.prototype._onPlayheadHidden = function() {
+    this._maskStart = null;
+    this._maskEnd = null;
+    this._frontLayer.draw();
+  };
+
+  TimelineAxis.prototype.draw = function() {
+    this._backLayer.draw();
+    this._frontLayer.draw();
+  };
+
+  TimelineAxis.prototype.addBackToStage = function(stage) {
+    stage.add(this._backLayer);
+  };
+
+  TimelineAxis.prototype.addFrontToStage = function(stage) {
+    stage.add(this._frontLayer);
+  };
+
+  /**
+   * Returns number of seconds for each x-axis marker, appropriate for the
+   * current zoom level, ensuring that markers are not too close together
+   * and that markers are placed at intuitive time intervals (i.e., every 1,
+   * 2, 5, 10, 20, 30 seconds, then every 1, 2, 5, 10, 20, 30 minutes, then
+   * every 1, 2, 5, 10, 20, 30 hours).
+   *
+   * @param {WaveformOverview|WaveformZoomView} view
+   * @returns {Number}
+   */
+
+  TimelineAxis.prototype.getAxisLabelScale = function(view) {
+    var baseSecs   = 1; // seconds
+    var steps      = [0.1, 0.5, 1, 2, 5, 10, 20, 30];
+    var minSpacing = 60;
+    var index      = 0;
+
+    var secs;
+
+    for (;;) {
+      secs = baseSecs * steps[index];
+      var pixels = view.timeToPixels(secs);
+
+      if (pixels < minSpacing) {
+        if (++index === steps.length) {
+          baseSecs *= 60; // seconds -> minutes -> hours
+          index = 0;
+        }
+      }
+      else {
+        break;
+      }
+    }
+
+    return secs;
+  };
+
+  /**
+   * Draws the time axis and labels onto a view.
+   *
+   * @param {Konva.Context} context The context to draw on.
+   * @param {WaveformOverview|WaveformZoomView} view
+   */
+
+  TimelineAxis.prototype.drawAxis = function(context, view) {
+    var currentFrameStartTime = view.pixelsToTime(view.getFrameOffset());
+
+    // Time interval between axis markers (seconds)
+    var axisLabelIntervalSecs = this.getAxisLabelScale(view);
+
+    // Time of first axis marker (seconds)
+    var firstAxisLabelSecs = Utils.roundUpToNearest(currentFrameStartTime, axisLabelIntervalSecs);
+
+    // Distance between waveform start time and first axis marker (seconds)
+    var axisLabelOffsetSecs = firstAxisLabelSecs - currentFrameStartTime;
+
+    // Distance between waveform start time and first axis marker (pixels)
+    var axisLabelOffsetPixels = view.timeToPixels(axisLabelOffsetSecs);
+
+    context.setAttr('strokeStyle', this._axisGridlineColor);
+    context.setAttr('lineWidth', 1);
+
+    // Set text style
+    context.setAttr('font', '11px sans-serif');
+    context.setAttr('fillStyle', this._axisLabelColor);
+    context.setAttr('textAlign', 'left');
+    context.setAttr('textBaseline', 'bottom');
+
+    var secs = firstAxisLabelSecs;
+    var x;
+
+    var width  = view.getWidth();
+    var height = view.getHeight();
+
+    for (;;) {
+      // Position of axis marker (pixels)
+      x = axisLabelOffsetPixels + view.timeToPixels(secs - firstAxisLabelSecs);
+      if (x >= width) {
+        break;
+      }
+
+      context.beginPath();
+      context.moveTo(x + 0.5, 0);
+      context.lineTo(x + 0.5, height);
+      context.stroke();
+
+      secs += axisLabelIntervalSecs;
+    }
+  };
+
+  TimelineAxis.prototype.drawTimes = function(context, view) {
+    var currentFrameStartTime = view.pixelsToTime(view.getFrameOffset());
+
+    // Time interval between axis markers (seconds)
+    var axisLabelIntervalSecs = this.getAxisLabelScale(view);
+
+    // Time of first axis marker (seconds)
+    var firstAxisLabelSecs = Utils.roundUpToNearestPositive(
+      currentFrameStartTime - 1,
+      axisLabelIntervalSecs
+    );
+
+    // Distance between waveform start time and first axis marker (seconds)
+    var axisLabelOffsetSecs = firstAxisLabelSecs - currentFrameStartTime;
+
+    // Distance between waveform start time and first axis marker (pixels)
+    var axisLabelOffsetPixels = view.timeToPixels(axisLabelOffsetSecs);
+
+    // Set text style
+    context.setAttr('font', '11px sans-serif');
+    context.setAttr('fillStyle', this._axisLabelColor);
+    context.setAttr('textAlign', 'left');
+    context.setAttr('textBaseline', 'bottom');
+
+    var secs = firstAxisLabelSecs;
+    var x;
+
+    var width  = view.getWidth();
+
+    for (;;) {
+      // Position of axis marker (pixels)
+      x = axisLabelOffsetPixels + view.timeToPixels(secs - firstAxisLabelSecs);
+
+      if (x >= width) {
+        break;
+      }
+
+      var label       = Utils.formatTime(secs, false);
+      var labelHeight = context.measureText(label).actualBoundingBoxAscent
+                        - context.measureText(label).actualBoundingBoxDescent;
+      var labelWidth  = context.measureText(label).width;
+      var labelX      = x + LEFT_PADDING;
+      var labelY      = labelHeight;
+
+      if (!this._labelIsMasked(labelX, labelX + labelWidth)) {
+        context.fillText(label, labelX, labelY);
+      }
+
+      secs += axisLabelIntervalSecs;
+    }
+  };
+
+  TimelineAxis.prototype._labelIsMasked = function(labelStart, labelEnd) {
+    if (this._maskStart && this._maskEnd) {
+      if (labelEnd > this._maskStart && labelStart < this._maskEnd) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  return TimelineAxis;
+});

package/src/timeline-segments.js

@@ -0,0 +1,389 @@
+/**
+ * @file
+ *
+ * Defines the {@link TimelineSegments} class.
+ *
+ * @module timeline-segments
+ */
+
+define([
+  'colors.css',
+  './segment',
+  './utils'
+], function(Colors, Segment, Utils) {
+  'use strict';
+
+  /**
+   * Segment parameters.
+   *
+   * @typedef {Object} SegmentOptions
+   * @global
+   * @property {Number} startTime Segment start time, in seconds.
+   * @property {Number} endTime Segment end time, in seconds.
+   * @property {Boolean=} editable If <code>true</code> the segment start and
+   *   end times can be adjusted via the user interface.
+   *   Default: <code>false</code>.
+   * @property {String=} color Segment waveform color.
+   *   Default: a random color.
+   * @property {String=} labelText Segment label text.
+   *   Default: an empty string.
+   * @property {String=} id A unique segment identifier.
+   *   Default: an automatically generated identifier.
+   */
+
+  /**
+   * Handles all functionality related to the adding, removing and manipulation
+   * of segments.
+   *
+   * @class
+   * @alias TimelineSegments
+   *
+   * @param {Peaks} peaks The parent Peaks object.
+   */
+
+  function TimelineSegments(peaks) {
+    this._peaks = peaks;
+    this._segments = [];
+    this._segmentsById = {};
+    this._segmentIdCounter = 0;
+    this._colorIndex = 0;
+  }
+
+  /**
+   * Returns a new unique segment id value.
+   *
+   * @private
+   * @returns {String}
+   */
+
+  TimelineSegments.prototype._getNextSegmentId = function() {
+    return 'peaks.segment.' + this._segmentIdCounter++;
+  };
+
+  var colors = [
+    Colors.navy,
+    Colors.blue,
+    Colors.aqua,
+    Colors.teal,
+    // Colors.olive,
+    // Colors.lime,
+    // Colors.green,
+    Colors.yellow,
+    Colors.orange,
+    Colors.red,
+    Colors.maroon,
+    Colors.fuchsia,
+    Colors.purple
+    // Colors.black,
+    // Colors.gray,
+    // Colors.silver
+  ];
+
+  /**
+   * @private
+   * @returns {String}
+   */
+
+  TimelineSegments.prototype._getSegmentColor = function() {
+    if (this._peaks.options.randomizeSegmentColor) {
+      if (++this._colorIndex === colors.length) {
+        this._colorIndex = 0;
+      }
+
+      return colors[this._colorIndex];
+    }
+    else {
+      return this._peaks.options.segmentColor;
+    }
+  };
+
+  /**
+   * Adds a new segment object.
+   *
+   * @private
+   * @param {Segment} segment
+   */
+
+  TimelineSegments.prototype._addSegment = function(segment) {
+    this._segments.push(segment);
+
+    this._segmentsById[segment.id] = segment;
+  };
+
+  /**
+   * Creates a new segment object.
+   *
+   * @private
+   * @param {SegmentOptions} options
+   * @return {Segment}
+   */
+
+  TimelineSegments.prototype._createSegment = function(options) {
+    // Watch for anyone still trying to use the old
+    // createSegment(startTime, endTime, ...) API
+    if (!Utils.isObject(options)) {
+      // eslint-disable-next-line max-len
+      throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
+    }
+
+    var segment = new Segment(
+      this._peaks,
+      Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id,
+      options.startTime,
+      options.endTime,
+      options.labelText,
+      options.color || this._getSegmentColor(),
+      options.textColor || '#000000',
+      options.handleTextColor || '#000000',
+      options.opacity || 1,
+      true // editable
+    );
+
+    return segment;
+  };
+
+  /**
+   * Returns all segments.
+   *
+   * @returns {Array<Segment>}
+   */
+
+  TimelineSegments.prototype.getSegments = function() {
+    return this._segments;
+  };
+
+  /**
+   * Add segments to the given line so they can be displayed.
+   */
+
+  TimelineSegments.prototype.addSegmentsToPosition = function(position) {
+    this._peaks.emit('segments.show', position);
+  };
+
+  /**
+   * Returns the segment with the given id, or <code>null</code> if not found.
+   *
+   * @param {String} id
+   * @returns {Segment|null}
+   */
+
+  TimelineSegments.prototype.getSegment = function(id) {
+    return this._segmentsById[id] || null;
+  };
+
+  /**
+   * Returns all segments that overlap a given point in time.
+   *
+   * @param {Number} time
+   * @returns {Array<Segment>}
+   */
+
+  TimelineSegments.prototype.getSegmentsAtTime = function(time) {
+    return this._segments.filter(function(segment) {
+      return time >= segment.startTime && time < segment.endTime;
+    });
+  };
+
+  TimelineSegments.prototype.setMagnetizing = function(bool) {
+    this._peaks.emit('segments.setMagnetizing', bool);
+  };
+
+  /**
+   * Returns all segments that overlap a given time region.
+   *
+   * @param {Number} startTime The start of the time region, in seconds.
+   * @param {Number} endTime The end of the time region, in seconds.
+   *
+   * @returns {Array<Segment>}
+   */
+
+  TimelineSegments.prototype.find = function(startTime, endTime) {
+    return this._segments.filter(function(segment) {
+      return segment.isVisible(startTime, endTime);
+    });
+  };
+
+  /**
+   * Adds one or more segments to the timeline.
+   *
+   * @param {SegmentOptions|Array<SegmentOptions>} segmentOrSegments
+   */
+
+  TimelineSegments.prototype.add = function(/* segmentOrSegments */) {
+    var self = this;
+
+    var segments = Array.isArray(arguments[0]) ?
+                   arguments[0] :
+                   Array.prototype.slice.call(arguments);
+
+    segments = segments.map(function(segmentOptions) {
+      var segment = self._createSegment(segmentOptions);
+
+      if (Utils.objectHasProperty(self._segmentsById, segment.id)) {
+        var seg = Object.values(self._segmentsById)[0];
+
+        throw new Error('peaks.segments.add(): duplicate id. \n\n Segment I = ' +
+          JSON.stringify(
+            {
+              id: seg.id,
+              startTime: seg.startTime,
+              endTime: seg.endTime
+            }
+          ) + ' Segment II = ' +
+          JSON.stringify(
+            {
+              id: segment.id,
+              startTime: segment.startTime,
+              endTime: segment.endTime
+            }
+          )
+        );
+      }
+
+      return segment;
+    });
+
+    segments.forEach(function(segment) {
+      self._addSegment(segment);
+    });
+
+    this._peaks.emit('segments.add', segments);
+  };
+
+  /**
+   * Returns the indexes of segments that match the given predicate.
+   *
+   * @private
+   * @param {Function} predicate Predicate function to find matching segments.
+   * @returns {Array<Number>} An array of indexes into the segments array of
+   *   the matching elements.
+   */
+
+  TimelineSegments.prototype._findSegment = function(predicate) {
+    var indexes = [];
+
+    for (var i = 0, length = this._segments.length; i < length; i++) {
+      if (predicate(this._segments[i])) {
+        indexes.push(i);
+      }
+    }
+
+    return indexes;
+  };
+
+  /**
+   * Removes the segments at the given array indexes.
+   *
+   * @private
+   * @param {Array<Number>} indexes The array indexes to remove.
+   * @returns {Array<Segment>} The removed {@link Segment} objects.
+   */
+
+  TimelineSegments.prototype._removeIndexes = function(indexes) {
+    var removed = [];
+
+    for (var i = 0; i < indexes.length; i++) {
+      var index = indexes[i] - removed.length;
+
+      var itemRemoved = this._segments.splice(index, 1)[0];
+
+      delete this._segmentsById[itemRemoved.id];
+
+      removed.push(itemRemoved);
+    }
+
+    return removed;
+  };
+
+  /**
+   * Removes all segments that match a given predicate function.
+   *
+   * After removing the segments, this function also emits a
+   * <code>segments.remove</code> event with the removed {@link Segment}
+   * objects.
+   *
+   * @private
+   * @param {Function} predicate A predicate function that identifies which
+   *   segments to remove.
+   * @returns {Array<Segment>} The removed {@link Segment} objects.
+   */
+
+  TimelineSegments.prototype._removeSegments = function(predicate) {
+    var indexes = this._findSegment(predicate);
+
+    var removed = this._removeIndexes(indexes);
+
+    this._peaks.emit('segments.remove', removed);
+
+    return removed;
+  };
+
+  /**
+   * Removes the given segment.
+   *
+   * @param {Segment} segment The segment to remove.
+   * @returns {Array<Segment>} The removed segment.
+   */
+
+  TimelineSegments.prototype.remove = function(segment) {
+    return this._removeSegments(function(s) {
+      return s === segment;
+    });
+  };
+
+  /**
+   * Removes any segments with the given id.
+   *
+   * @param {String} id
+   * @returns {Array<Segment>} The removed {@link Segment} objects.
+   */
+
+  TimelineSegments.prototype.removeById = function(segmentId) {
+    return this._removeSegments(function(segment) {
+      return segment.id === segmentId;
+    });
+  };
+
+  /**
+   * Removes any segments with the given start time, and optional end time.
+   *
+   * @param {Number} startTime Segments with this start time are removed.
+   * @param {Number?} endTime If present, only segments with both the given
+   *   start time and end time are removed.
+   * @returns {Array<Segment>} The removed {@link Segment} objects.
+   */
+
+  TimelineSegments.prototype.removeByTime = function(startTime, endTime) {
+    endTime = (typeof endTime === 'number') ? endTime : 0;
+
+    var fnFilter;
+
+    if (endTime > 0) {
+      fnFilter = function(segment) {
+        return segment.startTime === startTime && segment.endTime === endTime;
+      };
+    }
+    else {
+      fnFilter = function(segment) {
+        return segment.startTime === startTime;
+      };
+    }
+
+    return this._removeSegments(fnFilter);
+  };
+
+  /**
+   * Removes all segments.
+   *
+   * After removing the segments, this function emits a
+   * <code>segments.remove_all</code> event.
+   */
+
+  TimelineSegments.prototype.removeAll = function() {
+    this._segments = [];
+    this._segmentsById = {};
+    this._peaks.emit('segments.remove_all');
+  };
+
+  return TimelineSegments;
+});