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

This commit is contained in:
Mitchell McCaffrey 2021-06-06 10:24:56 +10:00
parent 948be7cac2
commit 9d9fd5b753
4 changed files with 44 additions and 41 deletions

View File

@ -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,7 +157,6 @@ function MapEditor({ map, onSettingsChange }) {
<ResetMapIcon />
</IconButton>
)}
{canEditGrid && (
<IconButton
title={
showGridControls ? "Hide Grid Controls" : "Show Grid Controls"
@ -180,7 +177,6 @@ function MapEditor({ map, onSettingsChange }) {
>
{showGridControls ? <GridOnIcon /> : <GridOffIcon />}
</IconButton>
)}
</Box>
</GridProvider>
</MapInteractionProvider>

View File

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

View File

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

View File

@ -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 &&
token.type !== "default" &&
selectMode === "single" &&
selectedGroupIds.length === 1;
isSelected && selectMode === "single" && selectedGroupIds.length === 1;
return (
<TokenTile