From e4664e2d583ddee1fd0f87c0fd3c23c0845ddcab Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Sun, 11 Dec 2022 19:38:20 +0800
Subject: [PATCH] prevent croper position between show/hidden

---
 .../app/src/components/Croper/Croper.tsx      | 10 +++++++---
 .../app/src/components/Editor/Editor.tsx      | 20 +++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/lama_cleaner/app/src/components/Croper/Croper.tsx b/lama_cleaner/app/src/components/Croper/Croper.tsx
index 92d61f2..20a15bf 100644
--- a/lama_cleaner/app/src/components/Croper/Croper.tsx
+++ b/lama_cleaner/app/src/components/Croper/Croper.tsx
@@ -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()}
diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx
index 54b6907..effcb17 100644
--- a/lama_cleaner/app/src/components/Editor/Editor.tsx
+++ b/lama_cleaner/app/src/components/Editor/Editor.tsx
@@ -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>