diff --git a/src/components/map/Map.js b/src/components/map/Map.js index 9df0541..2820078 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -200,6 +200,10 @@ function Map({ onTokenMenuOpen={handleTokenMenuOpen} onTokenDragStart={() => setDraggingTokenState(tokenState)} onTokenDragEnd={() => setDraggingTokenState(null)} + draggable={ + (selectedToolId === "pan" || selectedToolId === "erase") && + !(tokenState.id in disabledTokens) + } /> )); diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js index b8d4ce5..802dffe 100644 --- a/src/components/map/MapToken.js +++ b/src/components/map/MapToken.js @@ -21,6 +21,7 @@ function MapToken({ onTokenMenuOpen, onTokenDragStart, onTokenDragEnd, + draggable, }) { const { userId } = useContext(AuthContext); const { @@ -52,8 +53,35 @@ function MapToken({ } function handleClick(event) { - const tokenImage = event.target; - onTokenMenuOpen(tokenState.id, tokenImage); + if (draggable) { + const tokenImage = event.target; + onTokenMenuOpen(tokenState.id, tokenImage); + } + } + + const [tokenOpacity, setTokenOpacity] = useState(1); + function handlePointerDown() { + if (draggable) { + setPreventMapInteraction(true); + } + } + + function handlePointerUp() { + if (draggable) { + setPreventMapInteraction(false); + } + } + + function handlePointerOver() { + if (!draggable) { + setTokenOpacity(0.5); + } + } + + function handlePointerOut() { + if (!draggable) { + setTokenOpacity(1.0); + } } const tokenWidth = tokenSizePercent * mapWidth * tokenState.size; @@ -89,14 +117,17 @@ function MapToken({ height={tokenHeight} x={tokenState.x * mapWidth} y={tokenState.y * mapHeight} - draggable - onMouseDown={() => setPreventMapInteraction(true)} - onMouseUp={() => setPreventMapInteraction(false)} - onTouchStart={() => setPreventMapInteraction(true)} - onTouchEnd={() => setPreventMapInteraction(false)} + draggable={draggable} + onMouseDown={handlePointerDown} + onMouseUp={handlePointerUp} + onMouseOver={handlePointerOver} + onMouseOut={handlePointerOut} + onTouchStart={handlePointerDown} + onTouchEnd={handlePointerUp} onClick={handleClick} onDragEnd={handleDragEnd} onDragStart={onTokenDragStart} + opacity={tokenOpacity} >