Added timer tool to map

This commit is contained in:
Mitchell McCaffrey 2020-08-04 15:40:32 +10:00
parent 558db7d88b
commit 6e0eb8e3ba
5 changed files with 135 additions and 1 deletions

View File

@ -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");

View File

@ -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: <PointerToolIcon />,
title: "Pointer Tool",
},
timer: {
id: "timer",
icon: <TimerToolIcon />,
title: "Timer Tool",
SettingsComponent: TimerToolSettings,
},
};
const tools = ["pan", "fog", "drawing", "measure", "pointer"];
const tools = ["pan", "fog", "drawing", "measure", "pointer", "timer"];
const sections = [
{

View File

@ -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 (
<Flex sx={{ alignItems: "center" }}>
<Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
h:
</Text>
<Input
sx={inputStyle}
value={settings.hour}
onChange={(e) => onSettingChange({ hour: parseInt(e.target.value) })}
type="number"
min={0}
max={99}
/>
<Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
m:
</Text>
<Input
sx={inputStyle}
value={settings.minute}
onChange={(e) => onSettingChange({ minute: parseInt(e.target.value) })}
type="number"
min={0}
max={59}
/>
<Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
s:
</Text>
<Input
sx={inputStyle}
value={settings.second}
onChange={(e) => onSettingChange({ second: parseInt(e.target.value) })}
type="number"
min={0}
max={59}
/>
<IconButton
aria-label="Start Timer"
title="Start Timer"
onClick={() => onToolAction("timerStart")}
disabled={
settings.hour === 0 && settings.minute === 0 && settings.second === 0
}
>
<TimerStartIcon />
</IconButton>
</Flex>
);
}
export default MeasureToolSettings;

View File

@ -0,0 +1,19 @@
import React from "react";
function TimerStartIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
transform="scale(-1 1)"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M21.18 5.01L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zm3-8h-2v-2c0-.55-.45-1-1-1s-1 .45-1 1v2H9c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1z" />
</svg>
);
}
export default TimerStartIcon;

View File

@ -0,0 +1,19 @@
import React from "react";
function TimerToolIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
transform="scale(-1 1)"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M6 4v3.17c0 .53.21 1.04.59 1.42L10 12l-3.42 3.42c-.37.38-.58.89-.58 1.42V20c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-3.16c0-.53-.21-1.04-.58-1.41L14 12l3.41-3.4c.38-.38.59-.89.59-1.42V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2z" />
</svg>
);
}
export default TimerToolIcon;