Fix unit tests (no doctests yet)

Logic/SimpleMetaTagger.ts

@@ -58,6 +58,49 @@ export class SimpleMetaTagger {
     }
 }
 
+export class ReferencingWaysMetaTagger extends SimpleMetaTagger {
+    /**
+     * Disable this metatagger, e.g. for caching or tests
+     * This is a bit a work-around
+     */
+    public static enabled = true
+    constructor() {
+        super(
+            {
+                keys: ["_referencing_ways"],
+                isLazy: true,
+                doc: "_referencing_ways contains - for a node - which ways use this this node as point in their geometry. ",
+            },
+            (feature, _, __, state) => {
+                if (!ReferencingWaysMetaTagger.enabled) {
+                    return false
+                }
+                //this function has some extra code to make it work in SimpleAddUI.ts to also work for newly added points
+                const id = feature.properties.id
+                if (!id.startsWith("node/")) {
+                    return false
+                }
+                console.trace("Downloading referencing ways for", feature.properties.id)
+                OsmObject.DownloadReferencingWays(id).then((referencingWays) => {
+                    const currentTagsSource = state.allElements?.getEventSourceById(id) ?? []
+                    const wayIds = referencingWays.map((w) => "way/" + w.id)
+                    wayIds.sort()
+                    const wayIdsStr = wayIds.join(";")
+                    if (
+                        wayIdsStr !== "" &&
+                        currentTagsSource.data["_referencing_ways"] !== wayIdsStr
+                    ) {
+                        currentTagsSource.data["_referencing_ways"] = wayIdsStr
+                        currentTagsSource.ping()
+                    }
+                })
+
+                return true
+            }
+        )
+    }
+}
+
 export class CountryTagger extends SimpleMetaTagger {
     private static readonly coder = new CountryCoder(
         Constants.countryCoderEndpoint,
@@ -492,33 +535,7 @@ export default class SimpleMetaTaggers {
         }
     )
 
-    public static referencingWays = new SimpleMetaTagger(
-        {
-            keys: ["_referencing_ways"],
-            isLazy: true,
-            includesDates: true,
-            doc: "_referencing_ways contains - for a node - which ways use this this node as point in their geometry. ",
-        },
-        (feature, _, __, state) => {
-            //this function has some extra code to make it work in SimpleAddUI.ts to also work for newly added points
-            const id = feature.properties.id
-            if (!id.startsWith("node/")) {
-                return false
-            }
-            OsmObject.DownloadReferencingWays(id).then((referencingWays) => {
-                const currentTagsSource = state.allElements?.getEventSourceById(id) ?? []
-                const wayIds = referencingWays.map((w) => "way/" + w.id)
-                wayIds.sort()
-                const wayIdsStr = wayIds.join(";")
-                if (wayIdsStr !== "" && currentTagsSource.data["_referencing_ways"] !== wayIdsStr) {
-                    currentTagsSource.data["_referencing_ways"] = wayIdsStr
-                    currentTagsSource.ping()
-                }
-            })
-
-            return true
-        }
-    )
+    public static referencingWays = new ReferencingWaysMetaTagger()
 
     public static metatags: SimpleMetaTagger[] = [
         SimpleMetaTaggers.latlon,

Models/ThemeConfig/Conversion/FixImages.ts

@@ -15,7 +15,11 @@ export class ExtractImages extends Conversion<
     private static readonly layoutMetaPaths = metapaths.filter(
         (mp) =>
             ExtractImages.mightBeTagRendering(<any>mp) ||
-            (mp.typeHint !== undefined && (mp.typeHint === "image" || mp.typeHint === "icon"))
+            (mp.typeHint !== undefined &&
+                (mp.typeHint === "image" ||
+                    mp.typeHint === "icon" ||
+                    mp.typeHint === "image[]" ||
+                    mp.typeHint === "icon[]"))
     )
     private static readonly tagRenderingMetaPaths = tagrenderingmetapaths
 
@@ -172,7 +176,13 @@ export class ExtractImages extends Conversion<
                         )
                         continue
                     }
-                    allFoundImages.push(foundElement.leaf)
+                    if (typeof foundElement.leaf !== "string") {
+                        continue
+                    }
+                    allFoundImages.push({
+                        context: context + "." + foundElement.path.join("."),
+                        path: foundElement.leaf,
+                    })
                 }
             }
         }

UI/Base/SubtleButton.svelte

@@ -52,12 +52,14 @@
 
 <svelte:element
   this={options?.url == undefined ? "span" : "a"}
-  class={options.extraClasses}
+  class={(options.extraClasses??"") + ' hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle'}
   target={options?.newTab ? "_blank" : ""}
   {href}
 >
   <slot name="image">
-    <template bind:this={imgElem} />
+    {#if imgElem}
+      <template bind:this={imgElem} />
+      {/if}
   </slot>
   <slot name="message">
     <template bind:this={msgElem} />
@@ -67,9 +69,9 @@
 <style lang="scss">
   span,
   a {
-    @apply flex p-3 my-2 rounded-lg hover:shadow-xl transition-[color,background-color,box-shadow];
+    @apply flex p-3 my-2 rounded-lg ;
     @apply items-center w-full no-underline;
-    @apply bg-subtle text-black hover:bg-unsubtle;
+    @apply bg-subtle text-black;
 
     :global(img) {
       @apply block justify-center flex-none mr-4 h-11 w-11;

UI/BigComponents/ThemesList.svelte

@@ -54,18 +54,34 @@
 
 <section>
   <slot name="title" />
-  <div class:gridview={onMainScreen}>
-    {#if ($search === undefined || $search === "") && !isCustom}
-      <CustomGeneratorButton userDetails={state.osmConnection.userDetails} />
-      <ProfessionalServicesButton />
-    {/if}
-
-    {#each filteredThemes as theme}
-      {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
-        <ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} />
+  {#if onMainScreen}
+    <div class="md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {#if ($search === undefined || $search === "") && !isCustom}
+        <CustomGeneratorButton userDetails={state.osmConnection.userDetails} />
+        <ProfessionalServicesButton />
       {/if}
-    {/each}
-  </div>
+
+      {#each filteredThemes as theme}
+        {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
+          <ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} />
+        {/if}
+      {/each}
+    </div>
+    {:else }
+    <div>
+      {#if ($search === undefined || $search === "") && !isCustom}
+        <CustomGeneratorButton userDetails={state.osmConnection.userDetails} />
+        <ProfessionalServicesButton />
+      {/if}
+
+      {#each filteredThemes as theme}
+        {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
+          <ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} />
+        {/if}
+      {/each}
+    </div>
+    {/if}
+ 
 
   {#if filteredThemes.length == 0}
     <NoThemeResultButton {search} />
@@ -75,9 +91,5 @@
 <style lang="scss">
   section {
     @apply flex flex-col;
-
-    div.gridview {
-      @apply md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 gap-4;
-    }
   }
 </style>

css/index-tailwind-output.css

@@ -862,6 +862,10 @@ video {
   margin-bottom: 6rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -910,10 +914,6 @@ video {
   margin-bottom: 2rem;
 }
 
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1027,6 +1027,10 @@ video {
   height: 50%;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1047,10 +1051,6 @@ video {
   height: 0px;
 }
 
-.h-3 {
-  height: 0.75rem;
-}
-
 .h-48 {
   height: 12rem;
 }
@@ -1071,6 +1071,10 @@ video {
   max-height: 2rem;
 }
 
+.min-h-\[8rem\] {
+  min-height: 8rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1115,6 +1119,10 @@ video {
   width: 0px;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-screen {
   width: 100vw;
 }
@@ -1438,11 +1446,6 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1458,6 +1461,11 @@ video {
   border-color: rgb(132 204 22 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -1744,11 +1752,6 @@ video {
   letter-spacing: -0.025em;
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1774,16 +1777,21 @@ video {
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
+.text-\[\#999\] {
+  --tw-text-opacity: 1;
+  color: rgb(153 153 153 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
 
-.line-through {
-  text-decoration-line: line-through;
+.overline {
+  text-decoration-line: overline;
 }
 
-.no-underline {
-  text-decoration-line: none;
+.line-through {
+  text-decoration-line: line-through;
 }
 
 .opacity-50 {
@@ -1854,6 +1862,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-\[color\2c background-color\2c box-shadow\] {
+  transition-property: color,background-color,box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2610,6 +2624,11 @@ input {
   margin-left: 1.5rem;
 }
 
+.hover\:bg-unsubtle:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(199 210 254 / var(--tw-bg-opacity));
@@ -2630,6 +2649,11 @@ input {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:bg-unsubtle:hover {
+  background-color: var(--unsubtle-detail-color);
+  color: var(--unsubtle-detail-color-contrast);
+}
+
 @media (min-width: 640px) {
   .sm\:top-3 {
     top: 0.75rem;

scripts/generateCache.ts

@@ -21,7 +21,7 @@ import StaticFeatureSource from "../Logic/FeatureSource/Sources/StaticFeatureSou
 import TiledFeatureSource from "../Logic/FeatureSource/TiledFeatureSource/TiledFeatureSource"
 import Constants from "../Models/Constants"
 import { GeoOperations } from "../Logic/GeoOperations"
-import SimpleMetaTaggers from "../Logic/SimpleMetaTagger"
+import SimpleMetaTaggers, { ReferencingWaysMetaTagger } from "../Logic/SimpleMetaTagger"
 import FilteringFeatureSource from "../Logic/FeatureSource/Sources/FilteringFeatureSource"
 import Loc from "../Models/Loc"
 
@@ -474,6 +474,7 @@ function sliceToTiles(
 
 export async function main(args: string[]) {
     console.log("Cache builder started with args ", args.join(", "))
+    ReferencingWaysMetaTagger.enabled = false
     if (args.length < 6) {
         console.error(
             "Expected arguments are: theme zoomlevel targetdirectory lat0 lon0 lat1 lon1 [--generate-point-overview layer-name,layer-name,...] [--force-zoom-level z] \n" +

test/Models/ThemeConfig/Conversion/PrepareLayer.spec.ts

@@ -102,7 +102,7 @@ describe("PrepareLayer", () => {
                     offset: 6,
                 },
             ],
-            titleIcons: [{ render: "iconsdefaults", id: "icons.defaults" }],
+            titleIcons: [{ render: "icons.defaults", id: "iconsdefaults" }],
         }
 
         expect(result).toEqual(expected)

test/Models/ThemeConfig/Conversion/PrepareTheme.spec.ts

@@ -3,10 +3,10 @@ import { LayerConfigJson } from "../../../../Models/ThemeConfig/Json/LayerConfig
 import { PrepareTheme } from "../../../../Models/ThemeConfig/Conversion/PrepareTheme"
 import { TagRenderingConfigJson } from "../../../../Models/ThemeConfig/Json/TagRenderingConfigJson"
 import LayoutConfig from "../../../../Models/ThemeConfig/LayoutConfig"
-import * as bookcaseLayer from "../../../../assets/generated/layers/public_bookcase.json"
+import bookcaseLayer from "../../../../assets/generated/layers/public_bookcase.json"
 import LayerConfig from "../../../../Models/ThemeConfig/LayerConfig"
 import { ExtractImages } from "../../../../Models/ThemeConfig/Conversion/FixImages"
-import * as cyclofix from "../../../../assets/generated/themes/cyclofix.json"
+import cyclofix from "../../../../assets/generated/themes/cyclofix.json"
 import { Tag } from "../../../../Logic/Tags/Tag"
 import { DesugaringContext } from "../../../../Models/ThemeConfig/Conversion/Conversion"
 import { And } from "../../../../Logic/Tags/And"
@@ -37,7 +37,7 @@ const themeConfigJson: LayoutConfigJson = {
 describe("PrepareTheme", () => {
     it("should substitute layers", () => {
         const sharedLayers = new Map<string, LayerConfigJson>()
-        sharedLayers.set("public_bookcase", bookcaseLayer["default"])
+        sharedLayers.set("public_bookcase", bookcaseLayer)
         const theme = { ...themeConfigJson, layers: ["public_bookcase"] }
         const prepareStep = new PrepareTheme({
             tagRenderings: new Map<string, TagRenderingConfigJson>(),
@@ -55,7 +55,7 @@ describe("PrepareTheme", () => {
 
     it("should apply override", () => {
         const sharedLayers = new Map<string, LayerConfigJson>()
-        sharedLayers.set("public_bookcase", bookcaseLayer["default"])
+        sharedLayers.set("public_bookcase", bookcaseLayer)
         let themeConfigJsonPrepared = new PrepareTheme({
             tagRenderings: new Map<string, TagRenderingConfigJson>(),
             sharedLayers: sharedLayers,
@@ -69,7 +69,7 @@ describe("PrepareTheme", () => {
 
     it("should apply override", () => {
         const sharedLayers = new Map<string, LayerConfigJson>()
-        sharedLayers.set("public_bookcase", bookcaseLayer["default"])
+        sharedLayers.set("public_bookcase", bookcaseLayer)
         let themeConfigJsonPrepared = new PrepareTheme({
             tagRenderings: new Map<string, TagRenderingConfigJson>(),
             sharedLayers: sharedLayers,
@@ -141,8 +141,10 @@ describe("PrepareTheme", () => {
 
 describe("ExtractImages", () => {
     it("should find all images in a themefile", () => {
-        const images = new Set(
-            new ExtractImages(true, new Set<string>()).convertStrict(<any>cyclofix, "test")
+        const images = new Set<string>(
+            new ExtractImages(true, new Set<string>())
+                .convertStrict(<any>cyclofix, "test")
+                .map((x) => x.path)
         )
         const expectedValues = [
             "./assets/layers/bike_repair_station/repair_station.svg",
@@ -157,7 +159,11 @@ describe("ExtractImages", () => {
             "close",
         ]
         for (const expected of expectedValues) {
-            expect(images).toEqual(expect.arrayContaining([expected]))
+            if (!images.has(expected)) {
+                expect.fail(
+                    "Image " + expected + " not found (has:" + Array.from(images).join(",") + ")"
+                )
+            }
         }
     })
 })

test/testhooks.ts

@@ -3,11 +3,12 @@ import { Utils } from "../Utils"
 import * as fakedom from "fake-dom"
 import Locale from "../UI/i18n/Locale"
 import { beforeEach } from "vitest"
+import { ReferencingWaysMetaTagger } from "../Logic/SimpleMetaTagger"
 
 beforeEach(async () => {
     ScriptUtils.fixUtils()
     Locale.language.setData("en")
-
+    ReferencingWaysMetaTagger.enabled = false
     if (fakedom === undefined || window === undefined) {
         throw "FakeDom not initialized"
     }