wix-style-react/dist/es/src/utils/DragAndDrop/dragAndDropPuppeteerDriverFactory.js

wix-style-react

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { dataAttributes } from '../../DragAndDrop/Draggable/constants';

var getDraggableItemSelector = function getDraggableItemSelector(dataHook, id) {
  return dataHook ? "[data-hook=\"".concat(dataHook, "\"]") : "[".concat(dataAttributes.id, "=\"").concat(id, "\"] [").concat(dataAttributes.draggableSource, "]");
};

export var dragAndDropPuppeteerDriverFactory = function dragAndDropPuppeteerDriverFactory(_ref) {
  var element = _ref.element;
  return {
    beginDrag: function () {
      var _beginDrag = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
        var dataHook, id, selector;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                dataHook = _ref2.dataHook, id = _ref2.id;
                selector = getDraggableItemSelector(dataHook, id);
                _context.next = 4;
                return element.page.evaluate(function (baseElement, sourceSelector) {
                  var sourceElement = baseElement.querySelector(sourceSelector);

                  var _sourceElement$getBou = sourceElement.getBoundingClientRect(),
                      x = _sourceElement$getBou.x,
                      y = _sourceElement$getBou.y,
                      height = _sourceElement$getBou.height;

                  sourceElement.dispatchEvent(new MouseEvent('mousedown', {
                    bubbles: true,
                    clientX: x,
                    clientY: y + height / 2
                  }));
                }, element.element, selector);

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      function beginDrag(_x) {
        return _beginDrag.apply(this, arguments);
      }

      return beginDrag;
    }(),
    dragOver: function () {
      var _dragOver = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref3) {
        var dataHook, id, offset, selector, moveMouseToNewPosition;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                dataHook = _ref3.dataHook, id = _ref3.id, offset = _ref3.offset;
                selector = getDraggableItemSelector(dataHook, id);

                moveMouseToNewPosition = function moveMouseToNewPosition() {
                  return element.page.evaluate(function (baseElement, destinationSelector, xAxisOffset) {
                    var destinationElement = baseElement.querySelector(destinationSelector);

                    var _destinationElement$g = destinationElement.getBoundingClientRect(),
                        x = _destinationElement$g.x,
                        y = _destinationElement$g.y,
                        height = _destinationElement$g.height;

                    var eventOptions = {
                      bubbles: true,
                      clientX: xAxisOffset ? x + xAxisOffset : x,
                      clientY: y + height / 2
                    };
                    baseElement.dispatchEvent(new MouseEvent('mousemove', eventOptions));
                  }, element.element, selector, offset === null || offset === void 0 ? void 0 : offset.x);
                }; // We have to do it twice, because one mousemove event is not enough for item to occupy the new position


                _context2.next = 5;
                return moveMouseToNewPosition();

              case 5:
                _context2.next = 7;
                return moveMouseToNewPosition();

              case 7:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }));

      function dragOver(_x2) {
        return _dragOver.apply(this, arguments);
      }

      return dragOver;
    }(),
    endDrag: function endDrag() {
      return element.page.evaluate(function (baseElement) {
        baseElement.dispatchEvent(new MouseEvent('mouseup'));
      }, element.element);
    }
  };
};