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

Fix touch interaction for token and notes

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-10-21 18:09:14 +11:00
parent 38d8ca95b3
commit 08e21b55b8
3 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/konva/Note.tsx
View File

@ -8,6 +8,7 @@ import {
useSetPreventMapInteraction,
useMapWidth,
useMapHeight,
leftMouseButton,
} from "../../contexts/MapInteractionContext";
import { useGridCellPixelSize } from "../../contexts/GridContext";
@ -102,7 +103,7 @@ function Note({
}
function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
if (event.evt.button !== 0) {
if (!leftMouseButton(event)) {
return;
}
if (draggable) {
@ -114,7 +115,7 @@ function Note({
// Store note pointer down time to check for a click when note is locked
const notePointerDownTimeRef = useRef<number>(0);
function handlePointerDown(event: Konva.KonvaEventObject<PointerEvent>) {
if (event.evt.button !== 0) {
if (!leftMouseButton(event)) {
return;
}
if (draggable) {
@ -126,7 +127,7 @@ function Note({
}
function handlePointerUp(event: Konva.KonvaEventObject<PointerEvent>) {
if (event.evt.button !== 0) {
if (!leftMouseButton(event)) {
return;
}
if (draggable) {

7
src/components/konva/Token.tsx
View File

@ -12,6 +12,7 @@ import {
useSetPreventMapInteraction,
useMapWidth,
useMapHeight,
leftMouseButton,
} from "../../contexts/MapInteractionContext";
import { useGridCellPixelSize } from "../../contexts/GridContext";
import { useDataURL } from "../../contexts/AssetsContext";
@ -198,7 +199,7 @@ function Token({
}
function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
if (event.evt.button !== 0) {
if (!leftMouseButton(event)) {
return;
}
if (selectable && draggable && transformRootRef.current) {
@ -210,7 +211,7 @@ function Token({
// Store token pointer down time to check for a click when token is locked
const tokenPointerDownTimeRef = useRef<number>(0);
function handlePointerDown(event: Konva.KonvaEventObject<PointerEvent>) {
if (event.evt.button !== 0) {
if (!leftMouseButton(event)) {
return;
}
if (draggable) {
@ -222,7 +223,7 @@ function Token({
}
function handlePointerUp(event: Konva.KonvaEventObject<PointerEvent>) {
if (event.evt.button !== 0) {
if (!leftMouseButton(event)) {
return;
}
if (draggable) {

18
src/contexts/MapInteractionContext.tsx
View File

@ -2,6 +2,7 @@ import React, { useContext } from "react";
import { FullGestureState } from "react-use-gesture/dist/types";
import useDebounce from "../hooks/useDebounce";
import { TypedEmitter } from "tiny-typed-emitter";
import Konva from "konva";
export type MapDragEvent = Omit<FullGestureState<"drag">, "event"> & {
event: React.PointerEvent<Element> | PointerEvent;
@ -172,9 +173,24 @@ export function useDebouncedStageScale() {
return context;
}
export function leftMouseButton(event: MapDragEvent) {
export function leftMouseButton(event: MapDragEvent): boolean;
export function leftMouseButton(
event: Konva.KonvaEventObject<PointerEvent>
): boolean;
export function leftMouseButton(
event: Konva.KonvaEventObject<MouseEvent>
): boolean;
export function leftMouseButton(event: any) {
if (event.evt) {
// Konva events
// Check for undefined (touch) and mouse left click (0)
return event.evt.button === undefined || event.evt.button === 0;
} else {
// Drag event
return event.buttons <= 1;
}
}
export function middleMouseButton(event: MapDragEvent) {
return event.buttons === 4;