From c73b099567c8eef70308020a6f8be0dd892b8bad Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 28 Apr 2020 17:03:17 +1000
Subject: [PATCH] Re-added grid settings to fog tools

---
 src/components/map/Map.js                     |  2 +-
 .../map/controls/FogToolSettings.js           |  7 +++++++
 .../map/controls/GridSnappingToggle.js        | 21 +++++++++++++++++++
 src/icons/GridOffIcon.js                      | 18 ++++++++++++++++
 src/icons/GridOnIcon.js                       | 18 ++++++++++++++++
 5 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/components/map/controls/GridSnappingToggle.js
 create mode 100644 src/icons/GridOffIcon.js
 create mode 100644 src/icons/GridOnIcon.js

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 4dfa503..927cff3 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -49,7 +49,7 @@ function Map({
 
   const [selectedToolId, setSelectedToolId] = useState("pan");
   const [toolSettings, setToolSettings] = useState({
-    fog: { type: "add", useEdgeSnapping: true },
+    fog: { type: "add", useEdgeSnapping: true, useGridSnapping: false },
     brush: {
       color: "darkGray",
       type: "stroke",
diff --git a/src/components/map/controls/FogToolSettings.js b/src/components/map/controls/FogToolSettings.js
index 0dbb11b..43cba40 100644
--- a/src/components/map/controls/FogToolSettings.js
+++ b/src/components/map/controls/FogToolSettings.js
@@ -3,6 +3,7 @@ import { Flex } from "theme-ui";
 
 import EdgeSnappingToggle from "./EdgeSnappingToggle";
 import RadioIconButton from "./RadioIconButton";
+import GridSnappingToggle from "./GridSnappingToggle";
 
 import FogAddIcon from "../../../icons/FogAddIcon";
 import FogRemoveIcon from "../../../icons/FogRemoveIcon";
@@ -41,6 +42,12 @@ function BrushToolSettings({ settings, onSettingChange }) {
           onSettingChange({ useEdgeSnapping })
         }
       />
+      <GridSnappingToggle
+        useGridSnapping={settings.useGridSnapping}
+        onGridSnappingChange={(useGridSnapping) =>
+          onSettingChange({ useGridSnapping })
+        }
+      />
     </Flex>
   );
 }
diff --git a/src/components/map/controls/GridSnappingToggle.js b/src/components/map/controls/GridSnappingToggle.js
new file mode 100644
index 0000000..b09232a
--- /dev/null
+++ b/src/components/map/controls/GridSnappingToggle.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { IconButton } from "theme-ui";
+
+import GridOnIcon from "../../../icons/GridOnIcon";
+import GridOffIcon from "../../../icons/GridOffIcon";
+
+function GridSnappingToggle({ useGridSnapping, onGridSnappingChange }) {
+  return (
+    <IconButton
+      aria-label={
+        useGridSnapping ? "Disable Grid Snapping" : "Enable Grid Snapping"
+      }
+      title={useGridSnapping ? "Disable Grid Snapping" : "Enable Grid Snapping"}
+      onClick={() => onGridSnappingChange(!useGridSnapping)}
+    >
+      {useGridSnapping ? <GridOnIcon /> : <GridOffIcon />}
+    </IconButton>
+  );
+}
+
+export default GridSnappingToggle;
diff --git a/src/icons/GridOffIcon.js b/src/icons/GridOffIcon.js
new file mode 100644
index 0000000..a1287c2
--- /dev/null
+++ b/src/icons/GridOffIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function GridOffIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M8 4v.89l2 2V4h4v4h-2.89l2 2H14v.89l2 2V10h4v4h-2.89l2 2H20v.89l2 2V4c0-1.1-.9-2-2-2H5.11l2 2H8zm8 0h3c.55 0 1 .45 1 1v3h-4V4zm6.16 17.88L2.12 1.84c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L2 4.55V20c0 1.1.9 2 2 2h15.45l1.3 1.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.03 0-1.42zM10 12.55L11.45 14H10v-1.45zm-6-6L5.45 8H4V6.55zM8 20H5c-.55 0-1-.45-1-1v-3h4v4zm0-6H4v-4h3.45l.55.55V14zm6 6h-4v-4h3.45l.55.55V20zm2 0v-1.45L17.45 20H16z" />
+    </svg>
+  );
+}
+
+export default GridOffIcon;
diff --git a/src/icons/GridOnIcon.js b/src/icons/GridOnIcon.js
new file mode 100644
index 0000000..1796b30
--- /dev/null
+++ b/src/icons/GridOnIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function GridOnIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H5c-.55 0-1-.45-1-1v-3h4v4zm0-6H4v-4h4v4zm0-6H4V5c0-.55.45-1 1-1h3v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm5 12h-3v-4h4v3c0 .55-.45 1-1 1zm1-6h-4v-4h4v4zm0-6h-4V4h3c.55 0 1 .45 1 1v3z" />
+    </svg>
+  );
+}
+
+export default GridOnIcon;