@benev/nubs
Version:
user-input system for web games
83 lines • 3.1 kB
JavaScript
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
export function prepDraggableContainerEvents(query) {
const { element } = query();
let active = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
function pointerup(e) {
// boundaries
const element = query().element;
if (element.getBoundingClientRect().x <= 0) {
const resetX = currentX += Math.abs(element.getBoundingClientRect().x);
setTranslate(resetX, currentY, element);
}
if (element.getBoundingClientRect().y <= 0) {
const resetY = currentY += Math.abs(element.getBoundingClientRect().y);
setTranslate(currentX, resetY, element);
}
if (element.getBoundingClientRect().y + element.clientHeight >= window.innerHeight) {
const calculated = (element.getBoundingClientRect().y + element.clientHeight) - window.innerHeight;
const resetY = currentY -= calculated;
setTranslate(currentX, resetY, element);
}
if (element.getBoundingClientRect().x + element.clientWidth >= window.innerWidth) {
const calculated = (element.getBoundingClientRect().x + element.clientWidth) - window.innerWidth;
const resetX = currentX -= calculated;
setTranslate(resetX, currentY, element);
}
//
initialX = currentX;
initialY = currentY;
currentX = initialX;
currentY = initialY;
xOffset = currentX;
yOffset = currentY;
active = false;
}
document.addEventListener('pointerup', pointerup);
return {
touchstart: (e) => {
const draggableItem = query().draggableItem;
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
if (e.target === draggableItem) {
active = true;
}
},
touchmove: (e) => {
if (active) {
e.preventDefault();
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, element);
}
},
mousedown: (e) => {
const draggableItem = query().draggableItem;
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === draggableItem) {
active = true;
}
},
mousemove: (e) => {
if (active) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, element);
}
}
};
}
//# sourceMappingURL=prep-draggable-container-events.js.map