use key props to reload workspace when upload new file

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>
   )
 }

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()

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') {