From c5f4accbff9cd6729c2cf15ece2f8bc23beeb591 Mon Sep 17 00:00:00 2001
From: Sanster <cwq1913@gmail.com>
Date: Tue, 8 Feb 2022 22:36:32 +0800
Subject: [PATCH] fix brush size after zoom

---
 lama_cleaner/app/src/Editor.tsx               | 30 ++++++++++++++-----
 .../app/src/components/SizeSelector.tsx       |  2 +-
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/lama_cleaner/app/src/Editor.tsx b/lama_cleaner/app/src/Editor.tsx
index d535aef..d2c26eb 100644
--- a/lama_cleaner/app/src/Editor.tsx
+++ b/lama_cleaner/app/src/Editor.tsx
@@ -246,8 +246,9 @@ 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, 200, 'easeOutQuad')
+    viewport.state.scale = minScale
     setScale(minScale)
-  }, [minScale, original, windowSize])
+  }, [viewportRef, minScale, original, windowSize])
 
   const handleEscPressed = () => {
     if (isInpaintingLoading) {
@@ -461,6 +462,25 @@ export default function Editor(props: EditorProps) {
     }
   )
 
+  const getCurScale = (): number => {
+    let s = minScale
+    if (viewportRef.current?.state.scale !== undefined) {
+      s = viewportRef.current?.state.scale
+    }
+    return s!
+  }
+
+  const getBrushStyle = () => {
+    const curScale = getCurScale()
+    return {
+      width: `${brushSize * curScale}px`,
+      height: `${brushSize * curScale}px`,
+      left: `${x}px`,
+      top: `${y}px`,
+      transform: 'translate(-50%, -50%)',
+    }
+  }
+
   if (!original || !scale || !minScale) {
     return <></>
   }
@@ -564,13 +584,7 @@ export default function Editor(props: EditorProps) {
       {showBrush && !isInpaintingLoading && !isPanning && (
         <div
           className="hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none"
-          style={{
-            width: `${brushSize * scale}px`,
-            height: `${brushSize * scale}px`,
-            left: `${x}px`,
-            top: `${y}px`,
-            transform: 'translate(-50%, -50%)',
-          }}
+          style={getBrushStyle()}
         />
       )}
 
diff --git a/lama_cleaner/app/src/components/SizeSelector.tsx b/lama_cleaner/app/src/components/SizeSelector.tsx
index b20ceba..043e046 100644
--- a/lama_cleaner/app/src/components/SizeSelector.tsx
+++ b/lama_cleaner/app/src/components/SizeSelector.tsx
@@ -2,7 +2,7 @@ import React, { FocusEvent, useCallback, useEffect } from 'react'
 import { Listbox } from '@headlessui/react'
 import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
 
-const sizes = ['1080', '2000', 'Original']
+const sizes = ['720', '1080', '2000', 'Original']
 
 type SizeSelectorProps = {
   value: string