Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: fix metatagging

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-16 03:27:49 +02:00
parent 177697fe0a
commit 8fd3fbc0b7
34 changed files with 378 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

90
UI/BigComponents/BackgroundSwitcher.svelte Normal file
View file

@ -0,0 +1,90 @@
<script lang="ts">
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import type {RasterLayerPolygon} from "../../Models/RasterLayers";
import {AvailableRasterLayers} from "../../Models/RasterLayers";
import Tr from "../Base/Tr.svelte";
import {onDestroy} from "svelte";
import Translations from "../i18n/Translations";
import Svg from "../../Svg";
import {Map as MlMap} from "maplibre-gl"
import MaplibreMap from "../Map/MaplibreMap.svelte";
import {MapLibreAdaptor} from "../Map/MapLibreAdaptor";
import type {MapProperties} from "../../Models/MapProperties";
export let mapproperties: MapProperties
export let normalMap: UIEventSource<MlMap>
/**
* The current background (raster) layer of the polygon.
* This is undefined if a vector layer is used
*/
let rasterLayer: UIEventSource<RasterLayerPolygon | undefined> = mapproperties.rasterLayer
let name = rasterLayer.data?.properties?.name
let icon = Svg.satellite_svg()
onDestroy(rasterLayer.addCallback(polygon => {
name = polygon.properties?.name
}))
/**
* The layers that this component can offer as a choice.
*/
export let availableRasterLayers: Store<RasterLayerPolygon[]>
let altmap: UIEventSource<MlMap> = new UIEventSource(undefined)
let altproperties = new MapLibreAdaptor(altmap, {zoom: UIEventSource.feedFrom(mapproperties.zoom)})
altproperties.allowMoving.setData(false)
altproperties.allowZooming.setData(false)
let altmap0: UIEventSource<MlMap> = new UIEventSource(undefined)
let altproperties0 = new MapLibreAdaptor(altmap0, {zoom: altproperties.zoom})
// altproperties0.allowMoving.setData(false)
// altproperties0.allowZooming.setData(false)
function updatedAltLayer() {
const available = availableRasterLayers.data
const current = rasterLayer.data
const defaultLayer = AvailableRasterLayers.maplibre
const firstOther = available.find(l => l !== current && l !== defaultLayer)
altproperties.rasterLayer.setData(firstOther)
const secondOther = available.find(l => l !== current && l !== firstOther && l !== defaultLayer)
altproperties0.rasterLayer.setData(secondOther)
}
onDestroy(availableRasterLayers.addCallbackAndRunD(updatedAltLayer))
onDestroy(rasterLayer.addCallbackAndRunD(updatedAltLayer))
function pixelCenterOf(map: UIEventSource<MlMap>): [number, number] {
const rect = map?.data?.getCanvas()?.getBoundingClientRect()
if (!rect) {
return undefined
}
const x = (rect.left + rect.right) / 2
const y = (rect.top + rect.bottom) / 2
return [x, y]
}
mapproperties.location.addCallbackAndRunD(({lon, lat}) => {
if (!normalMap.data || !altmap.data) {
return
}
const altMapCenter = pixelCenterOf(altmap)
const c = normalMap.data.unproject(altMapCenter)
altproperties.location.setData({lon: c.lng, lat: c.lat})
const altMapCenter0 = pixelCenterOf(altmap0)
const c0 = normalMap.data.unproject(altMapCenter0)
altproperties0.location.setData({lon: c0.lng, lat: c0.lat})
})
</script>
<div class="flex">
<div class="w-32 h-32 overflow-hidden border-interactive">
<MaplibreMap map={altmap}/>
</div>
<div class="w-32 h-32 overflow-hidden border-interactive">
<MaplibreMap map={altmap0}/>
</div>
<div class="low-interaction flex flex-col">
<b>Current background:</b>
<Tr t={Translations.T(name)}/>
</div>
</div>

2
UI/InputElement/ValidatedInput.svelte
View file

@ -56,7 +56,7 @@
<textarea class="w-full" bind:value={$_value} inputmode={validator.inputmode ?? "text"} placeholder={_placeholder}></textarea>
{:else }
<span class="inline-flex">
<input bind:this={htmlElem} bind:value={$_value} inputmode={validator.inputmode ?? "text"} placeholder={_placeholder}>
<input bind:this={htmlElem} bind:value={$_value} class="w-full" inputmode={validator.inputmode ?? "text"} placeholder={_placeholder}>
{#if !$isValid}
<ExclamationIcon class="h-6 w-6 -ml-6"></ExclamationIcon>
{/if}

2
UI/Map/MaplibreMap.svelte
View file

@ -16,7 +16,7 @@
*/
export let map: Writable<MaplibreMap>
export let attribution = true
export let attribution = false
let center = {};
onMount(() => {

2
UI/Popup/TagRendering/TagRenderingAnswer.svelte
View file

@ -31,7 +31,7 @@
</script>
{#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties(_tags))}
<div class={"flex flex-col w-full "+classes+" "+extraClasses}>
<div class={"link-underline flex flex-col w-full "+classes+" "+extraClasses}>
{#if trs.length === 1}
<TagRenderingMapping mapping={trs[0]} {tags} {state} {selectedElement} {layer}></TagRenderingMapping>
{/if}

2
UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -75,7 +75,7 @@
<button slot="cancel" class="secondary" on:click={() => {editMode = false}}>
<Tr t={Translations.t.general.cancel}/>
</button>
<XCircleIcon slot="upper-right" class="w-8 h-8" on:click={() => {editMode = false}}/>
<XCircleIcon slot="upper-right" class="w-8 h-8 cursor-pointer" on:click={() => {editMode = false}}/>
</TagRenderingQuestion>
{:else}
<div class="flex justify-between low-interaction items-center rounded px-2">

18
UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -73,7 +73,9 @@
}>();
function onSave() {
if(selectedTags === undefined){
return
}
if (layer.source === null) {
/**
* This is a special, priviliged layer.
@ -191,16 +193,14 @@
<img slot="image" src="./assets/svg/login.svg" class="w-8 h-8"/>
<Tr t={Translations.t.general.loginToStart} slot="message"></Tr>
</SubtleButton>
<div class="flex justify-end">
{#if $feedback !== undefined}
<div class="alert">
<Tr t={$feedback}/>
</div>
{/if}
<div class="flex justify-end flex-wrap-reverse sm:flex-nowrap items-stretch">
<!-- TagRenderingQuestion-buttons -->
{#if $feedback !== undefined}
<div class="alert">
<Tr t={$feedback}/>
</div>
{/if}
<slot name="cancel"></slot>
<button on:click={onSave} class={(selectedTags === undefined ? "disabled" : "button-shadow")+" primary"}>
<Tr t={Translations.t.general.save}></Tr>
</button>

9
UI/ThemeViewGUI.svelte
View file

@ -41,6 +41,7 @@
import {ShareScreen} from "./BigComponents/ShareScreen";
import NextButton from "./Base/NextButton.svelte";
import IfNot from "./Base/IfNot.svelte";
import BackgroundSwitcher from "./BigComponents/BackgroundSwitcher.svelte";
export let state: ThemeViewState;
let layout = state.layout;
@ -115,7 +116,7 @@
{selectedLayer}/>
</div>
</If>
<div class="float-left m-1 sm:mt-2">
<div class="float-left m-1 sm:mt-2 flex flex-col">
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
<div class="flex m-0.5 mx-1 sm:mx-1 md:mx-2 items-center cursor-pointer max-[480px]:w-full">
<img class="w-6 h-6 md:w-8 md:h-8 block mr-0.5 sm:mr-1 md:mr-2" src={layout.icon}>
@ -136,16 +137,16 @@
{/if}
<ToSvelte construct={() => new ExtraLinkButton(state, layout.extraLink)}></ToSvelte>
<If condition={state.featureSwitchIsTesting}>
<span class="alert">
<div class="alert w-fit">
Testmode
</span>
</div>
</If>
</div>
</div>
<div class="absolute bottom-0 left-0 mb-4 ml-4">
<BackgroundSwitcher availableRasterLayers={state.availableLayers} mapproperties={state.mapProperties} normalMap={state.map}/>
</div>
<div class="absolute bottom-0 right-0 mb-4 mr-4 flex flex-col items-end">