Added arrow key nudging to map grid editor

src/components/map/MapEditor.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useContext } from "react";
 import { Box, IconButton } from "theme-ui";
 import { Stage, Layer, Image } from "react-konva";
 import ReactResizeDetector from "react-resize-detector";
@@ -9,6 +9,7 @@ import useStageInteraction from "../../helpers/useStageInteraction";
 import { getMapDefaultInset } from "../../helpers/map";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
+import KeyboardContext from "../../contexts/KeyboardContext";
 
 import ResetMapIcon from "../../icons/ResetMapIcon";
 import GridOnIcon from "../../icons/GridOnIcon";
@@ -117,6 +118,9 @@ function MapEditor({ map, onSettingsChange }) {
     mapHeight,
   };
 
+  // Get keyboard context to pass to Konva
+  const keyboardValue = useContext(KeyboardContext);
+
   const canEditGrid = map.type !== "default";
 
   const gridChanged =
@@ -150,14 +154,16 @@ function MapEditor({ map, onSettingsChange }) {
         >
           <Layer ref={mapLayerRef}>
             <Image image={mapImageSource} width={mapWidth} height={mapHeight} />
-            <MapInteractionProvider value={mapInteraction}>
-              {showGridControls && canEditGrid && (
-                <MapGrid map={map} strokeWidth={0.5} />
-              )}
-              {showGridControls && canEditGrid && (
-                <MapGridEditor map={map} onGridChange={handleGridChange} />
-              )}
-            </MapInteractionProvider>
+            <KeyboardContext.Provider value={keyboardValue}>
+              <MapInteractionProvider value={mapInteraction}>
+                {showGridControls && canEditGrid && (
+                  <MapGrid map={map} strokeWidth={0.5} />
+                )}
+                {showGridControls && canEditGrid && (
+                  <MapGridEditor map={map} onGridChange={handleGridChange} />
+                )}
+              </MapInteractionProvider>
+            </KeyboardContext.Provider>
           </Layer>
         </Stage>
       </ReactResizeDetector>

src/components/map/MapGridEditor.js

@@ -4,6 +4,7 @@ import { Group, Circle, Rect } from "react-konva";
 import MapInteractionContext from "../../contexts/MapInteractionContext";
 
 import * as Vector2 from "../../helpers/vector2";
+import useKeyboard from "../../helpers/useKeyboard";
 
 function MapGridEditor({ map, onGridChange }) {
   const {
@@ -145,6 +146,39 @@ function MapGridEditor({ map, onGridChange }) {
     }
   }
 
+  function nudgeGrid(direction) {
+    const inset = map.grid.inset;
+    const gridSizeNormalized = Vector2.divide(
+      Vector2.subtract(inset.bottomRight, inset.topLeft),
+      map.grid.size
+    );
+    const offset = Vector2.divide(
+      Vector2.multiply(direction, gridSizeNormalized),
+      stageScale * 2
+    );
+    onGridChange({
+      topLeft: Vector2.add(inset.topLeft, offset),
+      bottomRight: Vector2.add(inset.bottomRight, offset),
+    });
+  }
+
+  function handleKeyDown({ key }) {
+    if (key === "ArrowUp") {
+      nudgeGrid({ x: 0, y: -1 });
+    }
+    if (key === "ArrowLeft") {
+      nudgeGrid({ x: -1, y: 0 });
+    }
+    if (key === "ArrowRight") {
+      nudgeGrid({ x: 1, y: 0 });
+    }
+    if (key === "ArrowDown") {
+      nudgeGrid({ x: 0, y: 1 });
+    }
+  }
+
+  useKeyboard(handleKeyDown);
+
   function getHandleNormalizedPosition(handle) {
     return Vector2.divide({ x: handle.x(), y: handle.y() }, mapSize);
   }