Mannivu/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: put all special visualisations into their own class, add their location into the documentation

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-06-26 05:20:12 +02:00
parent c0e7c9e8fa
commit ae5205f92d
29 changed files with 2270 additions and 2075 deletions
Download patch file Download diff file Expand all files Collapse all files

148
src/UI/SpecialVisualisations/ImageVisualisations.ts
View file

@ -2,7 +2,6 @@ import { SpecialVisualizationState, SpecialVisualizationSvelte } from "../Specia
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
import SvelteUIElement from "../Base/SvelteUIElement"
import ImageCarousel from "../Image/ImageCarousel.svelte"
import { Imgur } from "../../Logic/ImageProviders/Imgur"
import UploadImage from "../Image/UploadImage.svelte"
import { CombinedFetcher } from "../../Logic/Web/NearbyImagesSearch"
import { UIEventSource } from "../../Logic/UIEventSource"
@ -11,8 +10,9 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { GeoOperations } from "../../Logic/GeoOperations"
import NearbyImages from "../Image/NearbyImages.svelte"
import NearbyImagesCollapsed from "../Image/NearbyImagesCollapsed.svelte"
import Constants from "../../Models/Constants"
class NearbyImageVis implements SpecialVisualizationSvelte {
class NearbyImageVis extends SpecialVisualizationSvelte {
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
args = [
{
@ -54,79 +54,85 @@ class NearbyImageVis implements SpecialVisualizationSvelte {
}
}
class ImageCarouselVis extends SpecialVisualizationSvelte {
funcName = "image_carousel"
group = "images"
docs = "Creates an image carousel for the given sources. An attempt will be made to guess what source is used. Supported: Wikidata identifiers, Wikipedia pages, Wikimedia categories, IMGUR (with attribution, direct links)"
args = [
{
name: "image_key",
type: "key",
defaultValue: AllImageProviders.defaultKeys.join(";"),
doc: "The keys given to the images, e.g. if <span class='literal-code'>image</span> is given, the first picture URL will be added as <span class='literal-code'>image</span>, the second as <span class='literal-code'>image:0</span>, the third as <span class='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated ",
},
]
needsUrls = AllImageProviders.apiUrls
constr(state, tags, args, feature) {
let imagePrefixes: string[] = undefined
if (args.length > 0) {
imagePrefixes = [].concat(...args.map((a) => a.split(";")))
}
const images = AllImageProviders.loadImagesFor(tags, imagePrefixes)
const estimated = tags.mapD((tags) =>
AllImageProviders.estimateNumberOfImages(tags, imagePrefixes),
)
return new SvelteUIElement(ImageCarousel, {
state,
tags,
images,
estimated,
feature,
})
}
}
class ImageUpload extends SpecialVisualizationSvelte {
funcName = "image_upload"
group = "images"
docs = "Creates a button where a user can upload an image to panoramax"
needsUrls = [Constants.panoramax.url]
args = [
{
type: "key",
name: "image_key",
doc: "Image tag to add the URL to (or image-tag:0, image-tag:1 when multiple images are added)",
defaultValue: "panoramax",
required: false,
},
{
name: "label",
doc: "The text to show on the button",
required: false,
},
{
name: "disable_blur",
doc: "If set to 'true' or 'yes', then face blurring will be disabled. To be used sparingly",
required: false,
},
]
constr(state, tags, args, feature) {
const targetKey = args[0] === "" ? undefined : args[0]
const noBlur = args[3]?.toLowerCase()?.trim()
return new SvelteUIElement(UploadImage, {
state,
tags,
targetKey,
feature,
labelText: args[1],
image: args[2],
noBlur: noBlur === "true" || noBlur === "yes",
})
}
}
export class ImageVisualisations {
static initList(): SpecialVisualizationSvelte[] {
return [
new NearbyImageVis(),
{
funcName: "image_carousel",
group: "images",
docs: "Creates an image carousel for the given sources. An attempt will be made to guess what source is used. Supported: Wikidata identifiers, Wikipedia pages, Wikimedia categories, IMGUR (with attribution, direct links)",
args: [
{
name: "image_key",
type: "key",
defaultValue: AllImageProviders.defaultKeys.join(";"),
doc: "The keys given to the images, e.g. if <span class='literal-code'>image</span> is given, the first picture URL will be added as <span class='literal-code'>image</span>, the second as <span class='literal-code'>image:0</span>, the third as <span class='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated ",
},
],
needsUrls: AllImageProviders.apiUrls,
constr: (state, tags, args, feature) => {
let imagePrefixes: string[] = undefined
if (args.length > 0) {
imagePrefixes = [].concat(...args.map((a) => a.split(";")))
}
const images = AllImageProviders.loadImagesFor(tags, imagePrefixes)
const estimated = tags.mapD((tags) =>
AllImageProviders.estimateNumberOfImages(tags, imagePrefixes)
)
return new SvelteUIElement(ImageCarousel, {
state,
tags,
images,
estimated,
feature,
})
},
},
{
funcName: "image_upload",
group: "images",
docs: "Creates a button where a user can upload an image to IMGUR",
needsUrls: [Imgur.apiUrl, ...Imgur.supportingUrls],
args: [
{
type: "key",
name: "image_key",
doc: "Image tag to add the URL to (or image-tag:0, image-tag:1 when multiple images are added)",
defaultValue: "panoramax",
required: false,
},
{
name: "label",
doc: "The text to show on the button",
required: false,
},
{
name: "disable_blur",
doc: "If set to 'true' or 'yes', then face blurring will be disabled. To be used sparingly",
required: false,
},
],
constr: (state, tags, args, feature) => {
const targetKey = args[0] === "" ? undefined : args[0]
const noBlur = args[3]?.toLowerCase()?.trim()
return new SvelteUIElement(UploadImage, {
state,
tags,
targetKey,
feature,
labelText: args[1],
image: args[2],
noBlur: noBlur === "true" || noBlur === "yes",
})
},
},
new ImageCarouselVis(),
new ImageUpload(),
]
}
}