Fixed interactjs events from being defined multiple times
This commit is contained in:
parent
91c95b4fad
commit
91537a9477
@ -10,7 +10,8 @@ import MapControls from "./MapControls";
|
|||||||
|
|
||||||
import { omit } from "../helpers/shared";
|
import { omit } from "../helpers/shared";
|
||||||
|
|
||||||
const mapTokenClassName = "map-token";
|
const mapTokenProxyClassName = "map-token__proxy";
|
||||||
|
const mapTokenMenuClassName = "map-token__menu";
|
||||||
const zoomSpeed = -0.005;
|
const zoomSpeed = -0.005;
|
||||||
const minZoom = 0.1;
|
const minZoom = 0.1;
|
||||||
const maxZoom = 5;
|
const maxZoom = 5;
|
||||||
@ -118,7 +119,7 @@ function Map({
|
|||||||
}
|
}
|
||||||
setTranslateAndScale(newTranslate, newScale);
|
setTranslateAndScale(newTranslate, newScale);
|
||||||
}
|
}
|
||||||
interact(".map")
|
const mapInteract = interact(".map")
|
||||||
.gesturable({
|
.gesturable({
|
||||||
listeners: {
|
listeners: {
|
||||||
move: (e) => handleMove(e, true),
|
move: (e) => handleMove(e, true),
|
||||||
@ -132,13 +133,17 @@ function Map({
|
|||||||
cursorChecker: () => {
|
cursorChecker: () => {
|
||||||
return selectedTool === "pan" && mapData ? "move" : "default";
|
return selectedTool === "pan" && mapData ? "move" : "default";
|
||||||
},
|
},
|
||||||
|
})
|
||||||
|
.on("doubletap", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
if (selectedTool === "pan") {
|
||||||
|
setTranslateAndScale({ x: 0, y: 0 }, 1);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
interact(".map").on("doubletap", (event) => {
|
|
||||||
event.preventDefault();
|
return () => {
|
||||||
if (selectedTool === "pan") {
|
mapInteract.unset();
|
||||||
setTranslateAndScale({ x: 0, y: 0 }, 1);
|
};
|
||||||
}
|
|
||||||
});
|
|
||||||
}, [selectedTool, mapData]);
|
}, [selectedTool, mapData]);
|
||||||
|
|
||||||
// Reset map transform when map changes
|
// Reset map transform when map changes
|
||||||
@ -229,7 +234,7 @@ function Map({
|
|||||||
key={token.id}
|
key={token.id}
|
||||||
token={token}
|
token={token}
|
||||||
tokenSizePercent={tokenSizePercent}
|
tokenSizePercent={tokenSizePercent}
|
||||||
className={mapTokenClassName}
|
className={`${mapTokenProxyClassName} ${mapTokenMenuClassName}`}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
@ -294,11 +299,11 @@ function Map({
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<ProxyToken
|
<ProxyToken
|
||||||
tokenClassName={mapTokenClassName}
|
tokenClassName={mapTokenProxyClassName}
|
||||||
onProxyDragEnd={handleProxyDragEnd}
|
onProxyDragEnd={handleProxyDragEnd}
|
||||||
/>
|
/>
|
||||||
<TokenMenu
|
<TokenMenu
|
||||||
tokenClassName={mapTokenClassName}
|
tokenClassName={mapTokenMenuClassName}
|
||||||
onTokenChange={onMapTokenChange}
|
onTokenChange={onMapTokenChange}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
@ -19,7 +19,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
|
|||||||
const proxyOnMap = useRef(false);
|
const proxyOnMap = useRef(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
interact(`.${tokenClassName}`).draggable({
|
const tokenInteract = interact(`.${tokenClassName}`).draggable({
|
||||||
listeners: {
|
listeners: {
|
||||||
start: (event) => {
|
start: (event) => {
|
||||||
let target = event.target;
|
let target = event.target;
|
||||||
@ -92,7 +92,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
|
|||||||
target.setAttribute("data-y", y);
|
target.setAttribute("data-y", y);
|
||||||
|
|
||||||
onProxyDragEnd(proxyOnMap.current, {
|
onProxyDragEnd(proxyOnMap.current, {
|
||||||
image: imageSource,
|
image: target.src,
|
||||||
// Pass in props stored as data- in the dom node
|
// Pass in props stored as data- in the dom node
|
||||||
...target.dataset,
|
...target.dataset,
|
||||||
});
|
});
|
||||||
@ -110,7 +110,10 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}, [imageSource, onProxyDragEnd, tokenClassName, proxyContainer]);
|
return () => {
|
||||||
|
tokenInteract.unset();
|
||||||
|
};
|
||||||
|
}, [onProxyDragEnd, tokenClassName, proxyContainer]);
|
||||||
|
|
||||||
if (!imageSource) {
|
if (!imageSource) {
|
||||||
return null;
|
return null;
|
||||||
|
@ -63,8 +63,11 @@ function TokenMenu({ tokenClassName, onTokenChange }) {
|
|||||||
setIsOpen(true);
|
setIsOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add listener for hold gesture
|
// Add listener for tap gesture
|
||||||
interact(`.${tokenClassName}`).on("tap", handleTokenMenuOpen);
|
const tokenInteract = interact(`.${tokenClassName}`).on(
|
||||||
|
"tap",
|
||||||
|
handleTokenMenuOpen
|
||||||
|
);
|
||||||
|
|
||||||
function handleMapContextMenu(event) {
|
function handleMapContextMenu(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@ -81,6 +84,7 @@ function TokenMenu({ tokenClassName, onTokenChange }) {
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
map.removeEventListener("contextmenu", handleMapContextMenu);
|
map.removeEventListener("contextmenu", handleMapContextMenu);
|
||||||
|
tokenInteract.unset();
|
||||||
};
|
};
|
||||||
}, [tokenClassName]);
|
}, [tokenClassName]);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user