midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix: hide some elements of the UI if they are disabled by a featureSwitch

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-11 01:41:42 +02:00
parent 02da68a62e
commit 17503d5bfb
6 changed files with 402 additions and 366 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/Logic/FeatureSource/Sources/LastClickFeatureSource.ts
View file

@ -12,57 +12,57 @@ import { OsmTags } from "../../../Models/OsmFeature";
* Based on a lon/lat UIEVentSource, will generate the corresponding feature with the correct properties * Based on a lon/lat UIEVentSource, will generate the corresponding feature with the correct properties
*/ */
export class LastClickFeatureSource implements WritableFeatureSource { export class LastClickFeatureSource implements WritableFeatureSource {
public readonly features: UIEventSource<Feature[]> = new UIEventSource<Feature[]>([]) public readonly features: UIEventSource<Feature[]> = new UIEventSource<Feature[]>([]);
private i: number = 0 public readonly hasNoteLayer: boolean;
private readonly hasNoteLayer: string public readonly renderings: string[];
private readonly renderings: string[]; public readonly hasPresets: boolean;
private readonly hasPresets: string; private i: number = 0;
constructor(location: Store<{ lon: number; lat: number }>, layout: LayoutConfig) { constructor(location: Store<{ lon: number; lat: number }>, layout: LayoutConfig) {
this.hasNoteLayer = layout.layers.some((l) => l.id === "note") ? "yes" : "no" this.hasNoteLayer = layout.layers.some((l) => l.id === "note");
this.hasPresets= layout.layers.some((l) => l.presets?.length > 0) ? "yes" : "no" this.hasPresets = layout.layers.some((l) => l.presets?.length > 0);
const allPresets: BaseUIElement[] = [] const allPresets: BaseUIElement[] = [];
for (const layer of layout.layers) for (const layer of layout.layers)
for (let i = 0; i < (layer.presets ?? []).length; i++) { for (let i = 0; i < (layer.presets ?? []).length; i++) {
const preset = layer.presets[i] const preset = layer.presets[i];
const tags = new ImmutableStore(TagUtils.KVtoProperties(preset.tags)) const tags = new ImmutableStore(TagUtils.KVtoProperties(preset.tags));
const { html } = layer.mapRendering[0].RenderIcon(tags, false, { const { html } = layer.mapRendering[0].RenderIcon(tags, false, {
noSize: true, noSize: true,
includeBadges: false, includeBadges: false
}) });
allPresets.push(html) allPresets.push(html);
} }
this.renderings = Utils.Dedup( this.renderings = Utils.Dedup(
allPresets.map((uiElem) => allPresets.map((uiElem) =>
Utils.runningFromConsole ? "" : uiElem.ConstructElement().innerHTML Utils.runningFromConsole ? "" : uiElem.ConstructElement().innerHTML
) )
) );
location.addCallbackAndRunD(({ lon, lat }) => { location.addCallbackAndRunD(({ lon, lat }) => {
this.features.setData([this.createFeature(lon, lat)]) this.features.setData([this.createFeature(lon, lat)]);
}) });
} }
public createFeature(lon: number, lat: number): Feature<Point, OsmTags> { public createFeature(lon: number, lat: number): Feature<Point, OsmTags> {
const properties: OsmTags = { const properties: OsmTags = {
lastclick: "yes", lastclick: "yes",
id: "last_click_" + this.i, id: "last_click_" + this.i,
has_note_layer: this.hasNoteLayer , has_note_layer: this.hasNoteLayer ? "yes" : "no",
has_presets:this.hasPresets , has_presets: this.hasPresets ? "yes" : "no",
renderings: this.renderings.join(""), renderings: this.renderings.join(""),
number_of_presets: "" +this. renderings.length, number_of_presets: "" + this.renderings.length,
first_preset: this.renderings[0], first_preset: this.renderings[0]
} };
this. i++ this.i++;
return <Feature<Point, OsmTags>>{ return <Feature<Point, OsmTags>>{
type: "Feature", type: "Feature",
properties, properties,
geometry: { geometry: {
type: "Point", type: "Point",
coordinates: [lon, lat], coordinates: [lon, lat]
}, }
} };
} }
} }

2
src/Logic/State/FeatureSwitchState.ts
View file

@ -99,7 +99,7 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches {
) )
this.featureSwitchCommunityIndex = FeatureSwitchUtils.initSwitch( this.featureSwitchCommunityIndex = FeatureSwitchUtils.initSwitch(
"fs-community-index", "fs-community-index",
true, this.featureSwitchEnableLogin.data,
"Disables/enables the button to get in touch with the community" "Disables/enables the button to get in touch with the community"
) )
this.featureSwitchExtraLinkEnabled = FeatureSwitchUtils.initSwitch( this.featureSwitchExtraLinkEnabled = FeatureSwitchUtils.initSwitch(

92
src/Models/ThemeViewState.ts
View file

@ -338,7 +338,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
); );
this.initActors(); this.initActors();
// TODO remove this.addLastClick(lastClick);
this.drawSpecialLayers(); this.drawSpecialLayers();
this.initHotkeys(); this.initHotkeys();
this.miscSetup(); this.miscSetup();
@ -417,52 +416,61 @@ export default class ThemeViewState implements SpecialVisualizationState {
} }
); );
Hotkeys.RegisterHotkey( this.featureSwitches.featureSwitchBackgroundSelection.addCallbackAndRun(enable => {
{ if(!enable){
nomod: "b" return
},
Translations.t.hotkeyDocumentation.openLayersPanel,
() => {
if (this.featureSwitches.featureSwitchFilter.data) {
this.guistate.openFilterView();
} }
} Hotkeys.RegisterHotkey(
); {
nomod: "b"
},
Translations.t.hotkeyDocumentation.openLayersPanel,
() => {
if (this.featureSwitches.featureSwitchFilter.data) {
this.guistate.openFilterView();
}
}
);
Hotkeys.RegisterHotkey(
{ shift: "O" },
Translations.t.hotkeyDocumentation.selectMapnik,
() => {
this.mapProperties.rasterLayer.setData(AvailableRasterLayers.osmCarto);
}
);
const setLayerCategory = (category: EliCategory) => {
const available = this.availableLayers.data;
const current = this.mapProperties.rasterLayer;
const best = RasterLayerUtils.SelectBestLayerAccordingTo(
available,
category,
current.data
);
console.log("Best layer for category", category, "is", best.properties.id);
current.setData(best);
};
Hotkeys.RegisterHotkey(
{ nomod: "O" },
Translations.t.hotkeyDocumentation.selectOsmbasedmap,
() => setLayerCategory("osmbasedmap")
);
Hotkeys.RegisterHotkey({ nomod: "M" }, Translations.t.hotkeyDocumentation.selectMap, () =>
setLayerCategory("map")
);
Hotkeys.RegisterHotkey(
{ nomod: "P" },
Translations.t.hotkeyDocumentation.selectAerial,
() => setLayerCategory("photo")
);
return true
})
Hotkeys.RegisterHotkey(
{ shift: "O" },
Translations.t.hotkeyDocumentation.selectMapnik,
() => {
this.mapProperties.rasterLayer.setData(AvailableRasterLayers.osmCarto);
}
);
const setLayerCategory = (category: EliCategory) => {
const available = this.availableLayers.data;
const current = this.mapProperties.rasterLayer;
const best = RasterLayerUtils.SelectBestLayerAccordingTo(
available,
category,
current.data
);
console.log("Best layer for category", category, "is", best.properties.id);
current.setData(best);
};
Hotkeys.RegisterHotkey(
{ nomod: "O" },
Translations.t.hotkeyDocumentation.selectOsmbasedmap,
() => setLayerCategory("osmbasedmap")
);
Hotkeys.RegisterHotkey({ nomod: "M" }, Translations.t.hotkeyDocumentation.selectMap, () =>
setLayerCategory("map")
);
Hotkeys.RegisterHotkey(
{ nomod: "P" },
Translations.t.hotkeyDocumentation.selectAerial,
() => setLayerCategory("photo")
);
} }
private addLastClick(last_click: LastClickFeatureSource) { private addLastClick(last_click: LastClickFeatureSource) {

180
src/UI/Base/TabbedGroup.svelte
View file

@ -1,20 +1,32 @@
<script lang="ts"> <script lang="ts">
/** /**
* Thin wrapper around 'TabGroup' which binds the state * Thin wrapper around 'TabGroup' which binds the state
*/ */
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui" import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui";
import { UIEventSource } from "../../Logic/UIEventSource" import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource";
import { twJoin } from "tailwind-merge" import { twJoin } from "tailwind-merge";
export let tab: UIEventSource<number> /**
let tabElements: HTMLElement[] = [] * If a condition is given for a certain tab, it will only be shown if this condition is true.
$: tabElements[$tab]?.click() * E.g.
$: { * condition3 = new ImmutableStore(false) will always hide tab3 (the fourth tab)
if (tabElements[tab.data]) { */
window.setTimeout(() => tabElements[tab.data].click(), 50) let tr = new ImmutableStore(true)
export let condition0: Store<boolean> = tr
export let condition1: Store<boolean> = tr
export let condition2: Store<boolean> = tr
export let condition3: Store<boolean> = tr
export let condition4: Store<boolean> = tr
export let tab: UIEventSource<number>;
let tabElements: HTMLElement[] = [];
$: tabElements[$tab]?.click();
$: {
if (tabElements[tab.data]) {
window.setTimeout(() => tabElements[tab.data].click(), 50);
}
} }
}
</script> </script>
<div class="tabbedgroup flex h-full w-full"> <div class="tabbedgroup flex h-full w-full">
@ -29,41 +41,31 @@
> >
<div class="interactive sticky top-0 flex items-center justify-between"> <div class="interactive sticky top-0 flex items-center justify-between">
<TabList class="flex flex-wrap"> <TabList class="flex flex-wrap">
{#if $$slots.title1} <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition0 && "hidden")}>
<Tab class={({ selected }) => twJoin("tab", selected && "primary")}> <div bind:this={tabElements[0]} class="flex">
<div bind:this={tabElements[0]} class="flex"> <slot name="title0">Tab 0</slot>
<slot name="title0">Tab 0</slot> </div>
</div> </Tab>
</Tab> <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition1 && "hidden")}>
{/if} <div bind:this={tabElements[1]} class="flex">
{#if $$slots.title1} <slot name="title1" />
<Tab class={({ selected }) => twJoin("tab", selected && "primary")}> </div>
<div bind:this={tabElements[1]} class="flex"> </Tab>
<slot name="title1" /> <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition2 && "hidden")}>
</div> <div bind:this={tabElements[2]} class="flex">
</Tab> <slot name="title2" />
{/if} </div>
{#if $$slots.title2} </Tab>
<Tab class={({ selected }) => twJoin("tab", selected && "primary")}> <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition3 && "hidden")}>
<div bind:this={tabElements[2]} class="flex"> <div bind:this={tabElements[3]} class="flex">
<slot name="title2" /> <slot name="title3" />
</div> </div>
</Tab> </Tab>
{/if} <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition4 && "hidden")}>
{#if $$slots.title3} <div bind:this={tabElements[4]} class="flex">
<Tab class={({ selected }) => twJoin("tab", selected && "primary")}> <slot name="title4" />
<div bind:this={tabElements[3]} class="flex"> </div>
<slot name="title3" /> </Tab>
</div>
</Tab>
{/if}
{#if $$slots.title4}
<Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
<div bind:this={tabElements[4]} class="flex">
<slot name="title4" />
</div>
</Tab>
{/if}
</TabList> </TabList>
<slot name="post-tablist" /> <slot name="post-tablist" />
</div> </div>
@ -75,16 +77,24 @@
</slot> </slot>
</TabPanel> </TabPanel>
<TabPanel class="tabpanel"> <TabPanel class="tabpanel">
<slot name="content1" /> <slot name="content1">
<div />
</slot>
</TabPanel> </TabPanel>
<TabPanel class="tabpanel"> <TabPanel class="tabpanel">
<slot name="content2" /> <slot name="content2">
<div />
</slot>
</TabPanel> </TabPanel>
<TabPanel class="tabpanel"> <TabPanel class="tabpanel">
<slot name="content3" /> <slot name="content3">
<div />
</slot>
</TabPanel> </TabPanel>
<TabPanel class="tabpanel"> <TabPanel class="tabpanel">
<slot name="content4" /> <slot name="content4">
<div />
</slot>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</div> </div>
@ -92,44 +102,44 @@
</div> </div>
<style> <style>
.tabbedgroup { .tabbedgroup {
max-height: 100vh; max-height: 100vh;
height: 100%; height: 100%;
} }
:global(.tabpanel) { :global(.tabpanel) {
height: 100%; height: 100%;
} }
:global(.tabpanels) { :global(.tabpanels) {
height: calc(100% - 2rem); height: calc(100% - 2rem);
} }
:global(.tab) { :global(.tab) {
margin: 0.25rem; margin: 0.25rem;
padding: 0.25rem; padding: 0.25rem;
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
border-radius: 1rem; border-radius: 1rem;
} }
:global(.tab .flex) { :global(.tab .flex) {
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
} }
:global(.tab span|div) { :global(.tab span|div) {
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
display: flex; display: flex;
} }
:global(.tab-selected svg) { :global(.tab-selected svg) {
fill: var(--catch-detail-color-contrast); fill: var(--catch-detail-color-contrast);
} }
:global(.tab-unselected) { :global(.tab-unselected) {
background-color: var(--background-color) !important; background-color: var(--background-color) !important;
color: var(--foreground-color) !important; color: var(--foreground-color) !important;
} }
</style> </style>

183
src/UI/BigComponents/ThemeIntroPanel.svelte
View file

@ -1,47 +1,48 @@
<script lang="ts"> <script lang="ts">
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations";
import Svg from "../../Svg" import Svg from "../../Svg";
import Tr from "../Base/Tr.svelte" import Tr from "../Base/Tr.svelte";
import NextButton from "../Base/NextButton.svelte" import NextButton from "../Base/NextButton.svelte";
import Geosearch from "./Geosearch.svelte" import Geosearch from "./Geosearch.svelte";
import ToSvelte from "../Base/ToSvelte.svelte" import ToSvelte from "../Base/ToSvelte.svelte";
import ThemeViewState from "../../Models/ThemeViewState" import ThemeViewState from "../../Models/ThemeViewState";
import { Store, UIEventSource } from "../../Logic/UIEventSource" import { Store, UIEventSource } from "../../Logic/UIEventSource";
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid" import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid";
import { twJoin } from "tailwind-merge" import { twJoin } from "tailwind-merge";
import { Utils } from "../../Utils" import { Utils } from "../../Utils";
import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState" import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState";
import If from "../Base/If.svelte";
/** /**
* The theme introduction panel * The theme introduction panel
*/ */
export let state: ThemeViewState export let state: ThemeViewState;
let layout = state.layout let layout = state.layout;
let selectedElement = state.selectedElement let selectedElement = state.selectedElement;
let selectedLayer = state.selectedLayer let selectedLayer = state.selectedLayer;
let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined) let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined);
let searchEnabled = false let searchEnabled = false;
let geopermission: Store<GeolocationPermissionState> = let geopermission: Store<GeolocationPermissionState> =
state.geolocation.geolocationState.permission state.geolocation.geolocationState.permission;
let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation;
geopermission.addCallback((perm) => console.log(">>>> Permission", perm)) geopermission.addCallback((perm) => console.log(">>>> Permission", perm));
function jumpToCurrentLocation() { function jumpToCurrentLocation() {
const glstate = state.geolocation.geolocationState const glstate = state.geolocation.geolocationState;
if (glstate.currentGPSLocation.data !== undefined) { if (glstate.currentGPSLocation.data !== undefined) {
const c: GeolocationCoordinates = glstate.currentGPSLocation.data const c: GeolocationCoordinates = glstate.currentGPSLocation.data;
state.guistate.themeIsOpened.setData(false) state.guistate.themeIsOpened.setData(false);
const coor = { lon: c.longitude, lat: c.latitude } const coor = { lon: c.longitude, lat: c.latitude };
state.mapProperties.location.setData(coor) state.mapProperties.location.setData(coor);
}
if (glstate.permission.data !== "granted") {
glstate.requestPermission();
return;
}
} }
if (glstate.permission.data !== "granted") {
glstate.requestPermission()
return
}
}
</script> </script>
<div class="flex h-full flex-col justify-between"> <div class="flex h-full flex-col justify-between">
@ -62,61 +63,67 @@
</div> </div>
</NextButton> </NextButton>
<div class="flex w-full flex-wrap sm:flex-nowrap">
{#if $currentGPSLocation !== undefined || $geopermission === "prompt"}
<button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
<Tr t={Translations.t.general.openTheMapAtGeolocation} />
</button>
<!-- No geolocation granted - we don't show the button -->
{:else if $geopermission === "requested"}
<button class="disabled flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
<!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
<ToSvelte
construct={Svg.crosshair_svg()
.SetClass("w-8 h-8")
.SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
/>
<Tr t={Translations.t.general.waitingForGeopermission} />
</button>
{:else if $geopermission === "denied"}
<button class="disabled flex w-full items-center gap-x-2">
<ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} />
<Tr t={Translations.t.general.geopermissionDenied} />
</button>
{:else}
<button class="disabled flex w-full items-center gap-x-2">
<ToSvelte
construct={Svg.crosshair_svg()
.SetClass("w-8 h-8")
.SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
/>
<Tr t={Translations.t.general.waitingForLocation} />
</button>
{/if}
<div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2"> <div class="flex w-full flex-wrap sm:flex-nowrap">
<div class="w-full"> <If condition={state.featureSwitches.featureSwitchGeolocation}>
<Geosearch {#if $currentGPSLocation !== undefined || $geopermission === "prompt"}
bounds={state.mapProperties.bounds} <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)} <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
on:searchIsValid={(isValid) => { <Tr t={Translations.t.general.openTheMapAtGeolocation} />
</button>
<!-- No geolocation granted - we don't show the button -->
{:else if $geopermission === "requested"}
<button class="disabled flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
<!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
<ToSvelte
construct={Svg.crosshair_svg()
.SetClass("w-8 h-8")
.SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
/>
<Tr t={Translations.t.general.waitingForGeopermission} />
</button>
{:else if $geopermission === "denied"}
<button class="disabled flex w-full items-center gap-x-2">
<ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} />
<Tr t={Translations.t.general.geopermissionDenied} />
</button>
{:else}
<button class="disabled flex w-full items-center gap-x-2">
<ToSvelte
construct={Svg.crosshair_svg()
.SetClass("w-8 h-8")
.SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
/>
<Tr t={Translations.t.general.waitingForLocation} />
</button>
{/if}
</If>
<If condition={state.featureSwitches.featureSwitchSearch}>
<div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
<div class="w-full">
<Geosearch
bounds={state.mapProperties.bounds}
on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
on:searchIsValid={(isValid) => {
searchEnabled = isValid searchEnabled = isValid
}} }}
perLayer={state.perLayer} perLayer={state.perLayer}
{selectedElement} {selectedElement}
{selectedLayer} {selectedLayer}
{triggerSearch} {triggerSearch}
/> />
</div>
<button
class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
on:click={() => triggerSearch.ping()}
>
<Tr t={Translations.t.general.search.searchShort} />
<SearchIcon class="h-6 w-6" />
</button>
</div> </div>
<button </If>
class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
on:click={() => triggerSearch.ping()}
>
<Tr t={Translations.t.general.search.searchShort} />
<SearchIcon class="h-6 w-6" />
</button>
</div>
</div> </div>
</div> </div>

261
src/UI/ThemeViewGUI.svelte
View file

@ -1,114 +1,114 @@
<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";
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">
@ -169,19 +169,28 @@
<!-- bottom controls --> <!-- bottom controls -->
<div class="flex w-full items-end justify-between px-4"> <div class="flex w-full items-end justify-between px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<span> <If condition={featureSwitches.featureSwitchEnableLogin}>
<button class="w-fit pointer-events-auto" on:click={() => {state.openNewDialog()}}> {#if state.lastClickObject.hasPresets || state.lastClickObject.hasNoteLayer}
<Tr t={Translations.t.general.add.title}/> <button class="w-fit pointer-events-auto" on:click={() => {state.openNewDialog()}}>
</button> {#if state.lastClickObject.hasPresets}
</span> <Tr t={Translations.t.general.add.title} />
{:else}
<Tr t={Translations.t.notes.addAComment} />
{/if}
</button>
{/if}
</If>
<div class="flex"> <div class="flex">
<!-- bottom left elements --> <!-- bottom left elements -->
<MapControlButton on:click={() => state.guistate.openFilterView()}> <If condition={state.featureSwitches.featureSwitchFilter}>
<ToSvelte construct={Svg.filter_svg().SetClass("h-6 w-6")} /> <MapControlButton on:click={() => state.guistate.openFilterView()}>
</MapControlButton> <ToSvelte construct={Svg.filter_svg().SetClass("h-6 w-6")} />
</MapControlButton>
<OpenBackgroundSelectorButton hideTooltip={true} {state} /> </If>
<If condition={state.featureSwitches.featureSwitchBackgroundSelection}>
<OpenBackgroundSelectorButton hideTooltip={true} {state} />
</If>
<a <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" 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={() => { on:click={() => {
@ -267,9 +276,9 @@
<If condition={state.guistate.themeIsOpened}> <If condition={state.guistate.themeIsOpened}>
<!-- Theme menu --> <!-- Theme menu -->
<FloatOver on:close={() => state.guistate.themeIsOpened.setData(false)}> <FloatOver on:close={() => state.guistate.themeIsOpened.setData(false)}>
<span slot="close-button"><!-- Disable the close button --></span> <span slot="close-button"><!-- Disable the close button --></span>
<TabbedGroup tab={state.guistate.themeViewTabIndex}> <TabbedGroup condition1={state.featureSwitches.featureSwitchFilter} tab={state.guistate.themeViewTabIndex}>
<div slot="post-tablist"> <div slot="post-tablist">
<XCircleIcon <XCircleIcon
class="mr-2 h-8 w-8" class="mr-2 h-8 w-8"
@ -287,10 +296,8 @@
</div> </div>
<div class="flex" slot="title1"> <div class="flex" slot="title1">
<If condition={state.featureSwitches.featureSwitchFilter}> <ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")} />
<ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")} /> <Tr t={Translations.t.general.menu.filter} />
<Tr t={Translations.t.general.menu.filter} />
</If>
</div> </div>
<div class="m-2 flex flex-col" slot="content1"> <div class="m-2 flex flex-col" slot="content1">
@ -310,6 +317,7 @@
/> />
{/each} {/each}
</div> </div>
<div class="flex" slot="title2"> <div class="flex" slot="title2">
<If condition={state.featureSwitches.featureSwitchEnableExport}> <If condition={state.featureSwitches.featureSwitchEnableExport}>
<ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} /> <ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
@ -356,7 +364,8 @@
<!-- Menu page --> <!-- Menu page -->
<FloatOver on:close={() => state.guistate.menuIsOpened.setData(false) }> <FloatOver on:close={() => state.guistate.menuIsOpened.setData(false) }>
<span slot="close-button"><!-- Hide the default close button --></span> <span slot="close-button"><!-- Hide the default close button --></span>
<TabbedGroup tab={state.guistate.menuViewTabIndex}> <TabbedGroup condition1={featureSwitches.featureSwitchEnableLogin} condition2={state.featureSwitches. featureSwitchCommunityIndex}
tab={state.guistate.menuViewTabIndex}>
<div slot="post-tablist"> <div slot="post-tablist">
<XCircleIcon <XCircleIcon
class="mr-2 h-8 w-8" class="mr-2 h-8 w-8"
@ -431,7 +440,6 @@
<div class="m-2" slot="content2"> <div class="m-2" slot="content2">
<CommunityIndexView location={state.mapProperties.location} /> <CommunityIndexView location={state.mapProperties.location} />
</div> </div>
<div class="flex" slot="title3"> <div class="flex" slot="title3">
<EyeIcon class="w-6" /> <EyeIcon class="w-6" />
<Tr t={Translations.t.privacy.title} /> <Tr t={Translations.t.privacy.title} />
@ -442,12 +450,15 @@
<Tr slot="title4" t={Translations.t.advanced.title} /> <Tr slot="title4" t={Translations.t.advanced.title} />
<div class="m-2 flex flex-col" slot="content4"> <div class="m-2 flex flex-col" slot="content4">
<OpenIdEditor mapProperties={state.mapProperties} /> <If condition={featureSwitches.featureSwitchEnableLogin}>
<ToSvelte <OpenIdEditor mapProperties={state.mapProperties} />
construct={() => <ToSvelte
construct={() =>
new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")} new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}
/> />
<MapillaryLink mapProperties={state.mapProperties} /> <MapillaryLink mapProperties={state.mapProperties} />
</If>
<ToSvelte construct={Hotkeys.generateDocumentationDynamic} /> <ToSvelte construct={Hotkeys.generateDocumentationDynamic} />
</div> </div>
</TabbedGroup> </TabbedGroup>