forked from MapComplete/MapComplete
128 lines
4 KiB
TypeScript
128 lines
4 KiB
TypeScript
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<string>
|
|
private readonly state: {
|
|
selectedElement: UIEventSource<any>
|
|
allElements: ElementStorage
|
|
locationControl: UIEventSource<Loc>
|
|
layoutToUse: LayoutConfig
|
|
}
|
|
|
|
constructor(
|
|
hash: UIEventSource<string>,
|
|
state: {
|
|
selectedElement: UIEventSource<any>
|
|
allElements: ElementStorage
|
|
featurePipeline: FeaturePipeline
|
|
locationControl: UIEventSource<Loc>
|
|
layoutToUse: LayoutConfig
|
|
}
|
|
) {
|
|
this.hash = hash
|
|
this.state = state
|
|
|
|
// If the hash changes, set the selected element correctly
|
|
|
|
const self = this
|
|
hash.addCallback(() => 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 currentlySelected = state.selectedElement.data
|
|
if (currentlySelected === undefined) {
|
|
state.selectedElement.setData(feature)
|
|
return
|
|
}
|
|
if (currentlySelected.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()
|
|
}
|
|
}
|