Merge branch 'fe/fix/266-canvas-rect-sort' into 'fe/develop'

Fix: 사각형 저장 시 점 서순 맞도록 수정 - S11P21S002-266

See merge request s11-s-project/S11P21S002!290
This commit is contained in:
홍창기 2024-10-04 15:32:43 +09:00
commit 3ff0b2ad73
5 changed files with 65 additions and 5 deletions

View File

@ -11,5 +11,5 @@ export async function saveImageLabels(
} }
export async function runAutoLabel(projectId: number, modelId = 1) { 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);
} }

View File

@ -1,4 +1,5 @@
import { Label } from '@/types'; import { Label } from '@/types';
import rectSort from '@/utils/rectSort';
import Konva from 'konva'; import Konva from 'konva';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { Line, Transformer } from 'react-konva'; 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[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], [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?.setPosition({ x: 0, y: 0 });
rectRef.current?.scale({ x: 1, y: 1 }); rectRef.current?.scale({ x: 1, y: 1 });
}; };

View File

@ -19,6 +19,7 @@ import { useQueryClient } from '@tanstack/react-query';
import useSaveImageLabelsQuery from '@/queries/projects/useSaveImageLabelsQuery'; import useSaveImageLabelsQuery from '@/queries/projects/useSaveImageLabelsQuery';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import CommentLabel from './CommentLabel'; import CommentLabel from './CommentLabel';
import rectSort from '@/utils/rectSort';
export default function ImageCanvas() { export default function ImageCanvas() {
const { project, folderId, categories } = useProjectStore(); const { project, folderId, categories } = useProjectStore();
@ -188,11 +189,11 @@ export default function ImageCanvas() {
const endDrawRect = () => { const endDrawRect = () => {
if (drawState !== 'rect' || rectPoints.length === 0) return; if (drawState !== 'rect' || rectPoints.length === 0) return;
setRectPoints([]);
if (rectPoints[0][0] === rectPoints[1][0] && rectPoints[0][1] === rectPoints[1][1]) { if (rectPoints[0][0] === rectPoints[1][0] && rectPoints[0][1] === rectPoints[1][1]) {
setRectPoints([]);
return; return;
} }
setRectPoints([]); const sortedPoints = rectSort(rectPoints as [[number, number], [number, number]]);
const color = Math.floor(Math.random() * 0xffffff) const color = Math.floor(Math.random() * 0xffffff)
.toString(16) .toString(16)
@ -203,7 +204,7 @@ export default function ImageCanvas() {
categoryId: categories[0]!.id, categoryId: categories[0]!.id,
type: 'rectangle', type: 'rectangle',
color: `#${color}`, color: `#${color}`,
coordinates: rectPoints, coordinates: sortedPoints,
}); });
setDrawState('pointer'); setDrawState('pointer');
setSelectedLabelId(id); setSelectedLabelId(id);

View File

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

View File

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