Fix map size label in map settings
This commit is contained in:
parent
71edf5c5c5
commit
acbb00dc5b
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
|
||||
|
||||
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
|
||||
@ -6,6 +6,9 @@ import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
|
||||
import { isEmpty } from "../../helpers/shared";
|
||||
import { getGridUpdatedInset } from "../../helpers/grid";
|
||||
|
||||
import { useDataURL } from "../../contexts/AssetsContext";
|
||||
import { mapSources as defaultMapSources } from "../../maps";
|
||||
|
||||
import Divider from "../Divider";
|
||||
import Select from "../Select";
|
||||
|
||||
@ -116,16 +119,22 @@ function MapSettings({
|
||||
onSettingsChange("grid", grid);
|
||||
}
|
||||
|
||||
function getMapSize() {
|
||||
let size = 0;
|
||||
if (map.quality === "original") {
|
||||
size = map.file.length;
|
||||
} else {
|
||||
size = map.resolutions[map.quality].file.length;
|
||||
const mapURL = useDataURL(map, defaultMapSources);
|
||||
const [mapSize, setMapSize] = useState(0);
|
||||
useEffect(() => {
|
||||
async function updateMapSize() {
|
||||
if (mapURL) {
|
||||
const response = await fetch(mapURL);
|
||||
const blob = await response.blob();
|
||||
let size = blob.size;
|
||||
size /= 1000000; // Bytes to Megabytes
|
||||
setMapSize(size.toFixed(2));
|
||||
} else {
|
||||
setMapSize(0);
|
||||
}
|
||||
}
|
||||
size /= 1000000; // Bytes to Megabytes
|
||||
return `${size.toFixed(2)}MB`;
|
||||
}
|
||||
updateMapSize();
|
||||
}, [mapURL]);
|
||||
|
||||
const mapEmpty = !map || isEmpty(map);
|
||||
const mapStateEmpty = !mapState || isEmpty(mapState);
|
||||
@ -269,7 +278,7 @@ function MapSettings({
|
||||
/>
|
||||
</Box>
|
||||
<Label sx={{ width: "50%" }} ml={2}>
|
||||
Size: {getMapSize()}
|
||||
Size: {mapSize > 0 && `${mapSize}MB`}
|
||||
</Label>
|
||||
</Flex>
|
||||
)}
|
||||
|
@ -73,7 +73,7 @@ export function AssetsProvider({ children }) {
|
||||
await database.table("assets").put(asset);
|
||||
}
|
||||
},
|
||||
[database]
|
||||
[database, worker]
|
||||
);
|
||||
|
||||
const value = {
|
||||
|
@ -219,7 +219,7 @@ export function MapDataProvider({ children }) {
|
||||
await updateCache();
|
||||
}
|
||||
},
|
||||
[database, updateCache, userId, worker]
|
||||
[database, updateCache, userId]
|
||||
);
|
||||
|
||||
// Create DB observable to sync creating and deleting
|
||||
|
@ -1,10 +1,9 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { Button, Flex, Label } from "theme-ui";
|
||||
|
||||
import Modal from "../components/Modal";
|
||||
import MapSettings from "../components/map/MapSettings";
|
||||
import MapEditor from "../components/map/MapEditor";
|
||||
import LoadingOverlay from "../components/LoadingOverlay";
|
||||
|
||||
import { useMapData } from "../contexts/MapDataContext";
|
||||
|
||||
@ -13,40 +12,8 @@ import { getGridDefaultInset } from "../helpers/grid";
|
||||
|
||||
import useResponsiveLayout from "../hooks/useResponsiveLayout";
|
||||
|
||||
function EditMapModal({ isOpen, onDone, mapId }) {
|
||||
const {
|
||||
updateMap,
|
||||
updateMapState,
|
||||
getMap,
|
||||
getMapFromDB,
|
||||
getMapStateFromDB,
|
||||
} = useMapData();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [map, setMap] = useState();
|
||||
const [mapState, setMapState] = useState();
|
||||
// Load full map when modal is opened
|
||||
useEffect(() => {
|
||||
async function loadMap() {
|
||||
setIsLoading(true);
|
||||
let loadingMap = getMap(mapId);
|
||||
// Ensure file is loaded for map
|
||||
if (loadingMap?.type === "file" && !loadingMap?.file) {
|
||||
loadingMap = await getMapFromDB(mapId);
|
||||
}
|
||||
const mapState = await getMapStateFromDB(mapId);
|
||||
setMap(loadingMap);
|
||||
setMapState(mapState);
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
if (isOpen && mapId) {
|
||||
loadMap();
|
||||
} else {
|
||||
setMap();
|
||||
setMapState();
|
||||
}
|
||||
}, [isOpen, mapId, getMapFromDB, getMapStateFromDB, getMap]);
|
||||
function EditMapModal({ isOpen, onDone, map, mapState }) {
|
||||
const { updateMap, updateMapState } = useMapData();
|
||||
|
||||
function handleClose() {
|
||||
setMapSettingChanges({});
|
||||
@ -147,23 +114,10 @@ function EditMapModal({ isOpen, onDone, mapId }) {
|
||||
<Label pt={2} pb={1}>
|
||||
Edit map
|
||||
</Label>
|
||||
{isLoading || !map ? (
|
||||
<Flex
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: layout.screenSize === "large" ? "500px" : "300px",
|
||||
position: "relative",
|
||||
}}
|
||||
bg="muted"
|
||||
>
|
||||
<LoadingOverlay />
|
||||
</Flex>
|
||||
) : (
|
||||
<MapEditor
|
||||
map={selectedMapWithChanges}
|
||||
onSettingsChange={handleMapSettingsChange}
|
||||
/>
|
||||
)}
|
||||
<MapEditor
|
||||
map={selectedMapWithChanges}
|
||||
onSettingsChange={handleMapSettingsChange}
|
||||
/>
|
||||
<MapSettings
|
||||
map={selectedMapWithChanges}
|
||||
mapState={selectedMapStateWithChanges}
|
||||
|
@ -516,7 +516,8 @@ function SelectMapModal({
|
||||
<EditMapModal
|
||||
isOpen={isEditModalOpen}
|
||||
onDone={() => setIsEditModalOpen(false)}
|
||||
mapId={selectedMaps.length === 1 && selectedMaps[0].id}
|
||||
map={selectedMaps.length === 1 && selectedMaps[0]}
|
||||
mapState={selectedMapStates.length === 1 && selectedMapStates[0]}
|
||||
/>
|
||||
<EditGroupModal
|
||||
isOpen={isGroupModalOpen}
|
||||
|
Loading…
Reference in New Issue
Block a user