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