diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 7d947ff..c31bd7b 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -221,12 +221,20 @@ function Map({
onTokenStateChange={onMapTokenStateChange}
onTokenMenuOpen={handleTokenMenuOpen}
onTokenDragStart={(e) =>
- setDraggingTokenOptions({ tokenState, tokenImage: e.target })
+ setDraggingTokenOptions({
+ dragging: true,
+ tokenState,
+ tokenGroup: e.target,
+ })
+ }
+ onTokenDragEnd={() =>
+ setDraggingTokenOptions({
+ ...draggingTokenOptions,
+ dragging: false,
+ })
}
- onTokenDragEnd={() => setDraggingTokenOptions(null)}
draggable={
- (selectedToolId === "pan" || selectedToolId === "erase") &&
- !(tokenState.id in disabledTokens)
+ selectedToolId === "pan" && !(tokenState.id in disabledTokens)
}
mapState={mapState}
/>
@@ -250,7 +258,8 @@ function Map({
}}
onTokenStateChange={onMapTokenStateChange}
tokenState={draggingTokenOptions && draggingTokenOptions.tokenState}
- tokenImage={draggingTokenOptions && draggingTokenOptions.tokenImage}
+ tokenGroup={draggingTokenOptions && draggingTokenOptions.tokenGroup}
+ dragging={draggingTokenOptions && draggingTokenOptions.dragging}
token={tokensById[draggingTokenOptions.tokenState.tokenId]}
mapState={mapState}
/>
diff --git a/src/components/token/TokenDragOverlay.js b/src/components/token/TokenDragOverlay.js
index cb32009..06ef8a1 100644
--- a/src/components/token/TokenDragOverlay.js
+++ b/src/components/token/TokenDragOverlay.js
@@ -11,7 +11,8 @@ function TokenDragOverlay({
onTokenStateChange,
token,
tokenState,
- tokenImage,
+ tokenGroup,
+ dragging,
mapState,
}) {
const { userId } = useContext(AuthContext);
@@ -28,7 +29,7 @@ function TokenDragOverlay({
const mapRect = map.getBoundingClientRect();
function detectRemoveHover() {
- const pointerPosition = tokenImage.getStage().getPointerPosition();
+ const pointerPosition = tokenGroup.getStage().getPointerPosition();
const screenSpacePointerPosition = {
x: pointerPosition.x + mapRect.left,
y: pointerPosition.y + mapRect.top,
@@ -50,7 +51,7 @@ function TokenDragOverlay({
}
let handler;
- if (tokenState && tokenImage) {
+ if (tokenState && tokenGroup && dragging) {
handler = setInterval(detectRemoveHover, 100);
}
@@ -59,74 +60,62 @@ function TokenDragOverlay({
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
useEffect(() => {
function handleTokenDragEnd() {
- if (isRemoveHovered) {
- // Handle other tokens when a vehicle gets deleted
- if (token && token.isVehicle) {
- const layer = tokenImage.getLayer();
- const mountedTokens = tokenImage.find(".token");
- for (let mountedToken of mountedTokens) {
- // Save and restore token position after moving layer
- const position = mountedToken.absolutePosition();
- mountedToken.moveTo(layer);
- mountedToken.absolutePosition(position);
- onTokenStateChange({
- [mountedToken.id()]: {
- ...mapState.tokens[mountedToken.id()],
- x: mountedToken.x() / mapWidth,
- y: mountedToken.y() / mapHeight,
- lastEditedBy: userId,
- },
- });
- }
+ // Handle other tokens when a vehicle gets deleted
+ if (token && token.isVehicle) {
+ const layer = tokenGroup.getLayer();
+ const mountedTokens = tokenGroup.find(".token");
+ for (let mountedToken of mountedTokens) {
+ // Save and restore token position after moving layer
+ const position = mountedToken.absolutePosition();
+ mountedToken.moveTo(layer);
+ mountedToken.absolutePosition(position);
+ onTokenStateChange({
+ [mountedToken.id()]: {
+ ...mapState.tokens[mountedToken.id()],
+ x: mountedToken.x() / mapWidth,
+ y: mountedToken.y() / mapHeight,
+ lastEditedBy: userId,
+ },
+ });
}
- onTokenStateRemove(tokenState);
- setPreventMapInteraction(false);
}
+ onTokenStateRemove(tokenState);
+ setPreventMapInteraction(false);
}
- tokenImage.on("dragend", handleTokenDragEnd);
- return () => {
- tokenImage.off("dragend", handleTokenDragEnd);
- };
- }, [
- tokenImage,
- token,
- tokenState,
- isRemoveHovered,
- mapWidth,
- mapHeight,
- userId,
- onTokenStateChange,
- onTokenStateRemove,
- setPreventMapInteraction,
- mapState.tokens,
- ]);
+
+ if (!dragging && tokenState && isRemoveHovered) {
+ handleTokenDragEnd();
+ }
+ });
return (
-
-
-
-
-
+ dragging && (
+
+
+
+
+
+ )
);
}