Stabilizing popups part 2: loading new data doesn't close the popup anymore + fix slideshow

Models/Constants.ts

@@ -2,7 +2,7 @@ import { Utils } from "../Utils";
 
 export default class Constants {
     
-    public static vNumber = "0.5.0-alpha-tailwind";
+    public static vNumber = "0.5.0-rc1";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/Image/DeleteImage.ts

@@ -22,21 +22,20 @@ export default class DeleteImage extends UIElement {
 
         this.isDeletedBadge = Translations.t.image.isDeleted;
 
-        const style = "display:block;color:white;width:100%;"
         const deleteButton = Translations.t.image.doDelete.Clone()
-            .SetStyle(style+"background:#ff8c8c;")
+            .SetClass("block w-full pl-4 pr-4")
+            .SetStyle("color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;")
             .onClick(() => {
                 State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
             });
 
-        const cancelButton = Translations.t.general.cancel;
+        const cancelButton = Translations.t.general.cancel.SetClass("bg-white pl-4 pr-4").SetStyle( "border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
         this.deleteDialog = new CheckBox(
             new Combine([
                 deleteButton,
                 cancelButton
-                
+            ]).SetClass("flex flex-col background-black"),
-            ]).SetStyle("display:flex;flex-direction:column;"),
+            Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
-            Svg.delete_icon_ui().SetStyle('width:1.5em;display:block;padding-left: calc(50% - 0.75em);')
         )
 
     }

UI/Image/ImageCarousel.ts

@@ -21,8 +21,8 @@ export class ImageCarousel extends UIElement{
                 if(url.key !== undefined){
                     image = new Combine([
                         image,
-                        new DeleteImage(url.key, tags)
+                        new DeleteImage(url.key, tags).SetClass("delete-image-marker absolute top-0 left-0 pl-3")
-                    ]);
+                    ]).SetClass("relative");
                 }
             image
                 .SetClass("w-full block")
@@ -32,7 +32,7 @@ export class ImageCarousel extends UIElement{
         });
 
         this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
-        this.SetClass("block image-carousel-marker");
+        this.SetClass("block w-full");
     }
 
     /***

UI/Image/SlideShow.ts

@@ -41,7 +41,7 @@ export class SlideShow extends UIElement {
             return;
         }
         $('.slick-carousel').not('.slick-initialized').slick({
-            //   autoplay: true,
+            autoplay: true,
             arrows: true,
             dots: true,
             lazyLoad: 'progressive',

UI/ShowDataLayer.ts

@@ -23,7 +23,7 @@ export default class ShowDataLayer {
                 layoutToUse: LayoutConfig) {
         this._leafletMap = leafletMap;
         const self = this;
-        let oldGeoLayer: L.Layer = undefined;
+        const mp = leafletMap.data;
 
         this._layerDict = {};
         for (const layer of layoutToUse.layers) {
@@ -42,6 +42,12 @@ export default class ShowDataLayer {
             }
         }
 
+
+        const knownFeatureIds = new Set<string>();
+        const geoLayer = self.CreateGeojsonLayer();
+        mp.addLayer(geoLayer);
+        let cluster = undefined;
+
         function update() {
             if (features.data === undefined) {
                 return;
@@ -49,30 +55,36 @@ export default class ShowDataLayer {
             if (leafletMap.data === undefined) {
                 return;
             }
-            const mp = leafletMap.data;
+            
-
             const feats = features.data.map(ff => ff.feature);
 
-            let geoLayer = self.CreateGeojsonLayer(feats)
+            for (const feat of feats) {
-            if (layoutToUse.clustering.minNeededElements <= features.data.length) {
+                const key = feat.geometry.type + feat.properties.id + feat.layer;
-                const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
+                if (knownFeatureIds.has(key)) {
-                const cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.clustering.maxZoom});
+                    continue;
-                cluster.addLayer(geoLayer);
+                }
-                geoLayer = cluster;
+                knownFeatureIds.add(key);
+                // @ts-ignore
+                geoLayer.addData(feat);
+                console.log("Added ", feat)
             }
-
+            if (cluster === undefined) {
-            if (oldGeoLayer) {
+                if (layoutToUse.clustering.minNeededElements <= features.data.length) {
-                mp.removeLayer(oldGeoLayer);
+                    // Activate clustering if it wasn't already activated
+                    const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
+                    cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.clustering.maxZoom});
+                    cluster.addLayer(geoLayer);
+                    mp.removeLayer(geoLayer)
+                    mp.addLayer(cluster);
+                }
             }
-            mp.addLayer(geoLayer);
-            oldGeoLayer = geoLayer;
-            openSelectedElementFeature(State.state.selectedElement.data);
         }
 
         features.addCallback(() => update());
         leafletMap.addCallback(() => update());
-        update();
+
         State.state.selectedElement.addCallbackAndRun(openSelectedElementFeature);
+        update();
     }
 
 
@@ -122,7 +134,7 @@ export default class ShowDataLayer {
         const uiElement = new LazyElement(() =>
                 FeatureInfoBox.construct(tags, layer, () => {
                     State.state.selectedElement.setData(undefined);
-                     leafletLayer.closePopup();
+                    leafletLayer.closePopup();
                     popup.remove();
                     ScrollableFullScreen.RestoreLeaflet();
                 }),
@@ -156,11 +168,11 @@ export default class ShowDataLayer {
 
     }
 
-    private CreateGeojsonLayer(features: any[]): L.Layer {
+    private CreateGeojsonLayer(): L.Layer {
         const self = this;
         const data = {
             type: "FeatureCollection",
-            features: features
+            features: []
         }
         return L.geoJSON(data, {
             style: feature => self.createStyleFor(feature),

UI/SubstitutedTranslation.ts

@@ -29,6 +29,7 @@ export class SubstitutedTranslation extends UIElement {
             self.content = self.CreateContent();
             self.Update();
         });
+        this.SetClass("w-full")
 
     }
 

index.css

@@ -122,6 +122,10 @@ a {
     color: var(--foreground-color)
 }
 
+.slick-prev:before, .slick-next:before {
+    /*Slideshow workaround*/
+    color:black !important;
+}
 
 #topleft-tools svg {
     fill: var(--foreground-color) !important;
@@ -159,6 +163,8 @@ a {
     box-shadow: 0 3px 14px var(--shadow-color) !important;
 }
 
+
+
 #geolocate-button {
     position: absolute;
     bottom: 25px;