Some refactoring, more work on the custom theme generator

Logic/CustomLayersPanel.ts

@@ -1,7 +1,7 @@
 import {UIElement} from "../UI/UIElement";
 import {State} from "../State";
 import Translations from "../UI/i18n/Translations";
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "./UIEventSource";
 import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
 import Combine from "../UI/Base/Combine";
 import {Img} from "../UI/Img";

Logic/ElementStorage.ts

@@ -1,7 +1,7 @@
 /**
  * Keeps track of a dictionary 'elementID' -> element
  */
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "./UIEventSource";
 
 export class ElementStorage {
 

Logic/FilteredLayer.ts

@@ -1,5 +1,5 @@
 import {TagsFilter, TagUtils} from "./TagsFilter";
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "./UIEventSource";
 import L from "leaflet"
 import {GeoOperations} from "./GeoOperations";
 import {UIElement} from "../UI/UIElement";

Logic/ImageSearcher.ts

@@ -1,11 +1,11 @@
-import {UIEventSource} from "../UI/UIEventSource";
-import {ImagesInCategory, Wikidata, Wikimedia} from "./Wikimedia";
 import {WikimediaImage} from "../UI/Image/WikimediaImage";
 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";
+import {ImagesInCategory, Wikidata, Wikimedia} from "./Web/Wikimedia";
+import {UIEventSource} from "./UIEventSource";
 
 /**
  * There are multiple way to fetch images for an object

Logic/LayerUpdater.ts

@@ -1,5 +1,5 @@
 import {Or, TagsFilter} from "./TagsFilter";
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "./UIEventSource";
 import {FilteredLayer} from "./FilteredLayer";
 import {Bounds} from "./Bounds";
 import {Overpass} from "./Osm/Overpass";

Logic/Leaflet/Basemap.ts

@@ -1,5 +1,5 @@
 import L from "leaflet"
-import {UIEventSource} from "../../UI/UIEventSource";
+import {UIEventSource} from "../UIEventSource";
 import {UIElement} from "../../UI/UIElement";
 
 

Logic/Leaflet/GeoLocationHandler.ts

@@ -1,5 +1,5 @@
 import L from "leaflet";
-import {UIEventSource} from "../../UI/UIEventSource";
+import {UIEventSource} from "../UIEventSource";
 import {UIElement} from "../../UI/UIElement";
 import {State} from "../../State";
 import {Utils} from "../../Utils";

Logic/Leaflet/StrayClickHandler.ts

@@ -1,6 +1,6 @@
 import {Basemap} from "./Basemap";
 import L from "leaflet";
-import {UIEventSource} from "../../UI/UIEventSource";
+import {UIEventSource} from "../UIEventSource";
 import {UIElement} from "../../UI/UIElement";
 import {State} from "../../State";
 

Logic/Osm/Changes.ts

@@ -2,7 +2,7 @@
  * Handles all changes made to OSM.
  * Needs an authenticator via OsmConnection
  */
-import {UIEventSource} from "../../UI/UIEventSource";
+import {UIEventSource} from "../UIEventSource";
 import {OsmConnection} from "./OsmConnection";
 import {OsmNode, OsmObject} from "./OsmObject";
 import {And, Tag, TagsFilter} from "../TagsFilter";

Logic/Osm/OsmConnection.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
 import osmAuth from "osm-auth";
-import {UIEventSource} from "../../UI/UIEventSource";
+import {UIEventSource} from "../UIEventSource";
 import {CustomLayersState} from "../CustomLayersState";
 
 export class UserDetails {

Logic/Osm/OsmImageUploadHandler.ts

@@ -2,7 +2,7 @@
  * Helps in uplaoding, by generating the rigth title, decription and by adding the tag to the changeset
  */
 import {Changes} from "./Changes";
-import {UIEventSource} from "../../UI/UIEventSource";
+import {UIEventSource} from "../UIEventSource";
 import {ImageUploadFlow} from "../../UI/ImageUploadFlow";
 import {UserDetails} from "./OsmConnection";
 import {SlideShow} from "../../UI/SlideShow";

Logic/UIEventSource.ts

@@ -0,0 +1,90 @@
+export class UIEventSource<T>{
+    
+    public data: T;
+    private _callbacks = [];
+
+    constructor(data: T) {
+        this.data = data;
+    }
+
+
+    public addCallback(callback: ((latestData : T) => void)) {
+        this._callbacks.push(callback);
+        return this;
+    }
+
+    public setData(t: T): void {
+        if (this.data === t) {
+            return;
+        }
+        this.data = t;
+        this.ping();
+    }
+
+    public ping(): void {
+        for (const callback of this._callbacks) {
+            callback(this.data);
+        }
+    }
+
+    public static flatten<X>(source: UIEventSource<UIEventSource<X>>, possibleSources: UIEventSource<any>[]): UIEventSource<X> {
+        const sink = new UIEventSource<X>(source.data?.data);
+
+        source.addCallback((latestData) => {
+           sink.setData(latestData?.data);
+        });
+
+        for (const possibleSource of possibleSources) {
+            possibleSource.addCallback(() => {
+                sink.setData(source.data?.data);
+                
+            })
+        }
+        
+        return sink;
+    }
+    
+    public map<J>(f: ((T) => J),
+                  extraSources: UIEventSource<any>[] = [],
+                  g: ((J) => T) = undefined ): UIEventSource<J> {
+        const self = this;
+        
+        const newSource = new UIEventSource<J>(
+            f(this.data)
+        );
+        
+        const update = function () {
+            newSource.setData(f(self.data));
+            newSource.ping();
+        }
+
+        this.addCallback(update);
+        for (const extraSource of extraSources) {
+            extraSource.addCallback(update);
+        }
+      
+        if(g !== undefined) {
+            newSource.addCallback((latest) => {
+                self.setData((g(latest)));
+            })
+        }
+        
+
+        return newSource;
+
+    }
+
+    
+    public syncWith(otherSource: UIEventSource<T>) : UIEventSource<T>{
+        this.addCallback((latest) => otherSource.setData(latest));
+        const self = this;
+        otherSource.addCallback((latest) => self.setData(latest));
+        if(this.data === undefined){
+           this.setData(otherSource.data);
+        }else{
+            otherSource.setData(this.data);
+        }
+        return this;
+    }
+
+}

Logic/Web/LocalStorageSource.ts

@@ -1,4 +1,4 @@
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "../UIEventSource";
 
 export class LocalStorageSource {
 

Logic/Web/QueryParameters.ts

@@ -1,8 +1,7 @@
 /**
  * Wraps the query parameters into UIEventSources
  */
-import {UIEventSource} from "../UI/UIEventSource";
-import {UIElement} from "../UI/UIElement";
+import {UIEventSource} from "../UIEventSource";
 
 export class QueryParameters {