Fix token remove for touch devices

This commit is contained in:
Mitchell McCaffrey 2020-05-25 13:12:30 +10:00
parent be7d6c5277
commit 73c7ca91fa

View File

@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React, { useContext, useEffect, useRef, useState } from "react";
import { Box, IconButton } from "theme-ui";
import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
@ -19,7 +19,52 @@ function TokenDragOverlay({
MapInteractionContext
);
function handleTokenRemove() {
const [isRemoveHovered, setIsRemoveHovered] = useState(false);
const removeTokenRef = useRef();
// Detect token hover on remove icon manually to support touch devices
useEffect(() => {
const map = document.querySelector(".map");
const mapRect = map.getBoundingClientRect();
function detectRemoveHover() {
const pointerPosition = tokenImage.getStage().getPointerPosition();
const screenSpacePointerPosition = {
x: pointerPosition.x + mapRect.left,
y: pointerPosition.y + mapRect.top,
};
const removeIconPosition = removeTokenRef.current.getBoundingClientRect();
if (
screenSpacePointerPosition.x > removeIconPosition.left &&
screenSpacePointerPosition.y > removeIconPosition.top &&
screenSpacePointerPosition.x < removeIconPosition.right &&
screenSpacePointerPosition.y < removeIconPosition.bottom
) {
if (!isRemoveHovered) {
setIsRemoveHovered(true);
}
} else if (isRemoveHovered) {
setIsRemoveHovered(false);
}
}
let handler;
if (tokenState && tokenImage) {
handler = setInterval(detectRemoveHover, 100);
}
return () => {
if (handler) {
clearInterval(handler);
}
};
}, [tokenState, tokenImage, isRemoveHovered]);
// Detect drag end of token image and remove it if it is over the remove icon
useEffect(() => {
function handleTokenDragEnd() {
if (isRemoveHovered) {
// Handle other tokens when a vehicle gets deleted
if (token.isVehicle) {
const layer = tokenImage.getLayer();
@ -42,6 +87,24 @@ function TokenDragOverlay({
onTokenStateRemove(tokenState);
setPreventMapInteraction(false);
}
}
tokenImage.on("dragend", handleTokenDragEnd);
return () => {
tokenImage.off("dragend", handleTokenDragEnd);
};
}, [
tokenImage,
token,
tokenState,
isRemoveHovered,
mapWidth,
mapHeight,
userId,
onTokenStateChange,
onTokenStateRemove,
setPreventMapInteraction,
mapState.tokens,
]);
return (
<Box
@ -50,15 +113,15 @@ function TokenDragOverlay({
bottom: "24px",
left: "50%",
borderRadius: "50%",
transform: "translateX(-50%) scale(1.5)",
transform: isRemoveHovered
? "translateX(-50%) scale(2.0)"
: "translateX(-50%) scale(1.5)",
transition: "transform 250ms ease",
":hover": {
transform: "translateX(-50%) scale(2.0)",
},
color: isRemoveHovered ? "primary" : "text",
pointerEvents: "none",
}}
bg="overlay"
onMouseUp={handleTokenRemove}
onTouchEnd={handleTokenRemove}
ref={removeTokenRef}
>
<IconButton>
<RemoveTokenIcon />