prevent croper position between show/hidden
This commit is contained in:
parent
203f2bc9c7
commit
e4664e2d58
@ -30,6 +30,7 @@ interface Props {
|
||||
scale: number
|
||||
minHeight: number
|
||||
minWidth: number
|
||||
show: boolean
|
||||
}
|
||||
|
||||
const clamp = (
|
||||
@ -66,7 +67,7 @@ const clamp = (
|
||||
}
|
||||
|
||||
const Croper = (props: Props) => {
|
||||
const { minHeight, minWidth, maxHeight, maxWidth, scale } = props
|
||||
const { minHeight, minWidth, maxHeight, maxWidth, scale, show } = props
|
||||
const [x, setX] = useRecoilState(croperX)
|
||||
const [y, setY] = useRecoilState(croperY)
|
||||
const [height, setHeight] = useRecoilState(croperHeight)
|
||||
@ -79,7 +80,7 @@ const Croper = (props: Props) => {
|
||||
useEffect(() => {
|
||||
setX(Math.round((maxWidth - 512) / 2))
|
||||
setY(Math.round((maxHeight - 512) / 2))
|
||||
}, [maxHeight, maxWidth, minHeight, minWidth])
|
||||
}, [maxHeight, maxWidth])
|
||||
|
||||
const [evData, setEVData] = useState<EVData>({
|
||||
initX: 0,
|
||||
@ -391,7 +392,10 @@ const Croper = (props: Props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="croper-wrapper">
|
||||
<div
|
||||
className="croper-wrapper"
|
||||
style={{ visibility: show ? 'visible' : 'hidden' }}
|
||||
>
|
||||
<div className="croper" style={{ height, width, left: x, top: y }}>
|
||||
{createBorder()}
|
||||
{createInfoBar()}
|
||||
|
@ -436,6 +436,7 @@ export default function Editor() {
|
||||
|
||||
useEffect(() => {
|
||||
emitter.on(EVENT_CUSTOM_MASK, (data: any) => {
|
||||
// TODO: not work with paint by example
|
||||
runInpainting(false, data.mask)
|
||||
})
|
||||
|
||||
@ -1339,17 +1340,14 @@ export default function Editor() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(isSD || isPaintByExample) && settings.showCroper ? (
|
||||
<Croper
|
||||
maxHeight={original.naturalHeight}
|
||||
maxWidth={original.naturalWidth}
|
||||
minHeight={Math.min(256, original.naturalHeight)}
|
||||
minWidth={Math.min(256, original.naturalWidth)}
|
||||
scale={scale}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<Croper
|
||||
maxHeight={original.naturalHeight}
|
||||
maxWidth={original.naturalWidth}
|
||||
minHeight={Math.min(256, original.naturalHeight)}
|
||||
minWidth={Math.min(256, original.naturalWidth)}
|
||||
scale={scale}
|
||||
show={(isSD || isPaintByExample) && settings.showCroper}
|
||||
/>
|
||||
|
||||
{isInteractiveSeg ? <InteractiveSeg /> : <></>}
|
||||
</TransformComponent>
|
||||
|
Loading…
Reference in New Issue
Block a user