Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix token menu open position bug with selecting the same token after movement

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-05-25 16:35:48 +10:00
parent ef96f2f7c4
commit 4299467757
1 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/token/TokenMenu.js
View File

@ -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 = [];