Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

A11y: various improvements

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-19 22:21:34 +01:00
parent 0d4f2c9c36
commit 5fa2ddd9c1
23 changed files with 327 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/UI/Map/MapLibreAdaptor.ts
View file

@ -9,7 +9,6 @@ import SvelteUIElement from "../Base/SvelteUIElement"
import MaplibreMap from "./MaplibreMap.svelte"
import { RasterLayerProperties } from "../../Models/RasterLayerProperties"
import * as htmltoimage from "html-to-image"
import { ALL } from "node:dns"
/**
* The 'MapLibreAdaptor' bridges 'MapLibre' with the various properties of the `MapProperties`
@ -41,6 +40,8 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
readonly lastClickLocation: Store<undefined | { lon: number; lat: number }>
readonly minzoom: UIEventSource<number>
readonly maxzoom: UIEventSource<number>
readonly rotation: UIEventSource<number>
readonly animationRunning = new UIEventSource(false)
/**
* Functions that are called when one of those actions has happened
@ -81,6 +82,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
this.allowRotating = state?.allowRotating ?? new UIEventSource<boolean>(true)
this.allowZooming = state?.allowZooming ?? new UIEventSource(true)
this.bounds = state?.bounds ?? new UIEventSource(undefined)
this.rotation = state?.rotation ?? new UIEventSource<number>(0)
this.rasterLayer =
state?.rasterLayer ?? new UIEventSource<RasterLayerPolygon | undefined>(undefined)
@ -121,6 +123,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
self.setMinzoom(self.minzoom.data)
self.setMaxzoom(self.maxzoom.data)
self.setBounds(self.bounds.data)
self.SetRotation(self.rotation.data)
self.setBackground()
this.updateStores(true)
map.on("moveend", () => this.updateStores())
@ -133,6 +136,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
map.on("dblclick", (e) => {
handleClick(e)
})
map.on("rotateend", (e) => {
this.updateStores()
})
map.getContainer().addEventListener("keydown", (event) => {
let locked: "islocked" = undefined
if (!this.allowMoving.data) {
@ -169,12 +175,12 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
console.error("Could not set background")
})
)
this.location.addCallbackAndRunD((loc) => {
self.MoveMapToCurrentLoc(loc)
})
this.zoom.addCallbackAndRunD((z) => self.SetZoom(z))
this.maxbounds.addCallbackAndRun((bbox) => self.setMaxBounds(bbox))
this.rotation.addCallbackAndRunD((bearing) => self.SetRotation(bearing))
this.allowMoving.addCallbackAndRun((allowMoving) => {
self.setAllowMoving(allowMoving)
self.pingKeycodeEvent(allowMoving ? "unlocked" : "locked")
@ -459,6 +465,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
if (this.bounds.data === undefined || !isSetup) {
this.bounds.setData(bbox)
}
this.rotation.setData(map.getBearing())
}
private SetZoom(z: number): void {
@ -471,6 +478,14 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
}
}
private SetRotation(bearing: number): void {
const map = this._maplibreMap.data
if (!map || bearing === undefined) {
return
}
map.rotateTo(bearing, { duration: 0 })
}
private MoveMapToCurrentLoc(loc: { lat: number; lon: number }): void {
const map = this._maplibreMap.data
if (!map || loc === undefined) {