Added is vehicle checkbox and vehicle type tokens

src/components/token/TokenDragOverlay.js

@@ -3,13 +3,41 @@ import { Box, IconButton } from "theme-ui";
 
 import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
 
+import AuthContext from "../../contexts/AuthContext";
 import MapInteractionContext from "../../contexts/MapInteractionContext";
 
-function TokenDragOverlay({ onTokenStateRemove }) {
-  const { setPreventMapInteraction } = useContext(MapInteractionContext);
+function TokenDragOverlay({
+  onTokenStateRemove,
+  onTokenStateChange,
+  token,
+  tokenState,
+  tokenImage,
+  mapState,
+}) {
+  const { userId } = useContext(AuthContext);
+  const { setPreventMapInteraction, mapWidth, mapHeight } = useContext(
+    MapInteractionContext
+  );
 
   function handleTokenRemove() {
-    onTokenStateRemove();
+    // Handle other tokens when a vehicle gets deleted
+    if (token.isVehicle) {
+      const layer = tokenImage.getLayer();
+      const mountedTokens = tokenImage.find(".token");
+      for (let mountedToken of mountedTokens) {
+        // Save and restore token position after moving layer
+        const position = mountedToken.absolutePosition();
+        mountedToken.moveTo(layer);
+        mountedToken.absolutePosition(position);
+        onTokenStateChange({
+          ...mapState.tokens[mountedToken.id()],
+          x: mountedToken.x() / mapWidth,
+          y: mountedToken.y() / mapHeight,
+          lastEditedBy: userId,
+        });
+      }
+    }
+    onTokenStateRemove(tokenState);
     setPreventMapInteraction(false);
   }
 

src/components/token/TokenSettings.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Box, Input, IconButton, Label } from "theme-ui";
+import { Flex, Box, Input, IconButton, Label, Checkbox } from "theme-ui";
 
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 
@@ -29,7 +29,7 @@ function TokenSettings({
       </Flex>
       {showMore && (
         <>
-          <Box my={2} sx={{ flexGrow: 1 }}>
+          <Box mt={2} sx={{ flexGrow: 1 }}>
             <Label htmlFor="name">Name</Label>
             <Input
               name="name"
@@ -39,6 +39,18 @@ function TokenSettings({
               my={1}
             />
           </Box>
+          <Box my={2}>
+            <Label>
+              <Checkbox
+                checked={token && token.isVehicle}
+                disabled={!token || token.type === "default"}
+                onChange={(e) =>
+                  onSettingsChange("isVehicle", e.target.checked)
+                }
+              />
+              Vehicle / Mount
+            </Label>
+          </Box>
         </>
       )}
       <IconButton