Fix token menu open position bug with selecting the same token after movement
This commit is contained in:
parent
ef96f2f7c4
commit
4299467757
@ -18,33 +18,30 @@ function TokenMenu({
|
|||||||
const wasOpen = usePrevious(isOpen);
|
const wasOpen = usePrevious(isOpen);
|
||||||
|
|
||||||
const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
|
const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
|
||||||
|
const [menuLeft, setMenuLeft] = useState(0);
|
||||||
|
const [menuTop, setMenuTop] = useState(0);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isOpen && !wasOpen && tokenState) {
|
if (isOpen && !wasOpen && tokenState) {
|
||||||
setTokenMaxSize(Math.max(tokenState.size, defaultTokenMaxSize));
|
setTokenMaxSize(Math.max(tokenState.size, defaultTokenMaxSize));
|
||||||
|
// Update menu position
|
||||||
|
if (tokenImage) {
|
||||||
|
const imageRect = tokenImage.getClientRect();
|
||||||
|
const map = document.querySelector(".map");
|
||||||
|
const mapRect = map.getBoundingClientRect();
|
||||||
|
|
||||||
|
// Center X for the menu which is 156px wide
|
||||||
|
setMenuLeft(mapRect.left + imageRect.x + imageRect.width / 2 - 156 / 2);
|
||||||
|
// Y 12px from the bottom
|
||||||
|
setMenuTop(mapRect.top + imageRect.y + imageRect.height + 12);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [isOpen, tokenState, wasOpen]);
|
}, [isOpen, tokenState, wasOpen, tokenImage]);
|
||||||
|
|
||||||
function handleLabelChange(event) {
|
function handleLabelChange(event) {
|
||||||
const label = event.target.value;
|
const label = event.target.value;
|
||||||
onTokenStateChange({ [tokenState.id]: { ...tokenState, label: label } });
|
onTokenStateChange({ [tokenState.id]: { ...tokenState, label: label } });
|
||||||
}
|
}
|
||||||
|
|
||||||
const [menuLeft, setMenuLeft] = useState(0);
|
|
||||||
const [menuTop, setMenuTop] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (tokenImage) {
|
|
||||||
const imageRect = tokenImage.getClientRect();
|
|
||||||
const map = document.querySelector(".map");
|
|
||||||
const mapRect = map.getBoundingClientRect();
|
|
||||||
|
|
||||||
// Center X for the menu which is 156px wide
|
|
||||||
setMenuLeft(mapRect.left + imageRect.x + imageRect.width / 2 - 156 / 2);
|
|
||||||
// Y 12px from the bottom
|
|
||||||
setMenuTop(mapRect.top + imageRect.y + imageRect.height + 12);
|
|
||||||
}
|
|
||||||
}, [tokenImage]);
|
|
||||||
|
|
||||||
function handleStatusChange(status) {
|
function handleStatusChange(status) {
|
||||||
const statuses = tokenState.statuses;
|
const statuses = tokenState.statuses;
|
||||||
let newStatuses = [];
|
let newStatuses = [];
|
||||||
|
Loading…
Reference in New Issue
Block a user