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

Fix proxy token drop being off on different zoom factors

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-08-28 15:13:41 +10:00
parent 3c27f65d0f
commit 9bc69a18e8
2 changed files with 5 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/map/Map.js
View File

@ -221,7 +221,6 @@ function Map({
draggingTokenOptions.tokenState.id === b.id
) {
// If dragging token b move above
return -1;
} else {
// Else sort so last modified is on top

26
src/components/token/ProxyToken.js
View File

@ -7,6 +7,8 @@ import usePortal from "../../helpers/usePortal";
import MapStageContext from "../../contexts/MapStageContext";
import { getRelativePointerPositionNormalized } from "../../helpers/konva";
/**
* @callback onProxyDragEnd
* @param {boolean} isOnMap whether the token was dropped on the map
@ -95,29 +97,10 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
if (proxy) {
const mapStage = mapStageRef.current;
if (onProxyDragEnd && mapStage) {
const mapImageRect = mapStage
.findOne("#mapImage")
.getClientRect();
const map = document.querySelector(".map");
const mapRect = map.getBoundingClientRect();
let x = parseFloat(proxy.getAttribute("data-x")) || 0;
let y = parseFloat(proxy.getAttribute("data-y")) || 0;
// TODO: This seems to be wrong when map is zoomed
// Convert coordiantes to be relative to the map
x = x - mapRect.left - mapImageRect.x;
y = y - mapRect.top - mapImageRect.y;
// Normalize to map width
x = x / mapImageRect.width;
y = y / mapImageRect.height;
const mapImage = mapStage.findOne("#mapImage");
const { x, y } = getRelativePointerPositionNormalized(mapImage);
// Get the token from the supplied tokens if it exists
const token = tokensRef.current[id] || {};
onProxyDragEnd(proxyOnMap.current, {
...token,
x,
@ -153,6 +136,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
left: 0,
bottom: 0,
right: 0,
pointerEvents: "none",
}}
>
<Box