Merge develop

src/UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -28,12 +28,14 @@
   import { onDestroy } from "svelte"
   import NextButton from "../../Base/NextButton.svelte"
   import BackButton from "../../Base/BackButton.svelte"
-  import ToSvelte from "../../Base/ToSvelte.svelte"
-  import Svg from "../../../Svg"
   import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
   import { twJoin } from "tailwind-merge"
   import Confirm from "../../../assets/svg/Confirm.svelte"
   import Close from "../../../assets/svg/Close.svelte"
+  import Layers from "../../../assets/svg/Layers.svelte"
+  import { Translation } from "../../i18n/Translation"
+  import ToSvelte from "../../Base/ToSvelte.svelte"
+  import BaseUIElement from "../../BaseUIElement"
 
   export let coordinate: { lon: number; lat: number }
   export let state: SpecialVisualizationState
@@ -41,8 +43,9 @@
   let selectedPreset: {
     preset: PresetConfig
     layer: LayerConfig
-    icon: string
-    tags: Record<string, string>
+    icon: BaseUIElement
+    tags: Record<string, string>,
+    text: Translation
   } = undefined
   let checkedOfGlobalFilters: number = 0
   let confirmedCategory = false
@@ -142,7 +145,6 @@
     const feature = state.indexedFeatures.featuresById.data.get(newId)
     console.log("Selecting feature", feature, "and opening their popup")
     abort()
-    state.selectedLayer.setData(selectedPreset.layer)
     state.selectedElement.setData(feature)
     tagsStore.ping()
   }
@@ -198,7 +200,7 @@
             state.guistate.openFilterView(selectedPreset.layer)
           }}
         >
-          <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+          <Layers class="w-12"/>
           <Tr t={Translations.t.general.add.openLayerControl} />
         </button>
 
@@ -239,7 +241,7 @@
             state.guistate.openFilterView(selectedPreset.layer)
           }}
         >
-          <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+          <Layers class="w-12"/>
           <Tr t={Translations.t.general.add.openLayerControl} />
         </button>
       </div>
@@ -251,8 +253,6 @@
         />
       </h2>
 
-      <Tr t={Translations.t.general.add.confirmIntro} />
-
       {#if selectedPreset.preset.description}
         <Tr t={selectedPreset.preset.description} />
       {/if}
@@ -284,7 +284,7 @@
 
         <NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
           <div slot="image" class="relative">
-            <ToSvelte construct={selectedPreset.icon} />
+            <ToSvelte construct={selectedPreset.icon}/>
             <Confirm class="absolute bottom-0 right-0 h-4 w-4" />
           </div>
           <div class="w-full">
@@ -303,7 +303,7 @@
         <Tr
           slot="message"
           t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
-            preset: selectedPreset.preset,
+            preset: selectedPreset.text
           })}
         />
       </SubtleButton>

src/UI/Popup/AddNewPoint/PresetList.svelte

@@ -9,11 +9,10 @@
   import { ImmutableStore } from "../../../Logic/UIEventSource"
   import { TagUtils } from "../../../Logic/Tags/TagUtils"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import FromHtml from "../../Base/FromHtml.svelte"
   import NextButton from "../../Base/NextButton.svelte"
-  import { UIElement } from "../../UIElement"
   import ToSvelte from "../../Base/ToSvelte.svelte"
   import BaseUIElement from "../../BaseUIElement"
+  import Combine from "../../Base/Combine"
 
   /**
    * This component lists all the presets and allows the user to select one
@@ -24,6 +23,10 @@
     preset: PresetConfig
     layer: LayerConfig
     text: Translation
+    /**
+     * Same as `this.preset.description.firstSentence()`
+     */
+    description: Translation,
     icon: BaseUIElement
     tags: Record<string, string>
   }[] = []
@@ -37,7 +40,7 @@
           "Not showing presets for layer",
           flayer.layerDef.id,
           "as not displayed and featureSwitchFilter.data is set",
-          state.featureSwitches.featureSwitchFilter.data
+          state.featureSwitches.featureSwitchFilter.data,
         )
         // ...and we cannot enable the layer control -> we skip, as these presets can never be shown anyway
         continue
@@ -52,9 +55,9 @@
     for (const preset of layer.presets) {
       const tags = TagUtils.KVtoProperties(preset.tags ?? [])
 
-      const icon: BaseUIElement = layer.mapRendering[0]
-        .RenderIcon(new ImmutableStore<any>(tags))
-        .html.SetClass("w-12 h-12 block relative mr-4")
+      const markers = layer.mapRendering.map((mr, i) => mr.RenderIcon(new ImmutableStore<any>(tags), {noSize: i == 0})
+        .html.SetClass(i == 0 ? "w-full h-full" : ""))
+      const icon: BaseUIElement = new Combine(markers.map(m => new Combine([m]).SetClass("absolute top-0 left-0 w-full h-full flex justify-around items-center"))).SetClass("w-12 h-12 block relative mr-4")
 
       const description = preset.description?.FirstSentence()
 
@@ -66,7 +69,7 @@
         tags,
         text: Translations.t.general.add.addNew.Subs(
           { category: preset.title },
-          preset.title["context"]
+          preset.title["context"],
         ),
       }
       presets.push(simplified)
@@ -74,7 +77,13 @@
   }
 
   const dispatch = createEventDispatcher<{
-    select: { preset: PresetConfig; layer: LayerConfig; icon: string; tags: Record<string, string> }
+    select: {
+      preset: PresetConfig;
+      layer: LayerConfig;
+      icon: BaseUIElement;
+      tags: Record<string, string>,
+      text: Translation
+    }
   }>()
 </script>