From 8067a915d7671ff5792a2a6717bccce158c5d39b Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Fri, 5 Apr 2024 02:23:45 -0400
Subject: [PATCH] feat: Allow toggling off a tool and return to select mode
 [PT-187369359]

---
 src/components/toolbar.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
index 4732709..af76a23 100644
--- a/src/components/toolbar.tsx
+++ b/src/components/toolbar.tsx
@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import SelectIcon from "../assets/select.svg";
 import AddStateIcon from "../assets/add-state.svg";
@@ -79,8 +79,12 @@ export const ToolbarButton = ({tool, selectedTool, onClick}: ToolbarButtonProps)
 export const Toolbar = ({tools, onToolSelected, onReset, onReturnToMainMenu}: ToolbarProps) => {
   const [selectedTool, setSelectedTool] = useState<Tool>("select");
 
-  const handleToolSelected = (tool: Tool) => {
+  const handleToolSelected = useCallback((tool: Tool) => {
     if (toggleableTools.includes(tool)) {
+      // allow toggling off a tool and returning to select mode
+      if (tool === selectedTool) {
+        tool = "select";
+      }
       setSelectedTool(tool);
     } else if (tool === "reset") {
       onReset();
@@ -88,7 +92,7 @@ export const Toolbar = ({tools, onToolSelected, onReset, onReturnToMainMenu}: To
       onReturnToMainMenu();
     }
     onToolSelected(tool);
-  };
+  }, [selectedTool, onReset, onReturnToMainMenu, onToolSelected]);
 
   const topTools = tools.filter(tool => !nonTopTools.includes(tool));
   const bottomTools = tools.filter(tool => nonTopTools.includes(tool));