From 934289c476f65f48956e8ed0473e40b6e4d89669 Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Wed, 3 May 2023 10:19:40 +0800
Subject: [PATCH] fix interactiveSeg offset

---
 lama_cleaner/app/src/components/Editor/Editor.tsx     |  8 +++++---
 .../src/components/InteractiveSeg/InteractiveSeg.tsx  | 11 ++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx
index dd81833..e231a58 100644
--- a/lama_cleaner/app/src/components/Editor/Editor.tsx
+++ b/lama_cleaner/app/src/components/Editor/Editor.tsx
@@ -1060,11 +1060,13 @@ export default function Editor() {
   const onCanvasMouseUp = (ev: SyntheticEvent) => {
     if (isInteractiveSeg) {
       const xy = mouseXY(ev)
+      const isX = xy.x
+      const isY = xy.y
       const newClicks: number[][] = [...clicks]
       if (isRightClick(ev)) {
-        newClicks.push([xy.x, xy.y, 0, newClicks.length])
+        newClicks.push([isX, isY, 0, newClicks.length])
       } else {
-        newClicks.push([xy.x, xy.y, 1, newClicks.length])
+        newClicks.push([isX, isY, 1, newClicks.length])
       }
       runInteractiveSeg(newClicks)
       setClicks(newClicks)
@@ -1525,7 +1527,7 @@ export default function Editor() {
         style={{
           left: `${x}px`,
           top: `${y}px`,
-          // transform: 'translate(-50%, -50%)',
+          transform: 'translate(-50%, -50%)',
         }}
       >
         <CursorArrowRaysIcon />
diff --git a/lama_cleaner/app/src/components/InteractiveSeg/InteractiveSeg.tsx b/lama_cleaner/app/src/components/InteractiveSeg/InteractiveSeg.tsx
index 54a7ff5..c2ed8f2 100644
--- a/lama_cleaner/app/src/components/InteractiveSeg/InteractiveSeg.tsx
+++ b/lama_cleaner/app/src/components/InteractiveSeg/InteractiveSeg.tsx
@@ -12,7 +12,16 @@ interface ItemProps {
 const Item = (props: ItemProps) => {
   const { x, y, positive } = props
   const name = positive ? 'click-item-positive' : 'click-item-negative'
-  return <div className={`click-item ${name}`} style={{ left: x, top: y }} />
+  return (
+    <div
+      className={`click-item ${name}`}
+      style={{
+        left: x,
+        top: y,
+        transform: 'translate(-50%, -50%)',
+      }}
+    />
+  )
 }
 
 const InteractiveSeg = () => {