waveform-playlist-nartj/lib/track/states/SelectState.js

Multiple track web audio editor and player with waveform preview

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _conversions = require("../../utils/conversions");

var _default = /*#__PURE__*/function () {
  function _default(track) {
    (0, _classCallCheck2["default"])(this, _default);
    this.track = track;
    this.active = false;
    this.lastOffsetX = 0;
  }

  (0, _createClass2["default"])(_default, [{
    key: "setup",
    value: function setup(samplesPerPixel, sampleRate) {
      this.samplesPerPixel = samplesPerPixel;
      this.sampleRate = sampleRate;
    }
  }, {
    key: "emitSelection",
    value: function emitSelection(x) {
      var minX = Math.min(x, this.startX);
      var maxX = Math.max(x, this.startX);
      var startTime = (0, _conversions.pixelsToSeconds)(minX, this.samplesPerPixel, this.sampleRate);
      var endTime = (0, _conversions.pixelsToSeconds)(maxX, this.samplesPerPixel, this.sampleRate);
      this.track.ee.emit('select', startTime, endTime, this.track);
    }
  }, {
    key: "complete",
    value: function complete(x) {
      this.emitSelection(x);
      this.active = false;
    }
  }, {
    key: "mousedown",
    value: function mousedown(e) {
      e.preventDefault();
      this.active = true;
      this.startX = e.offsetX;
      var startTime = (0, _conversions.pixelsToSeconds)(this.startX, this.samplesPerPixel, this.sampleRate);
      this.track.ee.emit('select', startTime, startTime, this.track);
    }
  }, {
    key: "mousemove",
    value: function mousemove(e) {
      if (this.active) {
        e.preventDefault();
        this.emitSelection(e.offsetX);
      }
    }
  }, {
    key: "mouseup",
    value: function mouseup(e) {
      if (this.active) {
        e.preventDefault();
        this.complete(e.offsetX);
      }
    }
  }, {
    key: "mouseleave",
    value: function mouseleave(e) {
      if (this.active) {
        e.preventDefault();
        this.complete(e.offsetX);
      }
    }
  }, {
    key: "touchstart",
    value: function touchstart(e) {
      e.preventDefault();
      this.active = true;
      var rect = e.target.getBoundingClientRect();
      var bodyRect = document.body.getBoundingClientRect();
      this.startX = e.targetTouches[0].clientX - (rect.left - bodyRect.left);
      var startTime = (0, _conversions.pixelsToSeconds)(this.startX, this.samplesPerPixel, this.sampleRate);
      this.track.ee.emit('select', startTime, startTime, this.track);
    }
  }, {
    key: "touchmove",
    value: function touchmove(e) {
      if (this.active) {
        e.preventDefault();
        var rect = e.target.getBoundingClientRect();
        var bodyRect = document.body.getBoundingClientRect();
        this.lastOffsetX = e.targetTouches[0].clientX - (rect.left - bodyRect.left);
        this.emitSelection(this.lastOffsetX);
      }
    }
  }, {
    key: "touchend",
    value: function touchend(e) {
      if (this.active) {
        e.preventDefault();
        var rect = e.target.getBoundingClientRect();
        var bodyRect = document.body.getBoundingClientRect();
        this.lastOffsetX = e.targetTouches[0].clientX - (rect.left - bodyRect.left);
        this.complete(this.lastOffsetX);
      }
    }
  }, {
    key: "touchcancel",
    value: function touchcancel(e) {
      if (this.active) {
        e.preventDefault();
        var rect = e.target.getBoundingClientRect();
        var bodyRect = document.body.getBoundingClientRect();
        this.lastOffsetX = e.targetTouches[0].clientX - (rect.left - bodyRect.left);
        this.complete(this.lastOffsetX);
      }
    }
  }], [{
    key: "getClass",
    value: function getClass() {
      return '.state-select';
    }
  }, {
    key: "getEvents",
    value: function getEvents() {
      return ['mousedown', 'mousemove', 'mouseup', 'mouseleave', 'touchstart', 'touchend', 'touchmove', 'touchcancel'];
    }
  }]);
  return _default;
}();

exports["default"] = _default;