diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx index e2b7c29..1440d78 100644 --- a/lama_cleaner/app/src/components/Editor/Editor.tsx +++ b/lama_cleaner/app/src/components/Editor/Editor.tsx @@ -78,6 +78,7 @@ export default function Editor(props: EditorProps) { const [curLineGroup, setCurLineGroup] = useState([]) const [{ x, y }, setCoords] = useState({ x: -1, y: -1 }) const [showBrush, setShowBrush] = useState(false) + const [showRefBrush, setShowRefBrush] = useState(false) const [isPanning, setIsPanning] = useState(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(1.0) const [sizeLimit, setSizeLimit] = useState(1080) const windowSize = useWindowSize() + const windowCenterX = windowSize.width / 2 + const windowCenterY = windowSize.height / 2 const viewportRef = useRef() // 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`, - top: `${y}px`, + left: `${_x}px`, + top: `${_y}px`, transform: 'translate(-50%, -50%)', } } + const handleSliderChange = (value: number) => { + setBrushSize(value) + + if (!showRefBrush) { + setShowRefBrush(true) + window.setTimeout(() => { + setShowRefBrush(false) + }, 10000) + } + } + return (
{ 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) { {showBrush && !isInpaintingLoading && !isPanning && ( -
+
+ )} + + {showRefBrush && ( +
)}
@@ -674,7 +698,8 @@ export default function Editor(props: EditorProps) { min={10} max={150} value={brushSize} - onChange={setBrushSize} + onChange={handleSliderChange} + onClick={() => setShowRefBrush(false)} />
)