show brush while change slide

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -78,6 +78,7 @@ export default function Editor(props: EditorProps) {
   const [curLineGroup, setCurLineGroup] = useState<LineGroup>([])
   const [{ x, y }, setCoords] = useState({ x: -1, y: -1 })
   const [showBrush, setShowBrush] = useState(false)
+  const [showRefBrush, setShowRefBrush] = useState(false)
   const [isPanning, setIsPanning] = useState<boolean>(false)
   const [showOriginal, setShowOriginal] = useState(false)
   const [isInpaintingLoading, setIsInpaintingLoading] = useState(false)
@@ -86,6 +87,8 @@ export default function Editor(props: EditorProps) {
   const [minScale, setMinScale] = useState<number>(1.0)
   const [sizeLimit, setSizeLimit] = useState<number>(1080)
   const windowSize = useWindowSize()
+  const windowCenterX = windowSize.width / 2
+  const windowCenterY = windowSize.height / 2
   const viewportRef = useRef<ReactZoomPanPinchRef | undefined | null>()
   // Indicates that the image has been loaded and is centered on first load
   const [initialCentered, setInitialCentered] = useState(false)
@@ -556,17 +559,28 @@ export default function Editor(props: EditorProps) {
     return s!
   }
 
-  const getBrushStyle = () => {
+  const getBrushStyle = (_x: number, _y: number) => {
     const curScale = getCurScale()
     return {
       width: `${brushSize * curScale}px`,
       height: `${brushSize * curScale}px`,
-      left: `${x}px`,
+      left: `${_x}px`,
-      top: `${y}px`,
+      top: `${_y}px`,
       transform: 'translate(-50%, -50%)',
     }
   }
 
+  const handleSliderChange = (value: number) => {
+    setBrushSize(value)
+
+    if (!showRefBrush) {
+      setShowRefBrush(true)
+      window.setTimeout(() => {
+        setShowRefBrush(false)
+      }, 10000)
+    }
+  }
+
   return (
     <div
       className="editor-container"
@@ -615,7 +629,10 @@ export default function Editor(props: EditorProps) {
               onContextMenu={e => {
                 e.preventDefault()
               }}
-              onMouseOver={() => toggleShowBrush(true)}
+              onMouseOver={() => {
+                toggleShowBrush(true)
+                setShowRefBrush(false)
+              }}
               onFocus={() => toggleShowBrush(true)}
               onMouseLeave={() => toggleShowBrush(false)}
               onMouseDown={onMouseDown}
@@ -660,7 +677,14 @@ export default function Editor(props: EditorProps) {
       </TransformWrapper>
 
       {showBrush && !isInpaintingLoading && !isPanning && (
-        <div className="brush-shape" style={getBrushStyle()} />
+        <div className="brush-shape" style={getBrushStyle(x, y)} />
+      )}
+
+      {showRefBrush && (
+        <div
+          className="brush-shape"
+          style={getBrushStyle(windowCenterX, windowCenterY)}
+        />
       )}
 
       <div className="editor-toolkit-panel">
@@ -674,7 +698,8 @@ export default function Editor(props: EditorProps) {
           min={10}
           max={150}
           value={brushSize}
-          onChange={setBrushSize}
+          onChange={handleSliderChange}
+          onClick={() => setShowRefBrush(false)}
         />
         <div className="editor-toolkit-btns">
           <Button

lama_cleaner/app/src/components/Editor/Slider.tsx

@@ -6,10 +6,11 @@ type SliderProps = {
   min?: number
   max?: number
   onChange: (value: number) => void
+  onClick: () => void
 }
 
 export default function Slider(props: SliderProps) {
-  const { value, onChange, label, min, max } = props
+  const { value, onChange, onClick, label, min, max } = props
 
   const step = ((max || 100) - (min || 0)) / 100
 
@@ -27,6 +28,7 @@ export default function Slider(props: SliderProps) {
           ev.stopPropagation()
           onChange(parseInt(ev.currentTarget.value, 10))
         }}
+        onClick={onClick}
       />
     </div>
   )