From 728f96c0e76e09eb573af0c73cb3dbe04734513e Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Wed, 21 Aug 2024 21:50:13 +0800
Subject: [PATCH] fix: https://github.com/Sanster/lama-cleaner-docs/issues/58

---
 web_app/src/components/Editor.tsx | 28 ++++++++++++++++++++++++++--
 web_app/src/lib/const.ts          |  2 ++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/web_app/src/components/Editor.tsx b/web_app/src/components/Editor.tsx
index 3cb2376..1ebf047 100644
--- a/web_app/src/components/Editor.tsx
+++ b/web_app/src/components/Editor.tsx
@@ -30,7 +30,11 @@ import Cropper from "./Cropper"
 import { InteractiveSegPoints } from "./InteractiveSeg"
 import useHotKey from "@/hooks/useHotkey"
 import Extender from "./Extender"
-import { MAX_BRUSH_SIZE, MIN_BRUSH_SIZE } from "@/lib/const"
+import {
+  MAX_BRUSH_SIZE,
+  MIN_BRUSH_SIZE,
+  SHORTCUT_KEY_CHANGE_BRUSH_SIZE,
+} from "@/lib/const"
 
 const TOOLBAR_HEIGHT = 200
 const COMPARE_SLIDER_DURATION_MS = 300
@@ -657,8 +661,28 @@ export default function Editor(props: EditorProps) {
     }
   )
 
+  useEffect(() => {
+    const handleKeyUp = (ev: KeyboardEvent) => {
+      if (ev.key === SHORTCUT_KEY_CHANGE_BRUSH_SIZE) {
+        setIsChangingBrushSizeByWheel(false)
+      }
+    }
+
+    const handleBlur = () => {
+      setIsChangingBrushSizeByWheel(false)
+    }
+
+    window.addEventListener("keyup", handleKeyUp)
+    window.addEventListener("blur", handleBlur)
+
+    return () => {
+      window.removeEventListener("keyup", handleKeyUp)
+      window.removeEventListener("blur", handleBlur)
+    }
+  }, [])
+
   useKeyPressEvent(
-    "Alt",
+    SHORTCUT_KEY_CHANGE_BRUSH_SIZE,
     (ev) => {
       if (!disableShortCuts) {
         ev?.preventDefault()
diff --git a/web_app/src/lib/const.ts b/web_app/src/lib/const.ts
index ff269bc..f23ad71 100644
--- a/web_app/src/lib/const.ts
+++ b/web_app/src/lib/const.ts
@@ -21,3 +21,5 @@ export const ANYTEXT = "Sanster/AnyText"
 
 export const DEFAULT_NEGATIVE_PROMPT =
   "out of frame, lowres, error, cropped, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, out of frame, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, disfigured, gross proportions, malformed limbs, watermark, signature"
+
+export const SHORTCUT_KEY_CHANGE_BRUSH_SIZE = "Alt"