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

Refactoring: move 'GetDefaultIcon' into its own Svelte-class

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-01-02 03:56:42 +01:00
parent f6ed163554
commit 28f9532af9
13 changed files with 97 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scripts/generateLayerOverview.ts
View file

@ -119,7 +119,7 @@ class AddIconSummary extends DesugaringStep<{ raw: LayerConfigJson; parsed: Laye
const pointRendering: PointRenderingConfig = layerConfig.mapRendering.find((pr) =>
pr.location.has("point")
)
const defaultTags = layerConfig.GetBaseTags()
const defaultTags = layerConfig.baseTags
fixed["_layerIcon"] = Utils.NoNull(
(pointRendering?.marker ?? []).map((i) => {
const icon = i.icon?.GetRenderValue(defaultTags)?.txt

102
src/Models/ThemeConfig/LayerConfig.ts
View file

@ -24,6 +24,9 @@ import { QuestionableTagRenderingConfigJson } from "./Json/QuestionableTagRender
import MarkdownUtils from "../../Utils/MarkdownUtils"
import { And } from "../../Logic/Tags/And"
import Combine from "../../UI/Base/Combine"
import SvelteUIElement from "../../UI/Base/SvelteUIElement"
import DynamicMarker from "../../UI/Map/DynamicMarker.svelte"
import { ImmutableStore } from "../../Logic/UIEventSource"
export default class LayerConfig extends WithContextLoader {
public static readonly syncSelectionAllowed = ["no", "local", "theme-only", "global"] as const
@ -67,6 +70,8 @@ export default class LayerConfig extends WithContextLoader {
public readonly popupInFloatover: boolean | string
public readonly enableMorePrivacy: boolean
public readonly baseTags: Readonly<Record<string, string>>
/**
* If this layer is based on another layer, this might be indicated here
* @private
@ -104,7 +109,7 @@ export default class LayerConfig extends WithContextLoader {
mercatorCrs: json.source["mercatorCrs"],
idKey: json.source["idKey"],
},
json.id
json.id,
)
}
@ -124,7 +129,7 @@ export default class LayerConfig extends WithContextLoader {
if (json.calculatedTags !== undefined) {
if (!official) {
console.warn(
`Unofficial theme ${this.id} with custom javascript! This is a security risk`
`Unofficial theme ${this.id} with custom javascript! This is a security risk`,
)
}
this.calculatedTags = []
@ -194,7 +199,7 @@ export default class LayerConfig extends WithContextLoader {
tags: pr.tags.map((t) => TagUtils.SimpleTag(t)),
description: Translations.T(
pr.description,
`${translationContext}.presets.${i}.description`
`${translationContext}.presets.${i}.description`,
),
preciseInput: preciseInput,
exampleImages: pr.exampleImages,
@ -208,7 +213,7 @@ export default class LayerConfig extends WithContextLoader {
if (json.lineRendering) {
this.lineRendering = Utils.NoNull(json.lineRendering).map(
(r, i) => new LineRenderingConfig(r, `${context}[${i}]`)
(r, i) => new LineRenderingConfig(r, `${context}[${i}]`),
)
} else {
this.lineRendering = []
@ -216,7 +221,7 @@ export default class LayerConfig extends WithContextLoader {
if (json.pointRendering) {
this.mapRendering = Utils.NoNull(json.pointRendering).map(
(r, i) => new PointRenderingConfig(r, `${context}[${i}](${this.id})`)
(r, i) => new PointRenderingConfig(r, `${context}[${i}](${this.id})`),
)
} else {
this.mapRendering = []
@ -228,7 +233,7 @@ export default class LayerConfig extends WithContextLoader {
r.location.has("centroid") ||
r.location.has("projected_centerpoint") ||
r.location.has("start") ||
r.location.has("end")
r.location.has("end"),
)
if (
@ -250,7 +255,7 @@ export default class LayerConfig extends WithContextLoader {
Constants.priviliged_layers.indexOf(<any>this.id) < 0 &&
this.source !== null /*library layer*/ &&
!this.source?.geojsonSource?.startsWith(
"https://api.openstreetmap.org/api/0.6/notes.json"
"https://api.openstreetmap.org/api/0.6/notes.json",
)
) {
throw (
@ -269,7 +274,7 @@ export default class LayerConfig extends WithContextLoader {
typeof tr !== "string" &&
tr["builtin"] === undefined &&
tr["id"] === undefined &&
tr["rewrite"] === undefined
tr["rewrite"] === undefined,
) ?? []
if (missingIds?.length > 0 && official) {
console.error("Some tagRenderings of", this.id, "are missing an id:", missingIds)
@ -280,8 +285,8 @@ export default class LayerConfig extends WithContextLoader {
(tr, i) =>
new TagRenderingConfig(
<QuestionableTagRenderingConfigJson>tr,
this.id + ".tagRenderings[" + i + "]"
)
this.id + ".tagRenderings[" + i + "]",
),
)
if (json.units !== undefined && !Array.isArray(json.units)) {
throw (
@ -291,7 +296,7 @@ export default class LayerConfig extends WithContextLoader {
)
}
this.units = (json.units ?? []).flatMap((unitJson, i) =>
Unit.fromJson(unitJson, this.tagRenderings, `${context}.unit[${i}]`)
Unit.fromJson(unitJson, this.tagRenderings, `${context}.unit[${i}]`),
)
if (
@ -352,31 +357,18 @@ export default class LayerConfig extends WithContextLoader {
)
}
this.popupInFloatover = json.popupInFloatover ?? false
}
public defaultIcon(properties?: Record<string, string>): BaseUIElement | undefined {
if (this.mapRendering === undefined || this.mapRendering === null) {
return undefined
}
const mapRenderings = this.mapRendering.filter((r) => r.location.has("point"))
if (mapRenderings.length === 0) {
return undefined
}
return new Combine(
mapRenderings.map((mr) =>
mr
.GetBaseIcon(properties ?? this.GetBaseTags())
.SetClass("absolute left-0 top-0 w-full h-full")
)
).SetClass("relative block w-full h-full")
}
public GetBaseTags(): Record<string, string> {
return TagUtils.changeAsProperties(
this.source?.osmTags?.asChange({ id: "node/-1" }) ?? [{ k: "id", v: "node/-1" }]
this.baseTags = TagUtils.changeAsProperties(
this.source?.osmTags?.asChange({ id: "node/-1" }) ?? [{ k: "id", v: "node/-1" }],
)
}
public hasDefaultIcon() {
if (this.mapRendering === undefined || this.mapRendering === null) {
return false
}
return this.mapRendering.some((r) => r.location.has("point"))
}
public GenerateDocumentation(
usedInThemes: string[],
layerIsNeededBy?: Map<string, string[]>,
@ -386,7 +378,7 @@ export default class LayerConfig extends WithContextLoader {
neededLayer: string
}[] = [],
addedByDefault = false,
canBeIncluded = true
canBeIncluded = true,
): string {
const extraProps: string[] = []
extraProps.push("This layer is shown at zoomlevel **" + this.minzoom + "** and higher")
@ -394,32 +386,32 @@ export default class LayerConfig extends WithContextLoader {
if (canBeIncluded) {
if (addedByDefault) {
extraProps.push(
"**This layer is included automatically in every theme. This layer might contain no points**"
"**This layer is included automatically in every theme. This layer might contain no points**",
)
}
if (this.shownByDefault === false) {
extraProps.push(
"This layer is not visible by default and must be enabled in the filter by the user. "
"This layer is not visible by default and must be enabled in the filter by the user. ",
)
}
if (this.title === undefined) {
extraProps.push(
"Elements don't have a title set and cannot be toggled nor will they show up in the dashboard. If you import this layer in your theme, override `title` to make this toggleable."
"Elements don't have a title set and cannot be toggled nor will they show up in the dashboard. If you import this layer in your theme, override `title` to make this toggleable.",
)
}
if (this.name === undefined && this.shownByDefault === false) {
extraProps.push(
"This layer is not visible by default and the visibility cannot be toggled, effectively resulting in a fully hidden layer. This can be useful, e.g. to calculate some metatags. If you want to render this layer (e.g. for debugging), enable it by setting the URL-parameter layer-<id>=true"
"This layer is not visible by default and the visibility cannot be toggled, effectively resulting in a fully hidden layer. This can be useful, e.g. to calculate some metatags. If you want to render this layer (e.g. for debugging), enable it by setting the URL-parameter layer-<id>=true",
)
}
if (this.name === undefined) {
extraProps.push(
"Not visible in the layer selection by default. If you want to make this layer toggable, override `name`"
"Not visible in the layer selection by default. If you want to make this layer toggable, override `name`",
)
}
if (this.mapRendering.length === 0) {
extraProps.push(
"Not rendered on the map by default. If you want to rendering this on the map, override `mapRenderings`"
"Not rendered on the map by default. If you want to rendering this on the map, override `mapRenderings`",
)
}
@ -429,12 +421,12 @@ export default class LayerConfig extends WithContextLoader {
"<img src='../warning.svg' height='1rem'/>",
"This layer is loaded from an external source, namely ",
"`" + this.source.geojsonSource + "`",
].join("\n\n")
].join("\n\n"),
)
}
} else {
extraProps.push(
"This layer can **not** be included in a theme. It is solely used by [special renderings](SpecialRenderings.md) showing a minimap with custom data."
"This layer can **not** be included in a theme. It is solely used by [special renderings](SpecialRenderings.md) showing a minimap with custom data.",
)
}
@ -444,7 +436,7 @@ export default class LayerConfig extends WithContextLoader {
usingLayer = [
"## Themes using this layer",
MarkdownUtils.list(
(usedInThemes ?? []).map((id) => `[${id}](https://mapcomplete.org/${id})`)
(usedInThemes ?? []).map((id) => `[${id}](https://mapcomplete.org/${id})`),
),
]
} else if (this.source !== null) {
@ -460,7 +452,7 @@ export default class LayerConfig extends WithContextLoader {
" into the layout as it depends on it: ",
dep.reason,
"(" + dep.context + ")",
].join(" ")
].join(" "),
)
}
@ -487,7 +479,7 @@ export default class LayerConfig extends WithContextLoader {
new And(preset.tags).asHumanString(true) +
snaps
)
})
}),
),
]
}
@ -495,8 +487,8 @@ export default class LayerConfig extends WithContextLoader {
for (const revDep of Utils.Dedup(layerIsNeededBy?.get(this.id) ?? [])) {
extraProps.push(
["This layer is needed as dependency for layer", `[${revDep}](#${revDep})`].join(
" "
)
" ",
),
)
}
@ -507,10 +499,10 @@ export default class LayerConfig extends WithContextLoader {
.filter((values) => values.key !== "id")
.map((values) => {
const embedded: string[] = values.values?.map((v) =>
Link.OsmWiki(values.key, v, true).SetClass("mr-2").AsMarkdown()
Link.OsmWiki(values.key, v, true).SetClass("mr-2").AsMarkdown(),
) ?? ["_no preset options defined, or no values in them_"]
const statistics = `https://taghistory.raifer.tech/?#***/${encodeURIComponent(
values.key
values.key,
)}/`
const tagInfo = `https://taginfo.openstreetmap.org/keys/${values.key}#values`
return [
@ -525,7 +517,7 @@ export default class LayerConfig extends WithContextLoader {
: `[${values.type}](../SpecialInputElements.md#${values.type})`,
embedded.join(" "),
]
})
}),
)
let quickOverview: string[] = []
@ -535,7 +527,7 @@ export default class LayerConfig extends WithContextLoader {
"this quick overview is incomplete",
MarkdownUtils.table(
["attribute", "type", "values which are supported by this layer"],
tableRows
tableRows,
),
]
}
@ -569,19 +561,19 @@ export default class LayerConfig extends WithContextLoader {
const parts = neededTags["and"]
tagsDescription.push(
"Elements must match **all** of the following expressions:",
parts.map((p, i) => i + ". " + p.asHumanString(true, false, {})).join("\n")
parts.map((p, i) => i + ". " + p.asHumanString(true, false, {})).join("\n"),
)
} else if (neededTags["or"]) {
const parts = neededTags["or"]
tagsDescription.push(
"Elements must match **any** of the following expressions:",
parts.map((p) => " - " + p.asHumanString(true, false, {})).join("\n")
parts.map((p) => " - " + p.asHumanString(true, false, {})).join("\n"),
)
} else {
tagsDescription.push(
"Elements must match the expression **" +
neededTags.asHumanString(true, false, {}) +
"**"
neededTags.asHumanString(true, false, {}) +
"**",
)
}

9
src/Models/ThemeConfig/PointRenderingConfig.ts
View file

@ -143,15 +143,6 @@ export default class PointRenderingConfig extends WithContextLoader {
"w-full h-full block absolute top-0 left-0"
)
}
public GetBaseIcon(tags?: Record<string, string>): BaseUIElement {
return new SvelteUIElement(DynamicMarker, {
marker: this.marker,
rotation: this.rotation,
tags: new ImmutableStore(tags),
})
}
public RenderIcon(
tags: Store<Record<string, string>>,
options?: {

3
src/UI/BigComponents/Filterview.svelte
View file

@ -14,6 +14,7 @@
import Translations from "../i18n/Translations"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import Constants from "../../Models/Constants"
import DefaultIcon from "../Map/DefaultIcon.svelte"
export let state: SpecialVisualizationState
export let filteredLayer: FilteredLayer
@ -58,7 +59,7 @@
{#if showLayerTitle}
<Checkbox selected={isDisplayed}>
<div class="no-image-background block h-6 w-6" class:opacity-50={!$isDisplayed}>
<ToSvelte construct={() => layer.defaultIcon()} />
<DefaultIcon {layer}/>
</div>
<Tr t={filteredLayer.layerDef.name} />

3
src/UI/History/History.svelte
View file

@ -10,6 +10,7 @@
import ToSvelte from "../Base/ToSvelte.svelte"
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
import DefaultIcon from "../Map/DefaultIcon.svelte"
export let onlyShowChangesBy: string[]
export let id: OsmId
@ -58,7 +59,7 @@
<a href={"https://openstreetmap.org/" + $lastStep.step.tags.id} target="_blank">
<h3 class="flex items-center gap-x-2">
<div class="inline-block h-8 w-8 shrink-0">
<ToSvelte construct={$lastStep.layer?.defaultIcon($lastStep.step.tags)} />
<DefaultIcon layer={$lastStep.layer} />
</div>
<Tr
t={$lastStep.layer?.title?.GetRenderValue($lastStep.step.tags)?.Subs($lastStep.step.tags)}

27
src/UI/Map/DefaultIcon.svelte Normal file
View file

@ -0,0 +1,27 @@
<script lang="ts">
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import DynamicIcon from "./DynamicIcon.svelte"
import DynamicMarker from "./DynamicMarker.svelte"
import Marker from "./Marker.svelte"
import { ImmutableStore } from "../../Logic/UIEventSource"
/**
* The 'DefaultIcon' is the icon that a layer shows by default
* Used e.g. in the filterview
*/
export let layer: LayerConfig
export let properties: Readonly<Record<string, string>> = layer.baseTags
export let clss= ""
let tags = new ImmutableStore(properties)
let mapRenderings = layer.mapRendering?.filter((r) => r.location.has("point"))
</script>
{#if mapRenderings?.length > 0}
<div class={"relative block w-full h-full "+clss}>
{#each mapRenderings as mr}
<DynamicMarker marker={mr.marker} rotation={mr.rotation} {tags} />
{/each}
</div>
{/if}

2
src/UI/Map/DynamicMarker.svelte
View file

@ -24,7 +24,7 @@
}
</script>
{#if marker && marker}
{#if marker}
<div class="relative h-full w-full" style={`transform: rotate(${$_rotation})`}>
{#each marker as icon}
<div class="absolute top-0 left-0 h-full w-full">

3
src/UI/Popup/DisabledQuestionsLayer.svelte
View file

@ -8,6 +8,7 @@
import { Translation } from "../i18n/Translation"
import { XMarkIcon } from "@babeard/svelte-heroicons/mini"
import ToSvelte from "../Base/ToSvelte.svelte"
import DefaultIcon from "../Map/DefaultIcon.svelte"
export let layer: LayerConfig
export let state: ThemeViewState
@ -28,7 +29,7 @@
<div class="low-interaction p-2">
<h4 class="my-2 flex">
<div class="no-image-background block h-6 w-6">
<ToSvelte construct={() => layer.defaultIcon()} />
<DefaultIcon {layer}/>
</div>
<Tr t={layer.name} />
</h4>

8
src/UI/Popup/TagRendering/TagRenderingMapping.svelte
View file

@ -15,6 +15,7 @@
import SvelteUIElement from "../../Base/SvelteUIElement"
import Icon from "../../Map/Icon.svelte"
import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
import DefaultIcon from "../../Map/DefaultIcon.svelte"
export let selectedElement: Feature
export let tags: UIEventSource<Record<string, string>>
@ -27,6 +28,7 @@
*/
export let clss: string = "ml-2"
export let mapping: {
readonly if?: TagsFilter
readonly then: Translation
readonly searchTerms?: Record<string, string[]>
readonly icon?: string
@ -46,13 +48,13 @@
large: "5rem",
}
function getAutoIcon(mapping: { if?: TagsFilter }): BaseUIElement {
function getAutoIcon(mapping: { readonly if?: TagsFilter }): Readonly<Record<string, string>> {
for (const preset of layer.presets) {
if (!new And(preset.tags).shadows(mapping.if)) {
continue
}
return layer.defaultIcon(TagUtils.asProperties(preset.tags))
return TagUtils.asProperties(preset.tags)
}
return undefined
}
@ -62,7 +64,7 @@
<div class="inline-flex items-center">
{#if mapping.icon === "auto"}
<div class="mr-2 h-8 w-8 shrink-0">
<ToSvelte construct={() => getAutoIcon(mapping)} />
<DefaultIcon {layer} properties={getAutoIcon(mapping)}/>
</div>
{:else}
<Marker

5
src/UI/Search/ActiveFilters.svelte
View file

@ -14,6 +14,7 @@
import FilterSearch from "../../Logic/Search/FilterSearch"
import Locale from "../i18n/Locale"
import DefaultIcon from "../Map/DefaultIcon.svelte"
export let activeFilters: (FilterSearchResult & ActiveFilter)[]
let language = Locale.language
@ -72,7 +73,7 @@
{#if $activeLayers.length === 1}
<FilterToggle on:click={() => enableAllLayers()}>
<div class="h-8 w-8 p-1">
<ToSvelte construct={$activeLayers[0].layerDef.defaultIcon()} />
<DefaultIcon layer={$activeLayers[0].layerDef}/>
</div>
<b>
<Tr t={$activeLayers[0].layerDef.name} />
@ -82,7 +83,7 @@
{#each $nonactiveLayers as nonActive (nonActive.layerDef.id)}
<FilterToggle on:click={() => nonActive.isDisplayed.set(true)}>
<div class="h-8 w-8 p-1">
<ToSvelte construct={nonActive.layerDef.defaultIcon()} />
<DefaultIcon layer={nonActive.layerDef}/>
</div>
<del class="block-ruby">
<Tr t={nonActive.layerDef.name} />

3
src/UI/Search/FilterResult.svelte
View file

@ -6,6 +6,7 @@
import type { FilterSearchResult } from "../../Logic/Search/FilterSearch"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import Loading from "../Base/Loading.svelte"
import DefaultIcon from "../Map/DefaultIcon.svelte"
export let entry: FilterSearchResult[] | LayerConfig
let asFilter: FilterSearchResult[]
@ -41,7 +42,7 @@
<div class="flex items-center gap-x-1">
{#if asLayer}
<div class="h-8 w-8 p-1">
<ToSvelte construct={asLayer.defaultIcon()} />
<DefaultIcon layer={asLayer}/>
</div>
<b>
<Tr t={asLayer.name} />

5
src/UI/Search/GeocodeResult.svelte
View file

@ -12,6 +12,7 @@
import Icon from "../Map/Icon.svelte"
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"
import ArrowUp from "@babeard/svelte-heroicons/mini/ArrowUp"
import DefaultIcon from "../Map/DefaultIcon.svelte"
export let entry: GeocodeResult
export let state: SpecialVisualizationState
@ -62,9 +63,7 @@
<div class="flex w-full items-center gap-y-2 p-2">
{#if layer}
<div class="h-6">
<ToSvelte
construct={() => layer.defaultIcon(entry.feature.properties)?.SetClass("w-6 h-6")}
/>
<DefaultIcon {layer} properties={entry.feature.properties} clss="w-6 h-6"/>
</div>
{:else if entry.category}
<Icon

5
src/UI/ThemeViewGUI.svelte
View file

@ -47,6 +47,7 @@
import ChevronRight from "@babeard/svelte-heroicons/mini/ChevronRight"
import { Drawer } from "flowbite-svelte"
import { linear } from "svelte/easing"
import DefaultIcon from "./Map/DefaultIcon.svelte"
export let state: ThemeViewState
@ -395,7 +396,7 @@
<div class="float-left m-1 flex flex-col sm:mt-2">
<!-- Current view tools -->
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
{#if currentViewLayer?.tagRenderings && currentViewLayer.hasDefaultIcon()}
<MapControlButton
on:click={() => {
state.selectCurrentView()
@ -403,7 +404,7 @@
on:keydown={forwardEventToMap}
>
<div class="h-8 w-8 cursor-pointer">
<ToSvelte construct={() => currentViewLayer.defaultIcon()} />
<DefaultIcon layer={currentViewLayer}/>
</div>
</MapControlButton>
{/if}