Add a check for map bounds in token menu
Removed hard coded dead zones in proxy token
This commit is contained in:
parent
6c12ab39f7
commit
7b7435f55a
@ -121,7 +121,7 @@ function Map({
|
||||
>
|
||||
<Image
|
||||
ref={mapRef}
|
||||
id="map"
|
||||
className="mapImage"
|
||||
sx={{
|
||||
width: "100%",
|
||||
userSelect: "none",
|
||||
|
@ -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 proxyContainerRect = proxyContainer.getBoundingClientRect();
|
||||
const proxyRect = proxy.getBoundingClientRect();
|
||||
// TODO: Look into a better method than hardcoding these values
|
||||
const map = document.querySelector(".map");
|
||||
const mapRect = map.getBoundingClientRect();
|
||||
proxyOnMap.current =
|
||||
proxyContainerRect.right - proxyRect.right > 80 &&
|
||||
proxyRect.left > 112;
|
||||
}
|
||||
proxyRect.left > mapRect.left && proxyRect.right < mapRect.right;
|
||||
|
||||
// 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
|
||||
// hard coding an id
|
||||
const map = document.getElementById("map");
|
||||
const mapRect = map.getBoundingClientRect();
|
||||
const mapImage = document.querySelector(".mapImage");
|
||||
const mapImageRect = mapImage.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;
|
||||
y = y - mapRect.top;
|
||||
x = x - mapImageRect.left;
|
||||
y = y - mapImageRect.top;
|
||||
// Normalize to map width
|
||||
x = x / (mapRect.right - mapRect.left);
|
||||
y = y / (mapRect.bottom - mapRect.top);
|
||||
x = x / (mapImageRect.right - mapImageRect.left);
|
||||
y = y / (mapImageRect.bottom - mapImageRect.top);
|
||||
|
||||
target.setAttribute("data-x", x);
|
||||
target.setAttribute("data-y", y);
|
||||
|
@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user