Further refactoring

Logic/Actors/StrayClickHandler.ts

@@ -0,0 +1,70 @@
+import * as L from "leaflet";
+import {UIElement} from "../../UI/UIElement";
+import {Img} from "../../UI/Img";
+import Svg from "../../Svg";
+import {UIEventSource} from "../UIEventSource";
+import {FilteredLayer} from "../FilteredLayer";
+
+/**
+ * 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 _lastMarker;
+    private _uiToShow: (() => UIElement);
+
+    constructor(
+        lastClickLocation: UIEventSource<{ lat: number, lon:number }>,
+        selectedElement: UIEventSource<string>,
+        filteredLayers: UIEventSource<FilteredLayer[]>,
+        leafletMap: UIEventSource<L.Map>,
+        fullscreenMessage: UIEventSource<UIElement>,
+        uiToShow: (() => UIElement)) {
+        this._uiToShow = uiToShow;
+        const self = this;
+        filteredLayers.data.forEach((filteredLayer) => {
+            filteredLayer.isDisplayed.addCallback(isEnabled => {
+                if(isEnabled && self._lastMarker && leafletMap.data !== undefined){
+                    // When a layer is activated, we remove the 'last click location' in order to force the user to reclick
+                    // This reclick might be at a location where a feature now appeared...
+                     leafletMap.data.removeLayer(self._lastMarker);
+                }
+            })
+        })
+        
+        lastClickLocation.addCallback(function (lastClick) {
+            selectedElement.setData(undefined);
+
+            if (self._lastMarker !== undefined) {
+                leafletMap.data?.removeLayer(self._lastMarker);
+            }
+            self._lastMarker = L.marker([lastClick.lat, lastClick.lon], {
+                icon: L.icon({
+                    iconUrl: Img.AsData(Svg.add),
+                    iconSize: [50, 50],
+                    iconAnchor: [25, 50],
+                    popupAnchor: [0, -45]
+                })
+            });
+            const uiElement = uiToShow();
+            const popup = L.popup().setContent(uiElement.Render());
+            self._lastMarker.addTo(leafletMap.data);
+            self._lastMarker.bindPopup(popup);
+
+            self._lastMarker.on("click", () => {
+                fullscreenMessage.setData(self._uiToShow());
+                uiElement.Update();
+            });
+        });
+
+        selectedElement.addCallback(() => {
+            if (self._lastMarker !== undefined) {
+                leafletMap.data.removeLayer(self._lastMarker);
+                this._lastMarker = undefined;
+            }
+        })
+
+    }
+
+
+}