2021-01-27 01:14:16 +01:00
|
|
|
import {UIEventSource} from "../UIEventSource";
|
2021-07-28 00:09:17 +02:00
|
|
|
import {OsmObject} from "../Osm/OsmObject";
|
2021-05-06 01:33:09 +02:00
|
|
|
import Loc from "../../Models/Loc";
|
2021-09-21 03:10:15 +02:00
|
|
|
import {ElementStorage} from "../ElementStorage";
|
2021-09-22 05:02:09 +02:00
|
|
|
import FeaturePipeline from "../FeatureSource/FeaturePipeline";
|
2021-10-20 01:13:55 +02:00
|
|
|
import {GeoOperations} from "../GeoOperations";
|
|
|
|
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
|
2021-01-27 01:14:16 +01:00
|
|
|
|
|
|
|
/**
|
2021-05-06 01:33:09 +02:00
|
|
|
* Makes sure the hash shows the selected element and vice-versa.
|
2021-01-27 01:14:16 +01:00
|
|
|
*/
|
|
|
|
export default class SelectedFeatureHandler {
|
2021-10-23 02:46:37 +02:00
|
|
|
private static readonly _no_trigger_on = new Set(["welcome", "copyright", "layers", "new", "filter","", undefined])
|
2021-10-20 01:13:55 +02:00
|
|
|
private readonly hash: UIEventSource<string>;
|
2021-09-21 03:10:15 +02:00
|
|
|
private readonly state: {
|
2021-10-20 01:13:55 +02:00
|
|
|
selectedElement: UIEventSource<any>,
|
|
|
|
allElements: ElementStorage,
|
|
|
|
locationControl: UIEventSource<Loc>,
|
|
|
|
layoutToUse: LayoutConfig
|
2021-09-21 03:10:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
hash: UIEventSource<string>,
|
|
|
|
state: {
|
|
|
|
selectedElement: UIEventSource<any>,
|
2021-09-22 05:02:09 +02:00
|
|
|
allElements: ElementStorage,
|
2021-10-20 01:13:55 +02:00
|
|
|
featurePipeline: FeaturePipeline,
|
|
|
|
locationControl: UIEventSource<Loc>,
|
|
|
|
layoutToUse: LayoutConfig
|
2021-09-21 03:10:15 +02:00
|
|
|
}
|
|
|
|
) {
|
|
|
|
this.hash = hash;
|
|
|
|
this.state = state
|
2021-09-22 05:02:09 +02:00
|
|
|
|
|
|
|
|
|
|
|
// If the hash changes, set the selected element correctly
|
2021-07-28 00:09:17 +02:00
|
|
|
|
2021-10-20 01:13:55 +02:00
|
|
|
const self = this;
|
|
|
|
hash.addCallback(() => self.setSelectedElementFromHash())
|
2021-01-27 01:14:16 +01:00
|
|
|
|
2021-09-22 05:02:09 +02:00
|
|
|
|
|
|
|
// IF the selected element changes, set the hash correctly
|
2021-09-21 03:10:15 +02:00
|
|
|
state.selectedElement.addCallback(feature => {
|
2021-07-28 00:09:17 +02:00
|
|
|
if (feature === undefined) {
|
2021-10-01 02:57:41 +02:00
|
|
|
if (!SelectedFeatureHandler._no_trigger_on.has(hash.data)) {
|
2021-04-23 18:16:44 +02:00
|
|
|
hash.setData("")
|
|
|
|
}
|
2021-04-06 19:41:41 +02:00
|
|
|
}
|
2021-07-28 00:09:17 +02:00
|
|
|
|
2021-03-13 17:25:44 +01:00
|
|
|
const h = feature?.properties?.id;
|
2021-07-28 00:09:17 +02:00
|
|
|
if (h !== undefined) {
|
2021-03-13 17:25:44 +01:00
|
|
|
hash.setData(h)
|
|
|
|
}
|
2021-01-27 01:14:16 +01:00
|
|
|
})
|
2021-10-20 01:13:55 +02:00
|
|
|
|
|
|
|
state.featurePipeline?.newDataLoadedSignal?.addCallbackAndRunD(_ => {
|
2021-09-22 05:02:09 +02:00
|
|
|
// New data was loaded. In initial startup, the hash might be set (via the URL) but might not be selected yet
|
2021-10-20 01:13:55 +02:00
|
|
|
if (hash.data === undefined || SelectedFeatureHandler._no_trigger_on.has(hash.data)) {
|
2021-09-22 05:02:09 +02:00
|
|
|
// This is an invalid hash anyway
|
|
|
|
return;
|
|
|
|
}
|
2021-10-20 01:13:55 +02:00
|
|
|
if (state.selectedElement.data !== undefined) {
|
2021-09-22 05:02:09 +02:00
|
|
|
// We already have something selected
|
|
|
|
return;
|
|
|
|
}
|
2021-10-20 01:13:55 +02:00
|
|
|
self.setSelectedElementFromHash()
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
this.initialLoad()
|
|
|
|
|
|
|
|
}
|
2021-10-23 02:46:37 +02:00
|
|
|
|
2021-10-20 01:13:55 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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;
|
|
|
|
}
|
|
|
|
|
2021-10-23 02:46:37 +02:00
|
|
|
if (!(hash.startsWith("node") || hash.startsWith("way") || hash.startsWith("relation"))) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-10-20 01:13:55 +02:00
|
|
|
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)
|
|
|
|
}
|
|
|
|
|
2021-09-22 05:02:09 +02:00
|
|
|
})
|
2021-01-27 01:14:16 +01:00
|
|
|
|
|
|
|
}
|
2021-07-28 00:09:17 +02:00
|
|
|
|
2021-10-20 01:13:55 +02:00
|
|
|
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)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-06 01:33:09 +02:00
|
|
|
// If a feature is selected via the hash, zoom there
|
2021-10-20 01:13:55 +02:00
|
|
|
private zoomToSelectedFeature() {
|
2021-10-23 02:46:37 +02:00
|
|
|
|
2021-10-20 01:13:55 +02:00
|
|
|
const selected = this.state.selectedElement.data
|
2021-10-23 02:46:37 +02:00
|
|
|
if (selected === undefined) {
|
2021-10-20 01:13:55 +02:00
|
|
|
return
|
2021-05-06 01:33:09 +02:00
|
|
|
}
|
2021-10-23 02:46:37 +02:00
|
|
|
|
|
|
|
const centerpoint = GeoOperations.centerpointCoordinates(selected)
|
2021-10-20 01:13:55 +02:00
|
|
|
const location = this.state.locationControl;
|
|
|
|
location.data.lon = centerpoint[0]
|
|
|
|
location.data.lat = centerpoint[1]
|
2021-10-23 02:46:37 +02:00
|
|
|
|
2021-10-20 01:13:55 +02:00
|
|
|
const minZoom = Math.max(14, ...(this.state.layoutToUse?.layers?.map(l => l.minzoomVisible) ?? []))
|
2021-10-23 02:46:37 +02:00
|
|
|
if (location.data.zoom < minZoom) {
|
2021-10-20 01:13:55 +02:00
|
|
|
location.data.zoom = minZoom
|
2021-07-18 14:52:09 +02:00
|
|
|
}
|
2021-10-23 02:46:37 +02:00
|
|
|
|
2021-10-20 01:13:55 +02:00
|
|
|
location.ping();
|
2021-10-23 02:46:37 +02:00
|
|
|
|
|
|
|
|
2021-05-06 01:33:09 +02:00
|
|
|
}
|
2021-07-28 00:09:17 +02:00
|
|
|
|
2021-01-27 01:14:16 +01:00
|
|
|
}
|