Added map settings change cache to improve editing performance
This commit is contained in:
parent
f301a58c12
commit
67356255b9
@ -58,20 +58,23 @@ function MapTiles({
|
||||
>
|
||||
<AddIcon large />
|
||||
</Flex>
|
||||
{maps.map((map) => (
|
||||
{maps.map((map) => {
|
||||
const isSelected = selectedMap && map.id === selectedMap.id;
|
||||
return (
|
||||
<MapTile
|
||||
key={map.id}
|
||||
// TODO: Move to selected map here and fix url error
|
||||
// when done is clicked
|
||||
map={map}
|
||||
mapState={
|
||||
selectedMap && map.id === selectedMap.id && selectedMapState
|
||||
}
|
||||
isSelected={selectedMap && map.id === selectedMap.id}
|
||||
mapState={isSelected && selectedMapState}
|
||||
isSelected={isSelected}
|
||||
onMapSelect={onMapSelect}
|
||||
onMapRemove={onMapRemove}
|
||||
onMapReset={onMapReset}
|
||||
onDone={onDone}
|
||||
/>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</SimpleBar>
|
||||
{databaseStatus === "disabled" && (
|
||||
|
@ -19,12 +19,9 @@ function SelectMapButton({
|
||||
currentMapState && updateMapState(currentMapState.mapId, currentMapState);
|
||||
setIsModalOpen(true);
|
||||
}
|
||||
function closeModal() {
|
||||
setIsModalOpen(false);
|
||||
}
|
||||
|
||||
function handleDone() {
|
||||
closeModal();
|
||||
setIsModalOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -38,7 +35,6 @@ function SelectMapButton({
|
||||
</IconButton>
|
||||
<SelectMapModal
|
||||
isOpen={isModalOpen}
|
||||
onRequestClose={closeModal}
|
||||
onDone={handleDone}
|
||||
onMapChange={onMapChange}
|
||||
onMapStateChange={onMapStateChange}
|
||||
|
@ -12,6 +12,8 @@ import blobToBuffer from "../helpers/blobToBuffer";
|
||||
import MapDataContext from "../contexts/MapDataContext";
|
||||
import AuthContext from "../contexts/AuthContext";
|
||||
|
||||
import { isEmpty } from "../helpers/shared";
|
||||
|
||||
const defaultMapSize = 22;
|
||||
const defaultMapProps = {
|
||||
// Grid type
|
||||
@ -22,7 +24,6 @@ const defaultMapProps = {
|
||||
|
||||
function SelectMapModal({
|
||||
isOpen,
|
||||
onRequestClose,
|
||||
onDone,
|
||||
onMapChange,
|
||||
onMapStateChange,
|
||||
@ -147,7 +148,8 @@ function SelectMapModal({
|
||||
}
|
||||
}
|
||||
|
||||
function handleMapSelect(map) {
|
||||
async function handleMapSelect(map) {
|
||||
await applyMapChanges();
|
||||
setSelectedMapId(map.id);
|
||||
}
|
||||
|
||||
@ -161,8 +163,8 @@ function SelectMapModal({
|
||||
|
||||
async function handleDone() {
|
||||
if (selectedMapId) {
|
||||
onMapChange(selectedMap, selectedMapState);
|
||||
onDone();
|
||||
await applyMapChanges();
|
||||
onMapChange(selectedMapWithChanges, selectedMapStateWithChanges);
|
||||
}
|
||||
onDone();
|
||||
}
|
||||
@ -171,17 +173,43 @@ function SelectMapModal({
|
||||
* Map settings
|
||||
*/
|
||||
const [showMoreSettings, setShowMoreSettings] = useState(false);
|
||||
// Local cache of map setting changes
|
||||
// Applied when done is clicked or map selection is changed
|
||||
const [mapSettingChanges, setMapSettingChanges] = useState({});
|
||||
const [mapStateSettingChanges, setMapStateSettingChanges] = useState({});
|
||||
|
||||
async function handleMapSettingsChange(key, value) {
|
||||
await updateMap(selectedMapId, { [key]: value });
|
||||
setMapSettingChanges((prevChanges) => ({ ...prevChanges, [key]: value }));
|
||||
}
|
||||
|
||||
async function handleMapStateSettingsChange(key, value) {
|
||||
await updateMapState(selectedMapId, { [key]: value });
|
||||
setMapStateSettingChanges((prevChanges) => ({
|
||||
...prevChanges,
|
||||
[key]: value,
|
||||
}));
|
||||
}
|
||||
|
||||
async function applyMapChanges() {
|
||||
if (
|
||||
selectedMapId &&
|
||||
(!isEmpty(mapSettingChanges) || !isEmpty(mapStateSettingChanges))
|
||||
) {
|
||||
await updateMap(selectedMapId, mapSettingChanges);
|
||||
await updateMapState(selectedMapId, mapStateSettingChanges);
|
||||
|
||||
setMapSettingChanges({});
|
||||
setMapStateSettingChanges({});
|
||||
}
|
||||
}
|
||||
|
||||
const selectedMapWithChanges = { ...selectedMap, ...mapSettingChanges };
|
||||
const selectedMapStateWithChanges = {
|
||||
...selectedMapState,
|
||||
...mapStateSettingChanges,
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onRequestClose={onRequestClose}>
|
||||
<Modal isOpen={isOpen} onRequestClose={handleDone}>
|
||||
<ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
|
||||
<input
|
||||
onChange={(event) => handleImagesUpload(event.target.files)}
|
||||
@ -203,15 +231,15 @@ function SelectMapModal({
|
||||
maps={ownedMaps}
|
||||
onMapAdd={openImageDialog}
|
||||
onMapRemove={handleMapRemove}
|
||||
selectedMap={selectedMap}
|
||||
selectedMapState={selectedMapState}
|
||||
selectedMap={selectedMapWithChanges}
|
||||
selectedMapState={selectedMapStateWithChanges}
|
||||
onMapSelect={handleMapSelect}
|
||||
onMapReset={handleMapReset}
|
||||
onDone={handleDone}
|
||||
/>
|
||||
<MapSettings
|
||||
map={selectedMap}
|
||||
mapState={selectedMapState}
|
||||
map={selectedMapWithChanges}
|
||||
mapState={selectedMapStateWithChanges}
|
||||
onSettingsChange={handleMapSettingsChange}
|
||||
onStateSettingsChange={handleMapStateSettingsChange}
|
||||
showMore={showMoreSettings}
|
||||
|
Loading…
Reference in New Issue
Block a user