Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added keyboard shortcuts for measure tool

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-06-28 18:06:52 +10:00
parent 7431d0a20f
commit 8f6b2ec0d3
1 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/map/controls/MeasureToolSettings.js
View File

@ -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 (
<Flex sx={{ alignItems: "center" }}>
<ToolSection