Added lock and visibility options to tokens

src/components/map/Map.js

@@ -228,7 +228,9 @@ function Map({
               })
             }
             draggable={
-              selectedToolId === "pan" && !(tokenState.id in disabledTokens)
+              selectedToolId === "pan" &&
+              !(tokenState.id in disabledTokens) &&
+              !tokenState.locked
             }
             mapState={mapState}
             fadeOnHover={selectedToolId === "drawing"}
@@ -245,6 +247,7 @@ function Map({
       onTokenStateChange={onMapTokenStateChange}
       tokenState={mapState && mapState.tokens[tokenMenuOptions.tokenStateId]}
       tokenImage={tokenMenuOptions.tokenImage}
+      map={map}
     />
   );
 

src/components/map/MapToken.js

@@ -113,7 +113,8 @@ function MapToken({
           ...mapState.tokens[mountedToken.id()],
           x: mountedToken.x() / mapWidth,
           y: mountedToken.y() / mapHeight,
-          lastEditedBy: userId,
+          lastModifiedBy: userId,
+          lastModified: Date.now(),
         };
       }
     }
@@ -125,7 +126,8 @@ function MapToken({
         ...tokenState,
         x: tokenGroup.x() / mapWidth,
         y: tokenGroup.y() / mapHeight,
-        lastEditedBy: userId,
+        lastModifiedBy: userId,
+        lastModified: Date.now(),
       },
     });
     onTokenDragEnd(event);
@@ -139,16 +141,37 @@ function MapToken({
   }
 
   const [tokenOpacity, setTokenOpacity] = useState(1);
-  function handlePointerDown() {
+  // Store token pointer down position to check for a click when token is locked
+  const tokenPointerDownPositionRef = useRef();
+  function handlePointerDown(event) {
     if (draggable) {
       setPreventMapInteraction(true);
     }
+    if (tokenState.locked && map.owner === userId) {
+      const pointerPosition = { x: event.evt.clientX, y: event.evt.clientY };
+      tokenPointerDownPositionRef.current = pointerPosition;
+    }
   }
 
-  function handlePointerUp() {
+  function handlePointerUp(event) {
     if (draggable) {
       setPreventMapInteraction(false);
     }
+    // Check token click when locked and we are the map owner
+    // We can't use onClick because that doesn't check pointer distance
+    if (tokenState.locked && map.owner === userId) {
+      // If down and up distance is small trigger a click
+      const pointerPosition = { x: event.evt.clientX, y: event.evt.clientY };
+      const distance = Vector2.distance(
+        tokenPointerDownPositionRef.current,
+        pointerPosition,
+        "euclidean"
+      );
+      if (distance < 5) {
+        const tokenImage = event.target;
+        onTokenMenuOpen(tokenState.id, tokenImage);
+      }
+    }
   }
 
   function handlePointerEnter() {
@@ -192,13 +215,18 @@ function MapToken({
   const previousWidth = usePrevious(mapWidth);
   const previousHeight = usePrevious(mapHeight);
   const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
-  const skipAnimation = tokenState.lastEditedBy === userId || resized;
+  const skipAnimation = tokenState.lastModifiedBy === userId || resized;
   const props = useSpring({
     x: tokenX,
     y: tokenY,
     immediate: skipAnimation,
   });
 
+  // When a token is hidden if you aren't the map owner hide it completely
+  if (map && !tokenState.visible && map.owner !== userId) {
+    return null;
+  }
+
   return (
     <animated.Group
       {...props}
@@ -216,7 +244,7 @@ function MapToken({
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}
       onDragMove={handleDragMove}
-      opacity={tokenOpacity}
+      opacity={tokenState.visible ? tokenOpacity : 0.5}
       name={token && token.isVehicle ? "vehicle" : "token"}
       id={tokenState.id}
     >

src/components/token/TokenDragOverlay.js

@@ -79,7 +79,8 @@ function TokenDragOverlay({
               ...mapState.tokens[mountedToken.id()],
               x: mountedToken.x() / mapWidth,
               y: mountedToken.y() / mapHeight,
-              lastEditedBy: userId,
+              lastModifiedBy: userId,
+              lastModified: Date.now(),
             },
           });
         }

src/components/token/TokenMenu.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
-import { Box, Input, Slider, Flex, Text } from "theme-ui";
+import { Box, Input, Slider, Flex, Text, IconButton } from "theme-ui";
 
 import MapMenu from "../map/MapMenu";
 
@@ -7,6 +7,13 @@ import colors, { colorOptions } from "../../helpers/colors";
 
 import usePrevious from "../../helpers/usePrevious";
 
+import LockIcon from "../../icons/TokenLockIcon";
+import UnlockIcon from "../../icons/TokenUnlockIcon";
+import ShowIcon from "../../icons/TokenShowIcon";
+import HideIcon from "../../icons/TokenHideIcon";
+
+import AuthContext from "../../contexts/AuthContext";
+
 const defaultTokenMaxSize = 6;
 function TokenMenu({
   isOpen,
@@ -14,7 +21,10 @@ function TokenMenu({
   tokenState,
   tokenImage,
   onTokenStateChange,
+  map,
 }) {
+  const { userId } = useContext(AuthContext);
+
   const wasOpen = usePrevious(isOpen);
 
   const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
@@ -26,8 +36,8 @@ function TokenMenu({
       // Update menu position
       if (tokenImage) {
         const imageRect = tokenImage.getClientRect();
-        const map = document.querySelector(".map");
+        const mapElement = document.querySelector(".map");
-        const mapRect = map.getBoundingClientRect();
+        const mapRect = mapElement.getBoundingClientRect();
 
         // Center X for the menu which is 156px wide
         setMenuLeft(mapRect.left + imageRect.x + imageRect.width / 2 - 156 / 2);
@@ -67,6 +77,18 @@ function TokenMenu({
     });
   }
 
+  function handleVisibleChange() {
+    onTokenStateChange({
+      [tokenState.id]: { ...tokenState, visible: !tokenState.visible },
+    });
+  }
+
+  function handleLockChange() {
+    onTokenStateChange({
+      [tokenState.id]: { ...tokenState, locked: !tokenState.locked },
+    });
+  }
+
   function handleModalContent(node) {
     if (node) {
       // Focus input
@@ -76,8 +98,8 @@ function TokenMenu({
 
       // Ensure menu is in bounds
       const nodeRect = node.getBoundingClientRect();
-      const map = document.querySelector(".map");
+      const mapElement = document.querySelector(".map");
-      const mapRect = map.getBoundingClientRect();
+      const mapRect = mapElement.getBoundingClientRect();
       setMenuLeft((prevLeft) =>
         Math.min(
           mapRect.right - nodeRect.width,
@@ -203,6 +225,33 @@ function TokenMenu({
             mr={1}
           />
         </Flex>
+        {/* Only show hide and lock token actions to map owners */}
+        {map && map.owner === userId && (
+          <Flex sx={{ alignItems: "center", justifyContent: "space-around" }}>
+            <IconButton
+              onClick={handleVisibleChange}
+              title={
+                tokenState && tokenState.visible ? "Hide Token" : "Show Token"
+              }
+              aria-label={
+                tokenState && tokenState.visible ? "Hide Token" : "Show Token"
+              }
+            >
+              {tokenState && tokenState.visible ? <ShowIcon /> : <HideIcon />}
+            </IconButton>
+            <IconButton
+              onClick={handleLockChange}
+              title={
+                tokenState && tokenState.locked ? "Unlock Token" : "Lock Token"
+              }
+              aria-label={
+                tokenState && tokenState.locked ? "Unlock Token" : "Lock Token"
+              }
+            >
+              {tokenState && tokenState.locked ? <LockIcon /> : <UnlockIcon />}
+            </IconButton>
+          </Flex>
+        )}
       </Box>
     </MapMenu>
   );

src/components/token/Tokens.js

@@ -31,8 +31,11 @@ function Tokens({ onMapTokenStateCreate }) {
         statuses: [],
         x: token.x,
         y: token.y,
-        lastEditedBy: userId,
+        lastModifiedBy: userId,
+        lastModified: Date.now(),
         rotation: 0,
+        locked: false,
+        visible: true,
       });
     }
   }

src/database.js

@@ -155,6 +155,23 @@ function loadVersions(db) {
           map.snapToGrid = true;
         });
     });
+  // v1.5.1 - Added lock, visibility and modified to tokens
+  db.version(9)
+    .stores({})
+    .upgrade((tx) => {
+      return tx
+        .table("states")
+        .toCollection()
+        .modify((state) => {
+          for (let id in state.tokens) {
+            state.tokens[id].lastModifiedBy = state.tokens[id].lastEditedBy;
+            delete state.tokens[id].lastEditedBy;
+            state.tokens[id].lastModified = Date.now();
+            state.tokens[id].locked = false;
+            state.tokens[id].visible = true;
+          }
+        });
+    });
 }
 
 // Get the dexie database used in DatabaseContext

src/icons/TokenHideIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function TokenHideIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z" />
+    </svg>
+  );
+}
+
+export default TokenHideIcon;

src/icons/TokenLockIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function TokenLockIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z" />
+    </svg>
+  );
+}
+
+export default TokenLockIcon;

src/icons/TokenShowIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function TokenShowIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+    </svg>
+  );
+}
+
+export default TokenShowIcon;

src/icons/TokenUnlockIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function TokenUnlockIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-5h-1V6c0-2.76-2.24-5-5-5-2.28 0-4.27 1.54-4.84 3.75-.14.54.18 1.08.72 1.22.53.14 1.08-.18 1.22-.72C9.44 3.93 10.63 3 12 3c1.65 0 3 1.35 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 11c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8z" />{" "}
+    </svg>
+  );
+}
+
+export default TokenUnlockIcon;