Merge master

src/UI/Image/AttributedImage.svelte

@@ -13,6 +13,9 @@
   import { onDestroy } from "svelte"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import type { Feature, Point } from "geojson"
+  import Loading from "../Base/Loading.svelte"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
 
   export let image: Partial<ProvidedImage>
   let fallbackImage: string = undefined
@@ -30,7 +33,7 @@
   let showBigPreview = new UIEventSource(false)
   onDestroy(showBigPreview.addCallbackAndRun(shown => {
     if (!shown) {
-      previewedImage.set(false)
+      previewedImage.set(undefined)
     }
   }))
   onDestroy(previewedImage.addCallbackAndRun(previewedImage => {
@@ -49,12 +52,12 @@
       type: "Feature",
       properties: {
         id: image.id,
-        rotation: image.rotation
+        rotation: image.rotation,
       },
       geometry: {
         type: "Point",
-        coordinates: [image.lon, image.lat]
-      }
+        coordinates: [image.lon, image.lat],
+      },
     }
     console.log(f)
     state?.geocodedImages.set([f])
@@ -73,36 +76,45 @@
                  on:click={() => {console.log("Closing");previewedImage.set(undefined)}}></CloseButton>
   </div>
 </Popup>
-<div class="relative shrink-0">
-  <div class="relative w-fit"
-       on:mouseenter={() => highlight()}
-       on:mouseleave={() => highlight(false)}
-  >
-    <img
-      bind:this={imgEl}
-      on:load={() => (loaded = true)}
-      class={imgClass ?? ""}
-      class:cursor-zoom-in={canZoom}
-      on:click={() => {
+{#if image.status !== undefined && image.status !== "ready"}
+  <div class="h-full flex flex-col justify-center">
+    <Loading>
+      <Tr t={Translations.t.image.processing}/>
+    </Loading>
+  </div>
+{:else}
+  <div class="relative shrink-0">
+    <div class="relative w-fit"
+         on:mouseenter={() => highlight()}
+         on:mouseleave={() => highlight(false)}
+    >
+
+      <img
+        bind:this={imgEl}
+        on:load={() => (loaded = true)}
+        class={imgClass ?? ""}
+        class:cursor-zoom-in={canZoom}
+        on:click={() => {
         previewedImage?.set(image)
     }}
-      on:error={() => {
+        on:error={() => {
         if (fallbackImage) {
           imgEl.src = fallbackImage
         }
       }}
-      src={image.url}
-    />
+        src={image.url}
+      />
 
-    {#if canZoom && loaded}
-      <div
-        class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
-        on:click={() => previewedImage.set(image)}>
-        <MagnifyingGlassPlusIcon class="h-8 w-8 cursor-zoom-in pl-3 pb-3" color="white" />
-      </div>
-    {/if}
+      {#if canZoom && loaded}
+        <div
+          class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
+          on:click={() => previewedImage.set(image)}>
+          <MagnifyingGlassPlusIcon class="h-8 w-8 cursor-zoom-in pl-3 pb-3" color="white" />
+        </div>
+      {/if}
+    </div>
+    <div class="absolute bottom-0 left-0">
+      <ImageAttribution {image} {attributionFormat} />
+    </div>
   </div>
-  <div class="absolute bottom-0 left-0">
-    <ImageAttribution {image} {attributionFormat} />
-  </div>
-</div>
+{/if}

src/UI/Image/ImageCarousel.ts

@@ -31,7 +31,7 @@ export class ImageCarousel extends Toggle {
                             image: url,
                             state,
                             previewedImage: state?.previewedImage,
-                        })
+                        }).SetClass("h-full")
 
                         if (url.key !== undefined) {
                             image = new Combine([
@@ -42,8 +42,8 @@ export class ImageCarousel extends Toggle {
                             ]).SetClass("relative")
                         }
                         image
-                            .SetClass("w-full block cursor-zoom-in")
-                            .SetStyle("min-width: 50px; background: grey;")
+                            .SetClass("w-full h-full block cursor-zoom-in low-interaction")
+                            .SetStyle("min-width: 50px;")
                         uiElements.push(image)
                     } catch (e) {
                         console.error("Could not generate image element for", url.url, "due to", e)

src/UI/Image/UploadImage.svelte

@@ -83,16 +83,6 @@
       </div>
     </FileSelector>
     <div class="text-sm">
-      <button
-        class="as-link"
-        style="margin: 0; padding: 0"
-        on:click={() => {
-          state.guistate.openUsersettings("picture-license")
-        }}
-      >
-        <Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
-      </button>
-      <br />
       <Tr cls="subtle italic" t={t.respectPrivacy} />
     </div>
   </div>

src/UI/SpecialVisualization.ts

@@ -15,7 +15,6 @@ import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
 import { MenuState } from "../Models/MenuState"
 import OsmObjectDownloader from "../Logic/Osm/OsmObjectDownloader"
 import { ImageUploadManager } from "../Logic/ImageProviders/ImageUploadManager"
-import { OsmTags } from "../Models/OsmFeature"
 import FavouritesFeatureSource from "../Logic/FeatureSource/Sources/FavouritesFeatureSource"
 import { ProvidedImage } from "../Logic/ImageProviders/ImageProvider"
 import GeoLocationHandler from "../Logic/Actors/GeoLocationHandler"
@@ -27,6 +26,7 @@ import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
 import SearchState from "../Logic/State/SearchState"
 import UserRelatedState, { OptionallySyncedHistory } from "../Logic/State/UserRelatedState"
 import GeocodeResult from "./Search/GeocodeResult.svelte"
+import FeaturePropertiesStore from "../Logic/FeatureSource/Actors/FeaturePropertiesStore"
 
 /**
  * The state needed to render a special Visualisation.
@@ -37,10 +37,8 @@ export interface SpecialVisualizationState {
     readonly featureSwitches: FeatureSwitchState
 
     readonly layerState: LayerState
-    readonly featureProperties: {
-        getStore(id: string): UIEventSource<Record<string, string>>,
-        trackFeature?(feature: { properties: OsmTags })
-    }
+    readonly featureSummary: SummaryTileSourceRewriter
+    readonly featureProperties: FeaturePropertiesStore
 
     readonly indexedFeatures: IndexedFeatureSource & LayoutSource
     /**

src/UI/SpecialVisualizations.ts

@@ -714,7 +714,7 @@ export default class SpecialVisualizations {
                     },
                 ],
                 constr: (state, tags, args) => {
-                    const targetKey = args[0] === "" ? undefined : args[0]
+                        const targetKey = args[0] === "" ? undefined : args[0]
                     return new SvelteUIElement(UploadImage, {
                         state,
                         tags,