Refactor keyboard event handling for map zoom and toggle list functionality. Keyboard shortcuts now also work when focused off the map

Author: SableRaf

pcd-website/src/components/MapView.vue

@@ -206,25 +206,25 @@ function handleKeydown(e: KeyboardEvent) {
       }
     }
   } else if (!isTextInput && /^[0-9]$/.test(e.key)) {
-    const mapEl = document.getElementById('map');
-    if (mapEl && (mapEl.contains(document.activeElement) || document.activeElement === mapEl)) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (e.key === '0') {
-        mapInstance?.setView([20, 10], 3);
-      } else {
-        mapInstance?.setZoom(parseInt(e.key));
-      }
-    }
-  } else if (e.key === 'M' || e.key === 'm') {
-    if (!isTextInput) {
-      const mapEl = document.getElementById('map');
-      if (mapEl && (mapEl.contains(document.activeElement) || document.activeElement === mapEl)) {
-        e.preventDefault();
-        listOpen.value = !listOpen.value;
-        if (listOpen.value) selectedNode.value = null;
-      }
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.key === '0') {
+      mapInstance?.setView([20, 10], 3);
+    } else {
+      mapInstance?.setZoom(parseInt(e.key));
     }
+  } else if (!isTextInput && (e.key === '+' || e.key === '=' || e.key === 'Add')) {
+    e.preventDefault();
+    e.stopPropagation();
+    mapInstance?.zoomIn();
+  } else if (!isTextInput && (e.key === '-' || e.key === 'Subtract')) {
+    e.preventDefault();
+    e.stopPropagation();
+    mapInstance?.zoomOut();
+  } else if (!isTextInput && (e.key === 'M' || e.key === 'm')) {
+    e.preventDefault();
+    listOpen.value = !listOpen.value;
+    if (listOpen.value) selectedNode.value = null;
   }
 }
 
@@ -243,11 +243,13 @@ onMounted(async () => {
   mapInstance = map;
   leafletRef = L;
 
-  // Remove digit keyCodes (48–57) from Leaflet's built-in zoom handler so our
-  // number-key zoom shortcuts don't conflict (e.g. keyCode 54 = '6' is zoom-out).
+  // Remove digit (48–57) and +/- keyCodes from Leaflet's built-in zoom handler
+  // so our global shortcuts don't double-fire when the map is focused.
   const kb = (map as any).keyboard;
   if (kb?._zoomKeys) {
     for (let code = 48; code <= 57; code++) delete kb._zoomKeys[code];
+    // +/= (187, 61) and -/_ (189, 173) — Leaflet's default zoom-in/out keys
+    for (const code of [61, 173, 187, 189]) delete kb._zoomKeys[code];
   }
 
   L.control.zoom({ position: 'topleft' }).addTo(map);