From 0daa27e11ad8f7299db2becf1a52951a61c23b59 Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Tue, 28 Jun 2022 22:25:52 +0800
Subject: [PATCH] use key props to reload workspace when upload new file

---
 lama_cleaner/app/package.json                 |  1 +
 lama_cleaner/app/src/App.tsx                  | 13 ++++++++--
 .../app/src/components/Editor/Editor.tsx      | 25 ++++++++-----------
 .../src/components/Editor/SizeSelector.tsx    |  4 ---
 lama_cleaner/app/yarn.lock                    |  5 ++++
 5 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/lama_cleaner/app/package.json b/lama_cleaner/app/package.json
index dfddaeb..024166b 100644
--- a/lama_cleaner/app/package.json
+++ b/lama_cleaner/app/package.json
@@ -18,6 +18,7 @@
     "@types/react": "^17.0.30",
     "@types/react-dom": "^17.0.9",
     "cross-env": "7.x",
+    "nanoid": "^4.0.0",
     "npm-run-all": "4.x",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/lama_cleaner/app/src/App.tsx b/lama_cleaner/app/src/App.tsx
index a80506b..012dd7f 100644
--- a/lama_cleaner/app/src/App.tsx
+++ b/lama_cleaner/app/src/App.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useKeyPressEvent } from 'react-use'
 import { useRecoilState } from 'recoil'
+import { nanoid } from 'nanoid'
 import useInputImage from './hooks/useInputImage'
 import LandingPage from './components/LandingPage/LandingPage'
 import { themeState } from './components/Header/ThemeChanger'
@@ -33,10 +34,18 @@ function App() {
     document.body.setAttribute('data-theme', theme)
   }, [theme])
 
+  const getWorkspaceKey = useCallback(() => {
+    return nanoid()
+  }, [file])
+
   return (
     <div className="lama-cleaner">
       <Header />
-      {file ? <Workspace file={file} /> : <LandingPage />}
+      {file ? (
+        <Workspace file={file} key={getWorkspaceKey()} />
+      ) : (
+        <LandingPage />
+      )}
     </div>
   )
 }
diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx
index d3a6047..412a36d 100644
--- a/lama_cleaner/app/src/components/Editor/Editor.tsx
+++ b/lama_cleaner/app/src/components/Editor/Editor.tsx
@@ -295,7 +295,7 @@ export default function Editor(props: EditorProps) {
 
   // Zoom reset
   const resetZoom = useCallback(() => {
-    if (!minScale) {
+    if (!minScale || !original || !windowSize) {
       return
     }
     const viewport = viewportRef.current
@@ -304,12 +304,19 @@ export default function Editor(props: EditorProps) {
     }
     const offsetX = (windowSize.width - original.width * minScale) / 2
     const offsetY = (windowSize.height - original.height * minScale) / 2
-    viewport.setTransform(offsetX, offsetY, minScale, 0, 'easeOutQuad')
+    viewport.setTransform(offsetX, offsetY, minScale, 200, 'easeOutQuad')
     viewport.state.scale = minScale
 
     setScale(minScale)
     setPanned(false)
-  }, [viewportRef, windowSize, original.width, windowSize.height, minScale])
+  }, [
+    viewportRef,
+    windowSize,
+    original,
+    original.width,
+    windowSize.height,
+    minScale,
+  ])
 
   const resetRedoState = () => {
     setRedoCurLines([])
@@ -317,18 +324,6 @@ export default function Editor(props: EditorProps) {
     setRedoRenders([])
   }
 
-  useEffect(() => {
-    setLineGroups([])
-    setCurLineGroup([])
-    setRenders([])
-
-    resetRedoState()
-
-    resetZoom()
-    const imageSizeLimit = Math.max(original.width, original.height)
-    setSizeLimit(imageSizeLimit)
-  }, [resetZoom, file, original])
-
   useEffect(() => {
     window.addEventListener('resize', () => {
       resetZoom()
diff --git a/lama_cleaner/app/src/components/Editor/SizeSelector.tsx b/lama_cleaner/app/src/components/Editor/SizeSelector.tsx
index 933c1b5..3d08e5b 100644
--- a/lama_cleaner/app/src/components/Editor/SizeSelector.tsx
+++ b/lama_cleaner/app/src/components/Editor/SizeSelector.tsx
@@ -14,10 +14,6 @@ export default function SizeSelector(props: SizeSelectorProps) {
   const [activeSize, setActiveSize] = useState<string>('Original')
   const longSide: number = Math.max(originalWidth, originalHeight)
 
-  useEffect(() => {
-    setActiveSize('Original')
-  }, [originalHeight, originalWidth])
-
   const getSizeShowName = useCallback(
     (size: string) => {
       if (size === 'Original') {
diff --git a/lama_cleaner/app/yarn.lock b/lama_cleaner/app/yarn.lock
index 3944d70..0bf8b8b 100644
--- a/lama_cleaner/app/yarn.lock
+++ b/lama_cleaner/app/yarn.lock
@@ -8174,6 +8174,11 @@ nanoid@^3.1.28:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz"
   integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
 
+nanoid@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.0.tgz#6e144dee117609232c3f415c34b0e550e64999a5"
+  integrity sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"