Fixed proxy token positioning for touch devices

This commit is contained in:
Mitchell McCaffrey 2020-08-28 21:34:31 +10:00
parent 406c53d083
commit 9bdbb9cb4c

View File

@ -7,8 +7,6 @@ import usePortal from "../../helpers/usePortal";
import MapStageContext from "../../contexts/MapStageContext"; import MapStageContext from "../../contexts/MapStageContext";
import { getRelativePointerPositionNormalized } from "../../helpers/konva";
/** /**
* @callback onProxyDragEnd * @callback onProxyDragEnd
* @param {boolean} isOnMap whether the token was dropped on the map * @param {boolean} isOnMap whether the token was dropped on the map
@ -98,13 +96,24 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
const mapStage = mapStageRef.current; const mapStage = mapStageRef.current;
if (onProxyDragEnd && mapStage) { if (onProxyDragEnd && mapStage) {
const mapImage = mapStage.findOne("#mapImage"); const mapImage = mapStage.findOne("#mapImage");
const { x, y } = getRelativePointerPositionNormalized(mapImage); const map = document.querySelector(".map");
const mapRect = map.getBoundingClientRect();
const position = {
x: event.clientX - mapRect.left,
y: event.clientY - mapRect.top,
};
const transform = mapImage.getAbsoluteTransform().copy().invert();
const relativePosition = transform.point(position);
const normalizedPosition = {
x: relativePosition.x / mapImage.width(),
y: relativePosition.y / mapImage.height(),
};
// Get the token from the supplied tokens if it exists // Get the token from the supplied tokens if it exists
const token = tokensRef.current[id] || {}; const token = tokensRef.current[id] || {};
onProxyDragEnd(proxyOnMap.current, { onProxyDragEnd(proxyOnMap.current, {
...token, ...token,
x, x: normalizedPosition.x,
y, y: normalizedPosition.y,
}); });
} }
@ -136,7 +145,6 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
left: 0, left: 0,
bottom: 0, bottom: 0,
right: 0, right: 0,
pointerEvents: "none",
}} }}
> >
<Box <Box