From aac11790e21c41686852eb76f9fa9b616247a1b3 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 28 Apr 2020 22:06:20 +1000
Subject: [PATCH] Added stop progagation to map controls to stop drawing empty
 shapes

---
 src/components/map/MapControls.js | 36 ++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index d035e1b..b5429ed 100644
--- a/src/components/map/MapControls.js
+++ b/src/components/map/MapControls.js
@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from "react";
+import React, { useState, Fragment, useEffect, useRef } from "react";
 import { IconButton, Flex, Box } from "theme-ui";
 
 import RadioIconButton from "./controls/RadioIconButton";
@@ -168,6 +168,9 @@ function MapContols({
     );
   }
 
+  const controlsRef = useRef();
+  const settingsRef = useRef();
+
   function getToolSettings() {
     const Settings = toolsById[selectedToolId].SettingsComponent;
     if (Settings) {
@@ -182,6 +185,7 @@ function MapContols({
             borderRadius: "4px",
           }}
           p={1}
+          ref={settingsRef}
         >
           <Settings
             settings={toolSettings[selectedToolId]}
@@ -196,6 +200,35 @@ function MapContols({
     }
   }
 
+  // Stop map drawing from happening when selecting controls
+  // Not using react events as they seem to trigger after dom events
+  useEffect(() => {
+    function stopPropagation(e) {
+      e.stopPropagation();
+    }
+    const controls = controlsRef.current;
+    if (controls) {
+      controls.addEventListener("mousedown", stopPropagation);
+      controls.addEventListener("touchstart", stopPropagation);
+    }
+    const settings = settingsRef.current;
+    if (settings) {
+      settings.addEventListener("mousedown", stopPropagation);
+      settings.addEventListener("touchstart", stopPropagation);
+    }
+
+    return () => {
+      if (controls) {
+        controls.removeEventListener("mousedown", stopPropagation);
+        controls.removeEventListener("touchstart", stopPropagation);
+      }
+      if (settings) {
+        settings.removeEventListener("mousedown", stopPropagation);
+        settings.removeEventListener("touchstart", stopPropagation);
+      }
+    };
+  });
+
   return (
     <>
       <Flex
@@ -207,6 +240,7 @@ function MapContols({
           alignItems: "center",
         }}
         mx={1}
+        ref={controlsRef}
       >
         {controls}
       </Flex>