contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Search: close dialog when appropriate, move special layer logic to themeViewState

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-12 16:14:57 +02:00
parent 902a479e3b
commit 05e5a63a12
11 changed files with 165 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/Logic/Osm/OsmPreferences.ts
View file

@ -70,7 +70,11 @@ export class OsmPreferences {
this.setPreferencesAll(key, initialValue)
}
pref.addCallback(v => {
length.set(Math.ceil(v.length / maxLength))
if(v === null || v === undefined || v === ""){
length.set(null)
return
}
length.set(Math.ceil((v?.length ?? 1) / maxLength))
let i = 0
while (v.length > 0) {
this.UploadPreference(key + "-" + i, v.substring(0, maxLength))
@ -97,6 +101,7 @@ export class OsmPreferences {
}
}
/**
* OSM preferences can be at most 255 chars.
* This method chains multiple together.

6
src/Logic/Search/FilterSearch.ts
View file

@ -4,6 +4,8 @@ import Locale from "../../UI/i18n/Locale"
import Constants from "../../Models/Constants"
import FilterConfig, { FilterConfigOption } from "../../Models/ThemeConfig/FilterConfig"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import LayerState from "../State/LayerState"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
export type FilterSearchResult = { option: FilterConfigOption, filter: FilterConfig, layer: LayerConfig, index: number }
@ -12,9 +14,9 @@ export type FilterSearchResult = { option: FilterConfigOption, filter: FilterCon
* Searches matching filters
*/
export default class FilterSearch {
private readonly _state: SpecialVisualizationState
private readonly _state: {layerState: LayerState, layout: LayoutConfig}
constructor(state: SpecialVisualizationState) {
constructor(state: {layerState: LayerState, layout: LayoutConfig}) {
this._state = state
}

12
src/Logic/Search/LayerSearch.ts
View file

@ -1,16 +1,16 @@
import { SpecialVisualizationState } from "../../UI/SpecialVisualization"
import Constants from "../../Models/Constants"
import SearchUtils from "./SearchUtils"
import ThemeSearch from "./ThemeSearch"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
export default class LayerSearch {
private readonly _state: SpecialVisualizationState
private readonly _layout: LayoutConfig
private readonly _layerWhitelist : Set<string>
constructor(state: SpecialVisualizationState) {
this._state = state
this._layerWhitelist = new Set(state.layout.layers.map(l => l.id).filter(id => Constants.added_by_default.indexOf(<any> id) < 0))
constructor(layout: LayoutConfig) {
this._layout = layout
this._layerWhitelist = new Set(layout.layers.map(l => l.id).filter(id => Constants.added_by_default.indexOf(<any> id) < 0))
}
static scoreLayers(query: string, layerWhitelist?: Set<string>): Record<string, number> {
@ -35,7 +35,7 @@ export default class LayerSearch {
const asList:({layer: LayerConfig, score:number})[] = []
for (const layer in scores) {
asList.push({
layer: this._state.layout.getLayer(layer),
layer: this._layout.getLayer(layer),
score: scores[layer]
})
}

14
src/Logic/Search/ThemeSearch.ts
View file

@ -1,5 +1,4 @@
import { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
import { SpecialVisualizationState } from "../../UI/SpecialVisualization"
import LayoutConfig, { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
import { Store } from "../UIEventSource"
import UserRelatedState from "../State/UserRelatedState"
import { Utils } from "../../Utils"
@ -7,6 +6,7 @@ import Locale from "../../UI/i18n/Locale"
import themeOverview from "../../assets/generated/theme_overview.json"
import LayerSearch from "./LayerSearch"
import SearchUtils from "./SearchUtils"
import { OsmConnection } from "../Osm/OsmConnection"
type ThemeSearchScore = {
@ -22,7 +22,7 @@ export default class ThemeSearch {
public static readonly officialThemes: {
themes: MinimalLayoutInformation[],
layers: Record<string, Record<string, string[]>>
} = themeOverview
} = <any> themeOverview
public static readonly officialThemesById: Map<string, MinimalLayoutInformation> = new Map<string, MinimalLayoutInformation>()
static {
for (const th of ThemeSearch.officialThemes.themes ?? []) {
@ -31,15 +31,13 @@ export default class ThemeSearch {
}
private readonly _state: SpecialVisualizationState
private readonly _knownHiddenThemes: Store<Set<string>>
private readonly _layersToIgnore: string[]
private readonly _otherThemes: MinimalLayoutInformation[]
constructor(state: SpecialVisualizationState) {
this._state = state
constructor(state: {osmConnection: OsmConnection, layout: LayoutConfig}) {
this._layersToIgnore = state.layout.layers.map(l => l.id)
this._knownHiddenThemes = UserRelatedState.initDiscoveredHiddenThemes(this._state.osmConnection).map(list => new Set(list))
this._knownHiddenThemes = UserRelatedState.initDiscoveredHiddenThemes(state.osmConnection).map(list => new Set(list))
this._otherThemes = ThemeSearch.officialThemes.themes
.filter(th => th.id !== state.layout.id)
}
@ -144,7 +142,7 @@ export default class ThemeSearch {
return scored
}
public static sortedByLowest(search: string, themes: MinimalLayoutInformation[], ignoreLayers: string[] = [], maxDiff: number): MinimalLayoutInformation[] {
public static sortedByLowest(search: string, themes: MinimalLayoutInformation[], ignoreLayers: string[] = []): MinimalLayoutInformation[] {
return this.sortedByLowestScores(search, themes, ignoreLayers)
.map(th => th.theme)
}

35
src/Logic/State/SearchState.ts
View file

@ -1,4 +1,4 @@
import GeocodingProvider, { GeocodingUtils, type SearchResult } from "../Search/GeocodingProvider"
import GeocodingProvider, { type SearchResult } from "../Search/GeocodingProvider"
import { ImmutableStore, Store, Stores, UIEventSource } from "../UIEventSource"
import CombinedSearcher from "../Search/CombinedSearcher"
import FilterSearch, { FilterSearchResult } from "../Search/FilterSearch"
@ -11,9 +11,10 @@ import ThemeViewState from "../../Models/ThemeViewState"
import type { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
import { Translation } from "../../UI/i18n/Translation"
import GeocodingFeatureSource from "../Search/GeocodingFeatureSource"
import ShowDataLayer from "../../UI/Map/ShowDataLayer"
import LayerSearch from "../Search/LayerSearch"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { FeatureSource } from "../FeatureSource/FeatureSource"
import { Feature } from "geojson"
export default class SearchState {
@ -29,6 +30,7 @@ export default class SearchState {
private readonly state: ThemeViewState
public readonly showSearchDrawer: UIEventSource<boolean>
public readonly suggestionsSearchRunning: Store<boolean>
public readonly locationResults: FeatureSource
constructor(state: ThemeViewState) {
this.state = state
@ -62,7 +64,7 @@ export default class SearchState {
const themeSearch = new ThemeSearch(state)
this.themeSuggestions = this.searchTerm.mapD(query => themeSearch.search(query, 3))
const layerSearch = new LayerSearch(state)
const layerSearch = new LayerSearch(state.layout)
this.layerSuggestions = this.searchTerm.mapD(query => layerSearch.search(query, 5))
const filterSearch = new FilterSearch(state)
@ -77,17 +79,7 @@ export default class SearchState {
return !foundMatch
})
}, [state.layerState.activeFilters])
const geocodedFeatures = new GeocodingFeatureSource(this.suggestions.stabilized(250))
state.featureProperties.trackFeatureSource(geocodedFeatures)
new ShowDataLayer(
state.map,
{
layer: GeocodingUtils.searchLayer,
features: geocodedFeatures,
selectedElement: state.selectedElement,
},
)
this.locationResults =new GeocodingFeatureSource(this.suggestions.stabilized(250))
this.showSearchDrawer = new UIEventSource(false)
@ -131,4 +123,19 @@ export default class SearchState {
}
}
closeIfFullscreen() {
if(window.innerWidth < 640){
this.showSearchDrawer.set(false)
}
}
clickedOnMap(feature: Feature) {
const osmid = feature.properties.osm_id
const localElement = this.state.indexedFeatures.featuresById.data.get(osmid)
if(localElement){
this.state.selectedElement.set(localElement)
return
}
console.log(">>>",feature)
}
}

2
src/Models/Constants.ts
View file

@ -26,6 +26,7 @@ export default class Constants {
"last_click",
"favourite",
"summary",
"search"
] as const
/**
* Special layers which are not included in a theme by default
@ -39,7 +40,6 @@ export default class Constants {
"usersettings",
"icons",
"filters",
"search"
] as const
/**
* Layer IDs of layers which have special properties through built-in hooks

106
src/Models/ThemeViewState.ts
View file

@ -58,7 +58,7 @@ import { GeolocationControlState } from "../UI/BigComponents/GeolocationControl"
import Zoomcontrol from "../UI/Zoomcontrol"
import {
SummaryTileSource,
SummaryTileSourceRewriter,
SummaryTileSourceRewriter
} from "../Logic/FeatureSource/TiledFeatureSource/SummaryTileSource"
import summaryLayer from "../assets/generated/layers/summary.json"
import last_click_layerconfig from "../assets/generated/layers/last_click.json"
@ -69,6 +69,7 @@ import { GeoOperations } from "../Logic/GeoOperations"
import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
import { GeocodeResult, GeocodingUtils } from "../Logic/Search/GeocodingProvider"
import SearchState from "../Logic/State/SearchState"
import { ShowDataLayerOptions } from "../UI/Map/ShowDataLayerOptions"
/**
*
@ -175,7 +176,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
"oauth_token",
undefined,
"Used to complete the login"
),
)
})
this.userRelatedState = new UserRelatedState(
this.osmConnection,
@ -254,8 +255,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
bbox.asGeoJson({
zoom: this.mapProperties.zoom.data,
...this.mapProperties.location.data,
id: "current_view_" + currentViewIndex,
}),
id: "current_view_" + currentViewIndex
})
]
})
)
@ -272,7 +273,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
featurePropertiesStore: this.featureProperties,
osmConnection: this.osmConnection,
historicalUserLocations: this.geolocation.historicalUserLocations,
featureSwitches: this.featureSwitches,
featureSwitches: this.featureSwitches
},
layout?.isLeftRightSensitive() ?? false,
(e, extraMsg) => this.reportError(e, extraMsg)
@ -300,7 +301,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
"leftover features, such as",
features[0].properties
)
},
}
}
)
this.perLayer = perLayer.perLayer
@ -356,7 +357,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
{
currentZoom: this.mapProperties.zoom,
layerState: this.layerState,
bounds: this.visualFeedbackViewportBounds,
bounds: this.visualFeedbackViewportBounds
}
)
this.hasDataInView = new NoElementsInViewDetector(this).hasFeatureInView
@ -453,7 +454,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
doShowLayer,
metaTags: this.userRelatedState.preferencesAsTags,
selectedElement: this.selectedElement,
fetchStore: (id) => this.featureProperties.getStore(id),
fetchStore: (id) => this.featureProperties.getStore(id)
})
})
return filteringFeatureSource
@ -480,7 +481,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
doShowLayer: flayerGps.isDisplayed,
layer: flayerGps.layerDef,
metaTags: this.userRelatedState.preferencesAsTags,
selectedElement: this.selectedElement,
selectedElement: this.selectedElement
})
}
@ -554,16 +555,16 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.previewedImage.setData(undefined)
return
}
if(this.selectedElement.data){
if (this.selectedElement.data) {
this.selectedElement.setData(undefined)
return
}
if (this.searchState.showSearchDrawer.data){
if (this.searchState.showSearchDrawer.data) {
this.searchState.showSearchDrawer.set(false)
return
}
if (this.guistate.closeAll()){
return
if (this.guistate.closeAll()) {
return
}
Zoomcontrol.resetzoom()
this.focusOnMap()
@ -573,10 +574,11 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.guistate.pageStates.favourites.set(true)
})
Hotkeys.RegisterHotkey(
{
nomod: " ",
onUp: true,
onUp: true
},
docs.selectItem,
() => {
@ -586,7 +588,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
if (this.guistate.isSomethingOpen() || this.previewedImage.data !== undefined) {
return
}
if(document.activeElement.tagName === "button" || document.activeElement.tagName === "input"){
if (document.activeElement.tagName === "button" || document.activeElement.tagName === "input") {
return
}
this.selectClosestAtCenter(0)
@ -605,7 +607,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
Hotkeys.RegisterHotkey(
{
nomod: "" + i,
onUp: true,
onUp: true
},
doc,
() => this.selectClosestAtCenter(i - 1)
@ -624,7 +626,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
}
Hotkeys.RegisterHotkey(
{
nomod: "b",
nomod: "b"
},
docs.openLayersPanel,
() => {
@ -635,7 +637,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
)
Hotkeys.RegisterHotkey(
{
nomod: "s",
nomod: "s"
},
Translations.t.hotkeyDocumentation.openFilterPanel,
() => {
@ -713,7 +715,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
Hotkeys.RegisterHotkey(
{
shift: "T",
shift: "T"
},
Translations.t.hotkeyDocumentation.translationMode,
() => {
@ -750,7 +752,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.mapProperties.zoom.map((z) => Math.max(Math.floor(z), 0)),
this.mapProperties,
{
isActive: this.mapProperties.zoom.map((z) => z < maxzoom),
isActive: this.mapProperties.zoom.map((z) => z < maxzoom)
}
)
@ -783,6 +785,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
favourite: this.favourites,
summary: this.featureSummary,
last_click: this.lastClickObject,
search: this.searchState.locationResults
}
this.closestFeatures.registerSource(specialLayers.favourite, "favourite")
@ -832,20 +835,28 @@ export default class ThemeViewState implements SpecialVisualizationState {
}
this.featureProperties.trackFeatureSource(features)
new ShowDataLayer(this.map, {
const options: ShowDataLayerOptions & { layer: LayerConfig } = {
features,
doShowLayer: flayer.isDisplayed,
layer: flayer.layerDef,
metaTags: this.userRelatedState.preferencesAsTags,
selectedElement: this.selectedElement,
})
selectedElement: this.selectedElement
}
if (flayer.layerDef.id === "search") {
options.onClick = (feature) => {
this.searchState.clickedOnMap(feature)
}
delete options.selectedElement
}
new ShowDataLayer(this.map, options)
})
const summaryLayerConfig = new LayerConfig(<LayerConfigJson>summaryLayer, "summaryLayer")
new ShowDataLayer(this.map, {
features: specialLayers.summary,
layer: summaryLayerConfig,
// doShowLayer: this.mapProperties.zoom.map((z) => z < maxzoom),
selectedElement: this.selectedElement,
selectedElement: this.selectedElement
})
const lastClickLayerConfig = new LayerConfig(
@ -856,14 +867,14 @@ export default class ThemeViewState implements SpecialVisualizationState {
lastClickLayerConfig.isShown === undefined
? specialLayers.last_click
: specialLayers.last_click.features.mapD((fs) =>
fs.filter((f) => {
const matches = lastClickLayerConfig.isShown.matchesProperties(
f.properties
)
console.debug("LastClick ", f, "matches", matches)
return matches
})
)
fs.filter((f) => {
const matches = lastClickLayerConfig.isShown.matchesProperties(
f.properties
)
console.debug("LastClick ", f, "matches", matches)
return matches
})
)
new ShowDataLayer(this.map, {
features: new StaticFeatureSource(lastClickFiltered),
layer: lastClickLayerConfig,
@ -874,9 +885,9 @@ export default class ThemeViewState implements SpecialVisualizationState {
}
this.map.data.flyTo({
zoom: Constants.minZoomLevelToAddNewPoint,
center: GeoOperations.centerpointCoordinates(feature),
center: GeoOperations.centerpointCoordinates(feature)
})
},
}
})
}
@ -901,15 +912,24 @@ export default class ThemeViewState implements SpecialVisualizationState {
})
})
// Add the selected element to the recently visited history
this.selectedElement.addCallbackD(selected => {
const [osm_type, osm_id] = selected.properties.id.split("/")
const [lon, lat] = GeoOperations.centerpointCoordinates(selected)
const [lon, lat] = GeoOperations.centerpointCoordinates(selected)
const layer = this.layout.getMatchingLayer(selected.properties)
const r = <GeocodeResult> {
const nameOptions = [
selected?.properties?.name,
selected?.properties?.alt_name, selected?.properties?.local_name,
layer?.title.GetRenderValue(selected?.properties ?? {}).txt,
selected.properties.display_name,
selected.properties.id
]
const r = <GeocodeResult>{
feature: selected,
display_name: selected.properties.name ?? selected.properties.alt_name ?? selected.properties.local_name ?? layer.title.GetRenderValue(selected.properties ?? {}).txt ,
display_name: nameOptions.find(opt => opt !== undefined),
osm_id, osm_type,
lon, lat,
lon, lat
}
this.userRelatedState.recentlyVisitedSearch.add(r)
})
@ -937,7 +957,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
/**
* Searches the appropriate layer - will first try if a special layer matches; if not, a normal layer will be used by delegating to the layout
*/
public getMatchingLayer(properties: Record<string, string>){
public getMatchingLayer(properties: Record<string, string>) {
const id = properties.id
@ -961,8 +981,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
return this.layout.getMatchingLayer(properties)
}
public async reportError(message: string | Error | XMLHttpRequest, extramessage:string = "") {
if(Utils.runningFromConsole){
public async reportError(message: string | Error | XMLHttpRequest, extramessage: string = "") {
if (Utils.runningFromConsole) {
console.error("Got (in themeViewSTate.reportError):", message, extramessage)
return
}
@ -1014,8 +1034,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
userid: this.osmConnection.userDetails.data?.uid,
pendingChanges: this.changes.pendingChanges.data,
previousChanges: this.changes.allChanges.data,
changeRewrites: Utils.MapToObj(this.changes._changesetHandler._remappings),
}),
changeRewrites: Utils.MapToObj(this.changes._changesetHandler._remappings)
})
})
} catch (e) {
console.error("Could not upload an error report")

1
src/UI/Search/ActiveFilters.svelte
View file

@ -36,6 +36,7 @@
activeFilter.control.setData(undefined)
}
loading = false
state.searchState.closeIfFullscreen()
})
}
</script>

19
src/UI/Search/FilterResult.svelte
View file

@ -6,21 +6,30 @@
import ToSvelte from "../Base/ToSvelte.svelte"
import type { FilterSearchResult } from "../../Logic/Search/FilterSearch"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import Loading from "../Base/Loading.svelte"
export let entry: FilterSearchResult | LayerConfig
let isLayer = entry instanceof LayerConfig
let asLayer = <LayerConfig> entry
let asFilter = <FilterSearchResult> entry
let asLayer = <LayerConfig>entry
let asFilter = <FilterSearchResult>entry
export let state: SpecialVisualizationState
let dispatch = createEventDispatcher<{ select }>()
let loading = false
function apply() {
loading = true
console.log("Loading is now ", loading)
window.requestAnimationFrame(() => {
state.searchState.apply(entry)
dispatch("select")
loading = false
state.searchState.closeIfFullscreen()
})
}
</script>
<button on:click={() => apply()}>
<button on:click={() => apply()} class:disabled={loading}>
{#if loading}
<Loading />
{/if}
<div class="flex flex-col items-start">
<div class="flex items-center gap-x-1">
{#if isLayer}

2
src/UI/Search/GeocodeResult.svelte
View file

@ -48,7 +48,7 @@
state.selectedElement.set(entry.feature)
}
state.userRelatedState.recentlyVisitedSearch.add(entry)
dispatch("select")
state.searchState.closeIfFullscreen()
}
</script>