Formatting of ThemeViewGUI
This commit is contained in:
parent
c1bce7abc7
commit
845a868024
1 changed files with 104 additions and 104 deletions
|
|
@ -1,116 +1,116 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Store, UIEventSource } from "../Logic/UIEventSource"
|
import { Store, UIEventSource } from "../Logic/UIEventSource"
|
||||||
import { Map as MlMap } from "maplibre-gl"
|
import { Map as MlMap } from "maplibre-gl"
|
||||||
import MaplibreMap from "./Map/MaplibreMap.svelte"
|
import MaplibreMap from "./Map/MaplibreMap.svelte"
|
||||||
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
|
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
|
||||||
import MapControlButton from "./Base/MapControlButton.svelte"
|
import MapControlButton from "./Base/MapControlButton.svelte"
|
||||||
import ToSvelte from "./Base/ToSvelte.svelte"
|
import ToSvelte from "./Base/ToSvelte.svelte"
|
||||||
import If from "./Base/If.svelte"
|
import If from "./Base/If.svelte"
|
||||||
import { GeolocationControl } from "./BigComponents/GeolocationControl"
|
import { GeolocationControl } from "./BigComponents/GeolocationControl"
|
||||||
import type { Feature } from "geojson"
|
import type { Feature } from "geojson"
|
||||||
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
|
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
|
||||||
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
|
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
|
||||||
import Filterview from "./BigComponents/Filterview.svelte"
|
import Filterview from "./BigComponents/Filterview.svelte"
|
||||||
import ThemeViewState from "../Models/ThemeViewState"
|
import ThemeViewState from "../Models/ThemeViewState"
|
||||||
import type { MapProperties } from "../Models/MapProperties"
|
import type { MapProperties } from "../Models/MapProperties"
|
||||||
import Geosearch from "./BigComponents/Geosearch.svelte"
|
import Geosearch from "./BigComponents/Geosearch.svelte"
|
||||||
import Translations from "./i18n/Translations"
|
import Translations from "./i18n/Translations"
|
||||||
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
|
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||||
|
|
||||||
import Tr from "./Base/Tr.svelte"
|
import Tr from "./Base/Tr.svelte"
|
||||||
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
|
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
|
||||||
import FloatOver from "./Base/FloatOver.svelte"
|
import FloatOver from "./Base/FloatOver.svelte"
|
||||||
import PrivacyPolicy from "./BigComponents/PrivacyPolicy"
|
import PrivacyPolicy from "./BigComponents/PrivacyPolicy"
|
||||||
import Constants from "../Models/Constants"
|
import Constants from "../Models/Constants"
|
||||||
import TabbedGroup from "./Base/TabbedGroup.svelte"
|
import TabbedGroup from "./Base/TabbedGroup.svelte"
|
||||||
import UserRelatedState from "../Logic/State/UserRelatedState"
|
import UserRelatedState from "../Logic/State/UserRelatedState"
|
||||||
import LoginToggle from "./Base/LoginToggle.svelte"
|
import LoginToggle from "./Base/LoginToggle.svelte"
|
||||||
import LoginButton from "./Base/LoginButton.svelte"
|
import LoginButton from "./Base/LoginButton.svelte"
|
||||||
import CopyrightPanel from "./BigComponents/CopyrightPanel"
|
import CopyrightPanel from "./BigComponents/CopyrightPanel"
|
||||||
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
|
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
|
||||||
import ModalRight from "./Base/ModalRight.svelte"
|
import ModalRight from "./Base/ModalRight.svelte"
|
||||||
import { Utils } from "../Utils"
|
import { Utils } from "../Utils"
|
||||||
import Hotkeys from "./Base/Hotkeys"
|
import Hotkeys from "./Base/Hotkeys"
|
||||||
import { VariableUiElement } from "./Base/VariableUIElement"
|
import { VariableUiElement } from "./Base/VariableUIElement"
|
||||||
import SvelteUIElement from "./Base/SvelteUIElement"
|
import SvelteUIElement from "./Base/SvelteUIElement"
|
||||||
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
|
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
|
||||||
import LevelSelector from "./BigComponents/LevelSelector.svelte"
|
import LevelSelector from "./BigComponents/LevelSelector.svelte"
|
||||||
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
|
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
|
||||||
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
|
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
|
||||||
import Svg from "../Svg"
|
import Svg from "../Svg"
|
||||||
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
|
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
|
||||||
import type { RasterLayerPolygon } from "../Models/RasterLayers"
|
import type { RasterLayerPolygon } from "../Models/RasterLayers"
|
||||||
import { AvailableRasterLayers } from "../Models/RasterLayers"
|
import { AvailableRasterLayers } from "../Models/RasterLayers"
|
||||||
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
|
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
|
||||||
import IfHidden from "./Base/IfHidden.svelte"
|
import IfHidden from "./Base/IfHidden.svelte"
|
||||||
import { onDestroy } from "svelte"
|
import { onDestroy } from "svelte"
|
||||||
import { OpenJosm } from "./BigComponents/OpenJosm"
|
import { OpenJosm } from "./BigComponents/OpenJosm"
|
||||||
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
|
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
|
||||||
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
|
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
|
||||||
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
|
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
|
||||||
import StateIndicator from "./BigComponents/StateIndicator.svelte"
|
import StateIndicator from "./BigComponents/StateIndicator.svelte"
|
||||||
import LanguagePicker from "./LanguagePicker"
|
import LanguagePicker from "./LanguagePicker"
|
||||||
import Locale from "./i18n/Locale"
|
import Locale from "./i18n/Locale"
|
||||||
import ShareScreen from "./BigComponents/ShareScreen.svelte"
|
import ShareScreen from "./BigComponents/ShareScreen.svelte"
|
||||||
import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"
|
import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"
|
||||||
import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
|
import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
|
||||||
|
|
||||||
export let state: ThemeViewState
|
export let state: ThemeViewState
|
||||||
let layout = state.layout
|
let layout = state.layout
|
||||||
|
|
||||||
let maplibremap: UIEventSource<MlMap> = state.map
|
let maplibremap: UIEventSource<MlMap> = state.map
|
||||||
let selectedElement: UIEventSource<Feature> = state.selectedElement
|
let selectedElement: UIEventSource<Feature> = state.selectedElement
|
||||||
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
|
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
|
||||||
|
|
||||||
const selectedElementView = selectedElement.map(
|
const selectedElementView = selectedElement.map(
|
||||||
(selectedElement) => {
|
(selectedElement) => {
|
||||||
// Svelte doesn't properly reload some of the legacy UI-elements
|
// Svelte doesn't properly reload some of the legacy UI-elements
|
||||||
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
// 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
|
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
||||||
const layer = selectedLayer.data
|
const layer = selectedLayer.data
|
||||||
if (selectedElement === undefined || layer === undefined) {
|
if (selectedElement === undefined || layer === undefined) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
|
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
||||||
return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags })
|
return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags })
|
||||||
},
|
},
|
||||||
[selectedLayer]
|
[selectedLayer],
|
||||||
)
|
)
|
||||||
|
|
||||||
const selectedElementTitle = selectedElement.map(
|
const selectedElementTitle = selectedElement.map(
|
||||||
(selectedElement) => {
|
(selectedElement) => {
|
||||||
// Svelte doesn't properly reload some of the legacy UI-elements
|
// Svelte doesn't properly reload some of the legacy UI-elements
|
||||||
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
// 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
|
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
||||||
const layer = selectedLayer.data
|
const layer = selectedLayer.data
|
||||||
if (selectedElement === undefined || layer === undefined) {
|
if (selectedElement === undefined || layer === undefined) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
||||||
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
|
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
|
||||||
},
|
},
|
||||||
[selectedLayer]
|
[selectedLayer],
|
||||||
)
|
)
|
||||||
|
|
||||||
let mapproperties: MapProperties = state.mapProperties
|
let mapproperties: MapProperties = state.mapProperties
|
||||||
let featureSwitches: FeatureSwitchState = state.featureSwitches
|
let featureSwitches: FeatureSwitchState = state.featureSwitches
|
||||||
let availableLayers = state.availableLayers
|
let availableLayers = state.availableLayers
|
||||||
let userdetails = state.osmConnection.userDetails
|
let userdetails = state.osmConnection.userDetails
|
||||||
let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
|
let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
|
||||||
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
|
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
|
||||||
let rasterLayerName =
|
let rasterLayerName =
|
||||||
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name
|
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name
|
||||||
onDestroy(
|
onDestroy(
|
||||||
rasterLayer.addCallbackAndRunD((l) => {
|
rasterLayer.addCallbackAndRunD((l) => {
|
||||||
rasterLayerName = l.properties.name
|
rasterLayerName = l.properties.name
|
||||||
})
|
}),
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
|
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
|
||||||
|
|
@ -156,7 +156,7 @@
|
||||||
<ToSvelte
|
<ToSvelte
|
||||||
construct={() => new ExtraLinkButton(state, layout.extraLink).SetClass("pointer-events-auto")}
|
construct={() => new ExtraLinkButton(state, layout.extraLink).SetClass("pointer-events-auto")}
|
||||||
/>
|
/>
|
||||||
<UploadingImageCounter {state} featureId="*" showThankYou={false} />
|
<UploadingImageCounter featureId="*" showThankYou={false} {state} />
|
||||||
<PendingChangesIndicator {state} />
|
<PendingChangesIndicator {state} />
|
||||||
<If condition={state.featureSwitchIsTesting}>
|
<If condition={state.featureSwitchIsTesting}>
|
||||||
<div class="alert w-fit">Testmode</div>
|
<div class="alert w-fit">Testmode</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue