440 lines
17 KiB
Svelte
440 lines
17 KiB
Svelte
<script lang="ts">
|
|
import { Store, UIEventSource } from "../Logic/UIEventSource"
|
|
import { Map as MlMap } from "maplibre-gl"
|
|
import MaplibreMap from "./Map/MaplibreMap.svelte"
|
|
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
|
|
import MapControlButton from "./Base/MapControlButton.svelte"
|
|
import ToSvelte from "./Base/ToSvelte.svelte"
|
|
import If from "./Base/If.svelte"
|
|
import { GeolocationControl } from "./BigComponents/GeolocationControl"
|
|
import type { Feature } from "geojson"
|
|
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
|
|
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
|
|
import Filterview from "./BigComponents/Filterview.svelte"
|
|
import ThemeViewState from "../Models/ThemeViewState"
|
|
import type { MapProperties } from "../Models/MapProperties"
|
|
import Geosearch from "./BigComponents/Geosearch.svelte"
|
|
import Translations from "./i18n/Translations"
|
|
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
|
|
|
|
import Tr from "./Base/Tr.svelte"
|
|
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
|
|
import FloatOver from "./Base/FloatOver.svelte"
|
|
import PrivacyPolicy from "./BigComponents/PrivacyPolicy"
|
|
import Constants from "../Models/Constants"
|
|
import TabbedGroup from "./Base/TabbedGroup.svelte"
|
|
import UserRelatedState from "../Logic/State/UserRelatedState"
|
|
import LoginToggle from "./Base/LoginToggle.svelte"
|
|
import LoginButton from "./Base/LoginButton.svelte"
|
|
import CopyrightPanel from "./BigComponents/CopyrightPanel"
|
|
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
|
|
import ModalRight from "./Base/ModalRight.svelte"
|
|
import { Utils } from "../Utils"
|
|
import Hotkeys from "./Base/Hotkeys"
|
|
import { VariableUiElement } from "./Base/VariableUIElement"
|
|
import SvelteUIElement from "./Base/SvelteUIElement"
|
|
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
|
|
import LevelSelector from "./BigComponents/LevelSelector.svelte"
|
|
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
|
|
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
|
|
import Svg from "../Svg"
|
|
import { ShareScreen } from "./BigComponents/ShareScreen"
|
|
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
|
|
import type { RasterLayerPolygon } from "../Models/RasterLayers"
|
|
import { AvailableRasterLayers } from "../Models/RasterLayers"
|
|
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
|
|
import IfHidden from "./Base/IfHidden.svelte"
|
|
import { onDestroy } from "svelte"
|
|
import { OpenJosm } from "./BigComponents/OpenJosm"
|
|
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
|
|
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
|
|
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
|
|
import Loading from "./Base/Loading.svelte"
|
|
import StateIndicator from "./BigComponents/StateIndicator.svelte"
|
|
|
|
export let state: ThemeViewState
|
|
let layout = state.layout
|
|
|
|
let maplibremap: UIEventSource<MlMap> = state.map
|
|
let selectedElement: UIEventSource<Feature> = state.selectedElement
|
|
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
|
|
|
|
const selectedElementView = selectedElement.map(
|
|
(selectedElement) => {
|
|
// Svelte doesn't properly reload some of the legacy UI-elements
|
|
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
|
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
|
const layer = selectedLayer.data
|
|
if (selectedElement === undefined || layer === undefined) {
|
|
return undefined
|
|
}
|
|
|
|
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
|
|
return undefined
|
|
}
|
|
|
|
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
|
return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags })
|
|
},
|
|
[selectedLayer]
|
|
)
|
|
|
|
const selectedElementTitle = selectedElement.map(
|
|
(selectedElement) => {
|
|
// Svelte doesn't properly reload some of the legacy UI-elements
|
|
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
|
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
|
const layer = selectedLayer.data
|
|
if (selectedElement === undefined || layer === undefined) {
|
|
return undefined
|
|
}
|
|
|
|
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
|
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
|
|
},
|
|
[selectedLayer]
|
|
)
|
|
|
|
let mapproperties: MapProperties = state.mapProperties
|
|
let featureSwitches: FeatureSwitchState = state.featureSwitches
|
|
let availableLayers = state.availableLayers
|
|
let userdetails = state.osmConnection.userDetails
|
|
let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
|
|
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
|
|
let rasterLayerName =
|
|
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maplibre.properties.name
|
|
onDestroy(
|
|
rasterLayer.addCallbackAndRunD((l) => {
|
|
rasterLayerName = l.properties.name
|
|
})
|
|
)
|
|
</script>
|
|
|
|
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
|
|
<MaplibreMap map={maplibremap} />
|
|
</div>
|
|
|
|
<div class="pointer-events-none absolute top-0 left-0 w-full">
|
|
<!-- Top components -->
|
|
<If condition={state.featureSwitches.featureSwitchSearch}>
|
|
<div class="pointer-events-auto float-right mt-1 px-1 max-[480px]:w-full sm:m-2">
|
|
<Geosearch
|
|
bounds={state.mapProperties.bounds}
|
|
perLayer={state.perLayer}
|
|
{selectedElement}
|
|
{selectedLayer}
|
|
/>
|
|
</div>
|
|
</If>
|
|
<div class="float-left m-1 flex flex-col sm:mt-2">
|
|
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
|
|
<div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
|
|
<img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon} />
|
|
<b class="mr-1">
|
|
<Tr t={layout.title} />
|
|
</b>
|
|
</div>
|
|
</MapControlButton>
|
|
<MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
|
|
<MenuIcon class="h-8 w-8 cursor-pointer" />
|
|
</MapControlButton>
|
|
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
|
|
<MapControlButton
|
|
on:click={() => {
|
|
selectedLayer.setData(currentViewLayer)
|
|
selectedElement.setData(state.currentView.features?.data?.[0])
|
|
}}
|
|
>
|
|
<ToSvelte
|
|
construct={() => currentViewLayer.defaultIcon().SetClass("w-8 h-8 cursor-pointer")}
|
|
/>
|
|
</MapControlButton>
|
|
{/if}
|
|
<ToSvelte
|
|
construct={() => new ExtraLinkButton(state, layout.extraLink).SetClass("pointer-events-auto")}
|
|
/>
|
|
<If condition={state.featureSwitchIsTesting}>
|
|
<div class="alert w-fit">Testmode</div>
|
|
</If>
|
|
</div>
|
|
<div class="flex w-full justify-center">
|
|
<!-- Flex and w-full are needed for the positioning -->
|
|
<!-- Centermessage -->
|
|
<StateIndicator {state} />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
|
|
<!-- bottom controls -->
|
|
<div class="flex w-full items-end justify-between px-4">
|
|
<div class="flex">
|
|
<!-- bottom left elements -->
|
|
<OpenBackgroundSelectorButton hideTooltip={true} {state} />
|
|
<a
|
|
class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
|
|
on:click={() => {
|
|
state.guistate.themeViewTab.setData("copyright")
|
|
state.guistate.themeIsOpened.setData(true)
|
|
}}
|
|
>
|
|
© OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-end">
|
|
<!-- bottom right elements -->
|
|
<If condition={state.floors.map((f) => f.length > 1)}>
|
|
<div class="pointer-events-auto mr-0.5">
|
|
<LevelSelector
|
|
floors={state.floors}
|
|
layerState={state.layerState}
|
|
zoom={state.mapProperties.zoom}
|
|
/>
|
|
</div>
|
|
</If>
|
|
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z + 1)}>
|
|
<ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")} />
|
|
</MapControlButton>
|
|
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}>
|
|
<ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")} />
|
|
</MapControlButton>
|
|
<If condition={featureSwitches.featureSwitchGeolocation}>
|
|
<MapControlButton>
|
|
<ToSvelte
|
|
construct={new GeolocationControl(state.geolocation, mapproperties).SetClass(
|
|
"block w-8 h-8"
|
|
)}
|
|
/>
|
|
</MapControlButton>
|
|
</If>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<If
|
|
condition={selectedElementView.map(
|
|
(v) =>
|
|
v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,
|
|
[selectedLayer]
|
|
)}
|
|
>
|
|
<!-- right modal with the selected element view -->
|
|
<ModalRight
|
|
on:close={() => {
|
|
selectedElement.setData(undefined)
|
|
}}
|
|
>
|
|
<div class="normal-background absolute flex h-full w-full flex-col">
|
|
<ToSvelte construct={new VariableUiElement(selectedElementTitle)}>
|
|
<!-- Title -->
|
|
</ToSvelte>
|
|
<ToSvelte construct={new VariableUiElement(selectedElementView).SetClass("overflow-auto")}>
|
|
<!-- Main view -->
|
|
</ToSvelte>
|
|
</div>
|
|
</ModalRight>
|
|
</If>
|
|
|
|
<If
|
|
condition={selectedElementView.map(
|
|
(v) =>
|
|
v !== undefined && selectedLayer.data !== undefined && selectedLayer.data.popupInFloatover,
|
|
[selectedLayer]
|
|
)}
|
|
>
|
|
<!-- Floatover with the selected element, if applicable -->
|
|
<FloatOver
|
|
on:close={() => {
|
|
selectedElement.setData(undefined)
|
|
}}
|
|
>
|
|
<ToSvelte construct={new VariableUiElement(selectedElementView)} />
|
|
</FloatOver>
|
|
</If>
|
|
|
|
<If condition={state.guistate.themeIsOpened}>
|
|
<!-- Theme menu -->
|
|
<FloatOver>
|
|
<span slot="close-button"><!-- Disable the close button --></span>
|
|
<TabbedGroup tab={state.guistate.themeViewTabIndex}>
|
|
<div slot="post-tablist">
|
|
<XCircleIcon
|
|
class="mr-2 h-8 w-8"
|
|
on:click={() => state.guistate.themeIsOpened.setData(false)}
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex" slot="title0">
|
|
<img class="block h-4 w-4" src={layout.icon} />
|
|
<Tr t={layout.title} />
|
|
</div>
|
|
|
|
<div class="m-4 h-full" slot="content0">
|
|
<ThemeIntroPanel {state} />
|
|
</div>
|
|
|
|
<div class="flex" slot="title1">
|
|
<If condition={state.featureSwitches.featureSwitchFilter}>
|
|
<ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")} />
|
|
<Tr t={Translations.t.general.menu.filter} />
|
|
</If>
|
|
</div>
|
|
|
|
<div class="m-2 flex flex-col" slot="content1">
|
|
{#each layout.layers as layer}
|
|
<Filterview
|
|
zoomlevel={state.mapProperties.zoom}
|
|
filteredLayer={state.layerState.filteredLayers.get(layer.id)}
|
|
highlightedLayer={state.guistate.highlightedLayerInFilters}
|
|
/>
|
|
{/each}
|
|
{#each layout.tileLayerSources as tilesource}
|
|
<OverlayToggle
|
|
layerproperties={tilesource}
|
|
state={state.overlayLayerStates.get(tilesource.id)}
|
|
highlightedLayer={state.guistate.highlightedLayerInFilters}
|
|
zoomlevel={state.mapProperties.zoom}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
<div class="flex" slot="title2">
|
|
<If condition={state.featureSwitches.featureSwitchEnableExport}>
|
|
<ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
|
|
<Tr t={Translations.t.general.download.title} />
|
|
</If>
|
|
</div>
|
|
<div class="m-4" slot="content2">
|
|
<DownloadPanel {state} />
|
|
</div>
|
|
|
|
<div slot="title3">
|
|
<Tr t={Translations.t.general.attribution.title} />
|
|
</div>
|
|
|
|
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
|
|
|
|
<div slot="title4">
|
|
<Tr t={Translations.t.general.sharescreen.title} />
|
|
</div>
|
|
<div class="m-2" slot="content4">
|
|
<ToSvelte construct={() => new ShareScreen(state)} />
|
|
</div>
|
|
</TabbedGroup>
|
|
</FloatOver>
|
|
</If>
|
|
|
|
<IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
|
|
<!-- background layer selector -->
|
|
<FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}>
|
|
<div class="h-full p-2">
|
|
<RasterLayerOverview
|
|
{availableLayers}
|
|
map={state.map}
|
|
mapproperties={state.mapProperties}
|
|
userstate={state.userRelatedState}
|
|
visible={state.guistate.backgroundLayerSelectionIsOpened}
|
|
/>
|
|
</div>
|
|
</FloatOver>
|
|
</IfHidden>
|
|
|
|
<If condition={state.guistate.menuIsOpened}>
|
|
<!-- Menu page -->
|
|
<FloatOver>
|
|
<span slot="close-button"><!-- Hide the default close button --></span>
|
|
<TabbedGroup tab={state.guistate.menuViewTabIndex}>
|
|
<div slot="post-tablist">
|
|
<XCircleIcon
|
|
class="mr-2 h-8 w-8"
|
|
on:click={() => state.guistate.menuIsOpened.setData(false)}
|
|
/>
|
|
</div>
|
|
<div class="flex" slot="title0">
|
|
<Tr t={Translations.t.general.menu.aboutMapComplete} />
|
|
</div>
|
|
|
|
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
|
|
<Tr t={Translations.t.general.aboutMapComplete.intro} />
|
|
|
|
<a class="flex" href={Utils.HomepageLink()}>
|
|
<img class="h-6 w-6" src="./assets/svg/add.svg" />
|
|
<Tr t={Translations.t.general.backToIndex} />
|
|
</a>
|
|
|
|
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
|
|
<img class="h-6 w-6" src="./assets/svg/bug.svg" />
|
|
<Tr t={Translations.t.general.attribution.openIssueTracker} />
|
|
</a>
|
|
|
|
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
|
|
<img class="h-6 w-6" src="./assets/svg/mastodon.svg" />
|
|
<Tr t={Translations.t.general.attribution.followOnMastodon} />
|
|
</a>
|
|
|
|
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
|
|
<img class="h-6 w-6" src="./assets/svg/liberapay.svg" />
|
|
<Tr t={Translations.t.general.attribution.donate} />
|
|
</a>
|
|
|
|
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
|
|
<img class="h-6 w-6" src="./assets/svg/statistics.svg" />
|
|
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })} />
|
|
</a>
|
|
{Constants.vNumber}
|
|
</div>
|
|
|
|
<div class="flex" slot="title1">
|
|
<CogIcon class="h-6 w-6" />
|
|
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
|
|
</div>
|
|
|
|
<div class="links-as-button" slot="content1">
|
|
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
|
|
<LoginToggle {state}>
|
|
<div class="flex flex-col" slot="not-logged-in">
|
|
<Tr class="alert" t={Translations.t.userinfo.notLoggedIn} />
|
|
<LoginButton clss="primary" osmConnection={state.osmConnection} />
|
|
</div>
|
|
<SelectedElementView
|
|
highlightedRendering={state.guistate.highlightedUserSetting}
|
|
layer={UserRelatedState.usersettingsConfig}
|
|
selectedElement={{
|
|
type: "Feature",
|
|
properties: {},
|
|
geometry: { type: "Point", coordinates: [0, 0] },
|
|
}}
|
|
{state}
|
|
tags={state.userRelatedState.preferencesAsTags}
|
|
/>
|
|
</LoginToggle>
|
|
</div>
|
|
|
|
<div class="flex" slot="title2">
|
|
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
|
|
Get in touch with others
|
|
</div>
|
|
<div class="m-2" slot="content2">
|
|
<CommunityIndexView location={state.mapProperties.location} />
|
|
</div>
|
|
|
|
<div class="flex" slot="title3">
|
|
<EyeIcon class="w-6" />
|
|
<Tr t={Translations.t.privacy.title} />
|
|
</div>
|
|
<div class="m-2" slot="content3">
|
|
<ToSvelte construct={() => new PrivacyPolicy()} />
|
|
</div>
|
|
|
|
<Tr slot="title4" t={Translations.t.advanced.title} />
|
|
<div class="m-2 flex flex-col" slot="content4">
|
|
<OpenIdEditor mapProperties={state.mapProperties} />
|
|
<ToSvelte
|
|
construct={() =>
|
|
new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}
|
|
/>
|
|
<MapillaryLink mapProperties={state.mapProperties} />
|
|
<ToSvelte construct={Hotkeys.generateDocumentationDynamic} />
|
|
</div>
|
|
</TabbedGroup>
|
|
</FloatOver>
|
|
</If>
|