waveform-playlist-nartj/lib/interaction/DragInteraction.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(playlist) {
    var _this = this;

    var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    (0, _classCallCheck2["default"])(this, _default);
    this.playlist = playlist;
    this.data = data;
    this.active = false;

    this.ondragover = function (e) {
      if (_this.active) {
        e.preventDefault();

        _this.emitDrag(e.clientX);
      }
    };
  }

  (0, _createClass2["default"])(_default, [{
    key: "emitDrag",
    value: function emitDrag(x) {
      var deltaX = x - this.prevX; // emit shift event if not 0

      if (deltaX) {
        var deltaTime = (0, _conversions.pixelsToSeconds)(deltaX, this.playlist.samplesPerPixel, this.playlist.sampleRate);
        this.prevX = x;
        this.playlist.ee.emit('dragged', deltaTime, this.data);
      }
    }
  }, {
    key: "complete",
    value: function complete() {
      this.active = false;
      document.removeEventListener('dragover', this.ondragover);
    }
  }, {
    key: "dragstart",
    value: function dragstart(e) {
      var ev = e;
      this.active = true;
      this.prevX = e.clientX;
      ev.dataTransfer.dropEffect = 'move';
      ev.dataTransfer.effectAllowed = 'move';
      ev.dataTransfer.setData('text/plain', '');
      document.addEventListener('dragover', this.ondragover);
    }
  }, {
    key: "dragend",
    value: function dragend(e) {
      if (this.active) {
        e.preventDefault();
        this.complete();
      }
    }
  }], [{
    key: "getClass",
    value: function getClass() {
      return '.shift';
    }
  }, {
    key: "getEvents",
    value: function getEvents() {
      return ['dragstart', 'dragend'];
    }
  }]);
  return _default;
}();

exports["default"] = _default;