Added transparency for tokens that can't be dragged

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)
+        }
       />
     ));
 

src/components/map/MapToken.js

@@ -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}