@checksub_team/peaks_timeline/src/components/marker-factories.js

JavaScript UI component for displaying audio waveforms

/**
 * @file
 *
 * Factory functions for creating point and segment marker handles.
 *
 * @module marker-factories
 */

define([
  './default-segment-marker',
  '../utils',
  'konva'
  ], function(
    DefaultSegmentMarker,
    Utils,
    Konva) {
  'use strict';

  /**
   * Parameters for the {@link createSegmentMarker} function.
   *
   * @typedef {Object} CreateSegmentMarkerOptions
   * @global
   * @property {Object} peaks
   * @property {Segment} segment
   * @property {Boolean} draggable If true, marker is draggable.
   * @property {Boolean} startMarker
   * @property {String} color
   * @property {Group} group
   * @property {String} view
   */

  /**
   * Creates a left or right side segment marker handle.
   *
   * @param {CreateSegmentMarkerOptions} options
   * @returns {Marker}
   */

  function createSegmentMarker(options) {
    if (options.view.getName() === 'zoomview') {
      return new DefaultSegmentMarker(options);
    }

    return null;
  }

  /**
   * Parameters for the {@link createSegmentLabel} function.
   *
   * @typedef {Object} SegmentLabelOptions
   * @global
   * @property {Segment} segment The {@link Segment} object associated with this
   *   label.
   * @property {String} view The name of the view that the label is being
   *   created in, either <code>zoomview</code> or <code>overview</code>.
   * @property {SegmentsLayer} layer
   */

  /**
   * Creates a Konva object that renders information about a segment, such as
   * its label text.
   *
   * @param {SegmentLabelOptions} options
   * @returns {Konva.Text}
   */

  function createSegmentLabel(options) {
    return new Konva.Text({
      x:             options.x,
      y:             options.y,
      width:         options.width,
      height:        options.height,
      text:          '#'
                      + options.segment.relativeId
                      + ' '
                      + Utils.removeLineBreaks(options.segment.labelText),
      textAlign:     'left',
      verticalAlign: 'middle',
      wrap:          'none',
      ellipsis:      true,
      padding:       5,
      fontSize:      options.fontSize,
      fontFamily:    'Open Sans',
      fill:          options.segment.textColor,
      listening:     false
    });
  }

  return {
    createSegmentMarker: createSegmentMarker,
    createSegmentLabel: createSegmentLabel
  };
});