Allow editing of default map and tokens and add default label setting

src/components/map/MapEditor.js

@@ -93,8 +93,6 @@ function MapEditor({ map, onSettingsChange }) {
     interactionEmitter: null,
   };
 
-  const canEditGrid = map.type !== "default";
-
   const gridChanged =
     map.grid.inset.topLeft.x !== defaultInset.topLeft.x ||
     map.grid.inset.topLeft.y !== defaultInset.topLeft.y ||
@@ -133,7 +131,7 @@ function MapEditor({ map, onSettingsChange }) {
             >
               <Layer ref={mapLayerRef}>
                 <Image image={mapImage} width={mapWidth} height={mapHeight} />
-                {showGridControls && canEditGrid && (
+                {showGridControls && (
                   <>
                     <MapGrid map={map} />
                     <MapGridEditor map={map} onGridChange={handleGridChange} />
@@ -159,28 +157,26 @@ function MapEditor({ map, onSettingsChange }) {
               <ResetMapIcon />
             </IconButton>
           )}
-          {canEditGrid && (
+          <IconButton
-            <IconButton
+            title={
-              title={
+              showGridControls ? "Hide Grid Controls" : "Show Grid Controls"
-                showGridControls ? "Hide Grid Controls" : "Show Grid Controls"
+            }
-              }
+            aria-label={
-              aria-label={
+              showGridControls ? "Hide Grid Controls" : "Show Grid Controls"
-                showGridControls ? "Hide Grid Controls" : "Show Grid Controls"
+            }
-              }
+            onClick={() => setShowGridControls(!showGridControls)}
-              onClick={() => setShowGridControls(!showGridControls)}
+            bg="overlay"
-              bg="overlay"
+            sx={{
-              sx={{
+              borderRadius: "50%",
-                borderRadius: "50%",
+              position: "absolute",
-                position: "absolute",
+              bottom: 0,
-                bottom: 0,
+              right: 0,
-                right: 0,
+            }}
-              }}
+            m={2}
-              m={2}
+            p="6px"
-              p="6px"
+          >
-            >
+            {showGridControls ? <GridOnIcon /> : <GridOffIcon />}
-              {showGridControls ? <GridOnIcon /> : <GridOffIcon />}
+          </IconButton>
-            </IconButton>
-          )}
         </Box>
       </GridProvider>
     </MapInteractionProvider>

src/components/map/MapSettings.js

@@ -149,7 +149,7 @@ function MapSettings({
             name="gridX"
             value={`${(map && map.grid.size.x) || 0}`}
             onChange={handleGridSizeXChange}
-            disabled={mapEmpty || map.type === "default"}
+            disabled={mapEmpty}
             min={1}
             my={1}
           />
@@ -161,7 +161,7 @@ function MapSettings({
             name="gridY"
             value={`${(map && map.grid.size.y) || 0}`}
             onChange={handleGridSizeYChange}
-            disabled={mapEmpty || map.type === "default"}
+            disabled={mapEmpty}
             min={1}
             my={1}
           />
@@ -173,7 +173,7 @@ function MapSettings({
           name="name"
           value={(map && map.name) || ""}
           onChange={(e) => onSettingsChange("name", e.target.value)}
-          disabled={mapEmpty || map.type === "default"}
+          disabled={mapEmpty}
           my={1}
         />
       </Box>
@@ -188,7 +188,7 @@ function MapSettings({
               <Box mb={1} sx={{ width: "50%" }}>
                 <Label mb={1}>Grid Type</Label>
                 <Select
-                  isDisabled={mapEmpty || map.type === "default"}
+                  isDisabled={mapEmpty}
                   options={gridTypeSettings}
                   value={
                     !mapEmpty &&
@@ -202,7 +202,7 @@ function MapSettings({
                 <Label>
                   <Checkbox
                     checked={!mapEmpty && map.showGrid}
-                    disabled={mapEmpty || map.type === "default"}
+                    disabled={mapEmpty}
                     onChange={(e) =>
                       onSettingsChange("showGrid", e.target.checked)
                     }
@@ -212,7 +212,7 @@ function MapSettings({
                 <Label>
                   <Checkbox
                     checked={!mapEmpty && map.snapToGrid}
-                    disabled={mapEmpty || map.type === "default"}
+                    disabled={mapEmpty}
                     onChange={(e) =>
                       onSettingsChange("snapToGrid", e.target.checked)
                     }
@@ -225,7 +225,7 @@ function MapSettings({
               <Box my={2} sx={{ width: "50%" }}>
                 <Label mb={1}>Grid Measurement</Label>
                 <Select
-                  isDisabled={mapEmpty || map.type === "default"}
+                  isDisabled={mapEmpty}
                   options={
                     map && map.grid.type === "square"
                       ? gridSquareMeasurementTypeSettings
@@ -247,7 +247,7 @@ function MapSettings({
                   name="gridMeasurementScale"
                   value={`${map && map.grid.measurement.scale}`}
                   onChange={handleGridMeasurementScaleChange}
-                  disabled={mapEmpty || map.type === "default"}
+                  disabled={mapEmpty}
                   min={1}
                   my={1}
                   autoComplete="off"

src/components/token/TokenSettings.js

@@ -21,7 +21,7 @@ function TokenSettings({ token, onSettingsChange }) {
           name="name"
           value={(token && token.name) || ""}
           onChange={(e) => onSettingsChange("name", e.target.value)}
-          disabled={tokenEmpty || token.type === "default"}
+          disabled={tokenEmpty}
           my={1}
         />
       </Box>
@@ -33,7 +33,7 @@ function TokenSettings({ token, onSettingsChange }) {
             !tokenEmpty &&
             categorySettings.find((s) => s.value === token.defaultCategory)
           }
-          isDisabled={tokenEmpty || token.type === "default"}
+          isDisabled={tokenEmpty}
           onChange={(option) =>
             onSettingsChange("defaultCategory", option.value)
           }
@@ -41,7 +41,7 @@ function TokenSettings({ token, onSettingsChange }) {
         />
       </Box>
       <Flex>
-        <Box my={2} sx={{ flexGrow: 1 }}>
+        <Box mt={2} sx={{ flexGrow: 1 }}>
           <Label htmlFor="tokenSize">Default Size</Label>
           <Input
             type="number"
@@ -50,12 +50,22 @@ function TokenSettings({ token, onSettingsChange }) {
             onChange={(e) =>
               onSettingsChange("defaultSize", parseFloat(e.target.value))
             }
-            disabled={tokenEmpty || token.type === "default"}
+            disabled={tokenEmpty}
             min={1}
             my={1}
           />
         </Box>
       </Flex>
+      <Box my={2} sx={{ flexGrow: 1 }}>
+        <Label htmlFor="label">Default Label</Label>
+        <Input
+          name="label"
+          value={(token && token.defaultLabel) || ""}
+          onChange={(e) => onSettingsChange("defaultLabel", e.target.value)}
+          disabled={tokenEmpty}
+          my={1}
+        />
+      </Box>
     </Flex>
   );
 }

src/components/token/TokenTiles.js

@@ -23,10 +23,7 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
       const token = tokens.find((token) => token.id === group.id);
       const isSelected = selectedGroupIds.includes(group.id);
       const canEdit =
-        isSelected &&
+        isSelected && selectMode === "single" && selectedGroupIds.length === 1;
-        token.type !== "default" &&
-        selectMode === "single" &&
-        selectedGroupIds.length === 1;
 
       return (
         <TokenTile