waveform-playlist-nartj/lib/track/states/ShiftState.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;
    this.moveBegin = 0;
    this.moveEnd = 0;
  }

  (0, _createClass2["default"])(_default, [{
    key: "setup",
    value: function setup(samplesPerPixel, sampleRate) {
      this.samplesPerPixel = samplesPerPixel;
      this.sampleRate = sampleRate;
    }
  }, {
    key: "emitShift",
    value: function emitShift(x) {
      var deltaX = x - this.prevX;
      var deltaTime = (0, _conversions.pixelsToSeconds)(deltaX, this.samplesPerPixel, this.sampleRate);

      if (this.moveBegin === x) {
        this.track.ee.emit('shiftbegin', deltaTime, this.track);
      }

      if (this.moveEnd === x) {
        var prevX = this.prevX;
        var moveBegin = this.moveBegin;
        var moveEnd = this.moveEnd;
        var self = this;
        var undoDelta = moveEnd - moveBegin;

        var undo = function undo() {
          self.prevX = prevX - undoDelta;
        };

        this.track.ee.emit('shiftend', (0, _conversions.pixelsToSeconds)(undoDelta, this.samplesPerPixel, this.sampleRate), this.track, undo);
      }

      this.prevX = x;
      this.track.ee.emit('shift', deltaTime, this.track);
    }
  }, {
    key: "begin",
    value: function begin(x) {
      this.moveBegin = x;
      this.moveEnd = 0;
    }
  }, {
    key: "complete",
    value: function complete(x) {
      this.moveEnd = x;
      this.emitShift(x);
      this.active = false;
    }
  }, {
    key: "mousedown",
    value: function mousedown(e) {
      e.preventDefault();
      this.active = true;
      this.el = e.target;
      this.prevX = e.offsetX;
      this.begin(e.offsetX);
    }
  }, {
    key: "mousemove",
    value: function mousemove(e) {
      if (this.active) {
        e.preventDefault();
        this.emitShift(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;
      this.el = e.target;
      var rect = e.target.getBoundingClientRect();
      var bodyRect = document.body.getBoundingClientRect();
      this.lastOffsetX = e.targetTouches[0].clientX - (rect.left - bodyRect.left);
      this.prevX = this.lastOffsetX;
      this.begin(this.lastOffsetX);
    }
  }, {
    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.emitShift(e.targetTouches[0].clientX - (rect.left - bodyRect.left));
      }
    }
  }, {
    key: "touchend",
    value: function touchend(e) {
      if (this.active) {
        e.preventDefault();
        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-shift';
    }
  }, {
    key: "getEvents",
    value: function getEvents() {
      return ['mousedown', 'mousemove', 'mouseup', 'mouseleave', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
    }
  }]);
  return _default;
}();

exports["default"] = _default;