Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved token lock click detect to time differece as it generalises easier to touch

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-08-28 17:27:19 +10:00
parent b4e52ebb23
commit 4edbac5408
1 changed files with 6 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/map/MapToken.js
View File

@ -141,15 +141,14 @@ function MapToken({
} }
const [tokenOpacity, setTokenOpacity] = useState(1); const [tokenOpacity, setTokenOpacity] = useState(1);
// Store token pointer down position to check for a click when token is locked // Store token pointer down time to check for a click when token is locked
const tokenPointerDownPositionRef = useRef(); const tokenPointerDownTimeRef = useRef();
function handlePointerDown(event) { function handlePointerDown(event) {
if (draggable) { if (draggable) {
setPreventMapInteraction(true); setPreventMapInteraction(true);
} }
if (tokenState.locked && map.owner === userId) { if (tokenState.locked && map.owner === userId) {
const pointerPosition = { x: event.evt.clientX, y: event.evt.clientY }; tokenPointerDownTimeRef.current = event.evt.timeStamp;
tokenPointerDownPositionRef.current = pointerPosition;
} }
} }
@ -160,14 +159,9 @@ function MapToken({
// Check token click when locked and we are the map owner // Check token click when locked and we are the map owner
// We can't use onClick because that doesn't check pointer distance // We can't use onClick because that doesn't check pointer distance
if (tokenState.locked && map.owner === userId) { if (tokenState.locked && map.owner === userId) {
// If down and up distance is small trigger a click // If down and up time is small trigger a click
const pointerPosition = { x: event.evt.clientX, y: event.evt.clientY }; const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
const distance = Vector2.distance( if (delta < 300) {
tokenPointerDownPositionRef.current,
pointerPosition,
"euclidean"
);
if (distance < 5) {
const tokenImage = event.target; const tokenImage = event.target;
onTokenMenuOpen(tokenState.id, tokenImage); onTokenMenuOpen(tokenState.id, tokenImage);
} }