diff --git a/src/components/konva/Note.tsx b/src/components/konva/Note.tsx index 96718a5..c73a6cc 100644 --- a/src/components/konva/Note.tsx +++ b/src/components/konva/Note.tsx @@ -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) { - 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(0); function handlePointerDown(event: Konva.KonvaEventObject) { - if (event.evt.button !== 0) { + if (!leftMouseButton(event)) { return; } if (draggable) { @@ -126,7 +127,7 @@ function Note({ } function handlePointerUp(event: Konva.KonvaEventObject) { - if (event.evt.button !== 0) { + if (!leftMouseButton(event)) { return; } if (draggable) { diff --git a/src/components/konva/Token.tsx b/src/components/konva/Token.tsx index 0de3667..5f44556 100644 --- a/src/components/konva/Token.tsx +++ b/src/components/konva/Token.tsx @@ -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) { - 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(0); function handlePointerDown(event: Konva.KonvaEventObject) { - if (event.evt.button !== 0) { + if (!leftMouseButton(event)) { return; } if (draggable) { @@ -222,7 +223,7 @@ function Token({ } function handlePointerUp(event: Konva.KonvaEventObject) { - if (event.evt.button !== 0) { + if (!leftMouseButton(event)) { return; } if (draggable) { diff --git a/src/contexts/MapInteractionContext.tsx b/src/contexts/MapInteractionContext.tsx index 21dd1d6..6009e20 100644 --- a/src/contexts/MapInteractionContext.tsx +++ b/src/contexts/MapInteractionContext.tsx @@ -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, "event"> & { event: React.PointerEvent | PointerEvent; @@ -172,8 +173,23 @@ export function useDebouncedStageScale() { return context; } -export function leftMouseButton(event: MapDragEvent) { - return event.buttons <= 1; +export function leftMouseButton(event: MapDragEvent): boolean; +export function leftMouseButton( + event: Konva.KonvaEventObject +): boolean; +export function leftMouseButton( + event: Konva.KonvaEventObject +): 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) {