diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js
index c8f3276..02a4c95 100644
--- a/src/components/map/MapSettings.js
+++ b/src/components/map/MapSettings.js
@@ -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({
/>
)}
diff --git a/src/contexts/AssetsContext.js b/src/contexts/AssetsContext.js
index e522a7d..48f456c 100644
--- a/src/contexts/AssetsContext.js
+++ b/src/contexts/AssetsContext.js
@@ -73,7 +73,7 @@ export function AssetsProvider({ children }) {
await database.table("assets").put(asset);
}
},
- [database]
+ [database, worker]
);
const value = {
diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js
index 4f298a9..acff7dc 100644
--- a/src/contexts/MapDataContext.js
+++ b/src/contexts/MapDataContext.js
@@ -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
diff --git a/src/modals/EditMapModal.js b/src/modals/EditMapModal.js
index ad38c8c..dcfc4ed 100644
--- a/src/modals/EditMapModal.js
+++ b/src/modals/EditMapModal.js
@@ -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 }) {
- {isLoading || !map ? (
-
-
-
- ) : (
-
- )}
+
setIsEditModalOpen(false)}
- mapId={selectedMaps.length === 1 && selectedMaps[0].id}
+ map={selectedMaps.length === 1 && selectedMaps[0]}
+ mapState={selectedMapStates.length === 1 && selectedMapStates[0]}
/>