From 21af727d790a497f4db2aa28c8f751b68ee462a2 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 6 Jun 2024 08:53:53 +1000
Subject: [PATCH] feat(ui): cancel shape drawing on esc

---
 .../components/StageComponent.tsx             | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index dc82e30716..ab9adfc0c5 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -161,9 +161,20 @@ const useStageRenderer = (
 
   useLayoutEffect(() => {
     log.trace('Adding stage listeners');
-    if (asPreview) {
+    if (asPreview || !container) {
       return;
     }
+
+    const cancelShape = (e: KeyboardEvent) => {
+      // Cancel shape drawing on escape
+      if (e.key === 'Escape') {
+        $isDrawing.set(false);
+        $lastMouseDownPos.set(null);
+      }
+    };
+
+    container.addEventListener('keydown', cancelShape);
+
     const cleanup = setStageEventHandlers({
       stage,
       $tool,
@@ -186,8 +197,18 @@ const useStageRenderer = (
     return () => {
       log.trace('Removing stage listeners');
       cleanup();
+      container.removeEventListener('keydown', cancelShape);
     };
-  }, [asPreview, onBrushLineAdded, onBrushSizeChanged, onEraserLineAdded, onPointAddedToLine, onRectShapeAdded, stage]);
+  }, [
+    asPreview,
+    onBrushLineAdded,
+    onBrushSizeChanged,
+    onEraserLineAdded,
+    onPointAddedToLine,
+    onRectShapeAdded,
+    stage,
+    container,
+  ]);
 
   useLayoutEffect(() => {
     log.trace('Updating stage dimensions');