forked from MapComplete/MapComplete
Fix keyboard navigation for the map if the focus is not on the main map element
This commit is contained in:
parent
512a0b87ac
commit
a20f6a2d27
5 changed files with 183 additions and 149 deletions
|
@ -112,6 +112,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
|
||||||
readonly selectedLayer: UIEventSource<LayerConfig>
|
readonly selectedLayer: UIEventSource<LayerConfig>
|
||||||
readonly userRelatedState: UserRelatedState
|
readonly userRelatedState: UserRelatedState
|
||||||
readonly geolocation: GeoLocationHandler
|
readonly geolocation: GeoLocationHandler
|
||||||
|
readonly lastGeolocationRequestMoment: UIEventSource<Date> = new UIEventSource<Date>(undefined)
|
||||||
|
|
||||||
readonly imageUploadManager: ImageUploadManager
|
readonly imageUploadManager: ImageUploadManager
|
||||||
readonly previewedImage = new UIEventSource<ProvidedImage>(undefined)
|
readonly previewedImage = new UIEventSource<ProvidedImage>(undefined)
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
|
|
||||||
<button
|
<button
|
||||||
on:click={(e) => dispatch("click", e)}
|
on:click={(e) => dispatch("click", e)}
|
||||||
|
on:keydown
|
||||||
class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}
|
class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { VariableUiElement } from "../Base/VariableUIElement"
|
import { VariableUiElement } from "../Base/VariableUIElement"
|
||||||
import Svg from "../../Svg"
|
import Svg from "../../Svg"
|
||||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||||
import GeoLocationHandler from "../../Logic/Actors/GeoLocationHandler"
|
import GeoLocationHandler from "../../Logic/Actors/GeoLocationHandler"
|
||||||
import Hotkeys from "../Base/Hotkeys"
|
import Hotkeys from "../Base/Hotkeys"
|
||||||
import Translations from "../i18n/Translations"
|
import Translations from "../i18n/Translations"
|
||||||
|
@ -12,8 +12,16 @@ import { MapProperties } from "../../Models/MapProperties"
|
||||||
* Will set the 'lock' if clicked twice
|
* Will set the 'lock' if clicked twice
|
||||||
*/
|
*/
|
||||||
export class GeolocationControl extends VariableUiElement {
|
export class GeolocationControl extends VariableUiElement {
|
||||||
constructor(geolocationHandler: GeoLocationHandler, state: MapProperties) {
|
public readonly lastClick = new UIEventSource<Date>(undefined)
|
||||||
const lastClick = new UIEventSource<Date>(undefined)
|
private readonly _geolocationHandler: GeoLocationHandler
|
||||||
|
private readonly _mapProperties: MapProperties
|
||||||
|
private readonly _lastClickWithinThreeSecs: Store<boolean>
|
||||||
|
constructor(
|
||||||
|
geolocationHandler: GeoLocationHandler,
|
||||||
|
state: MapProperties,
|
||||||
|
lastGeolocationRequestByUser: UIEventSource<Date> = undefined
|
||||||
|
) {
|
||||||
|
const lastClick = lastGeolocationRequestByUser ?? new UIEventSource<Date>(undefined)
|
||||||
lastClick.addCallbackD((date) => {
|
lastClick.addCallbackD((date) => {
|
||||||
geolocationHandler.geolocationState.requestMoment.setData(date)
|
geolocationHandler.geolocationState.requestMoment.setData(date)
|
||||||
})
|
})
|
||||||
|
@ -77,52 +85,15 @@ export class GeolocationControl extends VariableUiElement {
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
||||||
async function handleClick() {
|
this._geolocationHandler = geolocationHandler
|
||||||
if (
|
this._mapProperties = state
|
||||||
geolocationState.permission.data !== "granted" &&
|
|
||||||
geolocationState.currentGPSLocation.data === undefined
|
|
||||||
) {
|
|
||||||
lastClick.setData(new Date())
|
|
||||||
geolocationState.requestMoment.setData(new Date())
|
|
||||||
await geolocationState.requestPermission()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (geolocationState.allowMoving.data === false) {
|
this.lastClick = lastClick
|
||||||
// Unlock
|
this._lastClickWithinThreeSecs = lastClickWithinThreeSecs
|
||||||
geolocationState.allowMoving.setData(true)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// A location _is_ known! Let's move to this location
|
this.onClick(() => this.handleClick())
|
||||||
const currentLocation = geolocationState.currentGPSLocation.data
|
Hotkeys.RegisterHotkey({ nomod: "L" }, Translations.t.hotkeyDocumentation.geolocate, () =>
|
||||||
if (currentLocation === undefined) {
|
this.handleClick()
|
||||||
// No location is known yet, not much we can do
|
|
||||||
lastClick.setData(new Date())
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const inBounds = state.bounds.data.contains([
|
|
||||||
currentLocation.longitude,
|
|
||||||
currentLocation.latitude,
|
|
||||||
])
|
|
||||||
geolocationHandler.MoveMapToCurrentLocation()
|
|
||||||
if (inBounds) {
|
|
||||||
state.zoom.update((z) => z + 3)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (lastClickWithinThreeSecs.data) {
|
|
||||||
geolocationState.allowMoving.setData(false)
|
|
||||||
lastClick.setData(undefined)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
lastClick.setData(new Date())
|
|
||||||
}
|
|
||||||
|
|
||||||
this.onClick(handleClick)
|
|
||||||
Hotkeys.RegisterHotkey(
|
|
||||||
{ nomod: "L" },
|
|
||||||
Translations.t.hotkeyDocumentation.geolocate,
|
|
||||||
handleClick
|
|
||||||
)
|
)
|
||||||
|
|
||||||
lastClick.addCallbackAndRunD((_) => {
|
lastClick.addCallbackAndRunD((_) => {
|
||||||
|
@ -140,4 +111,49 @@ export class GeolocationControl extends VariableUiElement {
|
||||||
}, 500)
|
}, 500)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async handleClick() {
|
||||||
|
const geolocationHandler = this._geolocationHandler
|
||||||
|
const geolocationState = this._geolocationHandler.geolocationState
|
||||||
|
const lastClick = this.lastClick
|
||||||
|
const state = this._mapProperties
|
||||||
|
if (
|
||||||
|
geolocationState.permission.data !== "granted" &&
|
||||||
|
geolocationState.currentGPSLocation.data === undefined
|
||||||
|
) {
|
||||||
|
lastClick.setData(new Date())
|
||||||
|
geolocationState.requestMoment.setData(new Date())
|
||||||
|
await geolocationState.requestPermission()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (geolocationState.allowMoving.data === false) {
|
||||||
|
// Unlock
|
||||||
|
geolocationState.allowMoving.setData(true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// A location _is_ known! Let's move to this location
|
||||||
|
const currentLocation = geolocationState.currentGPSLocation.data
|
||||||
|
if (currentLocation === undefined) {
|
||||||
|
// No location is known yet, not much we can do
|
||||||
|
lastClick.setData(new Date())
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const inBounds = state.bounds.data.contains([
|
||||||
|
currentLocation.longitude,
|
||||||
|
currentLocation.latitude,
|
||||||
|
])
|
||||||
|
geolocationHandler.MoveMapToCurrentLocation()
|
||||||
|
if (inBounds) {
|
||||||
|
state.zoom.update((z) => z + 3)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._lastClickWithinThreeSecs.data) {
|
||||||
|
geolocationState.allowMoving.setData(false)
|
||||||
|
lastClick.setData(undefined)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
lastClick.setData(new Date())
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -574,6 +574,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
|
||||||
|
|
||||||
private setAllowMoving(allow: true | boolean | undefined) {
|
private setAllowMoving(allow: true | boolean | undefined) {
|
||||||
const map = this._maplibreMap.data
|
const map = this._maplibreMap.data
|
||||||
|
console.log("Setting 'allowMoving' to", allow)
|
||||||
if (!map) {
|
if (!map) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,116 +1,128 @@
|
||||||
<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, HeartIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
|
import { CogIcon, EyeIcon, HeartIcon, 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 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 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 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 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";
|
import Cross from "../assets/svg/Cross.svelte"
|
||||||
import Cross from "../assets/svg/Cross.svelte";
|
import Summary from "./BigComponents/Summary.svelte"
|
||||||
import Summary from "./BigComponents/Summary.svelte";
|
import LanguagePicker from "./InputElement/LanguagePicker.svelte"
|
||||||
import LanguagePicker from "./InputElement/LanguagePicker.svelte";
|
import Mastodon from "../assets/svg/Mastodon.svelte"
|
||||||
import Mastodon from "../assets/svg/Mastodon.svelte";
|
import Bug from "../assets/svg/Bug.svelte"
|
||||||
import Bug from "../assets/svg/Bug.svelte";
|
import Liberapay from "../assets/svg/Liberapay.svelte"
|
||||||
import Liberapay from "../assets/svg/Liberapay.svelte";
|
import OpenJosm from "./Base/OpenJosm.svelte"
|
||||||
import OpenJosm from "./Base/OpenJosm.svelte";
|
import Min from "../assets/svg/Min.svelte"
|
||||||
import Min from "../assets/svg/Min.svelte";
|
import Plus from "../assets/svg/Plus.svelte"
|
||||||
import Plus from "../assets/svg/Plus.svelte";
|
import Filter from "../assets/svg/Filter.svelte"
|
||||||
import Filter from "../assets/svg/Filter.svelte";
|
import Add from "../assets/svg/Add.svelte"
|
||||||
import Add from "../assets/svg/Add.svelte";
|
import Statistics from "../assets/svg/Statistics.svelte"
|
||||||
import Statistics from "../assets/svg/Statistics.svelte";
|
import Community from "../assets/svg/Community.svelte"
|
||||||
import Community from "../assets/svg/Community.svelte";
|
import Download from "../assets/svg/Download.svelte"
|
||||||
import Download from "../assets/svg/Download.svelte";
|
import Share from "../assets/svg/Share.svelte"
|
||||||
import Share from "../assets/svg/Share.svelte";
|
import Favourites from "./Favourites/Favourites.svelte"
|
||||||
import Favourites from "./Favourites/Favourites.svelte";
|
import ImageOperations from "./Image/ImageOperations.svelte"
|
||||||
import ImageOperations from "./Image/ImageOperations.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> = new UIEventSource<Feature>(undefined);
|
let selectedElement: UIEventSource<Feature> = new UIEventSource<Feature>(undefined)
|
||||||
|
|
||||||
state.selectedElement.addCallback(selected => {
|
state.selectedElement.addCallback(selected => {
|
||||||
if(!selected){
|
if (!selected) {
|
||||||
selectedElement.setData(selected)
|
selectedElement.setData(selected)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if(selected !== selectedElement.data){
|
if (selected !== selectedElement.data) {
|
||||||
// We first set the selected element to 'undefined' to force the popup to close...
|
// We first set the selected element to 'undefined' to force the popup to close...
|
||||||
selectedElement.setData(undefined)
|
selectedElement.setData(undefined)
|
||||||
}
|
}
|
||||||
// ... we give svelte some time to update with requestAnimationFrame ...
|
// ... we give svelte some time to update with requestAnimationFrame ...
|
||||||
window.requestAnimationFrame(() => {
|
window.requestAnimationFrame(() => {
|
||||||
// ... and we force a fresh popup window
|
// ... and we force a fresh popup window
|
||||||
selectedElement.setData(selected)
|
selectedElement.setData(selected)
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
let selectedLayer: Store<LayerConfig> = state.selectedElement.mapD(element => state.layout.getMatchingLayer(element.properties));
|
let selectedLayer: Store<LayerConfig> = state.selectedElement.mapD(element => state.layout.getMatchingLayer(element.properties))
|
||||||
|
|
||||||
let currentZoom = state.mapProperties.zoom;
|
let currentZoom = state.mapProperties.zoom
|
||||||
let showCrosshair = state.userRelatedState.showCrosshair;
|
let showCrosshair = state.userRelatedState.showCrosshair
|
||||||
let arrowKeysWereUsed = state.mapProperties.lastKeyNavigation;
|
let arrowKeysWereUsed = state.mapProperties.lastKeyNavigation
|
||||||
let centerFeatures = state.closestFeatures.features;
|
let centerFeatures = state.closestFeatures.features
|
||||||
|
|
||||||
|
|
||||||
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 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
|
||||||
})
|
}),
|
||||||
);
|
)
|
||||||
let previewedImage = state.previewedImage;
|
let previewedImage = state.previewedImage
|
||||||
|
|
||||||
|
let geolocationControl = new GeolocationControl(state.geolocation, mapproperties, state.lastGeolocationRequestMoment)
|
||||||
|
|
||||||
|
function forwardEventToMap(e: KeyboardEvent) {
|
||||||
|
const mlmap = state.map.data
|
||||||
|
if(!mlmap){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(!mlmap.keyboard.isEnabled()){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const animation = mlmap.keyboard?.keydown(e)
|
||||||
|
animation?.cameraAnimation(mlmap)
|
||||||
|
}
|
||||||
</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">
|
||||||
|
@ -125,11 +137,12 @@
|
||||||
bounds={state.mapProperties.bounds}
|
bounds={state.mapProperties.bounds}
|
||||||
perLayer={state.perLayer}
|
perLayer={state.perLayer}
|
||||||
selectedElement={state.selectedElement}
|
selectedElement={state.selectedElement}
|
||||||
|
on:searchCompleted={() => {state.map?.data?.getCanvas()?.focus()}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</If>
|
</If>
|
||||||
<div class="float-left m-1 flex flex-col sm:mt-2">
|
<div class="float-left m-1 flex flex-col sm:mt-2">
|
||||||
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
|
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)} on:keydown={forwardEventToMap}>
|
||||||
<div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
|
<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} />
|
<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">
|
<b class="mr-1">
|
||||||
|
@ -137,14 +150,15 @@
|
||||||
</b>
|
</b>
|
||||||
</div>
|
</div>
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
<MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
|
<MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)} on:keydown={forwardEventToMap}>
|
||||||
<MenuIcon class="h-8 w-8 cursor-pointer" />
|
<MenuIcon class="h-8 w-8 cursor-pointer" />
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
|
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
|
||||||
<MapControlButton
|
<MapControlButton
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
selectedElement.setData(state.currentView.features?.data?.[0])
|
selectedElement.setData(state.currentView.features?.data?.[0])
|
||||||
}}
|
}} on:keydown={forwardEventToMap}
|
||||||
|
|
||||||
>
|
>
|
||||||
<ToSvelte
|
<ToSvelte
|
||||||
construct={() => currentViewLayer.defaultIcon().SetClass("w-8 h-8 cursor-pointer")}
|
construct={() => currentViewLayer.defaultIcon().SetClass("w-8 h-8 cursor-pointer")}
|
||||||
|
@ -178,6 +192,7 @@
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
state.openNewDialog()
|
state.openNewDialog()
|
||||||
}}
|
}}
|
||||||
|
on:keydown={forwardEventToMap}
|
||||||
>
|
>
|
||||||
{#if state.lastClickObject.hasPresets}
|
{#if state.lastClickObject.hasPresets}
|
||||||
<Tr t={Translations.t.general.add.title} />
|
<Tr t={Translations.t.general.add.title} />
|
||||||
|
@ -191,7 +206,7 @@
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<!-- bottom left elements -->
|
<!-- bottom left elements -->
|
||||||
<If condition={state.featureSwitches.featureSwitchFilter}>
|
<If condition={state.featureSwitches.featureSwitchFilter}>
|
||||||
<MapControlButton on:click={() => state.guistate.openFilterView()}>
|
<MapControlButton on:click={() => state.guistate.openFilterView()} on:keydown={forwardEventToMap}>
|
||||||
<Filter class="h-6 w-6" />
|
<Filter class="h-6 w-6" />
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
</If>
|
</If>
|
||||||
|
@ -231,16 +246,16 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</If>
|
</If>
|
||||||
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z + 1)}>
|
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z + 1)} on:keydown={forwardEventToMap}>
|
||||||
<Plus class="h-8 w-8" />
|
<Plus class="h-8 w-8" />
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}>
|
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)} on:keydown={forwardEventToMap}>
|
||||||
<Min class="h-8 w-8" />
|
<Min class="h-8 w-8" />
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
<If condition={featureSwitches.featureSwitchGeolocation}>
|
<If condition={featureSwitches.featureSwitchGeolocation}>
|
||||||
<MapControlButton>
|
<MapControlButton on:keydown={forwardEventToMap} on:click={() => geolocationControl.handleClick()}>
|
||||||
<ToSvelte
|
<ToSvelte
|
||||||
construct={new GeolocationControl(state.geolocation, mapproperties).SetClass("block w-8 h-8")}
|
construct={geolocationControl.SetClass("block w-8 h-8")}
|
||||||
/>
|
/>
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
</If>
|
</If>
|
||||||
|
@ -278,7 +293,7 @@
|
||||||
selectedElement.setData(undefined)
|
selectedElement.setData(undefined)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div slot="close-button"/>
|
<div slot="close-button" />
|
||||||
<div class="normal-background absolute flex h-full w-full flex-col">
|
<div class="normal-background absolute flex h-full w-full flex-col">
|
||||||
<SelectedElementTitle {state} layer={$selectedLayer} selectedElement={$selectedElement} />
|
<SelectedElementTitle {state} layer={$selectedLayer} selectedElement={$selectedElement} />
|
||||||
<SelectedElementView {state} layer={$selectedLayer} selectedElement={$selectedElement} />
|
<SelectedElementView {state} layer={$selectedLayer} selectedElement={$selectedElement} />
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue