refactoring: move logic of lastclick into special layer, fix labels, fix anchoring

UI/Popup/NearbyImageVis.ts

@@ -18,6 +18,8 @@ import Toggle from "../Input/Toggle"
 import Title from "../Base/Title"
 import { MapillaryLinkVis } from "./MapillaryLinkVis"
 import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"
+import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import { Feature } from "geojson"
 
 export class NearbyImageVis implements SpecialVisualization {
     args: { name: string; defaultValue?: string; doc: string; required?: boolean }[] = [
@@ -39,11 +41,12 @@ export class NearbyImageVis implements SpecialVisualization {
     constr(
         state: SpecialVisualizationState,
         tagSource: UIEventSource<Record<string, string>>,
-        args: string[]
+        args: string[],
+        feature: Feature,
+        layer: LayerConfig
     ): BaseUIElement {
         const t = Translations.t.image.nearbyPictures
         const mode: "open" | "expandable" | "collapsable" = <any>args[0]
-        const feature = state.indexedFeatures.featuresById.data.get(tagSource.data.id)
         const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
         const id: string = tagSource.data["id"]
         const canBeEdited: boolean = !!id?.match("(node|way|relation)/-?[0-9]+")
@@ -128,7 +131,7 @@ export class NearbyImageVis implements SpecialVisualization {
                 slideshow,
                 controls,
                 saveButton,
-                new MapillaryLinkVis().constr(state, tagSource, []).SetClass("mt-6"),
+                new MapillaryLinkVis().constr(state, tagSource, [], feature).SetClass("mt-6"),
             ])
         })
 

UI/Popup/TagRendering/Inline.svelte

@@ -4,6 +4,7 @@
   import { onDestroy } from "svelte";
   import { Translation } from "../../i18n/Translation";
   import Locale from "../../i18n/Locale";
+  import FromHtml from "../../Base/FromHtml.svelte";
 
   export let template: Translation;
   let _template: string
@@ -20,7 +21,7 @@
 </script>
 
 <span>
-  {Utils.SubstituteKeys(before, _tags)}
+  <FromHtml src={Utils.SubstituteKeys(before, _tags)}/>
   <slot />
-  {Utils.SubstituteKeys(after, _tags)}
+  <FromHtml src={Utils.SubstituteKeys(after, _tags)}/>
 </span>

UI/Popup/TagRendering/Questionbox.svelte

@@ -41,10 +41,7 @@
     return true;
   }
 
-  console.log("Got layer", layer, onlyForLabels, notForLabels);
-
   const baseQuestions = (layer.tagRenderings ?? [])?.filter(tr => allowed(tr.labels) && tr.question !== undefined);
-  console.log("BaseQuestions are", baseQuestions);
   let skippedQuestions = new UIEventSource<Set<string>>(new Set<string>());
 
   let questionsToAsk = tags.map(tags => {

UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -15,6 +15,7 @@
   import { createEventDispatcher } from "svelte";
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
   import { ExclamationIcon } from "@rgossiaux/svelte-heroicons/solid";
+  import SpecialTranslation from "./SpecialTranslation.svelte";
 
   export let config: TagRenderingConfig;
   export let tags: UIEventSource<Record<string, string>>;
@@ -86,15 +87,15 @@
   <div class="border border-black subtle-background flex flex-col">
     <If condition={state.featureSwitchIsTesting}>
       <div class="flex justify-between">
-        <Tr t={config.question}></Tr>
+        <SpecialTranslation t={config.question} {tags} {state} {layer} feature={selectedElement}></SpecialTranslation>
         <span class="alert">{config.id}</span>
       </div>
-      <Tr slot="else" t={config.question}></Tr>
+      <SpecialTranslation slot="else" t={config.question} {tags} {state} {layer} feature={selectedElement}></SpecialTranslation>
     </If>
 
     {#if config.questionhint}
       <div class="subtle">
-        <Tr t={config.questionHint}></Tr>
+        <SpecialTranslation t={config.questionhint} {tags} {state} {layer} feature={selectedElement}></SpecialTranslation>
       </div>
     {/if}