From ade7ca17f4065964c31f3495cc9d176e699d18be Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Thu, 13 Jul 2023 08:38:45 -0400
Subject: [PATCH] feat: Click on svg background to terminate edge creation
 [PT-185596253]

---
 src/components/drawing.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/drawing.tsx b/src/components/drawing.tsx
index 32212c9..df0ce37 100644
--- a/src/components/drawing.tsx
+++ b/src/components/drawing.tsx
@@ -186,8 +186,14 @@ export const Drawing = (props: Props) => {
     if (drawingMode === "addNode") {
       addNode(translateToGraphPoint(e));
       handleSetSelectMode();
+    } else if (drawingMode === "addEdge") {
+      const onSVGBackground = ((e.target as HTMLElement)?.tagName || "").toLowerCase() === "svg";
+      if (onSVGBackground) {
+        clearSelections();
+        handleSetSelectMode();
+      }
     }
-  }, [drawingMode, addNode, handleSetSelectMode]);
+  }, [drawingMode, addNode, handleSetSelectMode, clearSelections]);
 
   // allow nodes to be "dragged" from the toolbar to the canvas
   const handleMouseUp = useCallback((e: React.MouseEvent<HTMLDivElement>) => {