@tpzdsp/next-toolkit 1.4.5 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "A reusable React component library for Next.js applications",
   "type": "module",
   "private": false,

package/src/assets/styles/globals.css

@@ -24,7 +24,7 @@
 /* Component-specific styles */
 @layer components {
   .focus-yellow {
-    @apply z-20 focus:border-[#ffbf47] focus:outline focus:outline-[3px] focus:outline-[#ffbf47];
+    @apply focus:border-[#ffbf47] focus:outline focus:outline-[3px] focus:outline-[#ffbf47];
   }
 
   .library-button {

package/src/map/index.ts

@@ -5,6 +5,8 @@ export * from './LayerSwitcherControl';
 export * from './utils';
 export * from './MapComponent';
 export * from './MapContext';
+export * from './useKeyboardDrawing';
+export * from './useVirtualCursor';
 export * from './osOpenNamesSearch';
 export * from './Popup';
 export * from './projections';

package/src/map/useKeyboardDrawing.ts

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { Map as OlMap } from 'ol';
+import { type Coordinate } from 'ol/coordinate';
+
+import { useVirtualCursor } from './useVirtualCursor';
+import { KeyboardKeys } from './utils';
+
+type UseKeyboardDrawingProps = {
+  map: OlMap | undefined;
+  isDrawing: boolean;
+  addVertex: (coord: Coordinate) => void;
+  finishDrawing: () => void;
+  cancelDrawing: () => void;
+};
+
+const DELTA = 20; // Base movement in pixels
+
+export const useKeyboardDrawing = ({
+  map,
+  isDrawing,
+  addVertex,
+  finishDrawing,
+  cancelDrawing,
+}: UseKeyboardDrawingProps) => {
+  const [cursorPosition, setCursorPosition] = useState<Coordinate | null>(null);
+
+  // Integrate the virtual cursor overlay
+  useVirtualCursor(map, isDrawing, cursorPosition);
+
+  // Initialize cursor at map center when drawing starts
+  useEffect(() => {
+    if (isDrawing && map) {
+      setCursorPosition(map.getView().getCenter() ?? [0, 0]);
+    }
+
+    if (!isDrawing) {
+      setCursorPosition(null);
+    }
+  }, [isDrawing, map]);
+
+  // Move the virtual cursor by dx/dy steps
+  const moveCursor = useCallback(
+    (dx: number, dy: number) => {
+      if (!cursorPosition || !map) {
+        return;
+      }
+
+      const view = map.getView();
+      const resolution = view.getResolution() ?? 1;
+      const delta = DELTA * resolution;
+
+      setCursorPosition([
+        cursorPosition[0] + dx * delta,
+        cursorPosition[1] - dy * delta, // Invert Y for map coordinates
+      ]);
+    },
+    [cursorPosition, map],
+  );
+
+  // Handle keyboard navigation and update cursor
+  useEffect(() => {
+    if (!map || !isDrawing) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isDrawing) {
+        return;
+      }
+
+      switch (event.key) {
+        case KeyboardKeys.ArrowUp:
+          moveCursor(0, -1);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.ArrowDown:
+          moveCursor(0, 1);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.ArrowLeft:
+          moveCursor(-1, 0);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.ArrowRight:
+          moveCursor(1, 0);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.Enter:
+        case KeyboardKeys.Space:
+          if (cursorPosition) {
+            addVertex(cursorPosition);
+          }
+
+          event.preventDefault();
+          break;
+        case KeyboardKeys.Escape:
+          cancelDrawing();
+          event.preventDefault();
+          break;
+        case KeyboardKeys.F:
+          finishDrawing();
+          event.preventDefault();
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [map, isDrawing, cursorPosition, addVertex, finishDrawing, cancelDrawing, moveCursor]);
+};

package/src/map/useVirtualCursor.ts

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+
+import { Map as OlMap } from 'ol';
+import { type Coordinate } from 'ol/coordinate';
+import Overlay from 'ol/Overlay';
+
+const createCursorElement = (): HTMLDivElement => {
+  const virtualCursor = document.createElement('div');
+
+  virtualCursor.style.width = '18px';
+  virtualCursor.style.height = '18px';
+  virtualCursor.style.background = 'rgba(255, 193, 7, 0.8)';
+  virtualCursor.style.border = '2px solid #ffbf47';
+  virtualCursor.style.borderRadius = '50%';
+  virtualCursor.style.position = 'absolute';
+  virtualCursor.style.transform = 'translate(-50%, -50%)';
+  virtualCursor.style.pointerEvents = 'none';
+  virtualCursor.setAttribute('aria-hidden', 'true');
+
+  return virtualCursor;
+};
+
+export const useVirtualCursor = (
+  map: OlMap | undefined,
+  isActive: boolean,
+  position: Coordinate | null,
+) => {
+  const overlayRef = useRef<Overlay | null>(null);
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    if (!overlayRef.current) {
+      const el = createCursorElement();
+
+      overlayRef.current = new Overlay({
+        element: el,
+        positioning: 'center-center',
+        stopEvent: false,
+      });
+      map.addOverlay(overlayRef.current);
+    }
+
+    const overlay = overlayRef.current;
+    const element = overlay?.getElement();
+
+    if (element) {
+      if (isActive && position) {
+        overlay.setPosition(position);
+        element.style.display = '';
+      } else {
+        overlay.setPosition(undefined);
+        element.style.display = 'none';
+      }
+    }
+
+    return () => {
+      if (overlayRef.current) {
+        const el = overlayRef.current.getElement();
+
+        if (el) {
+          el.style.display = 'none';
+        }
+
+        map.removeOverlay(overlayRef.current);
+        overlayRef.current = null;
+      }
+    };
+  }, [map, isActive, position]);
+};

package/src/map/utils.ts

@@ -38,3 +38,14 @@ export const getPopupPositionClass = (coordinate: number[], map: Map): PopupDire
 
   return 'bottom-right';
 };
+
+export const KeyboardKeys = {
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  Enter: 'Enter',
+  Space: ' ',
+  Escape: 'Escape',
+  F: 'f',
+} as const;