import { UIEventSource } from "../UIEventSource" import { OsmObject } from "../Osm/OsmObject" import Loc from "../../Models/Loc" import { ElementStorage } from "../ElementStorage" import FeaturePipeline from "../FeatureSource/FeaturePipeline" import { GeoOperations } from "../GeoOperations" import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig" /** * Makes sure the hash shows the selected element and vice-versa. */ export default class SelectedFeatureHandler { private static readonly _no_trigger_on = new Set([ "welcome", "copyright", "layers", "new", "filters", "location_track", "", undefined, ]) private readonly hash: UIEventSource private readonly state: { selectedElement: UIEventSource allElements: ElementStorage locationControl: UIEventSource layoutToUse: LayoutConfig } constructor( hash: UIEventSource, state: { selectedElement: UIEventSource allElements: ElementStorage featurePipeline: FeaturePipeline locationControl: UIEventSource layoutToUse: LayoutConfig } ) { this.hash = hash this.state = state // If the hash changes, set the selected element correctly const self = this hash.addCallback(() => self.setSelectedElementFromHash()) state.featurePipeline?.newDataLoadedSignal?.addCallbackAndRunD((_) => { // New data was loaded. In initial startup, the hash might be set (via the URL) but might not be selected yet if (hash.data === undefined || SelectedFeatureHandler._no_trigger_on.has(hash.data)) { // This is an invalid hash anyway return } if (state.selectedElement.data !== undefined) { // We already have something selected return } self.setSelectedElementFromHash() }) this.initialLoad() } /** * On startup: check if the hash is loaded and eventually zoom to it * @private */ private initialLoad() { const hash = this.hash.data if (hash === undefined || hash === "" || hash.indexOf("-") >= 0) { return } if (SelectedFeatureHandler._no_trigger_on.has(hash)) { return } if (!(hash.startsWith("node") || hash.startsWith("way") || hash.startsWith("relation"))) { return } OsmObject.DownloadObjectAsync(hash).then((obj) => { try { console.log("Downloaded selected object from OSM-API for initial load: ", hash) const geojson = obj.asGeoJson() this.state.allElements.addOrGetElement(geojson) this.state.selectedElement.setData(geojson) this.zoomToSelectedFeature() } catch (e) { console.error(e) } }) } private setSelectedElementFromHash() { const state = this.state const h = this.hash.data if (h === undefined || h === "") { // Hash has been cleared - we clear the selected element state.selectedElement.setData(undefined) } else { // we search the element to select const feature = state.allElements.ContainingFeatures.get(h) if (feature === undefined) { return } const currentlySeleced = state.selectedElement.data if (currentlySeleced === undefined) { state.selectedElement.setData(feature) return } if (currentlySeleced.properties?.id === feature.properties.id) { // We already have the right feature return } state.selectedElement.setData(feature) } } // If a feature is selected via the hash, zoom there private zoomToSelectedFeature() { const selected = this.state.selectedElement.data if (selected === undefined) { return } const centerpoint = GeoOperations.centerpointCoordinates(selected) const location = this.state.locationControl location.data.lon = centerpoint[0] location.data.lat = centerpoint[1] const minZoom = Math.max( 14, ...(this.state.layoutToUse?.layers?.map((l) => l.minzoomVisible) ?? []) ) if (location.data.zoom < minZoom) { location.data.zoom = minZoom } location.ping() } }