Refactoring(menuState): PreviewedImage is now a static property

src/Models/MenuState.ts

@@ -14,6 +14,7 @@ export type PageType = (typeof MenuState.pageNames)[number]
  * Some convenience methods are provided for this as well
  */
 export class MenuState {
+
     public static readonly pageNames = [
         "copyright",
         "copyright_icons",
@@ -27,17 +28,25 @@ export class MenuState {
         "favourites",
         "usersettings",
         "share",
-        "menu",
+        "menu"
     ] as const
 
+    /**
+     * Contains the 'providedImage' which is currently displayed on top of the UI
+     * This object merely acts as lock or as means to signal the need to close
+     */
+    public static readonly previewedImage: UIEventSource<object> = new UIEventSource<object>(undefined)
+
     public readonly pageStates: Record<PageType, UIEventSource<boolean>>
 
     public readonly highlightedLayerInFilters: UIEventSource<string> = new UIEventSource<string>(
         undefined
     )
     public highlightedUserSetting: UIEventSource<string> = new UIEventSource<string>(undefined)
+    private readonly _selectedElement: UIEventSource<any>
 
-    constructor(shouldShowWelcomeMessage: boolean, themeid: string) {
+    constructor(selectedElement: UIEventSource<any>) {
+        this._selectedElement = selectedElement
         // Note: this class is _not_ responsible to update the Hash, @see ThemeViewStateHashActor for this
         const states = {}
         for (const pageName of MenuState.pageNames) {
@@ -56,7 +65,9 @@ export class MenuState {
                 }
             })
         }
+    }
 
+    public openMenuIfNeeded(shouldShowWelcomeMessage: boolean, themeid: string) {
         const visitedBefore = LocalStorageSource.getParsed<boolean>(
             themeid + "thememenuisopened",
             false
@@ -103,6 +114,12 @@ export class MenuState {
     }
 
     public isSomethingOpen(): boolean {
+        if (MenuState.previewedImage.data !== undefined) {
+            return true
+        }
+        if (this._selectedElement.data) {
+            return true
+        }
         return Object.values(this.pageStates).some((t) => t.data)
     }
 
@@ -111,7 +128,18 @@ export class MenuState {
      * Returns 'true' if at least one menu was opened
      */
     public closeAll(): boolean {
+        console.log("Closing all")
         const ps = this.pageStates
+        if (ps.menu.data) {
+            ps.menu.set(false)
+            return true
+        }
+
+        if (MenuState.previewedImage.data !== undefined) {
+            MenuState.previewedImage.setData(undefined)
+            return true
+        }
+
         for (const key in ps) {
             const toggle = ps[key]
             const wasOpen = toggle.data
@@ -120,9 +148,10 @@ export class MenuState {
                 return true
             }
         }
-        if (ps.menu.data) {
-            ps.menu.set(false)
+        if (this._selectedElement.data) {
+            this._selectedElement.setData(undefined)
             return true
         }
+
     }
 }

src/Models/ThemeViewState/WithImageState.ts

@@ -1,5 +1,5 @@
 import { ImageUploadManager } from "../../Logic/ImageProviders/ImageUploadManager"
-import { UIEventSource } from "../../Logic/UIEventSource"
+import { Store, UIEventSource } from "../../Logic/UIEventSource"
 import { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
 import { CombinedFetcher } from "../../Logic/Web/NearbyImagesSearch"
 import ThemeConfig from "../ThemeConfig/ThemeConfig"
@@ -18,7 +18,7 @@ export class WithImageState extends WithGuiState implements SpecialVisualization
     readonly nearbyImageSearcher: CombinedFetcher
 
 
-    constructor(layout: ThemeConfig, mvtAvailableLayers: Set<string>) {
+    constructor(layout: ThemeConfig, mvtAvailableLayers: Store<Set<string>>) {
         super(layout, mvtAvailableLayers)
         this.imageUploadManager = new ImageUploadManager(
             layout,
@@ -56,7 +56,6 @@ export class WithImageState extends WithGuiState implements SpecialVisualization
     private initActors() {
 
         new ThemeViewStateHashActor({
-            previewedImage: this.previewedImage,
             selectedElement: this.selectedElement,
             indexedFeatures: this.indexedFeatures,
             guistate: this.guistate

src/UI/Comparison/ComparisonTable.svelte

@@ -141,7 +141,6 @@
               {state}
               imgClass="h-32 shrink-0"
               image={{ url: image, id: image }}
-              previewedImage={state.previewedImage}
             />
           </div>
         {/each}

src/UI/Image/AttributedImage.svelte

@@ -18,6 +18,7 @@
   import Tr from "../Base/Tr.svelte"
   import DotMenu from "../Base/DotMenu.svelte"
   import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
+  import { MenuState } from "../../Models/MenuState"
 
   export let image: Partial<ProvidedImage>
   let fallbackImage: string = undefined
@@ -29,7 +30,7 @@
   export let imgClass: string = undefined
   export let state: SpecialVisualizationState = undefined
   export let attributionFormat: "minimal" | "medium" | "large" = "medium"
-  export let previewedImage: UIEventSource<Partial<ProvidedImage>> = undefined
+  let previewedImage: UIEventSource<Partial<ProvidedImage>> = MenuState.previewedImage
   export let canZoom = previewedImage !== undefined
   let loaded = false
   let showBigPreview = new UIEventSource(false)
@@ -70,12 +71,11 @@
         coordinates: [image.lon, image.lat],
       },
     }
-    console.log(f)
     state?.geocodedImages.set([f])
   }
 </script>
 
-<Popup shown={showBigPreview} bodyPadding="p-0" dismissable={true}>
+<Popup shown={showBigPreview} bodyPadding="p-0" dismissable={false}>
   <div slot="close" />
   <div style="height: 80vh">
     <ImageOperations {image}>
@@ -87,7 +87,6 @@
     <CloseButton
       class="normal-background"
       on:click={() => {
-        console.log("Closing")
         previewedImage?.set(undefined)
       }}
     />
@@ -122,7 +121,6 @@
         class={imgClass ?? ""}
         class:cursor-zoom-in={canZoom}
         on:click={() => {
-          console.log("Setting", image.url)
           previewedImage?.set(image)
         }}
         on:error={() => {

src/UI/Image/DeletableImage.svelte

@@ -149,7 +149,6 @@
       imgClass="carousel-max-height"
       {image}
       {state}
-      previewedImage={state?.previewedImage}
     >
       <svelte:fragment slot="dot-menu-actions">
         <button on:click={() => ImageProvider.offerImageAsDownload(image)}>

src/UI/Image/LinkableImage.svelte

@@ -87,7 +87,6 @@
     {state}
     image={providedImage}
     imgClass="max-h-64 w-auto sm:h-32 md:h-64"
-    previewedImage={state.previewedImage}
     attributionFormat="minimal"
   >
     <!--

src/UI/Popup/Notes/NoteCommentElement.svelte

@@ -87,7 +87,6 @@
           {state}
           {image}
           imgClass="max-h-64 w-auto sm:h-32 md:h-64"
-          previewedImage={state.previewedImage}
           attributionFormat="minimal"
         />
       {/each}