Added keyboard shortcuts to map select

src/components/map/MapTile.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Flex, Image as UIImage, IconButton, Box, Text } from "theme-ui";
 
 import EditMapIcon from "../../icons/EditMapIcon";
@@ -15,7 +15,6 @@ function MapTile({
   large,
   canEdit,
 }) {
-  const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
   const isDefault = map.type === "default";
   const mapSource = useDataSource(
     isDefault
@@ -40,17 +39,17 @@ function MapTile({
         alignItems: "center",
         cursor: "pointer",
         overflow: "hidden",
+        userSelect: "none",
       }}
       my={1}
       mx={`${large ? 1 : 2 / 3}%`}
       bg="muted"
       onClick={(e) => {
         e.stopPropagation();
-        setIsTileMenuOpen(false);
         onMapSelect(map);
       }}
       onDoubleClick={(e) => {
-        if (!isMapTileMenuOpen) {
+        if (canEdit) {
           onDone(e);
         }
       }}

src/components/map/MapTiles.js

@@ -32,16 +32,22 @@ function MapTiles({
   const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
 
   let hasMapState = false;
-  if (selectedMapStates.length > 0) {
-    for (let state of selectedMapStates) {
-      if (
-        Object.values(state.tokens).length > 0 ||
-        state.mapDrawActions.length > 0 ||
-        state.fogDrawActions.length > 0
-      ) {
-        hasMapState = true;
-        break;
-      }
+  for (let state of selectedMapStates) {
+    if (
+      Object.values(state.tokens).length > 0 ||
+      state.mapDrawActions.length > 0 ||
+      state.fogDrawActions.length > 0
+    ) {
+      hasMapState = true;
+      break;
+    }
+  }
+
+  let hasSelectedDefaultMap = false;
+  for (let map of selectedMaps) {
+    if (map.type === "default") {
+      hasSelectedDefaultMap = true;
+      break;
     }
   }
 
@@ -110,7 +116,11 @@ function MapTiles({
                 onMapEdit={onMapEdit}
                 onDone={onDone}
                 large={isSmallScreen}
-                canEdit={isSelected && selectMode === "single"}
+                canEdit={
+                  isSelected &&
+                  selectMode === "single" &&
+                  selectedMaps.length === 1
+                }
               />
             );
           })}
@@ -163,6 +173,7 @@ function MapTiles({
               aria-label="Remove Map"
               title="Remove Map"
               onClick={() => onMapsRemove()}
+              disabled={hasSelectedDefaultMap}
             >
               <RemoveMapIcon />
             </IconButton>

src/modals/SelectMapModal.js

@@ -10,6 +10,7 @@ import ImageDrop from "../components/ImageDrop";
 import LoadingOverlay from "../components/LoadingOverlay";
 
 import blobToBuffer from "../helpers/blobToBuffer";
+import useKeyboard from "../helpers/useKeyboard";
 
 import MapDataContext from "../contexts/MapDataContext";
 import AuthContext from "../contexts/AuthContext";
@@ -216,8 +217,8 @@ function SelectMapModal({
             let idsToRemove = [];
             const direction = mapIndex > lastIndex ? 1 : -1;
             for (
-              let i = mapIndex;
-              direction > 0 ? i >= lastIndex : i <= lastIndex;
+              let i = lastIndex + direction;
+              direction < 0 ? i >= mapIndex : i <= mapIndex;
               i += direction
             ) {
               const mapId = ownedMaps[i].id;
@@ -229,7 +230,7 @@ function SelectMapModal({
             }
             setSelectedMapIds((prev) => {
               let ids = [...prev, ...idsToAdd];
-              return ids.filter((id) => idsToRemove.includes(id));
+              return ids.filter((id) => !idsToRemove.includes(id));
             });
           } else {
             setSelectedMapIds([map.id]);
@@ -272,6 +273,26 @@ function SelectMapModal({
     onDone();
   }
 
+  function handleKeyDown({ key }) {
+    if (key === "Shift") {
+      setSelectMode("range");
+    }
+    if (key === "Control" || key === "Meta") {
+      setSelectMode("multiple");
+    }
+  }
+
+  function handleKeyUp({ key }) {
+    if (key === "Shift" && selectMode === "range") {
+      setSelectMode("single");
+    }
+    if ((key === "Control" || key === "Meta") && selectMode === "multiple") {
+      setSelectMode("single");
+    }
+  }
+
+  useKeyboard(handleKeyDown, handleKeyUp);
+
   return (
     <Modal
       isOpen={isOpen}