Changed map data grid size labelling and fixed ui labels
This commit is contained in:
parent
91537a9477
commit
6fb2e9f113
@ -25,8 +25,8 @@ function AddMapButton({ onMapChange }) {
|
|||||||
image.onload = function () {
|
image.onload = function () {
|
||||||
mapDataRef.current = {
|
mapDataRef.current = {
|
||||||
file,
|
file,
|
||||||
rows,
|
gridX: gridX,
|
||||||
columns,
|
gridY: gridY,
|
||||||
width: image.width,
|
width: image.width,
|
||||||
height: image.height,
|
height: image.height,
|
||||||
};
|
};
|
||||||
@ -43,14 +43,14 @@ function AddMapButton({ onMapChange }) {
|
|||||||
closeModal();
|
closeModal();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [rows, setRows] = useState(defaultMapSize);
|
const [gridX, setGridX] = useState(defaultMapSize);
|
||||||
const [columns, setColumns] = useState(defaultMapSize);
|
const [gridY, setGridY] = useState(defaultMapSize);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mapDataRef.current) {
|
if (mapDataRef.current) {
|
||||||
mapDataRef.current.rows = rows;
|
mapDataRef.current.gridX = gridX;
|
||||||
mapDataRef.current.columns = columns;
|
mapDataRef.current.gridY = gridY;
|
||||||
}
|
}
|
||||||
}, [rows, columns]);
|
}, [gridX, gridY]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -62,10 +62,10 @@ function AddMapButton({ onMapChange }) {
|
|||||||
onRequestClose={closeModal}
|
onRequestClose={closeModal}
|
||||||
onDone={handleDone}
|
onDone={handleDone}
|
||||||
onImageUpload={handleImageUpload}
|
onImageUpload={handleImageUpload}
|
||||||
rows={rows}
|
gridX={gridX}
|
||||||
onRowsChange={setRows}
|
onGridXChange={setGridX}
|
||||||
columns={columns}
|
gridY={gridY}
|
||||||
onColumnsChange={setColumns}
|
onGridYChange={setGridY}
|
||||||
imageLoaded={imageLoaded}
|
imageLoaded={imageLoaded}
|
||||||
mapSource={mapSource}
|
mapSource={mapSource}
|
||||||
/>
|
/>
|
||||||
|
@ -191,8 +191,8 @@ function Map({
|
|||||||
|
|
||||||
const mapRef = useRef(null);
|
const mapRef = useRef(null);
|
||||||
const mapContainerRef = useRef();
|
const mapContainerRef = useRef();
|
||||||
const rows = mapData && mapData.rows;
|
const gridX = mapData && mapData.gridX;
|
||||||
const tokenSizePercent = (1 / rows) * 100;
|
const tokenSizePercent = (1 / gridX) * 100;
|
||||||
const aspectRatio = (mapData && mapData.width / mapData.height) || 1;
|
const aspectRatio = (mapData && mapData.width / mapData.height) || 1;
|
||||||
|
|
||||||
const mapImage = (
|
const mapImage = (
|
||||||
|
@ -16,10 +16,10 @@ function AddMapModal({
|
|||||||
onRequestClose,
|
onRequestClose,
|
||||||
onDone,
|
onDone,
|
||||||
onImageUpload,
|
onImageUpload,
|
||||||
rows,
|
gridX,
|
||||||
onRowsChange,
|
onGridXChange,
|
||||||
columns,
|
gridY,
|
||||||
onColumnsChange,
|
onGridYChange,
|
||||||
imageLoaded,
|
imageLoaded,
|
||||||
mapSource,
|
mapSource,
|
||||||
}) {
|
}) {
|
||||||
@ -95,21 +95,21 @@ function AddMapModal({
|
|||||||
/>
|
/>
|
||||||
<Flex>
|
<Flex>
|
||||||
<Box mb={2} mr={1} sx={{ flexGrow: 1 }}>
|
<Box mb={2} mr={1} sx={{ flexGrow: 1 }}>
|
||||||
<Label htmlFor="rows">Rows</Label>
|
<Label htmlFor="gridX">Columns</Label>
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
name="rows"
|
name="gridX"
|
||||||
value={rows}
|
value={gridX}
|
||||||
onChange={(e) => onRowsChange(e.target.value)}
|
onChange={(e) => onGridXChange(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<Box mb={2} ml={1} sx={{ flexGrow: 1 }}>
|
<Box mb={2} ml={1} sx={{ flexGrow: 1 }}>
|
||||||
<Label htmlFor="columns">Columns</Label>
|
<Label htmlFor="gridY">Rows</Label>
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
name="columns"
|
name="gridY"
|
||||||
value={columns}
|
value={gridY}
|
||||||
onChange={(e) => onColumnsChange(e.target.value)}
|
onChange={(e) => onGridYChange(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
Loading…
Reference in New Issue
Block a user