diff --git a/src/components/map/controls/MeasureToolSettings.js b/src/components/map/controls/MeasureToolSettings.js index 22d0f6d..d29f447 100644 --- a/src/components/map/controls/MeasureToolSettings.js +++ b/src/components/map/controls/MeasureToolSettings.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useContext } from "react"; import { Flex } from "theme-ui"; import ToolSection from "./ToolSection"; @@ -6,7 +6,29 @@ import MeasureChebyshevIcon from "../../../icons/MeasureChebyshevIcon"; import MeasureEuclideanIcon from "../../../icons/MeasureEuclideanIcon"; import MeasureManhattanIcon from "../../../icons/MeasureManhattanIcon"; +import MapInteractionContext from "../../../contexts/MapInteractionContext"; + function MeasureToolSettings({ settings, onSettingChange }) { + const { interactionEmitter } = useContext(MapInteractionContext); + + // Keyboard shortcuts + useEffect(() => { + function handleKeyDown({ key }) { + if (key === "g") { + onSettingChange({ type: "chebyshev" }); + } else if (key === "l") { + onSettingChange({ type: "euclidean" }); + } else if (key === "c") { + onSettingChange({ type: "manhattan" }); + } + } + interactionEmitter.on("keyDown", handleKeyDown); + + return () => { + interactionEmitter.off("keyDown", handleKeyDown); + }; + }); + const tools = [ { id: "chebyshev", @@ -28,6 +50,8 @@ function MeasureToolSettings({ settings, onSettingChange }) { }, ]; + // TODO Add keyboard shortcuts + return (