Add hotkeys, document hotkeys, make 'DefaultGUI' runnable via NodeJS, generate hotkey documentation

UI/BigComponents/BackgroundMapSwitch.ts

@@ -7,6 +7,7 @@ import BaseLayer from "../../Models/BaseLayer"
 import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"
 import BaseUIElement from "../BaseUIElement"
 import { GeoOperations } from "../../Logic/GeoOperations"
+import Hotkeys from "../Base/Hotkeys"
 
 class SingleLayerSelectionButton extends Toggle {
     public readonly activate: () => void
@@ -48,13 +49,13 @@ class SingleLayerSelectionButton extends Toggle {
         let toggle: BaseUIElement = new Toggle(
             selected,
             unselected,
-            options.currentBackground.map((bg) => bg.category === options.preferredType)
+            options.currentBackground.map((bg) => bg?.category === options.preferredType)
         )
 
         super(
             toggle,
             undefined,
-            available.map((av) => av.category === options.preferredType)
+            available.map((av) => av?.category === options.preferredType)
         )
 
         /**
@@ -174,6 +175,7 @@ export default class BackgroundMapSwitch extends Combine {
         options?: {
             preferredCategory?: string
             allowedCategories?: ("osmbasedmap" | "photo" | "map")[]
+            enableHotkeys?: boolean
         }
     ) {
         const allowedCategories = options?.allowedCategories ?? ["osmbasedmap", "photo", "map"]
@@ -183,7 +185,7 @@ export default class BackgroundMapSwitch extends Combine {
         let activatePrevious: () => void = undefined
         for (const category of allowedCategories) {
             let preferredLayer = undefined
-            if (previousLayer.category === category) {
+            if (previousLayer?.category === category) {
                 preferredLayer = previousLayer
             }
 
@@ -198,6 +200,16 @@ export default class BackgroundMapSwitch extends Combine {
             if (category === options?.preferredCategory) {
                 button.activate()
             }
+
+            if (options?.enableHotkeys) {
+                Hotkeys.RegisterHotkey(
+                    { nomod: category.charAt(0).toUpperCase() },
+                    "Switch to a background layer of category " + category,
+                    () => {
+                        button.activate()
+                    }
+                )
+            }
             buttons.push(button)
         }
 

UI/BigComponents/DownloadPanel.ts

@@ -26,7 +26,7 @@ export class DownloadPanel extends Toggle {
         currentBounds: UIEventSource<BBox>
     }) {
         const t = Translations.t.general.download
-        const name = State.state.layoutToUse.id
+        const name = state.layoutToUse.id
 
         const includeMetaToggle = new CheckBoxes([t.includeMetaData])
         const metaisIncluded = includeMetaToggle.GetValue().map((selected) => selected.length > 0)

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -20,6 +20,7 @@ import FilteredLayer from "../../Models/FilteredLayer"
 import CopyrightPanel from "./CopyrightPanel"
 import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline"
 import PrivacyPolicy from "./PrivacyPolicy"
+import Hotkeys from "../Base/Hotkeys"
 
 export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
     public static MoreThemesTabIndex = 1
@@ -126,6 +127,7 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
                     osmcha_link: Utils.OsmChaLinkFor(7),
                 }),
                 "<br/>Version " + Constants.vNumber,
+                Hotkeys.generateDocumentationDynamic(),
             ]).SetClass("link-underline"),
         })
 

UI/BigComponents/GeolocationControl.ts

@@ -4,6 +4,7 @@ import { UIEventSource } from "../../Logic/UIEventSource"
 import GeoLocationHandler from "../../Logic/Actors/GeoLocationHandler"
 import { BBox } from "../../Logic/BBox"
 import Loc from "../../Models/Loc"
+import Hotkeys from "../Base/Hotkeys"
 
 /**
  * Displays an icon depending on the state of the geolocation.
@@ -70,7 +71,7 @@ export class GeolocationControl extends VariableUiElement {
             )
         )
 
-        this.onClick(async () => {
+        async function handleClick() {
             if (geolocationState.permission.data !== "granted") {
                 await geolocationState.requestPermission()
             }
@@ -108,7 +109,14 @@ export class GeolocationControl extends VariableUiElement {
             }
 
             lastClick.setData(new Date())
-        })
+        }
+
+        this.onClick(handleClick)
+        Hotkeys.RegisterHotkey(
+            { nomod: "L" },
+            "Pan the map to the current location or zoom the map to the current location. Requests geopermission",
+            handleClick
+        )
 
         lastClick.addCallbackAndRunD((_) => {
             window.setTimeout(() => {

UI/BigComponents/LeftControls.ts

@@ -13,7 +13,7 @@ import { VariableUiElement } from "../Base/VariableUIElement"
 import FeatureInfoBox from "../Popup/FeatureInfoBox"
 import CopyrightPanel from "./CopyrightPanel"
 import FeaturePipelineState from "../../Logic/State/FeaturePipelineState"
-import { FixedUiElement } from "../Base/FixedUiElement"
+import Hotkeys from "../Base/Hotkeys"
 
 export default class LeftControls extends Combine {
     constructor(
@@ -73,7 +73,7 @@ export default class LeftControls extends Combine {
             guiState.downloadControlIsOpened.setData(true)
         )
 
-        const downloadButtonn = new Toggle(
+        const downloadButton = new Toggle(
             toggledDownload,
             undefined,
             state.featureSwitchEnableExport.map(
@@ -94,11 +94,20 @@ export default class LeftControls extends Combine {
         const toggledFilter = new MapControlButton(Svg.layers_svg()).onClick(() =>
             guiState.filterViewIsOpened.setData(true)
         )
+        state.featureSwitchFilter.addCallbackAndRun((f) => {
+            Hotkeys.RegisterHotkey(
+                { nomod: "B" },
+                "Opens the Background, layers and filters panel",
+                () => {
+                    guiState.filterViewIsOpened.setData(!guiState.filterViewIsOpened.data)
+                }
+            )
+        })
 
         const filterButton = new Toggle(toggledFilter, undefined, state.featureSwitchFilter)
 
         const mapSwitch = new Toggle(
-            new BackgroundMapSwitch(state, state.backgroundLayer),
+            new BackgroundMapSwitch(state, state.backgroundLayer, { enableHotkeys: true }),
             undefined,
             state.featureSwitchBackgroundSelection
         )
@@ -120,7 +129,7 @@ export default class LeftControls extends Combine {
             state.featureSwitchWelcomeMessage
         )
 
-        super([currentViewAction, filterButton, downloadButtonn, copyright, mapSwitch])
+        super([currentViewAction, filterButton, downloadButton, copyright, mapSwitch])
 
         this.SetClass("flex flex-col")
     }

UI/BigComponents/ShareScreen.ts

@@ -80,7 +80,7 @@ export default class ShareScreen extends Combine {
             includeCurrentBackground.GetValue().map(
                 (includeBG) => {
                     if (includeBG) {
-                        return "background=" + currentLayer.data.id
+                        return "background=" + currentLayer.data?.id
                     } else {
                         return null
                     }
@@ -168,7 +168,7 @@ export default class ShareScreen extends Combine {
                 return `<span class='literal-code iframe-code-block'>
                          &lt;iframe src="${url}" allow="geolocation" width="100%" height="100%" style="min-width: 250px; min-height: 250px" title="${
                     layout.title?.txt ?? "MapComplete"
-                } with MapComplete"&gt;&lt;/iframe&gt 
+                } with MapComplete"&gt;&lt;/iframe&gt
                     </span>`
             })
         )