@checksub_team/peaks_timeline/src/default-segment-marker.js

JavaScript UI component for displaying audio waveforms

/**
 * @file
 *
 * Defines the {@link DefaultSegmentMarker} class.
 *
 * @module default-segment-marker
 */

define([
  './utils',
  'konva'
  ], function(
    Utils,
    Konva) {
  'use strict';

  /**
   * Creates a segment marker handle.
   *
   * @class
   * @alias DefaultSegmentMarker
   *
   * @param {CreateSegmentMarkerOptions} options
   */

  function DefaultSegmentMarker(options) {
    this._options = options;
  }

  DefaultSegmentMarker.prototype.init = function(group) {
    this._handleWidth  = this._options.segmentWidth;
    this._handleHeight = this._options.segmentHeight;

    this._group = group;

    // var handleX      = -(this._handleWidth / 2) + 0.5; // Place in the middle of the marker

    var time = this._options.startMarker ? this._options.segment.startTime :
                                           this._options.segment.endTime;

    // Label - create with default y, the real value is set in fitToView().
    this._label = new Konva.Text({
      x:          0,
      y:          0,
      text:       Utils.removeLineBreaks(Utils.formatTime(time, false)),
      fontSize:   10,
      fontFamily: 'sans-serif',
      fontStyle:  'bold',
      fill:       this._options.segment.handleTextColor,
      textAlign:  'center'
    });

    this._label.hide();

    // Handle - create with default y, the real value is set in fitToView().
    if (this._options.segment.editable && this._options.showSegmentMarkers) {
      this._handle = new Konva.Rect({
        x:           0,
        y:           this._options.y,
        width:       this._handleWidth,
        height:      this._handleHeight,
        opacity:     0
      });
    }

    var positionX = this._options.startMarker ? -this._label.width() - 1 : this._handleWidth + 1;

    this._label.setX(positionX);

    group.add(this._label);

    if (this._handle) {
      group.add(this._handle);
    }

    this.bindEventHandlers(group);
  };

  DefaultSegmentMarker.prototype.getHandleWidth = function() {
    return this._handleWidth;
  };

  DefaultSegmentMarker.prototype.bindEventHandlers = function(group) {
    var self = this;

    if (self._options.draggable) {
      group.on('dragstart', function() {
        self._label.show();
        self._options.group.draw();
      });

      group.on('dragend', function() {
        self._label.hide();
        self._options.group.draw();
      });
    }

    if (self._handle) {
      self._handle.on('mouseover touchstart', function() {
        self._options.view.setCursor('ew-resize');
        self._label.show();
        self._group.moveToTop();
        self._options.view.drawSourcesLayer();
      });

      self._handle.on('mouseout touchend', function() {
        self._options.view.setCursor('default');
        self._label.hide();
        self._options.view.drawSourcesLayer();
      });
    }
  };

  DefaultSegmentMarker.prototype.getWidth = function() {
    return this._handle ? this._handle.width() : 0;
  };

  DefaultSegmentMarker.prototype.setWidth = function(value) {
    if (this._handle) {
      this._handle.width(value);
      if (!this._options.startMarker) {
        this._label.setX(value + 1);
      }
    }
  };

  DefaultSegmentMarker.prototype.timeUpdated = function(time) {
    this._label.setText(Utils.formatTime(time, false));
  };

  return DefaultSegmentMarker;
});