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

Themes: improve 'auto-type' special visualisation

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-08-23 13:00:26 +02:00
parent c291b16406
commit 658db35617
7 changed files with 140 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/UI/Popup/ShareLinkViz.ts
View file

@ -53,8 +53,6 @@ export class ShareLinkViz implements SpecialVisualization {
}
}
return new SvelteUIElement(ShareButton, { generateShareData, text }).SetClass(
"w-full h-full"
)
return new SvelteUIElement(ShareButton, { generateShareData, text })
}
}

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

@ -7,6 +7,14 @@
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import { twJoin } from "tailwind-merge"
import Marker from "../../Map/Marker.svelte"
import ToSvelte from "../../Base/ToSvelte.svelte"
import { And } from "../../../Logic/Tags/And"
import { TagUtils } from "../../../Logic/Tags/TagUtils"
import BaseUIElement from "../../BaseUIElement"
import type { Mapping } from "../../../Models/ThemeConfig/TagRenderingConfig"
import SvelteUIElement from "../../Base/SvelteUIElement"
import Icon from "../../Map/Icon.svelte"
import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
export let selectedElement: Feature
export let tags: UIEventSource<Record<string, string>>
@ -32,27 +40,41 @@
}
const emojiHeights = {
"small":"2rem",
"medium":"3rem",
"large":"5rem"
"small": "2rem",
"medium": "3rem",
"large": "5rem",
}
</script>
function getAutoIcon(mapping: {if?: TagsFilter }): BaseUIElement {
for (const preset of layer.presets) {
if (!new And(preset.tags).shadows(mapping.if)) {
continue
}
return layer.defaultIcon(TagUtils.asProperties(preset.tags))
}
return undefined
}
</script>
{#if mapping.icon !== undefined}
<div class="inline-flex items-center">
<Marker
icons={mapping.icon}
size={twJoin(
{#if mapping.icon === "auto"}
<div class="w-8 h-8 shrink-0 mr-2">
<ToSvelte construct={() => getAutoIcon(mapping)} />
</div>
{:else}
<Marker
icons={mapping.icon}
size={twJoin("shrink-0",
`mapping-icon-${mapping.iconClass ?? "small"}-height mapping-icon-${
mapping.iconClass ?? "small"
}-width`,
"shrink-0"
)}
emojiHeight={ emojiHeights[mapping.iconClass] ?? "2rem"}
clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
/>
}-width`)}
emojiHeight={ emojiHeights[mapping.iconClass] ?? "2rem"}
clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
/>
{/if}
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
</div>
{:else if mapping.then !== undefined}

133
src/UI/SpecialVisualizations.ts
View file

@ -2031,41 +2031,6 @@ export default class SpecialVisualizations {
return new VariableUiElement(translation)
},
},
{
funcName: "preset_type_select",
docs: "An editable tag rendering which allows to change the type",
args: [],
constr(
state: SpecialVisualizationState,
tags: UIEventSource<Record<string, string>>,
argument: string[],
selectedElement: Feature,
layer: LayerConfig
): SvelteUIElement {
const t = Translations.t.preset_type
const question: QuestionableTagRenderingConfigJson = {
id: layer.id + "-type",
question: t.question.translations,
mappings: layer.presets.map((pr) => {
return {
if: new And(pr.tags).asJson(),
then: (pr.description ? t.typeDescription : t.typeTitle).Subs({
title: pr.title,
description: pr.description,
}).translations,
}
}),
}
const config = new TagRenderingConfig(question)
return new SvelteUIElement(TagRenderingEditable, {
config,
tags,
selectedElement,
state,
layer,
})
},
},
{
funcName: "pending_changes",
docs: "A module showing the pending changes, with the option to clear the pending changes",
@ -2149,15 +2114,14 @@ export default class SpecialVisualizations {
const question: QuestionableTagRenderingConfigJson = {
id: layer.id + "-type",
question: t.question.translations,
mappings: layer.presets.map((pr) => {
return {
if: new And(pr.tags).asJson(),
then: (pr.description ? t.typeDescription : t.typeTitle).Subs({
title: pr.title,
description: pr.description,
}).translations,
}
}),
mappings: layer.presets.map((pr) => ({
if: new And(pr.tags).asJson(),
icon: "auto",
then: (pr.description ? t.typeDescription : t.typeTitle).Subs({
title: pr.title,
description: pr.description,
}).translations,
})),
}
const config = new TagRenderingConfig(question)
return new SvelteUIElement(TagRenderingEditable, {
@ -2168,75 +2132,7 @@ export default class SpecialVisualizations {
layer,
})
},
},
{
funcName: "pending_changes",
docs: "A module showing the pending changes, with the option to clear the pending changes",
args: [],
constr(
state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>,
argument: string[],
feature: Feature,
layer: LayerConfig
): BaseUIElement {
return new SvelteUIElement(PendingChangesIndicator, { state, compact: false })
},
},
{
funcName: "clear_caches",
docs: "A button which clears the locally downloaded data and the service worker. Login status etc will be kept",
args: [
{
name: "text",
required: true,
doc: "The text to show on the button",
},
],
constr(
state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>,
argument: string[],
feature: Feature,
layer: LayerConfig
): SvelteUIElement {
return new SvelteUIElement<any, any, any>(ClearCaches, {
msg: argument[0] ?? "Clear local caches",
})
},
},
{
funcName: "group",
docs: "A collapsable group (accordion)",
args: [
{
name: "header",
doc: "The _identifier_ of a single tagRendering. This will be used as header",
},
{
name: "labels",
doc: "A `;`-separated list of either identifiers or label names. All tagRenderings matching this value will be shown in the accordion",
},
],
constr(
state: SpecialVisualizationState,
tags: UIEventSource<Record<string, string>>,
argument: string[],
selectedElement: Feature,
layer: LayerConfig
): SvelteUIElement {
const [header, labelsStr] = argument
const labels = labelsStr.split(";").map((x) => x.trim())
return new SvelteUIElement<any, any, any>(GroupedView, {
state,
tags,
selectedElement,
layer,
header,
labels,
})
},
},
}
]
specialVisualizations.push(new AutoApplyButton(specialVisualizations))
@ -2245,6 +2141,7 @@ export default class SpecialVisualizations {
const invalid = specialVisualizations
.map((sp, i) => ({ sp, i }))
.filter((sp) => sp.sp.funcName === undefined || !sp.sp.funcName.match(regex))
if (invalid.length > 0) {
throw (
"Invalid special visualisation found: funcName is undefined or doesn't match " +
@ -2254,6 +2151,16 @@ export default class SpecialVisualizations {
)
}
const allNames = specialVisualizations.map(f => f.funcName)
const seen = new Set<string>()
for (let name of allNames) {
name = name.toLowerCase()
if(seen.has(name)){
throw "Invalid special visualisations: detected a duplicate name: "+name
}
seen.add(name)
}
return specialVisualizations
}
}