Add a check for map bounds in token menu

Removed hard coded dead zones in proxy token

src/components/Map.js

@@ -121,7 +121,7 @@ function Map({
     >
       <Image
         ref={mapRef}
-        id="map"
+        className="mapImage"
         sx={{
           width: "100%",
           userSelect: "none",

src/components/ProxyToken.js

@@ -4,6 +4,7 @@ import { Image, Box } from "theme-ui";
 import interact from "interactjs";
 
 import usePortal from "../helpers/usePortal";
+
 import TokenLabel from "./TokenLabel";
 import TokenStatus from "./TokenStatus";
 
@@ -58,14 +59,11 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
 
             // Check whether the proxy is on the right or left hand side of the screen
             // if not set proxyOnMap to true
-            if (proxyContainer) {
+            const proxyRect = proxy.getBoundingClientRect();
-              const proxyContainerRect = proxyContainer.getBoundingClientRect();
+            const map = document.querySelector(".map");
-              const proxyRect = proxy.getBoundingClientRect();
+            const mapRect = map.getBoundingClientRect();
-              // TODO: Look into a better method than hardcoding these values
+            proxyOnMap.current =
-              proxyOnMap.current =
+              proxyRect.left > mapRect.left && proxyRect.right < mapRect.right;
-                proxyContainerRect.right - proxyRect.right > 80 &&
-                proxyRect.left > 112;
-            }
 
             // update the posiion attributes
             proxy.setAttribute("data-x", x);
@@ -78,19 +76,17 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
           let proxy = proxyRef.current;
           if (proxy) {
             if (onProxyDragEnd) {
-              // TODO: look at cleaning this up with a props instead of
+              const mapImage = document.querySelector(".mapImage");
-              // hard coding an id
+              const mapImageRect = mapImage.getBoundingClientRect();
-              const map = document.getElementById("map");
-              const mapRect = map.getBoundingClientRect();
 
               let x = parseFloat(proxy.getAttribute("data-x")) || 0;
               let y = parseFloat(proxy.getAttribute("data-y")) || 0;
               // Convert coordiantes to be relative to the map
-              x = x - mapRect.left;
+              x = x - mapImageRect.left;
-              y = y - mapRect.top;
+              y = y - mapImageRect.top;
               // Normalize to map width
-              x = x / (mapRect.right - mapRect.left);
+              x = x / (mapImageRect.right - mapImageRect.left);
-              y = y / (mapRect.bottom - mapRect.top);
+              y = y / (mapImageRect.bottom - mapImageRect.top);
 
               target.setAttribute("data-x", x);
               target.setAttribute("data-y", y);

src/components/TokenMenu.js

@@ -107,6 +107,20 @@ function TokenMenu({ tokenClassName, onTokenChange }) {
         },
         { once: true }
       );
+
+      // Ensure menu is in bounds
+      const nodeRect = node.getBoundingClientRect();
+      const map = document.querySelector(".map");
+      const mapRect = map.getBoundingClientRect();
+      setMenuLeft((prevLeft) =>
+        Math.min(
+          mapRect.right - nodeRect.width,
+          Math.max(mapRect.left, prevLeft)
+        )
+      );
+      setMenuTop((prevTop) =>
+        Math.min(mapRect.bottom - nodeRect.height, prevTop)
+      );
     }
   }
 

src/components/TokenStatus.js

@@ -21,7 +21,7 @@ function TokenStatus({ statuses }) {
             height: "100%",
             position: "absolute",
             opacity: 0.8,
-            transform: `scale(1.${index + 1})`,
+            transform: `scale(${1 - index / 10})`,
           }}
         >
           <svg