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

Refactoring: introduction of global state to simplify getting common objects

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-31 01:45:54 +02:00
parent afaaaaadb1
commit 004eead4ee
34 changed files with 532 additions and 506 deletions
Download patch file Download diff file Expand all files Collapse all files

40
Logic/FilteredLayer.ts
View file

@ -9,6 +9,7 @@ import codegrid from "codegrid-js";
import {Changes} from "./Osm/Changes";
import {UserDetails} from "./Osm/OsmConnection";
import {Basemap} from "./Leaflet/Basemap";
import {State} from "../State";
/***
* A filtered layer is a layer which offers a 'set-data' function
@ -25,12 +26,10 @@ export class FilteredLayer {
public readonly filters: TagsFilter;
public readonly isDisplayed: UIEventSource<boolean> = new UIEventSource(true);
public readonly layerDef: LayerDefinition;
private readonly _map: Basemap;
private readonly _maxAllowedOverlap: number;
private readonly _style: (properties) => { color: string, weight?: number, icon: { iconUrl: string, iconSize? : number[], popupAnchor?: number[], iconAnchor?:number[] } };
private readonly _storage: ElementStorage;
/** The featurecollection from overpass
*/
@ -43,22 +42,17 @@ export class FilteredLayer {
* The leaflet layer object which should be removed on rerendering
*/
private _geolayer;
private _selectedElement: UIEventSource<{ feature: any }>;
private _showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement;
private static readonly grid = codegrid.CodeGrid();
constructor(
layerDef: LayerDefinition,
map: Basemap, storage: ElementStorage,
changes: Changes,
selectedElement: UIEventSource<any>,
showOnPopup: ((tags: UIEventSource<any>, feature: any) => UIElement)
) {
this.layerDef = layerDef;
this._wayHandling = layerDef.wayHandling;
this._selectedElement = selectedElement;
this._showOnPopup = showOnPopup;
this._style = layerDef.style;
if (this._style === undefined) {
@ -67,33 +61,27 @@ export class FilteredLayer {
}
}
this.name = name;
this._map = map;
this.filters = layerDef.overpassFilter;
this._storage = storage;
this._maxAllowedOverlap = layerDef.maxAllowedOverlapPercentage;
const self = this;
this.isDisplayed.addCallback(function (isDisplayed) {
const map = State.state.bm.map;
if (self._geolayer !== undefined && self._geolayer !== null) {
if (isDisplayed) {
self._geolayer.addTo(self._map.map);
self._geolayer.addTo(map);
} else {
self._map.map.removeLayer(self._geolayer);
map.removeLayer(self._geolayer);
}
}
})
}
static fromDefinition(
definition,
basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
selectedElement: UIEventSource<{feature: any}>,
definition,
showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
FilteredLayer {
return new FilteredLayer(
definition,
basemap, allElements, changes,
selectedElement,
showOnPopup);
definition, showOnPopup);
}
@ -170,7 +158,7 @@ export class FilteredLayer {
let self = this;
if (this._geolayer !== undefined && this._geolayer !== null) {
this._map.map.removeLayer(this._geolayer);
State.state.bm.map.removeLayer(this._geolayer);
}
this._dataFromOverpass = data;
const fusedFeatures = [];
@ -227,7 +215,7 @@ export class FilteredLayer {
icon: new L.icon(style.icon),
});
}
let eventSource = self._storage.addOrGetElement(feature);
let eventSource = State.state.allElements.addOrGetElement(feature);
const uiElement = self._showOnPopup(eventSource, feature);
const popup = L.popup({}, marker).setContent(uiElement.Render());
marker.bindPopup(popup)
@ -246,7 +234,7 @@ export class FilteredLayer {
} else {
self._geolayer.setStyle(function (feature) {
const style = self._style(feature.properties);
if (self._selectedElement.data?.feature === feature) {
if (State.state.selectedElement.data?.feature === feature) {
if (style.weight !== undefined) {
style.weight = style.weight * 2;
}else{
@ -258,14 +246,14 @@ export class FilteredLayer {
}
}
let eventSource = self._storage.addOrGetElement(feature);
let eventSource = State.state.allElements.addOrGetElement(feature);
eventSource.addCallback(feature.updateStyle);
layer.on("click", function (e) {
const previousFeature = self._selectedElement.data?.feature;
self._selectedElement.setData({feature: feature});
const previousFeature =State.state.selectedElement.data?.feature;
State.state.selectedElement.setData({feature: feature});
feature.updateStyle();
previousFeature?.updateStyle();
@ -281,7 +269,7 @@ export class FilteredLayer {
})
.setContent(uiElement.Render())
.setLatLng(e.latlng)
.openOn(self._map.map);
.openOn(State.state.bm.map);
uiElement.Update();
uiElement.Activate();
L.DomEvent.stop(e); // Marks the event as consumed
@ -290,7 +278,7 @@ export class FilteredLayer {
});
if (this.isDisplayed.data) {
this._geolayer.addTo(this._map.map);
this._geolayer.addTo(State.state.bm.map);
}
}

8
Logic/ImageSearcher.ts
View file

@ -5,6 +5,7 @@ import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
import {UIElement} from "../UI/UIElement";
import {Changes} from "./Osm/Changes";
import {ImgurImage} from "../UI/Image/ImgurImage";
import {State} from "../State";
/**
* There are multiple way to fetch images for an object
@ -27,16 +28,13 @@ export class ImageSearcher extends UIEventSource<string[]> {
private readonly _wdItem = new UIEventSource<string>("");
private readonly _commons = new UIEventSource<string>("");
private _activated: boolean = false;
private _changes: Changes;
public _deletedImages = new UIEventSource<string[]>([]);
constructor(tags: UIEventSource<any>,
changes: Changes) {
constructor(tags: UIEventSource<any>) {
super([]);
this._tags = tags;
this._changes = changes;
const self = this;
this._wdItem.addCallback(() => {
@ -119,7 +117,7 @@ export class ImageSearcher extends UIEventSource<string[]> {
return;
}
console.log("Deleting image...", key, " --> ", url);
this._changes.addChange(this._tags.data.id, key, "");
State.state.changes.addChange(this._tags.data.id, key, "");
this._deletedImages.data.push(url);
this._deletedImages.ping();
}

18
Logic/LayerUpdater.ts
View file

@ -4,9 +4,9 @@ import {FilteredLayer} from "./FilteredLayer";
import {Bounds} from "./Bounds";
import {Overpass} from "./Osm/Overpass";
import {Basemap} from "./Leaflet/Basemap";
import {State} from "../State";
export class LayerUpdater {
private _map: Basemap;
private _layers: FilteredLayer[];
private widenFactor: number;
@ -26,12 +26,10 @@ export class LayerUpdater {
* @param minzoom
* @param layers
*/
constructor(map: Basemap,
minzoom: number,
constructor(minzoom: number,
widenFactor: number,
layers: FilteredLayer[]) {
this.widenFactor = widenFactor;
this._map = map;
this._layers = layers;
this._minzoom = minzoom;
var filters: TagsFilter[] = [];
@ -41,7 +39,7 @@ export class LayerUpdater {
this._overpass = new Overpass(new Or(filters));
const self = this;
map.Location.addCallback(function () {
State.state.locationControl.addCallback(function () {
self.update();
});
self.update();
@ -67,9 +65,7 @@ export class LayerUpdater {
renderLayers(rest);
}, 50)
}
renderLayers(this._layers);
}
private handleFail(reason: any) {
@ -89,8 +85,8 @@ export class LayerUpdater {
if (this.IsInBounds()) {
return;
}
console.log("Zoom level: ",this._map.map.getZoom(), "Least needed zoom:", this._minzoom)
if (this._map.map.getZoom() < this._minzoom || this._map.Location.data.zoom < this._minzoom) {
console.log("Zoom level: ",State.state.bm.map.getZoom(), "Least needed zoom:", this._minzoom)
if (State.state.bm.map.getZoom() < this._minzoom || State.state.bm.Location.data.zoom < this._minzoom) {
return;
}
@ -98,7 +94,7 @@ export class LayerUpdater {
console.log("Still running a query, skip");
}
const bounds = this._map.map.getBounds();
const bounds = State.state.bm.map.getBounds();
const diff = this.widenFactor;
@ -131,7 +127,7 @@ export class LayerUpdater {
}
const b = this._map.map.getBounds();
const b = State.state.bm.map.getBounds();
if (b.getSouth() < this.previousBounds.south) {
return false;
}

50
Logic/Leaflet/GeoLocationHandler.ts
View file

@ -1,25 +1,20 @@
import {Basemap} from "./Basemap";
import L from "leaflet";
import {UIEventSource} from "../../UI/UIEventSource";
import {UIElement} from "../../UI/UIElement";
import {Helpers} from "../../Helpers";
import {State} from "../../State";
export class GeoLocationHandler extends UIElement {
currentLocation: UIEventSource<{
latlng: number,
accuracy: number
}> = new UIEventSource<{ latlng: number, accuracy: number }>(undefined);
private _isActive: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private _permission: UIEventSource<string> = new UIEventSource<string>("");
private _map: Basemap;
private _marker: any;
private _hasLocation: UIEventSource<boolean>;
constructor(map: Basemap) {
constructor() {
super(undefined);
this._map = map;
this.ListenTo(this.currentLocation);
this._hasLocation = State.state.currentGPSLocation.map((location) => location !== undefined);
this.ListenTo(this._hasLocation);
this.ListenTo(this._isActive);
this.ListenTo(this._permission);
@ -29,23 +24,24 @@ export class GeoLocationHandler extends UIElement {
function onAccuratePositionProgress(e) {
console.log(e.accuracy);
console.log(e.latlng);
self.currentLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
State.state.currentGPSLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
}
function onAccuratePositionFound(e) {
console.log(e.accuracy);
console.log(e.latlng);
self.currentLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
State.state.currentGPSLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
}
function onAccuratePositionError(e) {
console.log("onerror", e.message);
}
map.map.on('accuratepositionprogress', onAccuratePositionProgress);
map.map.on('accuratepositionfound', onAccuratePositionFound);
map.map.on('accuratepositionerror', onAccuratePositionError);
const map = State.state.bm.map;
map.on('accuratepositionprogress', onAccuratePositionProgress);
map.on('accuratepositionfound', onAccuratePositionFound);
map.on('accuratepositionerror', onAccuratePositionError);
const icon = L.icon(
@ -55,12 +51,12 @@ export class GeoLocationHandler extends UIElement {
iconAnchor: [20, 20], // point of the icon which will correspond to marker's location
})
this.currentLocation.addCallback((location) => {
State.state.currentGPSLocation.addCallback((location) => {
const newMarker = L.marker(location.latlng, {icon: icon});
newMarker.addTo(map.map);
if (self._marker !== undefined) {
map.map.removeLayer(self._marker);
map.removeLayer(self._marker);
}
self._marker = newMarker;
});
@ -81,7 +77,7 @@ export class GeoLocationHandler extends UIElement {
}
InnerRender(): string {
if (this.currentLocation.data) {
if (this._hasLocation.data) {
return "<img src='assets/crosshair-blue.png' alt='locate me'>";
}
if (this._isActive.data) {
@ -94,17 +90,17 @@ export class GeoLocationHandler extends UIElement {
private StartGeolocating() {
const self = this;
const map = State.state.bm.map;
if (self._permission.data === "denied") {
return "";
}
if (self.currentLocation.data !== undefined) {
self._map.map.flyTo(self.currentLocation.data.latlng, 18);
if (State.state.currentGPSLocation.data !== undefined) {
map.flyTo(State.state.currentGPSLocation.data.latlng, 18);
}
console.log("Searching location using GPS")
self._map.map.findAccuratePosition({
map.findAccuratePosition({
maxWait: 10000, // defaults to 10000
desiredAccuracy: 50 // defaults to 20
});
@ -113,13 +109,13 @@ export class GeoLocationHandler extends UIElement {
if (!self._isActive.data) {
self._isActive.setData(true);
Helpers.DoEvery(60000, () => {
if(document.visibilityState !== "visible"){
if (document.visibilityState !== "visible") {
console.log("Not starting gps: document not visible")
return;
}
self._map.map.findAccuratePosition({
map.findAccuratePosition({
maxWait: 10000, // defaults to 10000
desiredAccuracy: 50 // defaults to 20
});

24
Logic/Leaflet/StrayClickHandler.ts
View file

@ -2,29 +2,23 @@ import {Basemap} from "./Basemap";
import L from "leaflet";
import {UIEventSource} from "../../UI/UIEventSource";
import {UIElement} from "../../UI/UIElement";
import {State} from "../../State";
/**
* The stray-click-hanlders adds a marker to the map if no feature was clicked.
* Shows the given uiToShow-element in the messagebox
*/
export class StrayClickHandler {
private _basemap: Basemap;
private _lastMarker;
private _fullScreenMessage: UIEventSource<UIElement>;
private _uiToShow: (() => UIElement);
constructor(
basemap: Basemap,
selectElement: UIEventSource<{ feature: any }>,
fullScreenMessage: UIEventSource<UIElement>,
uiToShow: (() => UIElement)) {
this._basemap = basemap;
this._fullScreenMessage = fullScreenMessage;
this._uiToShow = uiToShow;
const self = this;
const map = basemap.map;
basemap.LastClickLocation.addCallback(function (lastClick) {
selectElement.setData(undefined);
const map = State.state.bm.map;
State.state.bm.LastClickLocation.addCallback(function (lastClick) {
State.state.selectedElement.setData(undefined);
if (self._lastMarker !== undefined) {
map.removeLayer(self._lastMarker);
@ -32,9 +26,9 @@ export class StrayClickHandler {
self._lastMarker = L.marker([lastClick.lat, lastClick.lon], {
icon: L.icon({
iconUrl: "./assets/add.svg",
iconSize: [50,50],
iconAnchor: [25,50],
popupAnchor: [0,-45]
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -45]
})
});
const uiElement = uiToShow();
@ -45,13 +39,13 @@ export class StrayClickHandler {
self._lastMarker.bindPopup(popup).openPopup();
self._lastMarker.on("click", () => {
fullScreenMessage.setData(self._uiToShow());
State.state.fullScreenMessage.setData(self._uiToShow());
});
uiElement.Update();
uiElement.Activate();
});
selectElement.addCallback(() => {
State.state.selectedElement.addCallback(() => {
if (self._lastMarker !== undefined) {
map.removeLayer(self._lastMarker);
this._lastMarker = undefined;

16
Logic/Osm/Changes.ts
View file

@ -7,14 +7,12 @@ import {OsmConnection} from "./OsmConnection";
import {OsmNode, OsmObject} from "./OsmObject";
import {And, Tag, TagsFilter} from "../TagsFilter";
import {ElementStorage} from "../ElementStorage";
import {State} from "../../State";
export class Changes {
private static _nextId = -1; // New assined ID's are negative
public readonly login: OsmConnection;
public readonly _allElements: ElementStorage;
private _pendingChanges: { elementId: string, key: string, value: string }[] = []; // Gets reset on uploadAll
private newElements: OsmObject[] = []; // Gets reset on uploadAll
@ -27,8 +25,6 @@ export class Changes {
login: OsmConnection,
allElements: ElementStorage) {
this._changesetComment = changesetComment;
this.login = login;
this._allElements = allElements;
}
addTag(elementId: string, tagsFilter : TagsFilter){
@ -66,7 +62,7 @@ console.log("Received change",key, value)
return;
}
const eventSource = this._allElements.getElement(elementId);
const eventSource = State.state.allElements.getElement(elementId);
eventSource.data[key] = value;
eventSource.ping();
@ -104,7 +100,7 @@ console.log("Received change",key, value)
]
}
}
this._allElements.addOrGetElement(geojson);
State.state.allElements.addOrGetElement(geojson);
// The basictags are COPIED, the id is included in the properties
// The tags are not yet written into the OsmObject, but this is applied onto a
@ -208,16 +204,16 @@ console.log("Received change",key, value)
for (const oldId in idMapping) {
const newId = idMapping[oldId];
const element = self._allElements.getElement(oldId);
const element = State.state.allElements.getElement(oldId);
element.data.id = newId;
self._allElements.addElementById(newId, element);
State.state.allElements.addElementById(newId, element);
element.ping();
}
}
console.log("Beginning upload...");
// At last, we build the changeset and upload
self.login.UploadChangeset(self._changesetComment,
State.state.osmConnection.UploadChangeset(self._changesetComment,
function (csId) {
let modifications = "";

4
Logic/Osm/Geocoding.ts
View file

@ -1,14 +1,14 @@
import {Basemap} from "../Leaflet/Basemap";
import $ from "jquery"
import {State} from "../../State";
export class Geocoding {
private static readonly host = "https://nominatim.openstreetmap.org/search?";
static Search(query: string,
basemap: Basemap,
handleResult: ((places: { display_name: string, lat: number, lon: number, boundingbox: number[] }[]) => void),
onFail: (() => void)) {
const b = basemap.map.getBounds();
const b = State.state.bm.map.getBounds();
console.log(b);
$.getJSON(
Geocoding.host + "format=json&limit=1&viewbox=" +

40
Logic/Osm/OsmConnection.ts
View file

@ -10,7 +10,6 @@ export class UserDetails {
public img: string;
public unreadMessages = 0;
public totalMessages = 0;
public osmConnection: OsmConnection;
public dryRun: boolean;
home: { lon: number; lat: number };
}
@ -23,24 +22,43 @@ export class OsmConnection {
constructor(dryRun: boolean, oauth_token: UIEventSource<string>) {
this.auth = new osmAuth({
oauth_consumer_key: 'hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem',
oauth_secret: 'wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI',
singlepage: true,
landing: window.location.href,
auto: true // show a login form if the user is not authenticated and
// you try to do a call
let pwaStandAloneMode = false;
try {
});
if (window.matchMedia('(display-mode: standalone)').matches || window.matchMedia('(display-mode: fullscreen)').matches) {
pwaStandAloneMode = true;
}
} catch (e) {
console.warn("Detecting standalone mode failed", e, ". Assuming in browser and not worrying furhter")
}
if (pwaStandAloneMode) {
// In standalone mode, we DON'T use single page login, as 'redirecting' opens a new window anyway...
this.auth = new osmAuth({
oauth_consumer_key: 'hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem',
oauth_secret: 'wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI',
singlepage: false,
auto: true
});
} else {
this.auth = new osmAuth({
oauth_consumer_key: 'hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem',
oauth_secret: 'wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI',
singlepage: true,
landing: window.location.href,
auto: true
});
}
this.userDetails = new UIEventSource<UserDetails>(new UserDetails());
this.userDetails.data.osmConnection = this;
this.userDetails.data.dryRun = dryRun;
this._dryRun = dryRun;
if(oauth_token.data !== undefined){
if (oauth_token.data !== undefined) {
console.log(oauth_token.data)
const self = this;
this.auth.bootstrapToken(oauth_token.data,

15
Logic/Osm/OsmImageUploadHandler.ts
View file

@ -6,27 +6,19 @@ import {UIEventSource} from "../../UI/UIEventSource";
import {ImageUploadFlow} from "../../UI/ImageUploadFlow";
import {UserDetails} from "./OsmConnection";
import {SlideShow} from "../../UI/SlideShow";
import {State} from "../../State";
export class OsmImageUploadHandler {
private _tags: UIEventSource<any>;
private _changeHandler: Changes;
private _userdetails: UIEventSource<UserDetails>;
private _slideShow: SlideShow;
private _preferedLicense: UIEventSource<string>;
constructor(tags: UIEventSource<any>,
userdetails: UIEventSource<UserDetails>,
preferedLicense: UIEventSource<string>,
changeHandler: Changes,
slideShow : SlideShow
) {
this._slideShow = slideShow; // To move the slideshow (if any) to the last, just added element
if (tags === undefined || userdetails === undefined || changeHandler === undefined) {
throw "Something is undefined"
}
this._tags = tags;
this._changeHandler = changeHandler;
this._userdetails = userdetails;
this._preferedLicense = preferedLicense;
}
@ -36,14 +28,14 @@ export class OsmImageUploadHandler {
const title = tags.name ?? "Unknown area";
const description = [
"author:" + this._userdetails.data.name,
"author:" + State.state.osmConnection.userDetails.data.name,
"license:" + license,
"wikidata:" + tags.wikidata,
"osmid:" + tags.id,
"name:" + tags.name
].join("\n");
const changes = this._changeHandler;
const changes = State.state.changes;
return {
title: title,
description: description,
@ -73,7 +65,6 @@ export class OsmImageUploadHandler {
getUI(): ImageUploadFlow {
const self = this;
return new ImageUploadFlow(
this._userdetails,
this._preferedLicense,
function (license) {
return self.generateOptions(license)

5
Logic/QueryParameters.ts
View file

@ -51,7 +51,10 @@ export class QueryParameters {
}
public static GetQueryParameter(key: string, deflt: string): UIEventSource<string> {
QueryParameters.defaults[key] = deflt;
if (deflt !== undefined) {
console.log(key, "-->", deflt)
QueryParameters.defaults[key] = deflt;
}
if (QueryParameters.knownSources[key] !== undefined) {
return QueryParameters.knownSources[key];
}