From 016a8aa916b4023f57e452507e917961de62ca58 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Fri, 4 Oct 2024 15:29:21 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EC=82=AC=EA=B0=81=ED=98=95=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=EC=8B=9C=20=EC=A0=90=20=EC=84=9C=EC=88=9C=20?=
 =?UTF-8?q?=EB=A7=9E=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20-=20S11P21S0?=
 =?UTF-8?q?02-266?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/lablingApi.ts                |  2 +-
 .../src/components/ImageCanvas/LabelRect.tsx  |  4 +-
 frontend/src/components/ImageCanvas/index.tsx |  7 +--
 frontend/src/utils/rectSort.test.ts           | 48 +++++++++++++++++++
 frontend/src/utils/rectSort.ts                |  9 ++++
 5 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/utils/rectSort.test.ts
 create mode 100644 frontend/src/utils/rectSort.ts

diff --git a/frontend/src/api/lablingApi.ts b/frontend/src/api/lablingApi.ts
index 0c922c9..efd91a9 100644
--- a/frontend/src/api/lablingApi.ts
+++ b/frontend/src/api/lablingApi.ts
@@ -11,5 +11,5 @@ export async function saveImageLabels(
 }
 
 export async function runAutoLabel(projectId: number, modelId = 1) {
-  return api.post(`/projects/${projectId}/auto`, { modelId }).then(({ data }) => data);
+  return api.post(`/projects/${projectId}/auto`, { modelId }, { timeout: 0 }).then(({ data }) => data);
 }
diff --git a/frontend/src/components/ImageCanvas/LabelRect.tsx b/frontend/src/components/ImageCanvas/LabelRect.tsx
index a6cf656..f0b3402 100644
--- a/frontend/src/components/ImageCanvas/LabelRect.tsx
+++ b/frontend/src/components/ImageCanvas/LabelRect.tsx
@@ -1,4 +1,5 @@
 import { Label } from '@/types';
+import rectSort from '@/utils/rectSort';
 import Konva from 'konva';
 import { useEffect, useRef } from 'react';
 import { Line, Transformer } from 'react-konva';
@@ -39,8 +40,9 @@ export default function LabelRect({
       [info.coordinates[0][0] * scale.x + rect.x, info.coordinates[0][1] * scale.y + rect.y],
       [info.coordinates[1][0] * scale.x + rect.x, info.coordinates[1][1] * scale.y + rect.y],
     ];
+    const sortedPoints = rectSort(points as [[number, number], [number, number]]);
 
-    setLabel(points);
+    setLabel(sortedPoints);
     rectRef.current?.setPosition({ x: 0, y: 0 });
     rectRef.current?.scale({ x: 1, y: 1 });
   };
diff --git a/frontend/src/components/ImageCanvas/index.tsx b/frontend/src/components/ImageCanvas/index.tsx
index 9c4783a..568a8f1 100644
--- a/frontend/src/components/ImageCanvas/index.tsx
+++ b/frontend/src/components/ImageCanvas/index.tsx
@@ -19,6 +19,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import useSaveImageLabelsQuery from '@/queries/projects/useSaveImageLabelsQuery';
 import { useToast } from '@/hooks/use-toast';
 import CommentLabel from './CommentLabel';
+import rectSort from '@/utils/rectSort';
 
 export default function ImageCanvas() {
   const { project, folderId, categories } = useProjectStore();
@@ -188,11 +189,11 @@ export default function ImageCanvas() {
 
   const endDrawRect = () => {
     if (drawState !== 'rect' || rectPoints.length === 0) return;
+    setRectPoints([]);
     if (rectPoints[0][0] === rectPoints[1][0] && rectPoints[0][1] === rectPoints[1][1]) {
-      setRectPoints([]);
       return;
     }
-    setRectPoints([]);
+    const sortedPoints = rectSort(rectPoints as [[number, number], [number, number]]);
 
     const color = Math.floor(Math.random() * 0xffffff)
       .toString(16)
@@ -203,7 +204,7 @@ export default function ImageCanvas() {
       categoryId: categories[0]!.id,
       type: 'rectangle',
       color: `#${color}`,
-      coordinates: rectPoints,
+      coordinates: sortedPoints,
     });
     setDrawState('pointer');
     setSelectedLabelId(id);
diff --git a/frontend/src/utils/rectSort.test.ts b/frontend/src/utils/rectSort.test.ts
new file mode 100644
index 0000000..4088941
--- /dev/null
+++ b/frontend/src/utils/rectSort.test.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import rectSort from './rectSort';
+
+describe('rectSort', () => {
+  it('should sort coordinates when first point is top-left and second point is bottom-right', () => {
+    const result = rectSort([
+      [1, 2],
+      [3, 4],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
+  it('should sort coordinates when first point is bottom-right and second point is top-left', () => {
+    const result = rectSort([
+      [3, 4],
+      [1, 2],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
+  it('should sort coordinates when first point is bottom-left and second point is top-right', () => {
+    const result = rectSort([
+      [1, 4],
+      [3, 2],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
+  it('should sort coordinates when first point is top-right and second point is bottom-left', () => {
+    const result = rectSort([
+      [3, 2],
+      [1, 4],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+});
diff --git a/frontend/src/utils/rectSort.ts b/frontend/src/utils/rectSort.ts
new file mode 100644
index 0000000..ba43c99
--- /dev/null
+++ b/frontend/src/utils/rectSort.ts
@@ -0,0 +1,9 @@
+export default function rectSort([[x1, y1], [x2, y2]]: [[number, number], [number, number]]): [
+  [number, number],
+  [number, number],
+] {
+  return [
+    [Math.min(x1, x2), Math.min(y1, y2)],
+    [Math.max(x1, x2), Math.max(y1, y2)],
+  ];
+}