Fix bug with token delete not working when intersecting fog
This commit is contained in:
parent
1d3085c9af
commit
7252efc7e9
@ -221,12 +221,20 @@ function Map({
|
|||||||
onTokenStateChange={onMapTokenStateChange}
|
onTokenStateChange={onMapTokenStateChange}
|
||||||
onTokenMenuOpen={handleTokenMenuOpen}
|
onTokenMenuOpen={handleTokenMenuOpen}
|
||||||
onTokenDragStart={(e) =>
|
onTokenDragStart={(e) =>
|
||||||
setDraggingTokenOptions({ tokenState, tokenImage: e.target })
|
setDraggingTokenOptions({
|
||||||
|
dragging: true,
|
||||||
|
tokenState,
|
||||||
|
tokenGroup: e.target,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onTokenDragEnd={() =>
|
||||||
|
setDraggingTokenOptions({
|
||||||
|
...draggingTokenOptions,
|
||||||
|
dragging: false,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
onTokenDragEnd={() => setDraggingTokenOptions(null)}
|
|
||||||
draggable={
|
draggable={
|
||||||
(selectedToolId === "pan" || selectedToolId === "erase") &&
|
selectedToolId === "pan" && !(tokenState.id in disabledTokens)
|
||||||
!(tokenState.id in disabledTokens)
|
|
||||||
}
|
}
|
||||||
mapState={mapState}
|
mapState={mapState}
|
||||||
/>
|
/>
|
||||||
@ -250,7 +258,8 @@ function Map({
|
|||||||
}}
|
}}
|
||||||
onTokenStateChange={onMapTokenStateChange}
|
onTokenStateChange={onMapTokenStateChange}
|
||||||
tokenState={draggingTokenOptions && draggingTokenOptions.tokenState}
|
tokenState={draggingTokenOptions && draggingTokenOptions.tokenState}
|
||||||
tokenImage={draggingTokenOptions && draggingTokenOptions.tokenImage}
|
tokenGroup={draggingTokenOptions && draggingTokenOptions.tokenGroup}
|
||||||
|
dragging={draggingTokenOptions && draggingTokenOptions.dragging}
|
||||||
token={tokensById[draggingTokenOptions.tokenState.tokenId]}
|
token={tokensById[draggingTokenOptions.tokenState.tokenId]}
|
||||||
mapState={mapState}
|
mapState={mapState}
|
||||||
/>
|
/>
|
||||||
|
@ -11,7 +11,8 @@ function TokenDragOverlay({
|
|||||||
onTokenStateChange,
|
onTokenStateChange,
|
||||||
token,
|
token,
|
||||||
tokenState,
|
tokenState,
|
||||||
tokenImage,
|
tokenGroup,
|
||||||
|
dragging,
|
||||||
mapState,
|
mapState,
|
||||||
}) {
|
}) {
|
||||||
const { userId } = useContext(AuthContext);
|
const { userId } = useContext(AuthContext);
|
||||||
@ -28,7 +29,7 @@ function TokenDragOverlay({
|
|||||||
const mapRect = map.getBoundingClientRect();
|
const mapRect = map.getBoundingClientRect();
|
||||||
|
|
||||||
function detectRemoveHover() {
|
function detectRemoveHover() {
|
||||||
const pointerPosition = tokenImage.getStage().getPointerPosition();
|
const pointerPosition = tokenGroup.getStage().getPointerPosition();
|
||||||
const screenSpacePointerPosition = {
|
const screenSpacePointerPosition = {
|
||||||
x: pointerPosition.x + mapRect.left,
|
x: pointerPosition.x + mapRect.left,
|
||||||
y: pointerPosition.y + mapRect.top,
|
y: pointerPosition.y + mapRect.top,
|
||||||
@ -50,7 +51,7 @@ function TokenDragOverlay({
|
|||||||
}
|
}
|
||||||
|
|
||||||
let handler;
|
let handler;
|
||||||
if (tokenState && tokenImage) {
|
if (tokenState && tokenGroup && dragging) {
|
||||||
handler = setInterval(detectRemoveHover, 100);
|
handler = setInterval(detectRemoveHover, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -59,74 +60,62 @@ function TokenDragOverlay({
|
|||||||
clearInterval(handler);
|
clearInterval(handler);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [tokenState, tokenImage, isRemoveHovered]);
|
}, [tokenState, tokenGroup, isRemoveHovered, dragging]);
|
||||||
|
|
||||||
// Detect drag end of token image and remove it if it is over the remove icon
|
// Detect drag end of token image and remove it if it is over the remove icon
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function handleTokenDragEnd() {
|
function handleTokenDragEnd() {
|
||||||
if (isRemoveHovered) {
|
// Handle other tokens when a vehicle gets deleted
|
||||||
// Handle other tokens when a vehicle gets deleted
|
if (token && token.isVehicle) {
|
||||||
if (token && token.isVehicle) {
|
const layer = tokenGroup.getLayer();
|
||||||
const layer = tokenImage.getLayer();
|
const mountedTokens = tokenGroup.find(".token");
|
||||||
const mountedTokens = tokenImage.find(".token");
|
for (let mountedToken of mountedTokens) {
|
||||||
for (let mountedToken of mountedTokens) {
|
// Save and restore token position after moving layer
|
||||||
// Save and restore token position after moving layer
|
const position = mountedToken.absolutePosition();
|
||||||
const position = mountedToken.absolutePosition();
|
mountedToken.moveTo(layer);
|
||||||
mountedToken.moveTo(layer);
|
mountedToken.absolutePosition(position);
|
||||||
mountedToken.absolutePosition(position);
|
onTokenStateChange({
|
||||||
onTokenStateChange({
|
[mountedToken.id()]: {
|
||||||
[mountedToken.id()]: {
|
...mapState.tokens[mountedToken.id()],
|
||||||
...mapState.tokens[mountedToken.id()],
|
x: mountedToken.x() / mapWidth,
|
||||||
x: mountedToken.x() / mapWidth,
|
y: mountedToken.y() / mapHeight,
|
||||||
y: mountedToken.y() / mapHeight,
|
lastEditedBy: userId,
|
||||||
lastEditedBy: userId,
|
},
|
||||||
},
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
onTokenStateRemove(tokenState);
|
|
||||||
setPreventMapInteraction(false);
|
|
||||||
}
|
}
|
||||||
|
onTokenStateRemove(tokenState);
|
||||||
|
setPreventMapInteraction(false);
|
||||||
}
|
}
|
||||||
tokenImage.on("dragend", handleTokenDragEnd);
|
|
||||||
return () => {
|
if (!dragging && tokenState && isRemoveHovered) {
|
||||||
tokenImage.off("dragend", handleTokenDragEnd);
|
handleTokenDragEnd();
|
||||||
};
|
}
|
||||||
}, [
|
});
|
||||||
tokenImage,
|
|
||||||
token,
|
|
||||||
tokenState,
|
|
||||||
isRemoveHovered,
|
|
||||||
mapWidth,
|
|
||||||
mapHeight,
|
|
||||||
userId,
|
|
||||||
onTokenStateChange,
|
|
||||||
onTokenStateRemove,
|
|
||||||
setPreventMapInteraction,
|
|
||||||
mapState.tokens,
|
|
||||||
]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
dragging && (
|
||||||
sx={{
|
<Box
|
||||||
position: "absolute",
|
sx={{
|
||||||
bottom: "32px",
|
position: "absolute",
|
||||||
left: "50%",
|
bottom: "32px",
|
||||||
borderRadius: "50%",
|
left: "50%",
|
||||||
transform: isRemoveHovered
|
borderRadius: "50%",
|
||||||
? "translateX(-50%) scale(2.0)"
|
transform: isRemoveHovered
|
||||||
: "translateX(-50%) scale(1.5)",
|
? "translateX(-50%) scale(2.0)"
|
||||||
transition: "transform 250ms ease",
|
: "translateX(-50%) scale(1.5)",
|
||||||
color: isRemoveHovered ? "primary" : "text",
|
transition: "transform 250ms ease",
|
||||||
pointerEvents: "none",
|
color: isRemoveHovered ? "primary" : "text",
|
||||||
}}
|
pointerEvents: "none",
|
||||||
bg="overlay"
|
}}
|
||||||
ref={removeTokenRef}
|
bg="overlay"
|
||||||
>
|
ref={removeTokenRef}
|
||||||
<IconButton>
|
>
|
||||||
<RemoveTokenIcon />
|
<IconButton>
|
||||||
</IconButton>
|
<RemoveTokenIcon />
|
||||||
</Box>
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user