Fix keyboard navigation for the map if the focus is not on the main map element

This commit is contained in:
Pieter Vander Vennet 2023-12-12 17:08:59 +01:00
parent 512a0b87ac
commit a20f6a2d27
5 changed files with 183 additions and 149 deletions

View file

@ -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)

View file

@ -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 />

View file

@ -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())
}
} }

View file

@ -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
} }

View file

@ -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} />