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)], + ]; +}