From 9bdbb9cb4c1a83eaa2782fa3e2cdf298415d84a3 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 28 Aug 2020 21:34:31 +1000
Subject: [PATCH] Fixed proxy token positioning for touch devices

---
 src/components/token/ProxyToken.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/token/ProxyToken.js b/src/components/token/ProxyToken.js
index 402ca98..b43d27c 100644
--- a/src/components/token/ProxyToken.js
+++ b/src/components/token/ProxyToken.js
@@ -7,8 +7,6 @@ import usePortal from "../../helpers/usePortal";
 
 import MapStageContext from "../../contexts/MapStageContext";
 
-import { getRelativePointerPositionNormalized } from "../../helpers/konva";
-
 /**
  * @callback onProxyDragEnd
  * @param {boolean} isOnMap whether the token was dropped on the map
@@ -98,13 +96,24 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
             const mapStage = mapStageRef.current;
             if (onProxyDragEnd && mapStage) {
               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
               const token = tokensRef.current[id] || {};
               onProxyDragEnd(proxyOnMap.current, {
                 ...token,
-                x,
-                y,
+                x: normalizedPosition.x,
+                y: normalizedPosition.y,
               });
             }
 
@@ -136,7 +145,6 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
         left: 0,
         bottom: 0,
         right: 0,
-        pointerEvents: "none",
       }}
     >
       <Box