Tweaks to popup closing behaviour

InitUiElements.ts

@@ -278,8 +278,10 @@ export class InitUiElements {
             checkbox.isEnabled.setData(false);
         })
 
-        State.state.selectedElement.addCallback(() => {
+        State.state.selectedElement.addCallback(selected => {
-            checkbox.isEnabled.setData(false);
+            if(selected !== undefined){
+                checkbox.isEnabled.setData(false);
+            }
         })
 
 
@@ -367,11 +369,6 @@ export class InitUiElements {
             attr
         );
         State.state.leafletMap.setData(bm.map);
-
-        bm.map.on("popupclose", () => {
-            State.state.selectedElement.setData(undefined)
-        })
-
     }
 
     private static InitLayers() {

State.ts

@@ -75,12 +75,14 @@ export default class State {
     /**
      This message is shown full screen on mobile devices
      */
-    public readonly fullScreenMessage = new UIEventSource<UIElement>(undefined);
+    public readonly fullScreenMessage = new UIEventSource<UIElement>(undefined)
+        .addCallback(fs => console.log("Fullscreen message is", fs));
 
     /**
      The latest element that was selected - used to generate the right UI at the right place
      */
-    public readonly selectedElement = new UIEventSource<any>(undefined);
+    public readonly selectedElement = new UIEventSource<any>(undefined)
+        .addCallback(selected => console.log("Selected element is", selected));
 
     public readonly featureSwitchUserbadge: UIEventSource<boolean>;
     public readonly featureSwitchSearch: UIEventSource<boolean>;

UI/ShowDataLayer.ts

@@ -17,6 +17,7 @@ export default class ShowDataLayer {
 
     private readonly _layerDict;
     private readonly _leafletMap: UIEventSource<L.Map>;
+    private readonly _onSelectedTrigger: any = {}; // osmId+geometry.type+matching_layer_id --> () => void
 
     constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>,
                 leafletMap: UIEventSource<L.Map>,
@@ -63,6 +64,16 @@ export default class ShowDataLayer {
         zoom.map(z => (layoutToUse.clustering?.maxZoom ?? 0) >= z).addCallback(() => {
             update();
         });
+        State.state.selectedElement.addCallback(feature => {
+            if(feature === undefined){
+                return;
+            }
+            const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id;
+            const action = self._onSelectedTrigger[id];
+            if(action){
+                action();
+            }
+        });
 
     }
 
@@ -109,7 +120,7 @@ export default class ShowDataLayer {
 
 
         const tags = State.state.allElements.getEventSourceFor(feature);
-        let uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer));
+        const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer));
         popup.setContent(uiElement.Render());
         leafletLayer.bindPopup(popup);
         // We first render the UIelement (which'll still need an update later on...)
@@ -118,10 +129,17 @@ export default class ShowDataLayer {
 
         leafletLayer.on("click", (e) => {
             // We set the element as selected...
-            uiElement.Activate();
+         //   uiElement.Activate();
             State.state.selectedElement.setData(feature);
         });
-
+        
+        const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id;
+        this._onSelectedTrigger[id]
+         = () => {
+            leafletLayer.openPopup();
+            uiElement.Activate();
+        }
+        
 
         if (feature.properties.id.replace(/\//g, "_") === Hash.Get().data) {
             // This element is in the URL, so this is a share link