Added transparency for tokens that can't be dragged

This commit is contained in:
Mitchell McCaffrey 2020-05-22 15:11:18 +10:00
parent 14c9151405
commit a81eed1a48
2 changed files with 42 additions and 7 deletions

View File

@ -200,6 +200,10 @@ function Map({
onTokenMenuOpen={handleTokenMenuOpen}
onTokenDragStart={() => setDraggingTokenState(tokenState)}
onTokenDragEnd={() => setDraggingTokenState(null)}
draggable={
(selectedToolId === "pan" || selectedToolId === "erase") &&
!(tokenState.id in disabledTokens)
}
/>
));

View File

@ -21,6 +21,7 @@ function MapToken({
onTokenMenuOpen,
onTokenDragStart,
onTokenDragEnd,
draggable,
}) {
const { userId } = useContext(AuthContext);
const {
@ -52,9 +53,36 @@ function MapToken({
}
function handleClick(event) {
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;
const tokenHeight =
@ -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}
>
<KonvaImage
ref={imageRef}