feat: zoom level change with keyboard buttons

Author: andreishket

vis/js/templates/Geomap/KeyboardZoomController/index.tsx

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { useKeyboardZoom } from "./useKeyboardZoom";
+
+export const KeyboardZoomController: FC = () => {
+  useKeyboardZoom();
+
+  return null;
+};

vis/js/templates/Geomap/KeyboardZoomController/useKeyboardZoom.ts

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useMap } from "react-leaflet";
+import type { Map as LeafletMap } from "leaflet";
+
+interface KeyboardZoomOptions {
+  step?: number;
+}
+
+const isTypingTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  const tag = target.tagName.toLowerCase();
+  return tag === "input" || tag === "textarea" || target.isContentEditable;
+};
+
+export const useKeyboardZoom = (options: KeyboardZoomOptions = {}): void => {
+  const { step = 1 } = options;
+  const map: LeafletMap = useMap();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (isTypingTarget(event.target)) {
+        return;
+      }
+
+      const { key } = event;
+      const currentZoom = map.getZoom();
+      const minZoom = map.getMinZoom();
+      const maxZoom = map.getMaxZoom();
+
+      if (key === "+" || key === "=") {
+        event.preventDefault();
+        map.setZoom(Math.min(currentZoom + step, maxZoom));
+      }
+
+      if (key === "-") {
+        event.preventDefault();
+        map.setZoom(Math.max(currentZoom - step, minZoom));
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [map, step]);
+};

vis/js/templates/Geomap/Pins/Pin/index.tsx

@@ -14,8 +14,6 @@ const { basic, selected } = offsets;
 export const Pin: FC<PinProps> = memo(({ data, isActive, onClick }) => {
   const { east, north } = getCoordinatesFromPaper(data);
 
-  console.log("Pin rendering");
-
   const handleClick = () => onClick(data);
 
   if (!east || !north) {

vis/js/templates/Geomap/index.tsx

@@ -9,12 +9,14 @@ import { Layer } from "./Layer";
 import { Pins } from "./Pins";
 import { SelectionResetHandler } from "./SelectionResetHandler";
 import { ZoomControls } from "./ZoomControls";
+import { KeyboardZoomController } from "./KeyboardZoomController";
 
 export const Geomap: FC = () => (
   <HeightContainer>
     <MapContainer {...CONFIG} className="geomap_container">
       <SelectionResetHandler />
       <ZoomControls />
+      <KeyboardZoomController />
       <Layer />
       <Pins />
     </MapContainer>