Fix: attempt to fix layers which don't hide

langs/en.json

@@ -275,6 +275,7 @@
         },
         "levelSelection": {
             "addNewOnLevel": "Is the new point location on level {level}?",
+            "cancel": "See all levels",
             "confirmLevel": "Yes, add {preset} on level {level}"
         },
         "loading": "Loading…",

src/Logic/State/LayerState.ts

@@ -158,6 +158,7 @@ export default class LayerState {
                 icon: "./assets/svg/elevator.svg",
                 confirmAddNew: t.confirmLevel.PartialSubs({ level }),
                 safetyCheck: t.addNewOnLevel.Subs({ level }),
+                cancel: t.cancel
             },
         })
         this.globalFilters.ping()

src/Models/GlobalFilter.ts

@@ -14,6 +14,7 @@ export interface GlobalFilter {
         safetyCheck: Translation
         icon: string
         confirmAddNew: TypedTranslation<{ preset: Translation }>
-        tags: Tag[]
+        tags: Tag[],
+        cancel?: Translation
     }
 }

src/UI/BigComponents/LevelSelector.svelte

@@ -5,6 +5,7 @@
   import LayerState from "../../Logic/State/LayerState"
   import FloorSelector from "../InputElement/Helpers/FloorSelector.svelte"
   import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import { onDestroy } from "svelte"
 
   export let layerState: LayerState
   export let floors: Store<string[]>
@@ -35,6 +36,15 @@
     },
     [floors, zoom]
   )
+
+  onDestroy(
+    layerState.globalFilters.addCallbackD(globalFilters => {
+      console.log("Global filters are now", globalFilters)
+      if (!globalFilters.some(gf => gf.id === "level")) {
+        selectedFloor.set(all)
+      }
+    })
+  )
 </script>
 
 {#if $zoom >= maxZoom}

src/UI/InputElement/Helpers/FloorSelector.svelte

@@ -72,6 +72,10 @@
     top = Math.max(top, 0)
   }
 
+  value.addCallbackAndRun(level => {
+    forceIndex = floors.data.indexOf(level)
+  })
+
   Stores.Chronic(50).addCallback(() => stabilize())
   floors.addCallback((floors) => {
     forceIndex = floors.findIndex((s) => s === value.data)
@@ -103,7 +107,7 @@
   style={`height: calc(${HEIGHT}px * ${$floors.length}); width: calc( 96px )`}
 >
   <div class="absolute top-0 left-0 rounded-xl"
-       style="margin: -0.25rem; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); background: rgba(255,255,255, 0.65); backdrop-filter: blur(2px)">
+       style="margin: -0.25rem; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); background: rgba(255,255,255, 0.65); backdrop-filter: blur(2px); ">
   </div>
   <div class="absolute right-0 h-full w-min">
     {#each $floors as floor, i}

src/UI/Map/ShowDataLayer.ts

@@ -262,9 +262,33 @@ class LineRenderingLayer {
         this._visibility = visibility
         this._fetchStore = fetchStore
         this._onClick = onClick
-        features.features.addCallbackAndRunD(() => this.update(features.features))
 
-        map.on("styledata", () => this.update(features.features))
+        const updateNeededSrc = new UIEventSource(false)
+        updateNeededSrc.stabilized(100).addCallbackAndRunD(async updateNeeded => {
+            if (updateNeeded) {
+                await this.awaitStyleLoaded()
+                await this.update(features.features.data)
+                if (features.features.data.length === 0 && "mapcomplete_pedestrian_path_linerendering_2" === this._layername) {
+                    console.trace(this._layername, "is empty")
+                }
+                updateNeededSrc.set(false)
+            }
+        })
+        features.features.addCallbackAndRunD(() => {
+            console.log("New features!", this._layername, features.features.data.length)
+            updateNeededSrc.set(true)
+        })
+        map.on("styledata", () => updateNeededSrc.set(true))
+        this.awaitStyleLoaded().then(() => {
+
+                const feats = features.features.data
+                if (feats.length > 0) {
+                    this.update(feats)
+                } else {
+                    updateNeededSrc.set(true)
+                }
+            }
+        )
     }
 
     public destruct(): void {
@@ -343,20 +367,15 @@ class LineRenderingLayer {
         return calculatedProps
     }
 
-    private async update(featureSource: Store<Feature[]>) {
-        const map = this._map
-        while (!map.isStyleLoaded()) {
+    private async awaitStyleLoaded() {
+        while (!this._map.isStyleLoaded()) {
             await Utils.waitFor(100)
         }
-
-        // After waiting 'till the map has loaded, the data might have changed already
-        // As such, we only now read the features from the featureSource and compare with the previously set data
-        const features = featureSource.data
-        if (!features || features.length === 0) {
-            // This is a very ugly workaround for https://source.mapcomplete.org/MapComplete/MapComplete/issues/2312,
-            // but I couldn't find the root cause
-            return
     }
+
+    private async update(features: Feature[]) {
+        const map = this._map
+
         const src = <GeoJSONSource>map.getSource(this._layername)
         {
             // Add source to the map or update the feature source

src/UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -303,29 +303,35 @@
         <TagHint tags={selectedPreset.preset.tags} />
       </TitledPanel>
     {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
-      <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
-      <SubtleButton
-        on:click={() => {
-          checkedOfGlobalFilters = checkedOfGlobalFilters + 1
-        }}
+      <TitledPanel>
+        <div slot="title" class="flex items-center">
+          <img alt="" aria-hidden="true" src={_globalFilter[checkedOfGlobalFilters].onNewPoint.icon}
+               class="w-12 h-12 mr-4" />
+          <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} />
+
+        </div>
+
+        <div class="flex w-full flex-wrap flex-wrap-reverse md:flex-nowrap">
+          <button class="w-full"
+                  on:click={() => {globalFilter.setData([]);abort()}}
           >
+            <Close slot="image" class="h-8 w-8" />
+            <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.cancel ?? Translations.t.general.cancel} />
+          </button>
+          <NextButton clss="primary flex-grow w-full"
+                      on:click={() => {checkedOfGlobalFilters = checkedOfGlobalFilters + 1}}>
             <Confirm slot="image" class="h-12 w-12" />
             <Tr
-          slot="message"
               t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
                   preset: selectedPreset.text,
                 })}
             />
-      </SubtleButton>
-      <SubtleButton
-        on:click={() => {
-          globalFilter.setData([])
-          abort()
-        }}
-      >
-        <Close slot="image" class="h-8 w-8" />
-        <Tr slot="message" t={Translations.t.general.cancel} />
-      </SubtleButton>
+          </NextButton>
+
+        </div>
+
+      </TitledPanel>
+
     {:else if !creating}
       <div class="flex h-full flex-col">
         <div class="relative h-full min-h-20 w-full p-1">