Refactoring: port image link functionality to Svelte

src/Logic/ImageProviders/Mapillary.ts

@@ -86,7 +86,7 @@ export class Mapillary extends ImageProvider {
 
     public async DownloadAttribution(url: string): Promise<LicenseInfo> {
         const license = new LicenseInfo()
-        license.artist = "Contributor name unavailable"
+        license.artist = undefined
         license.license = "CC BY-SA 4.0"
         // license.license = "Creative Commons Attribution-ShareAlike 4.0 International License";
         license.attributionRequired = true

src/Logic/Osm/Actions/ChangeTagAction.ts

@@ -28,7 +28,7 @@ export default class ChangeTagAction extends OsmChangeAction {
         currentTags: Record<string, string>,
         meta: {
             theme: string
-            changeType: "answer" | "soft-delete" | "add-image" | string
+            changeType: "answer" | "soft-delete" | "add-image" | "link-image" | string
         }
     ) {
         super(elementId, true)

src/Logic/Osm/Actions/LinkPicture.ts

@@ -0,0 +1,32 @@
+import ChangeTagAction from "./ChangeTagAction"
+import { Tag } from "../../Tags/Tag"
+
+export default class LinkPicture extends ChangeTagAction {
+    /**
+     * Adds a link to an image
+     * @param elementId
+     * @param proposedKey: a key which might be used, typically `image`. If the key is already used with a different URL, `key+":0"` will be used instead (or a higher number if needed)
+     * @param url
+     * @param currentTags
+     * @param meta
+     *
+     */
+    constructor(
+        elementId: string,
+        proposedKey: "image" | "mapillary" | "wiki_commons" | string,
+        url: string,
+        currentTags: Record<string, string>,
+        meta: {
+            theme: string
+            changeType: "add-image" | "link-image"
+        }
+    ) {
+        let key = proposedKey
+        let i = 0
+        while (currentTags[key] !== undefined && currentTags[key] !== url) {
+            key = proposedKey + ":" + i
+            i++
+        }
+        super(elementId, new Tag(key, url), currentTags, meta)
+    }
+}

src/Logic/Web/NearbyImagesSearch.ts

@@ -0,0 +1,222 @@
+import { IndexedFeatureSource } from "../FeatureSource/FeatureSource"
+import { GeoOperations } from "../GeoOperations"
+import { ImmutableStore, Store, Stores, UIEventSource } from "../UIEventSource"
+import { Mapillary } from "../ImageProviders/Mapillary"
+import P4C from "pic4carto"
+import { Utils } from "../../Utils"
+export interface NearbyImageOptions {
+    lon: number
+    lat: number
+    // Radius of the upstream search
+    searchRadius?: 500 | number
+    maxDaysOld?: 1095 | number
+    blacklist: Store<{ url: string }[]>
+    shownImagesCount?: UIEventSource<number>
+    towardscenter?: UIEventSource<boolean>
+    allowSpherical?: UIEventSource<boolean>
+    // Radius of what is shown. Useless to select a value > searchRadius; defaults to searchRadius
+    shownRadius?: UIEventSource<number>
+}
+
+export interface P4CPicture {
+    pictureUrl: string
+    date?: number
+    coordinates: { lat: number; lng: number }
+    provider: "Mapillary" | string
+    author?
+    license?
+    detailsUrl?: string
+    direction?
+    osmTags?: object /*To copy straight into OSM!*/
+    thumbUrl: string
+    details: {
+        isSpherical: boolean
+    }
+}
+
+/**
+ * Uses Pic4wCarto to fetch nearby images from various providers
+ */
+export default class NearbyImagesSearch {
+    private static readonly services = [
+        "mapillary",
+        "flickr",
+        "openstreetcam",
+        "wikicommons",
+    ] as const
+
+    private individualStores
+    private readonly _store: UIEventSource<P4CPicture[]> = new UIEventSource<P4CPicture[]>([])
+    public readonly store: Store<P4CPicture[]> = this._store
+    private readonly _options: NearbyImageOptions
+
+    constructor(options: NearbyImageOptions, features: IndexedFeatureSource) {
+        this.individualStores = NearbyImagesSearch.services.map((s) =>
+            NearbyImagesSearch.buildPictureFetcher(options, s)
+        )
+        this._options = options
+        if (features !== undefined) {
+            const osmImages = new ImagesInLoadedDataFetcher(features).fetchAround({
+                lat: options.lat,
+                lon: options.lon,
+                searchRadius: options.searchRadius ?? 100,
+            })
+            this.individualStores.push(
+                new ImmutableStore({ images: osmImages, beforeFilter: osmImages.length })
+            )
+        }
+        for (const source of this.individualStores) {
+            source.addCallback(() => this.update())
+        }
+        this.update()
+    }
+
+    private static buildPictureFetcher(
+        options: NearbyImageOptions,
+        fetcher: "mapillary" | "flickr" | "openstreetcam" | "wikicommons"
+    ): Store<{ images: P4CPicture[]; beforeFilter: number }> {
+        const picManager = new P4C.PicturesManager({ usefetchers: [fetcher] })
+        const searchRadius = options.searchRadius ?? 100
+        const maxAgeSeconds = (options.maxDaysOld ?? 3 * 365) * 24 * 60 * 60 * 1000
+
+        const p4cStore = Stores.FromPromise<P4CPicture[]>(
+            picManager.startPicsRetrievalAround(
+                new P4C.LatLng(options.lat, options.lon),
+                searchRadius,
+                {
+                    mindate: new Date().getTime() - maxAgeSeconds,
+                    towardscenter: false,
+                }
+            )
+        )
+        return p4cStore.map(
+            (images) => {
+                if (images === undefined) {
+                    return undefined
+                }
+                const beforeFilterCount = images.length
+                if (!options?.allowSpherical?.data) {
+                    images = images?.filter((i) => i.details.isSpherical !== true)
+                }
+
+                const shownRadius = options?.shownRadius?.data ?? searchRadius
+                if (shownRadius !== searchRadius) {
+                    images = images.filter((i) => {
+                        const d = GeoOperations.distanceBetween(
+                            [i.coordinates.lng, i.coordinates.lat],
+                            [options.lon, options.lat]
+                        )
+                        return d <= shownRadius
+                    })
+                }
+                if (options.towardscenter?.data) {
+                    images = images.filter((i) => {
+                        if (i.direction === undefined || isNaN(i.direction)) {
+                            return false
+                        }
+                        const bearing = GeoOperations.bearing(
+                            [i.coordinates.lng, i.coordinates.lat],
+                            [options.lon, options.lat]
+                        )
+                        const diff = Math.abs((i.direction - bearing) % 360)
+                        return diff < 40
+                    })
+                }
+
+                images?.sort((a, b) => {
+                    const distanceA = GeoOperations.distanceBetween(
+                        [a.coordinates.lng, a.coordinates.lat],
+                        [options.lon, options.lat]
+                    )
+                    const distanceB = GeoOperations.distanceBetween(
+                        [b.coordinates.lng, b.coordinates.lat],
+                        [options.lon, options.lat]
+                    )
+                    return distanceA - distanceB
+                })
+
+                return { images, beforeFilter: beforeFilterCount }
+            },
+            [options.blacklist, options.allowSpherical, options.towardscenter, options.shownRadius]
+        )
+    }
+
+    private update() {
+        const seen: Set<string> = new Set<string>(this._options.blacklist.data.map((d) => d.url))
+        let beforeFilter = 0
+        let result: P4CPicture[] = []
+        for (const source of this.individualStores) {
+            const imgs = source.data
+            if (imgs === undefined) {
+                continue
+            }
+            beforeFilter = beforeFilter + imgs.beforeFilter
+            for (const img of imgs.images) {
+                if (seen.has(img.pictureUrl)) {
+                    continue
+                }
+                seen.add(img.pictureUrl)
+                result.push(img)
+            }
+        }
+        const c = [this._options.lon, this._options.lat]
+        result.sort((a, b) => {
+            const da = GeoOperations.distanceBetween([a.coordinates.lng, a.coordinates.lat], c)
+            const db = GeoOperations.distanceBetween([b.coordinates.lng, b.coordinates.lat], c)
+            return da - db
+        })
+        if (Utils.sameList(result, this._store.data)) {
+            //   return
+        }
+        this._store.setData(result)
+    }
+}
+
+/**
+ * Extracts pictures from currently loaded features
+ */
+class ImagesInLoadedDataFetcher {
+    private indexedFeatures: IndexedFeatureSource
+
+    constructor(indexedFeatures: IndexedFeatureSource) {
+        this.indexedFeatures = indexedFeatures
+    }
+
+    public fetchAround(loc: { lon: number; lat: number; searchRadius?: number }): P4CPicture[] {
+        const foundImages: P4CPicture[] = []
+        this.indexedFeatures.features.data.forEach((feature) => {
+            const props = feature.properties
+            const images = []
+            if (props.image) {
+                images.push(props.image)
+            }
+            for (let i = 0; i < 10; i++) {
+                if (props["image:" + i]) {
+                    images.push(props["image:" + i])
+                }
+            }
+            if (images.length == 0) {
+                return
+            }
+            const centerpoint = GeoOperations.centerpointCoordinates(feature)
+            const d = GeoOperations.distanceBetween(centerpoint, [loc.lon, loc.lat])
+            if (loc.searchRadius !== undefined && d > loc.searchRadius) {
+                return
+            }
+            for (const image of images) {
+                foundImages.push({
+                    pictureUrl: image,
+                    thumbUrl: image,
+                    coordinates: { lng: centerpoint[0], lat: centerpoint[1] },
+                    provider: "OpenStreetMap",
+                    details: {
+                        isSpherical: false,
+                    },
+                    osmTags: { image },
+                })
+            }
+        })
+
+        return foundImages
+    }
+}