frontend: change brushsize by mouse wheel

web_app/src/components/Editor.tsx

@@ -30,10 +30,9 @@ 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"
 
 const TOOLBAR_HEIGHT = 200
-const MIN_BRUSH_SIZE = 3
-const MAX_BRUSH_SIZE = 200
 const COMPARE_SLIDER_DURATION_MS = 300
 
 interface EditorProps {
@@ -67,6 +66,8 @@ export default function Editor(props: EditorProps) {
     runMannually,
     runInpainting,
     isCropperExtenderResizing,
+    decreaseBaseBrushSize,
+    increaseBaseBrushSize,
   ] = useStore((state) => [
     state.disableShortCuts,
     state.windowSize,
@@ -90,6 +91,8 @@ export default function Editor(props: EditorProps) {
     state.runMannually(),
     state.runInpainting,
     state.isCropperExtenderResizing,
+    state.decreaseBaseBrushSize,
+    state.increaseBaseBrushSize,
   ])
   const baseBrushSize = useStore((state) => state.editorState.baseBrushSize)
   const brushSize = useStore((state) => state.getBrushSize())
@@ -121,6 +124,8 @@ export default function Editor(props: EditorProps) {
   const [isDraging, setIsDraging] = useState(false)
 
   const [sliderPos, setSliderPos] = useState<number>(0)
+  const [isChangingBrushSizeByWheel, setIsChangingBrushSizeByWheel] =
+    useState<boolean>(false)
 
   const hadDrawSomething = useCallback(() => {
     return curLineGroup.length !== 0
@@ -591,24 +596,17 @@ export default function Editor(props: EditorProps) {
   useHotKey(
     "[",
     () => {
-      let newBrushSize = baseBrushSize
-      if (baseBrushSize > 10) {
-        newBrushSize = baseBrushSize - 10
-      }
-      if (baseBrushSize <= 10 && baseBrushSize > 0) {
-        newBrushSize = baseBrushSize - 3
-      }
-      setBaseBrushSize(newBrushSize)
+      decreaseBaseBrushSize()
     },
-    [baseBrushSize]
+    [decreaseBaseBrushSize]
   )
 
   useHotKey(
     "]",
     () => {
-      setBaseBrushSize(baseBrushSize + 10)
+      increaseBaseBrushSize()
     },
-    [baseBrushSize]
+    [increaseBaseBrushSize]
   )
 
   // Manual Inpainting Hotkey
@@ -659,6 +657,24 @@ export default function Editor(props: EditorProps) {
     }
   )
 
+  useKeyPressEvent(
+    "Alt",
+    (ev) => {
+      if (!disableShortCuts) {
+        ev?.preventDefault()
+        ev?.stopPropagation()
+        setIsChangingBrushSizeByWheel(true)
+      }
+    },
+    (ev) => {
+      if (!disableShortCuts) {
+        ev?.preventDefault()
+        ev?.stopPropagation()
+        setIsChangingBrushSizeByWheel(false)
+      }
+    }
+  )
+
   const getCurScale = (): number => {
     let s = minScale
     if (viewportRef.current?.instance?.transformState.scale !== undefined) {
@@ -722,7 +738,7 @@ export default function Editor(props: EditorProps) {
           }
         }}
         panning={{ disabled: !isPanning, velocityDisabled: true }}
-        wheel={{ step: 0.05 }}
+        wheel={{ step: 0.05, wheelDisabled: isChangingBrushSizeByWheel }}
         centerZoomedOut
         alignmentAnimation={{ disabled: true }}
         centerOnInit
@@ -849,12 +865,29 @@ export default function Editor(props: EditorProps) {
     )
   }
 
+  const handleScroll = (event: React.WheelEvent<HTMLDivElement>) => {
+    // deltaY 是垂直滚动增量，正值表示向下滚动，负值表示向上滚动
+    // deltaX 是水平滚动增量，正值表示向右滚动，负值表示向左滚动
+    if (!isChangingBrushSizeByWheel) {
+      return
+    }
+
+    const { deltaY } = event
+    // console.log(`水平滚动增量: ${deltaX}, 垂直滚动增量: ${deltaY}`)
+    if (deltaY > 0) {
+      increaseBaseBrushSize()
+    } else if (deltaY < 0) {
+      decreaseBaseBrushSize()
+    }
+  }
+
   return (
     <div
       className="flex w-screen h-screen justify-center items-center"
       aria-hidden="true"
       onMouseMove={onMouseMove}
       onMouseUp={onPointerUp}
+      onWheel={handleScroll}
     >
       {renderCanvas()}
       {showBrush &&

web_app/src/lib/const.ts

@@ -1,5 +1,7 @@
 export const ACCENT_COLOR = "#ffcc00bb"
 export const DEFAULT_BRUSH_SIZE = 40
+export const MIN_BRUSH_SIZE = 3
+export const MAX_BRUSH_SIZE = 200
 export const MODEL_TYPE_INPAINT = "inpaint"
 export const MODEL_TYPE_DIFFUSERS_SD = "diffusers_sd"
 export const MODEL_TYPE_DIFFUSERS_SDXL = "diffusers_sdxl"

web_app/src/lib/states.ts

@@ -24,6 +24,7 @@ import {
   BRUSH_COLOR,
   DEFAULT_BRUSH_SIZE,
   DEFAULT_NEGATIVE_PROMPT,
+  MAX_BRUSH_SIZE,
   MODEL_TYPE_INPAINT,
   PAINT_BY_EXAMPLE,
 } from "./const"
@@ -166,6 +167,8 @@ type AppAction = {
   setIsInpainting: (newValue: boolean) => void
   getIsProcessing: () => boolean
   setBaseBrushSize: (newValue: number) => void
+  decreaseBaseBrushSize: () => void
+  increaseBaseBrushSize: () => void
   getBrushSize: () => number
   setImageSize: (width: number, height: number) => void
 
@@ -888,6 +891,24 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
           state.editorState.baseBrushSize = newValue
         }),
 
+      decreaseBaseBrushSize: () => {
+        const baseBrushSize = get().editorState.baseBrushSize
+        let newBrushSize = baseBrushSize
+        if (baseBrushSize > 10) {
+          newBrushSize = baseBrushSize - 10
+        }
+        if (baseBrushSize <= 10 && baseBrushSize > 0) {
+          newBrushSize = baseBrushSize - 3
+        }
+        get().setBaseBrushSize(newBrushSize)
+      },
+
+      increaseBaseBrushSize: () => {
+        const baseBrushSize = get().editorState.baseBrushSize
+        const newBrushSize = Math.min(baseBrushSize + 10, MAX_BRUSH_SIZE)
+        get().setBaseBrushSize(newBrushSize)
+      },
+
       setImageSize: (width: number, height: number) => {
         // 根据图片尺寸调整 brushSize 的 scale
         set((state) => {