Fix touch interaction for token and notes

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<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) {

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<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) {

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<FullGestureState<"drag">, "event"> & {
   event: React.PointerEvent<Element> | PointerEvent;
@@ -172,8 +173,23 @@ export function useDebouncedStageScale() {
   return context;
 }
 
-export function leftMouseButton(event: MapDragEvent) {
+export function leftMouseButton(event: MapDragEvent): boolean;
-  return event.buttons <= 1;
+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) {