diff --git a/InitUiElements.ts b/InitUiElements.ts index 3c1ce6e85f..d7eeded2a5 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -185,6 +185,9 @@ export class InitUiElements { // Reset the loading message once things are loaded new CenterMessageBox().AttachTo("centermessage"); + // At last, zoom to the needed location if the focus is on an element + + } static LoadLayoutFromHash(userLayoutParam: UIEventSource) { @@ -391,12 +394,18 @@ export class InitUiElements { const updater = new LoadFromOverpass(state.locationControl, state.layoutToUse, state.leafletMap); State.state.layerUpdater = updater; - const source = new FeaturePipeline(state.filteredLayers, updater, state.layoutToUse, state.changes, state.locationControl); + const source = new FeaturePipeline(state.filteredLayers, + updater, + state.osmApiFeatureSource, + state.layoutToUse, + state.changes, + state.locationControl, + state.selectedElement); new ShowDataLayer(source.features, State.state.leafletMap, State.state.layoutToUse); - new SelectedFeatureHandler(Hash.hash, State.state.selectedElement, source); - + const selectedFeatureHandler = new SelectedFeatureHandler(Hash.hash, State.state.selectedElement, source, State.state.osmApiFeatureSource); + selectedFeatureHandler.zoomToSelectedFeature(State.state.locationControl); } diff --git a/Logic/Actors/SelectedFeatureHandler.ts b/Logic/Actors/SelectedFeatureHandler.ts index cacf54a262..e747088117 100644 --- a/Logic/Actors/SelectedFeatureHandler.ts +++ b/Logic/Actors/SelectedFeatureHandler.ts @@ -1,8 +1,12 @@ import {UIEventSource} from "../UIEventSource"; import FeatureSource from "../FeatureSource/FeatureSource"; +import {OsmObject, OsmObjectMeta} from "../Osm/OsmObject"; +import Loc from "../../Models/Loc"; +import FeaturePipeline from "../FeatureSource/FeaturePipeline"; +import OsmApiFeatureSource from "../FeatureSource/OsmApiFeatureSource"; /** - * Makes sure the hash shows the selected element and vice-versa + * Makes sure the hash shows the selected element and vice-versa. */ export default class SelectedFeatureHandler { private readonly _featureSource: FeatureSource; @@ -10,13 +14,16 @@ export default class SelectedFeatureHandler { private readonly _selectedFeature: UIEventSource; private static readonly _no_trigger_on = ["welcome","copyright","layers"] + private readonly _osmApiSource: OsmApiFeatureSource; constructor(hash: UIEventSource, selectedFeature: UIEventSource, - featureSource: FeatureSource) { + featureSource: FeaturePipeline, + osmApiSource: OsmApiFeatureSource) { this._hash = hash; this._selectedFeature = selectedFeature; this._featureSource = featureSource; + this._osmApiSource = osmApiSource; const self = this; hash.addCallback(h => { if (h === undefined || h === "") { @@ -26,6 +33,8 @@ export default class SelectedFeatureHandler { } }) + hash.addCallbackAndRun(h => self.downloadFeature(h)) + featureSource.features.addCallback(_ => self.selectFeature()); selectedFeature.addCallback(feature => { @@ -45,6 +54,32 @@ export default class SelectedFeatureHandler { } + // If a feature is selected via the hash, zoom there + public zoomToSelectedFeature(location: UIEventSource){ + const hash = this._hash.data; + if(hash === undefined || SelectedFeatureHandler._no_trigger_on.indexOf(hash) >= 0){ + return; // No valid feature selected + } + // We should have a valid osm-ID and zoom to it + OsmObject.DownloadObject(hash, (element: OsmObject, meta: OsmObjectMeta) => { + const centerpoint = element.centerpoint(); + console.log("Zooming to location for select point: ", centerpoint) + location.data.lat = centerpoint[0] + location.data.lon = centerpoint[1] + location.ping(); + }) + } + + private downloadFeature(hash: string){ + if(hash === undefined || hash === ""){ + return; + } + if(SelectedFeatureHandler._no_trigger_on.indexOf(hash) >= 0){ + return; + } + this._osmApiSource.load(hash) + } + private selectFeature(){ const features = this._featureSource?.features?.data; if(features === undefined){ diff --git a/Logic/Actors/UpdateTagsFromOsmAPI.ts b/Logic/Actors/UpdateTagsFromOsmAPI.ts deleted file mode 100644 index 660b229401..0000000000 --- a/Logic/Actors/UpdateTagsFromOsmAPI.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {UIEventSource} from "../UIEventSource"; -import {ElementStorage} from "../ElementStorage"; -import {OsmObject, OsmObjectMeta} from "../Osm/OsmObject"; - -export default class UpdateTagsFromOsmAPI { - - - /*** - * This actor downloads the element from the OSM-API and updates the corresponding tags in the UI-updater. - */ - constructor(idToDownload: UIEventSource, allElements: ElementStorage, callback? : (element: OsmObject) => void) { - - idToDownload.addCallbackAndRun(id => { - if (id === undefined) { - return; - } - - OsmObject.DownloadObject(id, (element: OsmObject, meta: OsmObjectMeta) => { - console.debug("Updating tags from the OSM-API: ", element) - - - const tags = element.tags; - tags["_last_edit:contributor"] = meta["_last_edit:contributor"] - tags["_last_edit:contributor:uid"] = meta["_last_edit:contributor:uid"] - tags["_last_edit:changeset"] = meta["_last_edit:changeset"] - tags["_last_edit:timestamp"] = meta["_last_edit:timestamp"].toLocaleString() - tags["_version_number"] = meta._version_number - if (!allElements.has(id)) { - console.warn("Adding element by id") - allElements.addElementById(id, new UIEventSource(tags)) - } else { - // We merge - console.warn("merging by OSM API UPDATE") - allElements.addOrGetById(id, tags) - } - }) - }) - - } - - -} \ No newline at end of file diff --git a/Logic/ElementStorage.ts b/Logic/ElementStorage.ts index 88e4ab1513..8d518e42e0 100644 --- a/Logic/ElementStorage.ts +++ b/Logic/ElementStorage.ts @@ -48,6 +48,7 @@ export class ElementStorage { const keptKeys = es.data; // The element already exists // We use the new feature to overwrite all the properties in the already existing eventsource + console.log("Merging multiple instances of ", elementId) let somethingChanged = false; for (const k in newProperties) { const v = newProperties[k]; diff --git a/Logic/FeatureSource/FeaturePipeline.ts b/Logic/FeatureSource/FeaturePipeline.ts index bae68a8bca..4eb94248a6 100644 --- a/Logic/FeatureSource/FeaturePipeline.ts +++ b/Logic/FeatureSource/FeaturePipeline.ts @@ -18,27 +18,32 @@ export default class FeaturePipeline implements FeatureSource { public features: UIEventSource<{ feature: any; freshness: Date }[]>; - public readonly name = "FeaturePipeline" - + public readonly name = "FeaturePipeline" + constructor(flayers: UIEventSource<{ isDisplayed: UIEventSource, layerDef: LayerConfig }[]>, updater: FeatureSource, + fromOsmApi: FeatureSource, layout: UIEventSource, newPoints: FeatureSource, - locationControl: UIEventSource) { + locationControl: UIEventSource, + selectedElement: UIEventSource) { + + // first we metatag, then we save to get the metatags into storage too + // Note that we need to register before we do metatagging (as it expects the event sources) const amendedOverpassSource = new RememberingSource( new LocalStorageSaver( - new MetaTaggingFeatureSource( // first we metatag, then we save to get the metatags into storage too - new RegisteringFeatureSource( - new FeatureDuplicatorPerLayer(flayers, + new FeatureDuplicatorPerLayer(flayers, + new MetaTaggingFeatureSource( + new RegisteringFeatureSource( updater) )), layout)); const geojsonSources: FeatureSource [] = GeoJsonSource .ConstructMultiSource(flayers.data, locationControl) - .map(geojsonSource => new RegisteringFeatureSource(new FeatureDuplicatorPerLayer(flayers, geojsonSource))); - + .map(geojsonSource => new RegisteringFeatureSource(new FeatureDuplicatorPerLayer(flayers, geojsonSource))); + const amendedLocalStorageSource = new RememberingSource(new RegisteringFeatureSource(new FeatureDuplicatorPerLayer(flayers, new LocalStorageSource(layout)) )); @@ -46,10 +51,16 @@ export default class FeaturePipeline implements FeatureSource { newPoints = new MetaTaggingFeatureSource(new FeatureDuplicatorPerLayer(flayers, new RegisteringFeatureSource(newPoints))); + const amendedOsmApiSource = new RememberingSource( + new FeatureDuplicatorPerLayer(flayers, + new MetaTaggingFeatureSource( + new RegisteringFeatureSource(fromOsmApi)))); + const merged = new FeatureSourceMerger([ amendedOverpassSource, + amendedOsmApiSource, amendedLocalStorageSource, newPoints, ...geojsonSources @@ -60,6 +71,7 @@ export default class FeaturePipeline implements FeatureSource { new FilteringFeatureSource( flayers, locationControl, + selectedElement, merged )); this.features = source.features; diff --git a/Logic/FeatureSource/FilteringFeatureSource.ts b/Logic/FeatureSource/FilteringFeatureSource.ts index 74dcf59c73..b883f271b6 100644 --- a/Logic/FeatureSource/FilteringFeatureSource.ts +++ b/Logic/FeatureSource/FilteringFeatureSource.ts @@ -5,12 +5,14 @@ import Loc from "../../Models/Loc"; export default class FilteringFeatureSource implements FeatureSource { public features: UIEventSource<{ feature: any; freshness: Date }[]> = new UIEventSource<{ feature: any; freshness: Date }[]>([]); -public readonly name = "FilteringFeatureSource" + public readonly name = "FilteringFeatureSource" + constructor(layers: UIEventSource<{ isDisplayed: UIEventSource, layerDef: LayerConfig }[]>, location: UIEventSource, + selectedElement: UIEventSource, upstream: FeatureSource) { const self = this; @@ -18,7 +20,7 @@ public readonly name = "FilteringFeatureSource" function update() { const layerDict = {}; - if(layers.data.length == 0){ + if (layers.data.length == 0) { throw "No layers defined!" } for (const layer of layers.data) { @@ -32,6 +34,11 @@ public readonly name = "FilteringFeatureSource" const newFeatures = features.filter(f => { const layerId = f.feature._matching_layer_id; + if(selectedElement.data === f.feature){ + // This is the selected object - it gets a free pass even if zoom is not sufficient + return true; + } + if (layerId !== undefined) { const layer: { isDisplayed: UIEventSource, @@ -41,16 +48,16 @@ public readonly name = "FilteringFeatureSource" missingLayers.add(layerId) return true; } - + const isShown = layer.layerDef.isShown const tags = f.feature.properties; - if(isShown.IsKnown(tags)){ + if (isShown.IsKnown(tags)) { const result = layer.layerDef.isShown.GetRenderValue(f.feature.properties).txt; - if(result !== "yes"){ + if (result !== "yes") { return false; } } - + if (FilteringFeatureSource.showLayer(layer, location)) { return true; } @@ -69,7 +76,7 @@ public readonly name = "FilteringFeatureSource" }); console.log("Filtering layer source: input: ", upstream.features.data?.length, "output:", newFeatures.length) self.features.setData(newFeatures); - if(missingLayers.size > 0){ + if (missingLayers.size > 0) { console.error("Some layers were not found: ", Array.from(missingLayers)) } } @@ -86,7 +93,7 @@ public readonly name = "FilteringFeatureSource" if (l.zoom < layer.layerDef.minzoom) { continue; } - if(l.zoom > layer.layerDef.maxzoom){ + if (l.zoom > layer.layerDef.maxzoom) { continue; } if (!layer.isDisplayed.data) { @@ -98,13 +105,13 @@ public readonly name = "FilteringFeatureSource" }).addCallback(() => { update(); }); - + layers.addCallback(update); - + const registered = new Set>(); layers.addCallbackAndRun(layers => { for (const layer of layers) { - if(registered.has(layer.isDisplayed)){ + if (registered.has(layer.isDisplayed)) { continue; } registered.add(layer.isDisplayed); diff --git a/Logic/FeatureSource/OsmApiFeatureSource.ts b/Logic/FeatureSource/OsmApiFeatureSource.ts new file mode 100644 index 0000000000..909aa1f4df --- /dev/null +++ b/Logic/FeatureSource/OsmApiFeatureSource.ts @@ -0,0 +1,21 @@ +import FeatureSource from "./FeatureSource"; +import {UIEventSource} from "../UIEventSource"; +import {OsmObject} from "../Osm/OsmObject"; + + +export default class OsmApiFeatureSource implements FeatureSource { + public readonly features: UIEventSource<{ feature: any; freshness: Date }[]> = new UIEventSource<{ feature: any; freshness: Date }[]>([]); + public readonly name: string = "OsmApiFeatureSource"; + + + public load(id: string){ + console.log("Updating from OSM API: ", id) + OsmObject.DownloadObject(id, (element, meta) => { + const geojson = element.asGeoJson(); + console.warn(geojson) + geojson.id = geojson.properties.id; + this.features.setData([{feature:geojson, freshness: meta["_last_edit:timestamp"]}]) + }) + } + +} \ No newline at end of file diff --git a/Logic/MetaTagging.ts b/Logic/MetaTagging.ts index 0f1bd71998..ecce20409c 100644 --- a/Logic/MetaTagging.ts +++ b/Logic/MetaTagging.ts @@ -1,9 +1,7 @@ import LayerConfig from "../Customizations/JSON/LayerConfig"; import SimpleMetaTagger from "./SimpleMetaTagger"; import {ExtraFunction} from "./ExtraFunction"; -import State from "../State"; import {Relation} from "./Osm/ExtractRelations"; -import {meta} from "@turf/turf"; interface Params { diff --git a/Logic/Osm/OsmObject.ts b/Logic/Osm/OsmObject.ts index b1f6d2024f..4fe9e5b035 100644 --- a/Logic/Osm/OsmObject.ts +++ b/Logic/Osm/OsmObject.ts @@ -13,6 +13,9 @@ export abstract class OsmObject { protected constructor(type: string, id: number) { this.id = id; this.type = type; + this.tags = { + id: id + } } static DownloadObject(id, continuation: ((element: OsmObject, meta: OsmObjectMeta) => void)) { @@ -20,7 +23,7 @@ export abstract class OsmObject { const type = splitted[0]; const idN = splitted[1]; - const newContinuation = (element: OsmObject, meta :OsmObjectMeta) => { + const newContinuation = (element: OsmObject, meta: OsmObjectMeta) => { console.log("Received: ", element, "with meta", meta); continuation(element, meta); } @@ -59,7 +62,12 @@ export abstract class OsmObject { ); } - abstract SaveExtraData(element); + // The centerpoint of the feature, as [lat, lon] + public abstract centerpoint(): [number, number]; + + public abstract asGeoJson(): any; + + abstract SaveExtraData(element: any, allElements: any[]); /** * Generates the changeset-XML for tags @@ -78,12 +86,21 @@ export abstract class OsmObject { Download(continuation: ((element: OsmObject, meta: OsmObjectMeta) => void)) { const self = this; - $.getJSON("https://www.openstreetmap.org/api/0.6/" + this.type + "/" + this.id, - function (data) { - const element = data.elements[0]; + const full = this.type !== "way" ? "" : "/full"; + const url = "https://www.openstreetmap.org/api/0.6/" + this.type + "/" + this.id + full; + $.getJSON(url, function (data) { + const element = data.elements[data.elements.length - 1]; self.tags = element.tags; + const tgs = self.tags; + tgs["_last_edit:contributor"] = element.user + tgs["_last_edit:contributor:uid"] = element.uid + tgs["_last_edit:changeset"] = element.changeset + tgs["_last_edit:timestamp"] = element.timestamp + tgs["_version_number"] = element.version + tgs["id"] = self.type+"/"+self.id; + self.version = element.version; - self.SaveExtraData(element); + self.SaveExtraData(element, data.elements); continuation(self, { "_last_edit:contributor": element.user, "_last_edit:contributor:uid": element.uid, @@ -135,21 +152,36 @@ export class OsmNode extends OsmObject { ChangesetXML(changesetId: string): string { let tags = this.TagsXML(); - let change = - ' \n' + + return ' \n' + tags + ' \n'; - - return change; } SaveExtraData(element) { this.lat = element.lat; this.lon = element.lon; } + + centerpoint(): [number, number] { + return [this.lat, this.lon]; + } + + asGeoJson() { + return { + "type": "Feature", + "properties": this.tags, + "geometry": { + "type": "Point", + "coordinates": [ + this.lon, + this.lat + ] + } + } + } } -export interface OsmObjectMeta{ +export interface OsmObjectMeta { "_last_edit:contributor": string, "_last_edit:contributor:uid": number, "_last_edit:changeset": number, @@ -161,12 +193,19 @@ export interface OsmObjectMeta{ export class OsmWay extends OsmObject { nodes: number[]; + coordinates: [number, number][] = [] + lat: number; + lon: number; constructor(id) { super("way", id); } + centerpoint(): [number, number] { + return [this.lat, this.lon]; + } + ChangesetXML(changesetId: string): string { let tags = this.TagsXML(); let nds = ""; @@ -174,18 +213,40 @@ export class OsmWay extends OsmObject { nds += ' \n'; } - let change = - ' \n' + + return ' \n' + nds + tags + ' \n'; - - return change; } - SaveExtraData(element) { + SaveExtraData(element, allNodes) { + console.log("Way-extras: ", allNodes) + + + for (const node of allNodes) { + if (node.type === "node") { + const n = new OsmNode(node.id); + n.SaveExtraData(node) + const cp = n.centerpoint(); + this.coordinates.push(cp); + } + } + let count = this.coordinates.length; + this.lat = this.coordinates.map(c => c[0]).reduce((a, b) => a + b, 0) / count; + this.lon = this.coordinates.map(c => c[1]).reduce((a, b) => a + b, 0) / count; this.nodes = element.nodes; } + + asGeoJson() { + return { + "type": "Feature", + "properties": this.tags, + "geometry": { + "type": "LineString", + "coordinates": this.coordinates.map(c => [c[1], c[0]]) + } + } + } } export class OsmRelation extends OsmObject { @@ -197,24 +258,29 @@ export class OsmRelation extends OsmObject { } + centerpoint(): [number, number] { + return [0, 0]; // TODO + } + ChangesetXML(changesetId: string): string { let members = ""; - for (const memberI in this.members) { - const member = this.members[memberI]; + for (const member of this.members) { members += ' \n'; } let tags = this.TagsXML(); - let change = - ' \n' + + return ' \n' + members + tags + ' \n'; - return change; } SaveExtraData(element) { this.members = element.members; } + + asGeoJson() { + throw "Not Implemented" + } } \ No newline at end of file diff --git a/Logic/SimpleMetaTagger.ts b/Logic/SimpleMetaTagger.ts index f807689bff..c1f942550d 100644 --- a/Logic/SimpleMetaTagger.ts +++ b/Logic/SimpleMetaTagger.ts @@ -7,7 +7,6 @@ import {Utils} from "../Utils"; import opening_hours from "opening_hours"; import {UIElement} from "../UI/UIElement"; import Combine from "../UI/Base/Combine"; -import UpdateTagsFromOsmAPI from "./Actors/UpdateTagsFromOsmAPI"; const cardinalDirections = { diff --git a/Models/Constants.ts b/Models/Constants.ts index 0234c1270a..85a3f16cfa 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -2,7 +2,7 @@ import { Utils } from "../Utils"; export default class Constants { - public static vNumber = "0.7.0c"; + public static vNumber = "0.7.1"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/State.ts b/State.ts index 9da68bd13d..79437b0edf 100644 --- a/State.ts +++ b/State.ts @@ -18,7 +18,7 @@ import LayerConfig from "./Customizations/JSON/LayerConfig"; import TitleHandler from "./Logic/Actors/TitleHandler"; import PendingChangesUploader from "./Logic/Actors/PendingChangesUploader"; import {Relation} from "./Logic/Osm/ExtractRelations"; -import UpdateTagsFromOsmAPI from "./Logic/Actors/UpdateTagsFromOsmAPI"; +import OsmApiFeatureSource from "./Logic/FeatureSource/OsmApiFeatureSource"; /** * Contains the global state: a bunch of UI-event sources @@ -58,6 +58,8 @@ export default class State { public favouriteLayers: UIEventSource; public layerUpdater: UpdateFromOverpass; + + public osmApiFeatureSource : OsmApiFeatureSource = new OsmApiFeatureSource(); public filteredLayers: UIEventSource<{ @@ -253,8 +255,6 @@ export default class State { new TitleHandler(this.layoutToUse, this.selectedElement, this.allElements); - new UpdateTagsFromOsmAPI(this.selectedElement.map(el => el?.properties?.id), this.allElements) - } private static asFloat(source: UIEventSource): UIEventSource { diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index e5b0361720..a19f20f0e3 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/UI/BigComponents/MoreScreen.ts @@ -1,4 +1,3 @@ -import {VerticalCombine} from "../Base/VerticalCombine"; import {UIElement} from "../UIElement"; import {VariableUiElement} from "../Base/VariableUIElement"; import LayoutConfig from "../../Customizations/JSON/LayoutConfig"; @@ -53,15 +52,17 @@ export default class MoreScreen extends UIElement { if(path === ""){ path = "." } + + const params = `z=${currentLocation.zoom ?? 1}&lat=${currentLocation.lat ?? 0}&lon=${currentLocation.lon ?? 0}` let linkText = - `${path}/${layout.id.toLowerCase()}?z=${currentLocation.zoom}&lat=${currentLocation.lat}&lon=${currentLocation.lon}` + `${path}/${layout.id.toLowerCase()}?${params}` if (location.hostname === "localhost" || location.hostname === "127.0.0.1") { - linkText = `${path}/index.html?layout=${layout.id}&z=${currentLocation.zoom}&lat=${currentLocation.lat}&lon=${currentLocation.lon}` + linkText = `${path}/index.html?layout=${layout.id}&${params}` } if (customThemeDefinition) { - linkText = `${path}/?userlayout=${layout.id}&z=${currentLocation.zoom}&lat=${currentLocation.lat}&lon=${currentLocation.lon}#${customThemeDefinition}` + linkText = `${path}/?userlayout=${layout.id}&${params}#${customThemeDefinition}` }