Merge branch 'fe/fix/classification-save' into 'fe/develop'

Fix: classification 저장 오류 수정 - S11P21S002-263

See merge request s11-s-project/S11P21S002!241
This commit is contained in:
조현수 2024-09-30 13:02:08 +09:00
commit 7e207972b6
3 changed files with 18 additions and 7 deletions

View File

@ -10,5 +10,11 @@ export const Default = () => (
<CanvasControlBar <CanvasControlBar
saveJson={() => {}} saveJson={() => {}}
projectType="segmentation" projectType="segmentation"
categories={[
{
id: 1,
labelName: 'label',
},
]}
/> />
); );

View File

@ -1,14 +1,17 @@
import useCanvasStore from '@/stores/useCanvasStore'; import useCanvasStore from '@/stores/useCanvasStore';
import { LucideIcon, MousePointer2, PenTool, Plus, Save, Square } from 'lucide-react'; import { BookmarkPlus, LucideIcon, MousePointer2, PenTool, Save, Square } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { MessageSquare } from 'lucide-react'; import { MessageSquare } from 'lucide-react';
import { LabelCategoryResponse } from '@/types';
export default function CanvasControlBar({ export default function CanvasControlBar({
saveJson, saveJson,
projectType, projectType,
categories,
}: { }: {
saveJson: () => void; saveJson: () => void;
projectType: 'classification' | 'detection' | 'segmentation'; projectType: 'classification' | 'detection' | 'segmentation';
categories: LabelCategoryResponse[];
}) { }) {
const { drawState, setDrawState, setLabels, labels } = useCanvasStore(); const { drawState, setDrawState, setLabels, labels } = useCanvasStore();
const buttonBaseClassName = 'rounded-lg p-2 transition-colors'; const buttonBaseClassName = 'rounded-lg p-2 transition-colors';
@ -22,7 +25,7 @@ export default function CanvasControlBar({
}; };
return ( return (
<div className="fixed bottom-14 left-[50%] flex translate-x-[-50%] items-center gap-2 rounded-xl bg-white p-1 shadow-xl"> <div className="fixed bottom-10 left-[50%] flex translate-x-[-50%] items-center gap-2 rounded-xl bg-white p-1 shadow-xl">
{Object.keys(controls).map((control) => { {Object.keys(controls).map((control) => {
const Icon = controls[control]; const Icon = controls[control];
return ( return (
@ -39,24 +42,25 @@ export default function CanvasControlBar({
); );
})} })}
{projectType === 'classification' && labels.length === 0 && ( {projectType === 'classification' && (
<button <button
className={cn(buttonClassName, buttonBaseClassName)} className={cn(labels.length === 0 ? buttonClassName : '', buttonBaseClassName)}
onClick={() => { onClick={() => {
setLabels([ setLabels([
{ {
id: 0, id: 0,
categoryId: 0, categoryId: categories[0]!.id,
color: '#1177ff', color: '#1177ff',
type: 'point', type: 'point',
coordinates: [[0, 0]], coordinates: [[0, 0]],
}, },
]); ]);
}} }}
disabled={labels.length !== 0}
> >
<Plus <BookmarkPlus
size={20} size={20}
color="black" color={labels.length === 0 ? 'black' : 'gray'}
/> />
</button> </button>
)} )}

View File

@ -461,6 +461,7 @@ export default function ImageCanvas() {
<CanvasControlBar <CanvasControlBar
saveJson={saveJson} saveJson={saveJson}
projectType={project!.type} projectType={project!.type}
categories={categories}
/> />
</div> </div>
) : ( ) : (