From 974e39a2e68c2b58b86c658a4841665075d6d5d6 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 26 Mar 2020 15:07:27 +1100
Subject: [PATCH] Fixed proxy token size being wrong on map view

---
 src/components/Map.js        |  2 --
 src/components/ProxyToken.js | 12 ++++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Map.js b/src/components/Map.js
index 1f84066..6d41743 100644
--- a/src/components/Map.js
+++ b/src/components/Map.js
@@ -7,7 +7,6 @@ import ProxyToken from "../components/ProxyToken";
 import AddMapButton from "../components/AddMapButton";
 
 const mapTokenClassName = "map-token";
-const defaultTokenSize = 48;
 const zoomSpeed = -0.005;
 const minZoom = 0.1;
 const maxZoom = 5;
@@ -181,7 +180,6 @@ function Map({
       <ProxyToken
         tokenClassName={mapTokenClassName}
         onProxyDragEnd={handleProxyDragEnd}
-        size={defaultTokenSize}
       />
     </>
   );
diff --git a/src/components/ProxyToken.js b/src/components/ProxyToken.js
index 31b89c0..2469df6 100644
--- a/src/components/ProxyToken.js
+++ b/src/components/ProxyToken.js
@@ -5,7 +5,7 @@ import interact from "interactjs";
 
 import usePortal from "../helpers/usePortal";
 
-function ProxyToken({ tokenClassName, onProxyDragEnd, size }) {
+function ProxyToken({ tokenClassName, onProxyDragEnd }) {
   const proxyContainer = usePortal("root");
 
   const [imageSource, setImageSource] = useState("");
@@ -32,6 +32,10 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, size }) {
             proxy.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
             proxy.setAttribute("data-x", xOffset);
             proxy.setAttribute("data-y", yOffset);
+
+            // Copy width and height of target
+            proxy.style.width = `${targetRect.width}px`;
+            proxy.style.height = `${targetRect.height}px`;
           }
         },
 
@@ -53,7 +57,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, size }) {
               const proxyRect = proxy.getBoundingClientRect();
               proxyOnMap.current =
                 proxyContainerRect.right - proxyRect.right > 80 &&
-                proxyRect.left > 192;
+                proxyRect.left > 96;
             }
 
             // update the posiion attributes
@@ -123,8 +127,6 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, size }) {
       <Image
         src={imageSource}
         sx={{
-          width: `${size}px`,
-          height: `${size}px`,
           touchAction: "none",
           userSelect: "none",
           position: "absolute"
@@ -136,6 +138,4 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, size }) {
   );
 }
 
-ProxyToken.defaultProps = { size: 48 };
-
 export default ProxyToken;