From 20f67fe28f0ef30d40f89eee0e3399fe02153f13 Mon Sep 17 00:00:00 2001 From: Sarah Hoffmann Date: Tue, 26 Aug 2025 15:36:06 +0200 Subject: [PATCH 01/16] do not keep map state when switching between search panes (#293) Restores the behaviour the UI had before switching await from stores. --- src/components/Header.svelte | 4 ++-- src/components/Map.svelte | 21 ++++++++++++--------- src/state/MapState.svelte.js | 15 ++++++++++----- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/Header.svelte b/src/components/Header.svelte index a6eb154..6f92ced 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -94,8 +94,8 @@ {/if} diff --git a/src/components/Map.svelte b/src/components/Map.svelte index e259186..9923d09 100644 --- a/src/components/Map.svelte +++ b/src/components/Map.svelte @@ -37,6 +37,12 @@ ].join(','); } + function setMapState() { + mapState.viewboxStr = mapViewboxAsString(map); + mapState.center = map.getCenter(); + mapState.zoom = map.getZoom(); + } + function createMap(container) { const attribution = Nominatim_Config.Map_Tile_Attribution; @@ -44,8 +50,9 @@ attributionControl: false, scrollWheelZoom: true, // !L.Browser.touch, touchZoom: false, - center: mapState.center, - zoom: mapState.zoom + center: L.latLng(Nominatim_Config.Map_Default_Lat, + Nominatim_Config.Map_Default_Lon), + zoom: Nominatim_Config.Map_Default_Zoom }); if (typeof Nominatim_Config.Map_Default_Bounds !== 'undefined' && Nominatim_Config.Map_Default_Bounds) { @@ -56,7 +63,7 @@ L.control.attribution({ prefix: 'Leaflet' }).addTo(map); } - mapState.viewboxStr = mapViewboxAsString(map); + setMapState(); L.control.scale().addTo(map); @@ -73,12 +80,7 @@ new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map); } - map.on('move', () => { - mapState.center = map.getCenter(); - mapState.zoom = map.getZoom(); - mapState.viewboxStr = mapViewboxAsString(map); - }); - + map.on('move', setMapState); map.on('mousemove', (e) => { mapState.mousePos = e.latlng; }); map.on('click', (e) => { mapState.lastClick = e.latlng; }); } @@ -89,6 +91,7 @@ return { destroy: () => { + mapState.reset(); map.remove(); } }; diff --git a/src/state/MapState.svelte.js b/src/state/MapState.svelte.js index c30dad6..38c0c1d 100644 --- a/src/state/MapState.svelte.js +++ b/src/state/MapState.svelte.js @@ -1,12 +1,17 @@ -import {latLng } from 'leaflet'; - class MapState { - center = $state(latLng(Nominatim_Config.Map_Default_Lat, - Nominatim_Config.Map_Default_Lon)); - zoom = $state(Nominatim_Config.Map_Default_Zoom); + center = $state(); + zoom = $state(); viewboxStr = $state(); lastClick = $state(); mousePos = $state(); + + reset() { + this.center = undefined; + this.zoom = undefined; + this.viewboxStr = ''; + this.lastClick = undefined; + this.mousePos = undefined; + } } export const mapState = new MapState(); -- 2.39.5 From a8b6922455b348434fcffa8529955880e33cf029 Mon Sep 17 00:00:00 2001 From: Sarah Hoffmann Date: Tue, 26 Aug 2025 15:37:02 +0200 Subject: [PATCH 02/16] Convert page stores into global applicaton state (#292) * move page state related properties from store to state Also goes back to using classic URLStateParam as we don't want the param state to be reactive. * convert results_store into simple locale state --- src/App.svelte | 31 ++---- src/components/DetailsLink.svelte | 21 ++-- src/components/Error.svelte | 16 +-- src/components/Header.svelte | 6 +- src/components/LastUpdated.svelte | 32 +++--- src/components/PageLink.svelte | 4 +- src/components/ResultsList.svelte | 39 ++++--- src/components/ReverseLink.svelte | 13 +-- src/components/SearchSectionDetails.svelte | 13 +-- src/components/SearchSectionReverse.svelte | 6 +- src/components/UrlSubmitForm.svelte | 4 +- src/lib/api_utils.js | 62 +---------- src/lib/stores.js | 74 ------------- src/pages/DeletablePage.svelte | 5 +- src/pages/DetailsPage.svelte | 20 ++-- src/pages/PolygonsPage.svelte | 5 +- src/pages/ReversePage.svelte | 29 ++--- src/pages/SearchPage.svelte | 23 ++-- src/pages/StatusPage.svelte | 5 +- src/state/AppState.svelte.js | 121 +++++++++++++++++++++ 20 files changed, 249 insertions(+), 280 deletions(-) delete mode 100644 src/lib/stores.js create mode 100644 src/state/AppState.svelte.js diff --git a/src/App.svelte b/src/App.svelte index fa9ce32..f2729d5 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -2,8 +2,7 @@ import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/js/bootstrap.bundle.js'; - import { onMount } from 'svelte'; - import { page, refresh_page } from './lib/stores.js'; + import { appState } from './state/AppState.svelte.js'; import Footer from './components/Footer.svelte'; import SearchPage from './pages/SearchPage.svelte'; @@ -13,36 +12,24 @@ import DeletablePage from './pages/DeletablePage.svelte'; import StatusPage from './pages/StatusPage.svelte'; import AboutPage from './pages/AboutPage.svelte'; - - let view = $state(); - - onMount(() => { - page.subscribe((pageinfo) => { - if (pageinfo.tab !== view) { - view = pageinfo.tab; - } - }) - }); - - refresh_page(); - refresh_page()} /> + appState.refreshPage()} /> -{#if view === 'search'} +{#if appState.page.tab === 'search'} -{:else if view === 'reverse'} +{:else if appState.page.tab === 'reverse'} -{:else if view === 'details'} +{:else if appState.page.tab === 'details'} -{:else if view === 'deletable'} +{:else if appState.page.tab === 'deletable'} -{:else if view === 'polygons'} +{:else if appState.page.tab === 'polygons'} -{:else if view === 'status'} +{:else if appState.page.tab === 'status'} -{:else if view === 'about'} +{:else if appState.page.tab === 'about'} {/if}