From 2b3e3257fd945cb65dcb50e2e27762a182759a95 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 23 Jan 2025 12:29:54 +0100 Subject: [PATCH] Refactoring(menuState): PreviewedImage is now a static property --- src/Models/MenuState.ts | 37 +++++++++++++++++--- src/Models/ThemeViewState/WithImageState.ts | 5 ++- src/UI/Comparison/ComparisonTable.svelte | 1 - src/UI/Image/AttributedImage.svelte | 8 ++--- src/UI/Image/DeletableImage.svelte | 1 - src/UI/Image/LinkableImage.svelte | 1 - src/UI/Popup/Notes/NoteCommentElement.svelte | 1 - 7 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/Models/MenuState.ts b/src/Models/MenuState.ts index a7b43523ed..60587f7fe2 100644 --- a/src/Models/MenuState.ts +++ b/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 = new UIEventSource(undefined) + public readonly pageStates: Record> public readonly highlightedLayerInFilters: UIEventSource = new UIEventSource( undefined ) public highlightedUserSetting: UIEventSource = new UIEventSource(undefined) + private readonly _selectedElement: UIEventSource - constructor(shouldShowWelcomeMessage: boolean, themeid: string) { + constructor(selectedElement: UIEventSource) { + 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( 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 } + } } diff --git a/src/Models/ThemeViewState/WithImageState.ts b/src/Models/ThemeViewState/WithImageState.ts index f84e645f52..aaed7ddb38 100644 --- a/src/Models/ThemeViewState/WithImageState.ts +++ b/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) { + constructor(layout: ThemeConfig, mvtAvailableLayers: Store>) { 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 diff --git a/src/UI/Comparison/ComparisonTable.svelte b/src/UI/Comparison/ComparisonTable.svelte index d35c4b43f4..e676866657 100644 --- a/src/UI/Comparison/ComparisonTable.svelte +++ b/src/UI/Comparison/ComparisonTable.svelte @@ -141,7 +141,6 @@ {state} imgClass="h-32 shrink-0" image={{ url: image, id: image }} - previewedImage={state.previewedImage} /> {/each} diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte index 6b8c16f3ea..d3ec413134 100644 --- a/src/UI/Image/AttributedImage.svelte +++ b/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 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> = undefined + let previewedImage: UIEventSource> = 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]) } - +
@@ -87,7 +87,6 @@ { - 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={() => { diff --git a/src/UI/Image/DeletableImage.svelte b/src/UI/Image/DeletableImage.svelte index 238d895a94..4921ae8620 100644 --- a/src/UI/Image/DeletableImage.svelte +++ b/src/UI/Image/DeletableImage.svelte @@ -149,7 +149,6 @@ imgClass="carousel-max-height" {image} {state} - previewedImage={state?.previewedImage} >