diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 7233d05..6507b3a 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -65,6 +65,11 @@ function Map({
type: "chebyshev",
scale: "5ft",
},
+ timer: {
+ hour: 0,
+ minute: 0,
+ second: 0,
+ },
});
function handleToolSettingChange(tool, change) {
@@ -148,6 +153,7 @@ function Map({
disabledControls.push("pan");
disabledControls.push("measure");
disabledControls.push("pointer");
+ disabledControls.push("timer");
}
if (!allowFogDrawing) {
disabledControls.push("fog");
diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index ca46ae1..80c83e3 100644
--- a/src/components/map/MapControls.js
+++ b/src/components/map/MapControls.js
@@ -9,6 +9,7 @@ import SelectMapButton from "./SelectMapButton";
import FogToolSettings from "./controls/FogToolSettings";
import DrawingToolSettings from "./controls/DrawingToolSettings";
import MeasureToolSettings from "./controls/MeasureToolSettings";
+import TimerToolSettings from "./controls/TimerToolSettings";
import PanToolIcon from "../../icons/PanToolIcon";
import FogToolIcon from "../../icons/FogToolIcon";
@@ -16,6 +17,7 @@ import BrushToolIcon from "../../icons/BrushToolIcon";
import MeasureToolIcon from "../../icons/MeasureToolIcon";
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import PointerToolIcon from "../../icons/PointerToolIcon";
+import TimerToolIcon from "../../icons/TimerToolIcon";
function MapContols({
onMapChange,
@@ -61,8 +63,14 @@ function MapContols({
icon: ,
title: "Pointer Tool",
},
+ timer: {
+ id: "timer",
+ icon: ,
+ title: "Timer Tool",
+ SettingsComponent: TimerToolSettings,
+ },
};
- const tools = ["pan", "fog", "drawing", "measure", "pointer"];
+ const tools = ["pan", "fog", "drawing", "measure", "pointer", "timer"];
const sections = [
{
diff --git a/src/components/map/controls/TimerToolSettings.js b/src/components/map/controls/TimerToolSettings.js
new file mode 100644
index 0000000..d7d25f0
--- /dev/null
+++ b/src/components/map/controls/TimerToolSettings.js
@@ -0,0 +1,82 @@
+import React, { useEffect, useContext } from "react";
+import { Flex, Input, Text, IconButton } from "theme-ui";
+
+import Divider from "../../Divider";
+
+import MapInteractionContext from "../../../contexts/MapInteractionContext";
+import TimerStartIcon from "../../../icons/TimerStartIcon";
+
+function MeasureToolSettings({ settings, onSettingChange, onToolAction }) {
+ const { interactionEmitter } = useContext(MapInteractionContext);
+
+ // Keyboard shortcuts
+ useEffect(() => {
+ function handleKeyDown({ key }) {}
+ interactionEmitter.on("keyDown", handleKeyDown);
+
+ return () => {
+ interactionEmitter.off("keyDown", handleKeyDown);
+ };
+ });
+
+ const inputStyle = {
+ width: "40px",
+ border: "none",
+ ":focus": {
+ outline: "none",
+ },
+ lineHeight: 1.2,
+ padding: 1,
+ paddingRight: 0,
+ };
+
+ return (
+
+
+ h:
+
+ onSettingChange({ hour: parseInt(e.target.value) })}
+ type="number"
+ min={0}
+ max={99}
+ />
+
+ m:
+
+ onSettingChange({ minute: parseInt(e.target.value) })}
+ type="number"
+ min={0}
+ max={59}
+ />
+
+ s:
+
+ onSettingChange({ second: parseInt(e.target.value) })}
+ type="number"
+ min={0}
+ max={59}
+ />
+ onToolAction("timerStart")}
+ disabled={
+ settings.hour === 0 && settings.minute === 0 && settings.second === 0
+ }
+ >
+
+
+
+ );
+}
+
+export default MeasureToolSettings;
diff --git a/src/icons/TimerStartIcon.js b/src/icons/TimerStartIcon.js
new file mode 100644
index 0000000..6cd4644
--- /dev/null
+++ b/src/icons/TimerStartIcon.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+function TimerStartIcon() {
+ return (
+
+ );
+}
+
+export default TimerStartIcon;
diff --git a/src/icons/TimerToolIcon.js b/src/icons/TimerToolIcon.js
new file mode 100644
index 0000000..a6c6e9c
--- /dev/null
+++ b/src/icons/TimerToolIcon.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+function TimerToolIcon() {
+ return (
+
+ );
+}
+
+export default TimerToolIcon;