Added transparency for tokens that can't be dragged
This commit is contained in:
parent
14c9151405
commit
a81eed1a48
@ -200,6 +200,10 @@ function Map({
|
||||
onTokenMenuOpen={handleTokenMenuOpen}
|
||||
onTokenDragStart={() => setDraggingTokenState(tokenState)}
|
||||
onTokenDragEnd={() => setDraggingTokenState(null)}
|
||||
draggable={
|
||||
(selectedToolId === "pan" || selectedToolId === "erase") &&
|
||||
!(tokenState.id in disabledTokens)
|
||||
}
|
||||
/>
|
||||
));
|
||||
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user