From 8b6ee7075cfa3db3da6a40a1cdf3c6be414a18d9 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 22 Jul 2024 17:24:30 +0200
Subject: [PATCH] Fix #1956 with workaround

---
 src/Logic/MetaTagging.ts                      |  3 +
 src/UI/Base/SelectedElementPanel.svelte       | 62 +++++++++++++++++
 src/UI/Base/TitledPanel.svelte                |  5 --
 .../BigComponents/SelectedElementTitle.svelte |  6 +-
 .../BigComponents/SelectedElementView.svelte  | 28 +-------
 src/UI/ThemeViewGUI.svelte                    | 68 ++++++++++---------
 6 files changed, 106 insertions(+), 66 deletions(-)
 create mode 100644 src/UI/Base/SelectedElementPanel.svelte

diff --git a/src/Logic/MetaTagging.ts b/src/Logic/MetaTagging.ts
index 634d18759..c8516d8ea 100644
--- a/src/Logic/MetaTagging.ts
+++ b/src/Logic/MetaTagging.ts
@@ -198,6 +198,9 @@ export default class MetaTagging {
         for (let i = 0; i < features.length; i++) {
             const feature = features[i]
             const tags = featurePropertiesStores?.getStore(feature.properties.id)
+            if(!tags){
+                continue
+            }
             let somethingChanged = false
             const definedTags = new Set(Object.getOwnPropertyNames(feature.properties))
 
diff --git a/src/UI/Base/SelectedElementPanel.svelte b/src/UI/Base/SelectedElementPanel.svelte
new file mode 100644
index 000000000..cb71bce63
--- /dev/null
+++ b/src/UI/Base/SelectedElementPanel.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import type { Feature } from "geojson"
+  import SelectedElementView from "../BigComponents/SelectedElementView.svelte"
+  import SelectedElementTitle from "../BigComponents/SelectedElementTitle.svelte"
+  import UserRelatedState from "../../Logic/State/UserRelatedState"
+  import { LastClickFeatureSource } from "../../Logic/FeatureSource/Sources/LastClickFeatureSource"
+  import Loading from "./Loading.svelte"
+  import { onDestroy } from "svelte"
+
+  export let state: SpecialVisualizationState
+  export let selected: Feature
+  let tags = state.featureProperties.getStore(selected.properties.id)
+
+  export let absolute = true
+  function getLayer(properties: Record<string, string>) {
+    if (properties.id === "settings") {
+      return UserRelatedState.usersettingsConfig
+    }
+    if (properties.id.startsWith(LastClickFeatureSource.newPointElementId)) {
+      return state.layout.layers.find((l) => l.id === "last_click")
+    }
+    if (properties.id === "location_track") {
+      return state.layout.layers.find((l) => l.id === "gps_track")
+    }
+    return state.layout.getMatchingLayer(properties)
+  }
+
+
+  let layer = getLayer(selected.properties)
+
+  let stillMatches = tags.map(
+    (tags) => !layer?.source?.osmTags || layer?.source?.osmTags?.matchesProperties(tags)
+  )
+  onDestroy(
+    stillMatches.addCallbackAndRunD(matches => {
+      if (matches) {
+        return
+      }
+      /*
+       * This is a workaround. Normally, we would dynamically rewrite 'layer' and this should update the view.
+       * However, because there are quite some legacy elements and some elements have a different layer calculation,
+       * we simply close the popup and open it again.
+       * See #1956
+      */
+      state.selectedElement.setData(undefined)
+      requestAnimationFrame(() => {
+        state.selectedElement.setData(selected)
+      })
+    })
+  )
+</script>
+
+
+{#if !$stillMatches}
+  <Loading />
+{:else}
+  <div class="normal-background flex h-full w-full flex-col" class:absolute={absolute}>
+    <SelectedElementTitle {state} {layer} selectedElement={selected} />
+    <SelectedElementView {state} {layer} selectedElement={selected} />
+  </div>
+{/if}
diff --git a/src/UI/Base/TitledPanel.svelte b/src/UI/Base/TitledPanel.svelte
index 859529e32..b7ddbcb11 100644
--- a/src/UI/Base/TitledPanel.svelte
+++ b/src/UI/Base/TitledPanel.svelte
@@ -1,8 +1,3 @@
-<script lang="ts">
-
-  import Translations from "../i18n/Translations"
-</script>
-
 <div class="flex h-full flex-col">
   <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
     <slot name="title" />
diff --git a/src/UI/BigComponents/SelectedElementTitle.svelte b/src/UI/BigComponents/SelectedElementTitle.svelte
index 559a9fab8..9aa299c2f 100644
--- a/src/UI/BigComponents/SelectedElementTitle.svelte
+++ b/src/UI/BigComponents/SelectedElementTitle.svelte
@@ -72,14 +72,14 @@
     {/if}
   </div>
   <slot name="close-button">
-    <div
-      class="mt-2 h-fit shrink-0 rounded-full border-none p-0 cursor-pointer"
+    <button
+      class="mt-2 h-fit shrink-0 rounded-full border-none p-0 cursor-pointer self-center"
       on:click={() => state.selectedElement.setData(undefined)}
       style="border: 0 !important; padding: 0 !important;"
       use:ariaLabel={Translations.t.general.backToMap}
     >
       <XCircleIcon aria-hidden={true} class="h-8 w-8" />
-    </div>
+    </button>
   </slot>
 </div>
 
diff --git a/src/UI/BigComponents/SelectedElementView.svelte b/src/UI/BigComponents/SelectedElementView.svelte
index f3842b778..79d02d5c4 100644
--- a/src/UI/BigComponents/SelectedElementView.svelte
+++ b/src/UI/BigComponents/SelectedElementView.svelte
@@ -3,12 +3,10 @@
   import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte"
   import { onDestroy } from "svelte"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
-  import UserRelatedState from "../../Logic/State/UserRelatedState"
   import Delete_icon from "../../assets/svg/Delete_icon.svelte"
   import BackButton from "../Base/BackButton.svelte"
   import TagRenderingEditableDynamic from "../Popup/TagRendering/TagRenderingEditableDynamic.svelte"
@@ -24,24 +22,8 @@
 
   let isAddNew = tags.mapD(t => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false)
 
-  function getLayer(properties: Record<string, string>) {
-    if (properties.id === "settings") {
-      return UserRelatedState.usersettingsConfig
-    }
-    if (properties.id.startsWith(LastClickFeatureSource.newPointElementId)) {
-      return state.layout.layers.find((l) => l.id === "last_click")
-    }
-    if (properties.id === "location_track") {
-      return state.layout.layers.find((l) => l.id === "gps_track")
-    }
-    return state.layout.getMatchingLayer(properties)
-  }
 
-  let layer: LayerConfig = getLayer(selectedElement.properties)
-
-  let stillMatches = tags.map(
-    (tags) => !layer?.source?.osmTags || layer.source.osmTags?.matchesProperties(tags)
-  )
+  export let layer: LayerConfig
 
   let _metatags: Record<string, string>
   if (state?.userRelatedState?.preferencesAsTags) {
@@ -53,7 +35,7 @@
   }
 
   let knownTagRenderings: Store<TagRenderingConfig[]> = tags.mapD((tgs) =>
-    layer.tagRenderings.filter(
+    layer?.tagRenderings?.filter(
       (config) =>
         (config.condition?.matchesProperties(tgs) ?? true) &&
         (config.metacondition?.matchesProperties({ ...tgs, ..._metatags }) ?? true) &&
@@ -62,11 +44,7 @@
   )
 </script>
 
-{#if !$stillMatches}
-  <div class="alert" aria-live="assertive">
-    <Tr t={Translations.t.delete.isChanged} />
-  </div>
-{:else if $tags._deleted === "yes"}
+{#if $tags._deleted === "yes"}
   <div class="flex w-full flex-col p-2">
     <div aria-live="assertive" class="alert flex items-center justify-center self-stretch">
       <Delete_icon class="m-2 h-8 w-8" />
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index feefe1ab6..26a24bb77 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -18,7 +18,7 @@
     EyeIcon,
     HeartIcon,
     MenuIcon,
-    XCircleIcon,
+    XCircleIcon
   } from "@rgossiaux/svelte-heroicons/solid"
   import Tr from "./Base/Tr.svelte"
   import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
@@ -72,9 +72,8 @@
   import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
   import Marker from "./Map/Marker.svelte"
   import AboutMapComplete from "./BigComponents/AboutMapComplete.svelte"
-  import IfNot from "./Base/IfNot.svelte"
-  import Hotkeys from "./Base/Hotkeys"
   import HotkeyTable from "./BigComponents/HotkeyTable.svelte"
+  import SelectedElementPanel from "./Base/SelectedElementPanel.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -146,7 +145,7 @@
     const bottomRight = mlmap.unproject([rect.right, rect.bottom])
     const bbox = new BBox([
       [topLeft.lng, topLeft.lat],
-      [bottomRight.lng, bottomRight.lat],
+      [bottomRight.lng, bottomRight.lat]
     ])
     state.visualFeedbackViewportBounds.setData(bbox)
   }
@@ -213,7 +212,7 @@
 
 <main>
   <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
-    <MaplibreMap map={maplibremap} mapProperties={mapproperties} autorecovery={true}/>
+    <MaplibreMap map={maplibremap} mapProperties={mapproperties} autorecovery={true} />
   </div>
 
   {#if $visualFeedback}
@@ -287,9 +286,9 @@
           htmlElem={openCurrentViewLayerButton}
         >
           <div class="w-8 h-8 cursor-pointer">
-          <ToSvelte
-            construct={() => currentViewLayer.defaultIcon()}
-          />
+            <ToSvelte
+              construct={() => currentViewLayer.defaultIcon()}
+            />
           </div>
         </MapControlButton>
       {/if}
@@ -303,7 +302,7 @@
         <div class="thanks">
           Testserver
         </div>
-        {/if}
+      {/if}
       <If condition={state.featureSwitches.featureSwitchFakeUser}>
         <div class="alert w-fit">Faking a user (Testmode)</div>
       </If>
@@ -453,29 +452,32 @@
       }}
     >
       <div slot="close-button" />
-      <div class="normal-background absolute flex h-full w-full flex-col">
-        <SelectedElementTitle {state} layer={$selectedLayer} selectedElement={$selectedElement} />
-        <SelectedElementView {state} selectedElement={$selectedElement} />
-      </div>
+      <SelectedElementPanel {state} selected={$selectedElement} />
     </ModalRight>
   {/if}
 
   {#if $selectedElement !== undefined && $selectedLayer !== undefined && $selectedLayer.popupInFloatover}
     <!-- Floatover with the selected element, if applicable -->
-    <FloatOver
-      on:close={() => {
+
+    {#if $selectedLayer.popupInFloatover === "title"}
+      <FloatOver
+        on:close={() => {
         state.selectedElement.setData(undefined)
       }}
-    >
-      <div class="flex h-full w-full flex-col">
-        {#if $selectedLayer.popupInFloatover === "title"}
-          <SelectedElementTitle {state} layer={$selectedLayer} selectedElement={$selectedElement}>
-            <span slot="close-button" />
-          </SelectedElementTitle>
-        {/if}
-        <SelectedElementView {state} selectedElement={$selectedElement} />
-      </div>
-    </FloatOver>
+      >
+        <span slot="close-button" />
+         <SelectedElementPanel absolute={false} {state} selected={$selectedElement} />
+      </FloatOver>
+    {:else}
+      <FloatOver
+        on:close={() => {
+        state.selectedElement.setData(undefined)
+      }}
+      >
+        <SelectedElementView {state} layer={$selectedLayer} selectedElement={$selectedElement} />
+      </FloatOver>
+    {/if}
+
   {/if}
 
   <If condition={state.previewedImage.map((i) => i !== undefined)}>
@@ -551,13 +553,13 @@
         state.guistate.backgroundLayerSelectionIsOpened.setData(false)
       }}
     >
-        <RasterLayerOverview
-          {availableLayers}
-          map={state.map}
-          mapproperties={state.mapProperties}
-          userstate={state.userRelatedState}
-          visible={state.guistate.backgroundLayerSelectionIsOpened}
-        />
+      <RasterLayerOverview
+        {availableLayers}
+        map={state.map}
+        mapproperties={state.mapProperties}
+        userstate={state.userRelatedState}
+        visible={state.guistate.backgroundLayerSelectionIsOpened}
+      />
     </FloatOver>
   </IfHidden>
 
@@ -583,7 +585,7 @@
         <div slot="content0" class="flex flex-col">
           <AboutMapComplete {state} />
           <div class="m-2 flex flex-col">
-            <HotkeyTable/>
+            <HotkeyTable />
           </div>
         </div>