wix-style-react
Version:
wix-style-react
34 lines • 1.8 kB
JavaScript
export const dragAndDropPuppeteerDriverFactory = ({ element }) => {
return {
beginDrag: async ({ dataHook }) => {
await element.page.evaluate((baseElement, sourceDataHook) => {
const sourceElement = baseElement.querySelector(`[data-hook="${sourceDataHook}"]`);
const { x, y, height } = sourceElement.getBoundingClientRect();
sourceElement.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: x,
clientY: y + height / 2,
}));
}, element.element, dataHook);
},
dragOver: async ({ dataHook, offset }) => {
const moveMouseToNewPosition = () => element.page.evaluate((baseElement, destinationDataHook, xAxisOffset) => {
const destinationElement = baseElement.querySelector(`[data-hook="${destinationDataHook}"]`);
const { x, y, height } = destinationElement.getBoundingClientRect();
const eventOptions = {
bubbles: true,
clientX: xAxisOffset ? x + xAxisOffset : x,
clientY: y + height / 2,
};
baseElement.dispatchEvent(new MouseEvent('mousemove', eventOptions));
}, element.element, dataHook, offset?.x);
// We have to do it twice, because one mousemove event is not enough for item to occupy the new position
await moveMouseToNewPosition();
await moveMouseToNewPosition();
},
endDrag: () => element.page.evaluate(baseElement => {
baseElement.dispatchEvent(new MouseEvent('mouseup'));
}, element.element),
};
};
//# sourceMappingURL=dragAndDropPuppeteerDriverFactory.js.map