xdesign-vue-next/lib/_common/js/color-picker/draggable.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import _defineProperty from '@babel/runtime/helpers/defineProperty';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
var defaultsOptions = {
  start: function start(coordinate, event) {},
  drag: function drag(coordinate, event) {},
  end: function end(coordinate, event) {}
};
var _dragStart = /*#__PURE__*/new WeakSet();
var _drag = /*#__PURE__*/new WeakSet();
var _dragEnd = /*#__PURE__*/new WeakSet();
var _getCoordinate = /*#__PURE__*/new WeakSet();
var Draggable = /*#__PURE__*/function () {
  function Draggable(el, options) {
    _classCallCheck(this, Draggable);
    _classPrivateMethodInitSpec(this, _getCoordinate);
    _classPrivateMethodInitSpec(this, _dragEnd);
    _classPrivateMethodInitSpec(this, _drag);
    _classPrivateMethodInitSpec(this, _dragStart);
    _defineProperty(this, "dragging", false);
    _defineProperty(this, "$el", void 0);
    _defineProperty(this, "props", void 0);
    _defineProperty(this, "handles", void 0);
    this.$el = el;
    this.props = _objectSpread(_objectSpread({}, defaultsOptions), options);
    this.handles = {
      start: _classPrivateMethodGet(this, _dragStart, _dragStart2).bind(this),
      drag: _classPrivateMethodGet(this, _drag, _drag2).bind(this),
      end: _classPrivateMethodGet(this, _dragEnd, _dragEnd2).bind(this)
    };
    this.$el.addEventListener("mousedown", this.handles.start, false);
  }
  _createClass(Draggable, [{
    key: "destroy",
    value: function destroy() {
      this.$el.removeEventListener("mousedown", this.handles.start, false);
      window.removeEventListener("mousemove", this.handles.drag, false);
      window.removeEventListener("mouseup", this.handles.end, false);
      window.removeEventListener("contextmenu", this.handles.end, false);
    }
  }]);
  return Draggable;
}();
function _dragStart2(event) {
  if (this.dragging) {
    return;
  }
  window.addEventListener("mousemove", this.handles.drag, false);
  window.addEventListener("mouseup", this.handles.end, false);
  window.addEventListener("contextmenu", this.handles.end, false);
  this.dragging = true;
  this.props.start(_classPrivateMethodGet(this, _getCoordinate, _getCoordinate2).call(this, event), event);
}
function _drag2(event) {
  if (!this.dragging) {
    return;
  }
  this.props.drag(_classPrivateMethodGet(this, _getCoordinate, _getCoordinate2).call(this, event), event);
}
function _dragEnd2(event) {
  var _this = this;
  setTimeout(function () {
    _this.dragging = false;
    _this.props.end(_classPrivateMethodGet(_this, _getCoordinate, _getCoordinate2).call(_this, event), event);
  }, 0);
  window.removeEventListener("mousemove", this.handles.drag, false);
  window.removeEventListener("mouseup", this.handles.end, false);
  window.removeEventListener("contextmenu", this.handles.end, false);
}
function _getCoordinate2(event) {
  var rect = this.$el.getBoundingClientRect();
  var mouseEvent = event;
  var left = mouseEvent.clientX - rect.left;
  var top = mouseEvent.clientY - rect.top;
  return {
    y: Math.min(Math.max(0, top), rect.height),
    x: Math.min(Math.max(0, left), rect.width)
  };
}

export { Draggable, Draggable as default };
//# sourceMappingURL=draggable.js.map