feat: add key combinations for map geometry (#1142)

<!--
Check relevant points but **please do not remove entries**.
-->

## Basics

<!--
These points need to be fulfilled for every PR.
-->

- [ ] I added a line to [changelog.md](/doc/changelog.md)
- [ ] The PR is rebased with current master.
- [ ] Details of what you changed are in commit messages.
- [ ] References to issues, e.g. `close #X`, are in the commit messages
and changelog.
- [ ] The buildserver is happy.

<!--
If you have any troubles fulfilling these criteria, please write about
the trouble as comment in the PR.
We will help you, but we cannot accept PRs that do not fulfill the
basics.
-->

## Checklist

<!--
For documentation fixes, spell checking, and similar none of these
points below need to be checked.
Otherwise please check these points when getting a PR done:
-->

- [ ] I have installed and I am using [pre-commit
hooks](../doc/contrib/README.md#Hooks)
- [ ] I fully described what my PR does in the documentation
- [ ] I fixed all affected documentation
- [ ] I fixed the introduction tour
- [ ] I wrote migrations in a way that they are compatible with already
present data
- [ ] I fixed all affected decisions
- [ ] I added automated tests or a [manual test
protocol](../doc/tests/manual/protocol.md)
- [ ] I added code comments, logging, and assertions as appropriate
- [ ] I translated all strings visible to the user
- [ ] I mentioned [every code or
binary](https://github.com/ElektraInitiative/PermaplanT/blob/master/.reuse/dep5)
not directly written or done by me in [reuse
syntax](https://reuse.software/)
- [ ] I created left-over issues for things that are still to be done
- [ ] Code is conforming to [our Architecture](/doc/architecture)
- [ ] Code is conforming to [our Guidelines](/doc/guidelines)
- [ ] Code is consistent to [our Design Decisions](/doc/decisions)
- [ ] Exceptions to any guidelines are documented

## Review

<!--
Reviewers can copy&check the following to their review.
Also the checklist above can be used.
But also the PR creator should check these points when getting a PR
done:
-->

- [ ] I've tested the code
- [ ] I've read through the whole code
- [ ] I've read through the whole documentation
- [ ] I've checked conformity to guidelines

doc/changelog.md

@@ -48,7 +48,7 @@ Syntax: `- short text describing the change _(Your Name)_`
 - Enable deletion of selected plants via DEL shortcut _(Daniel Steinkogler)_
 - _()_
 - _()_
-- _()_
+- Add key combinations for map geometry _(Daniel Steinkogler)_
 - _()_
 - _()_
 - _()_

frontend/src/components/Modals/ModalContainer.tsx

@@ -20,10 +20,12 @@ export default function ModalContainer({
   const keyHandlerActions = {
     cancelModal: onCancelKeyPressed,
   };
+
   useKeyHandlers(
     createKeyBindingsAccordingToConfig(KEYBINDINGS_SCOPE_GLOBAL, keyHandlerActions),
     document,
     true,
+    show,
   );
 
   return (

frontend/src/config/keybindings/keybindings.json

@@ -3,6 +3,9 @@
     "cancelModal": ["Escape"]
   },
   "base_layer": {
+    "activatePolygonMovePoints": ["Shift+M"],
+    "activatePolygonAddPoints": ["Shift+A"],
+    "activatePolygonDeletePoints": ["Shift+D"]
   },
   "plants_layer": {
     "exitPlantingMode": ["Escape"],

frontend/src/features/map_planning/layers/base/components/MapGeometryToolForm.tsx

@@ -1,5 +1,11 @@
 import IconButton from '@/components/Button/IconButton';
+import {
+  KEYBINDINGS_SCOPE_BASE_LAYER,
+  createKeyBindingsAccordingToConfig,
+} from '@/config/keybindings';
 import useMapStore from '@/features/map_planning/store/MapStore';
+import { isBaseLayerActive } from '@/features/map_planning/utils/layer-utils';
+import { useKeyHandlers } from '@/hooks/useKeyHandlers';
 import CloseIcon from '@/svg/icons/close.svg?react';
 import EraserIcon from '@/svg/icons/eraser.svg?react';
 import PencilPlusIcon from '@/svg/icons/pencil-plus.svg?react';
@@ -18,17 +24,48 @@ export function MapGeometryToolForm() {
   );
   const setStatusPanelContent = useMapStore((state) => state.setStatusPanelContent);
 
+  const activatePolygonMovePointsAction = () => {
+    activatePolygonMovePoints();
+    setStatusPanelContent(
+      <MapGeometryStatusPanelContent text={t('baseLayerForm:polygon_move_points_hint')} />,
+    );
+  };
+
+  const activatePolygonAddPointsAction = () => {
+    activatePolygonAddPoints();
+    setStatusPanelContent(
+      <MapGeometryStatusPanelContent text={t('baseLayerForm:polygon_add_points_hint')} />,
+    );
+  };
+
+  const activatePolygonDeletePointsAction = () => {
+    activatePolygonDeletePoints();
+    setStatusPanelContent(
+      <MapGeometryStatusPanelContent text={t('baseLayerForm:polygon_delete_points_hint')} />,
+    );
+  };
+
+  const keyHandlerActions: Record<string, () => void> = {
+    activatePolygonMovePoints: activatePolygonMovePointsAction,
+    activatePolygonAddPoints: activatePolygonAddPointsAction,
+    activatePolygonDeletePoints: activatePolygonDeletePointsAction,
+  };
+
+  useKeyHandlers(
+    createKeyBindingsAccordingToConfig(KEYBINDINGS_SCOPE_BASE_LAYER, keyHandlerActions),
+    document,
+    true,
+    isBaseLayerActive(),
+  );
+
   return (
     <div>
       <h2>{t('baseLayerForm:polygon_tools_title')}</h2>
       <div className="flex flex-row gap-1">
         <IconButton
           isToolboxIcon={true}
           onClick={() => {
-            activatePolygonMovePoints();
-            setStatusPanelContent(
-              <MapGeometryStatusPanelContent text={t('baseLayerForm:polygon_move_points_hint')} />,
-            );
+            activatePolygonMovePointsAction();
           }}
           title={t('baseLayerForm:polygon_move_points_tooltip')}
         >
@@ -37,10 +74,7 @@ export function MapGeometryToolForm() {
         <IconButton
           isToolboxIcon={true}
           onClick={() => {
-            activatePolygonAddPoints();
-            setStatusPanelContent(
-              <MapGeometryStatusPanelContent text={t('baseLayerForm:polygon_add_points_hint')} />,
-            );
+            activatePolygonAddPointsAction();
           }}
           title={t('baseLayerForm:polygon_add_points_tooltip')}
         >
@@ -49,12 +83,7 @@ export function MapGeometryToolForm() {
         <IconButton
           isToolboxIcon={true}
           onClick={() => {
-            activatePolygonDeletePoints();
-            setStatusPanelContent(
-              <MapGeometryStatusPanelContent
-                text={t('baseLayerForm:polygon_delete_points_hint')}
-              />,
-            );
+            activatePolygonDeletePointsAction();
           }}
           title={t('baseLayerForm:polygon_delete_points_tooltip')}
         >

frontend/src/hooks/useKeyHandlers.tsx

@@ -11,6 +11,9 @@ import { useEffect } from 'react';
  * @param {Record<string, () => void>} keyHandlerMap - A dictionary where keys are key names
  *     (e.g., 'Enter', 'Escape') and values are callback functions to be executed when the
  *     corresponding key is pressed.
+ * @param {HTMLElement | Document} htmlNode - The HTML node to which the event listener should be bound.
+ * @param {boolean} stopPropagation - Whether to stop the event from propagating to parent elements.
+ * @param {boolean} enabled - Whether the key handlers should be enabled.
  *
  * @example
  * // Example usage:
@@ -42,6 +45,7 @@ export function useKeyHandlers(
   keyHandlerMap: Record<string, (() => void) | undefined>,
   htmlNode: HTMLElement | Document = document,
   stopPropagation?: boolean,
+  enabled = true,
 ) {
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
@@ -52,7 +56,7 @@ export function useKeyHandlers(
         event.key,
       );
       const handler = keyHandlerMap[pressedShortcut];
-      if (handler) {
+      if (handler && enabled) {
         handler();
         if (stopPropagation === true) {
           event.stopPropagation();
@@ -65,5 +69,5 @@ export function useKeyHandlers(
     return () => {
       htmlNode.removeEventListener('keydown', handleKeyPress as EventListener);
     };
-  }, [htmlNode, keyHandlerMap, stopPropagation]);
+  }, [htmlNode, keyHandlerMap, stopPropagation, enabled]);
 }