From cde724cad99b1594c2ba9a053ed4da3b25f86d91 Mon Sep 17 00:00:00 2001 From: jhynsoo Date: Wed, 25 Sep 2024 13:33:54 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Fix:=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=EC=8B=9C=20=EC=BA=94=EB=B2=84=EC=8A=A4?= =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ImageCanvas/index.tsx | 3 +- .../WorkspaceDropdownMenu/index.tsx | 5 ++- .../components/WorkspaceLabelBar/index.tsx | 39 ++++++------------- .../WorkspaceSidebar/ProjectStructure.tsx | 5 ++- .../src/components/WorkspaceSidebar/index.tsx | 15 +++++-- frontend/src/stores/useCanvasStore.ts | 12 +++--- frontend/src/stores/useFolderStore.ts | 22 ----------- frontend/src/stores/useProjectStore.ts | 14 +++++++ frontend/src/types/index.ts | 6 ++- 9 files changed, 55 insertions(+), 66 deletions(-) delete mode 100644 frontend/src/stores/useFolderStore.ts create mode 100644 frontend/src/stores/useProjectStore.ts diff --git a/frontend/src/components/ImageCanvas/index.tsx b/frontend/src/components/ImageCanvas/index.tsx index 2a04e5d..7654dec 100644 --- a/frontend/src/components/ImageCanvas/index.tsx +++ b/frontend/src/components/ImageCanvas/index.tsx @@ -10,9 +10,10 @@ import CanvasControlBar from '../CanvasControlBar'; import { Label } from '@/types'; import useLabelJson from '@/hooks/useLabelJson'; import { saveImageLabels } from '@/api/lablingApi'; +import useProjectStore from '@/stores/useProjectStore'; export default function ImageCanvas() { - const project = useCanvasStore((state) => state.project)!; + const project = useProjectStore((state) => state.project)!; const { id: imageId, imagePath, dataPath } = useCanvasStore((state) => state.image)!; const { data: labelData, refetch } = useLabelJson(dataPath, project); const { shapes } = labelData || []; diff --git a/frontend/src/components/WorkspaceDropdownMenu/index.tsx b/frontend/src/components/WorkspaceDropdownMenu/index.tsx index d4a5898..b558029 100644 --- a/frontend/src/components/WorkspaceDropdownMenu/index.tsx +++ b/frontend/src/components/WorkspaceDropdownMenu/index.tsx @@ -45,7 +45,10 @@ export default function WorkspaceDropdownMenu({ <> - + state.labels); + const { labels, image } = useCanvasStore(); const selectedLabelId = useCanvasStore((state) => state.selectedLabelId); const setSelectedLabelId = useCanvasStore((state) => state.setSelectedLabelId); - const handleAutoLabeling = () => { - console.log('Auto labeling'); - }; return ( -
+

레이블 목록

- {labels.map((label) => ( - - ))} + {image && + labels.map((label) => ( + + ))}
-
- -
); } diff --git a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx index 9b7ca04..8d1155b 100644 --- a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx +++ b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx @@ -7,9 +7,10 @@ import useCanvasStore from '@/stores/useCanvasStore'; import { Button } from '../ui/button'; import { useEffect } from 'react'; import WorkspaceDropdownMenu from '../WorkspaceDropdownMenu'; +import useProjectStore from '@/stores/useProjectStore'; export default function ProjectStructure({ project }: { project: Project }) { - const setProject = useCanvasStore((state) => state.setProject); + const setProject = useProjectStore((state) => state.setProject); const image = useCanvasStore((state) => state.image); const { data: folderData, refetch } = useFolderQuery(project.id.toString(), 0); @@ -22,7 +23,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
-

{project.type}

+

{project.type}

(); + const { setImage } = useCanvasStore(); + const { projectId: selectedProjectId, workspaceId } = useParams<{ projectId: string; workspaceId: string }>(); const selectedProject = projects.find((project) => project.id.toString() === selectedProjectId) || null; const setSidebarSize = useCanvasStore((state) => state.setSidebarSize); const navigate = useNavigate(); - const { workspaceId } = useParams<{ workspaceId: string }>(); const handleSelectProject = (projectId: string) => { + setImage(null); navigate(`${webPath.workspace()}/${workspaceId}/${projectId}`); }; + useEffect(() => { + if (!selectedProject) { + setImage(null); + } + }, [selectedProject, setImage]); + return ( <> setSidebarSize(size)} > diff --git a/frontend/src/stores/useCanvasStore.ts b/frontend/src/stores/useCanvasStore.ts index 6b26508..1767735 100644 --- a/frontend/src/stores/useCanvasStore.ts +++ b/frontend/src/stores/useCanvasStore.ts @@ -1,16 +1,16 @@ -import { ImageResponse, Label, Project } from '@/types'; +import { ImageResponse, Label } from '@/types'; import { create } from 'zustand'; interface CanvasState { - project: Project | null; + // project: Project | null; sidebarSize: number; image: ImageResponse | null; labels: Label[]; drawState: 'pen' | 'rect' | 'pointer'; selectedLabelId: number | null; - setProject: (project: Project | null) => void; + // setProject: (project: Project | null) => void; setSidebarSize: (width: number) => void; - setImage: (image: ImageResponse) => void; + setImage: (image: ImageResponse | null) => void; setLabels: (labels: Label[]) => void; addLabel: (label: Label) => void; removeLabel: (labelId: number) => void; @@ -20,13 +20,13 @@ interface CanvasState { } const useCanvasStore = create()((set) => ({ - project: null, + // project: null, sidebarSize: 20, image: null, labels: [], drawState: 'pointer', selectedLabelId: null, - setProject: (project) => set({ project }), + // setProject: (project) => set({ project }), setSidebarSize: (width) => set({ sidebarSize: width }), setImage: (image) => set({ image }), addLabel: (label: Label) => set((state) => ({ labels: [...state.labels, label] })), diff --git a/frontend/src/stores/useFolderStore.ts b/frontend/src/stores/useFolderStore.ts deleted file mode 100644 index c6d377b..0000000 --- a/frontend/src/stores/useFolderStore.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { create } from 'zustand'; -import { FolderResponse } from '@/types'; - -interface FolderState { - folder: FolderResponse | null; - loading: boolean; - error: string | null; - setFolder: (folder: FolderResponse | null) => void; - setLoading: (loading: boolean) => void; - setError: (error: string | null) => void; -} - -const useFolderStore = create((set) => ({ - folder: null, - loading: false, - error: null, - setFolder: (folder) => set({ folder }), - setLoading: (loading) => set({ loading }), - setError: (error) => set({ error }), -})); - -export default useFolderStore; diff --git a/frontend/src/stores/useProjectStore.ts b/frontend/src/stores/useProjectStore.ts new file mode 100644 index 0000000..4a5ef93 --- /dev/null +++ b/frontend/src/stores/useProjectStore.ts @@ -0,0 +1,14 @@ +import { create } from 'zustand'; +import { Project } from '@/types'; + +interface ProjectState { + project: Project | null; + setProject: (project: Project | null) => void; +} + +const useProjectStore = create((set) => ({ + project: null, + setProject: (project) => set({ project }), +})); + +export default useProjectStore; diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 954626b..a8f39cd 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -68,12 +68,14 @@ export interface FolderResponse { children: ChildFolder[]; } +export type ImageStatus = 'PENDING' | 'IN_PROGRESS' | 'SAVE' | 'REVIEW_REQUEST' | 'COMPLETED'; + export interface ImageResponse { id: number; imageTitle: string; imagePath: string; dataPath: string; - status: 'PENDING' | 'IN_PROGRESS' | 'SAVE' | 'REVIEW_REQUEST' | 'COMPLETED'; + status: ImageStatus; } // 이미지 이동 및 상태변경 요청 DTO @@ -82,7 +84,7 @@ export interface ImageMoveRequest { } export interface ImageStatusChangeRequest { - labelStatus: 'PENDING' | 'IN_PROGRESS' | 'SAVE' | 'REVIEW_REQUEST' | 'COMPLETED'; + labelStatus: ImageStatus; } // 멤버 관련 DTO From 807bf970ae6e6e844292ade122c229814c39fd44 Mon Sep 17 00:00:00 2001 From: jhynsoo Date: Wed, 25 Sep 2024 13:48:41 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Feat:=20=ED=94=84=EB=A1=9C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=97=90=20=EB=94=B0=EB=9D=BC=20?= =?UTF-8?q?=EC=BA=94=EB=B2=84=EC=8A=A4=EC=97=90=20=EC=82=AC=EA=B0=81?= =?UTF-8?q?=ED=98=95,=20=EB=8B=A4=EA=B0=81=ED=98=95=20=EC=A4=91=20?= =?UTF-8?q?=ED=95=98=EB=82=98=EB=A7=8C=20=EA=B7=B8=EB=A6=B4=20=EC=88=98=20?= =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/CanvasControlBar/index.tsx | 14 ++++++++++---- frontend/src/components/ImageCanvas/index.tsx | 5 ++++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/CanvasControlBar/index.tsx b/frontend/src/components/CanvasControlBar/index.tsx index 56fd7c1..8f86cbf 100644 --- a/frontend/src/components/CanvasControlBar/index.tsx +++ b/frontend/src/components/CanvasControlBar/index.tsx @@ -2,16 +2,22 @@ import useCanvasStore from '@/stores/useCanvasStore'; import { LucideIcon, MousePointer2, PenTool, Save, Square } from 'lucide-react'; import { cn } from '@/lib/utils'; -export default function CanvasControlBar({ saveJson }: { saveJson: () => void }) { +export default function CanvasControlBar({ + saveJson, + projectType, +}: { + saveJson: () => void; + projectType: 'classification' | 'detection' | 'segmentation'; +}) { const drawState = useCanvasStore((state) => state.drawState); const setDrawState = useCanvasStore((state) => state.setDrawState); const buttonBaseClassName = 'rounded-lg p-2 transition-colors '; const buttonClassName = 'hover:bg-gray-100'; const activeButtonClassName = 'bg-primary stroke-white'; + const controls: { [key: string]: LucideIcon } = { pointer: MousePointer2, - rect: Square, - pen: PenTool, + ...(projectType === 'segmentation' ? { pen: PenTool } : { rect: Square }), }; return ( @@ -31,7 +37,7 @@ export default function CanvasControlBar({ saveJson }: { saveJson: () => void }) ); })} - +
) : (
From 8865ef85f9f39111dc7b9b8a28c377e3c4484482 Mon Sep 17 00:00:00 2001 From: jhynsoo Date: Wed, 25 Sep 2024 13:50:13 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Fix:=20=EB=B9=8C=EB=93=9C=20=EC=95=88?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/CanvasControlBar/index.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/CanvasControlBar/index.stories.tsx b/frontend/src/components/CanvasControlBar/index.stories.tsx index a910ce8..52d945d 100644 --- a/frontend/src/components/CanvasControlBar/index.stories.tsx +++ b/frontend/src/components/CanvasControlBar/index.stories.tsx @@ -6,4 +6,9 @@ export default { component: CanvasControlBar, }; -export const Default = () => {}} />; +export const Default = () => ( + {}} + projectType="segmentation" + /> +); From d6f47abb5458f7d45194cfd06035816c1af95d9d Mon Sep 17 00:00:00 2001 From: jhynsoo Date: Wed, 25 Sep 2024 14:17:47 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Fix:=20=EC=BA=94=EB=B2=84=EC=8A=A4=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ImageCanvas/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ImageCanvas/index.tsx b/frontend/src/components/ImageCanvas/index.tsx index 4ed7924..01e2074 100644 --- a/frontend/src/components/ImageCanvas/index.tsx +++ b/frontend/src/components/ImageCanvas/index.tsx @@ -20,7 +20,7 @@ export default function ImageCanvas() { const selectedLabelId = useCanvasStore((state) => state.selectedLabelId); const setSelectedLabelId = useCanvasStore((state) => state.setSelectedLabelId); const sidebarSize = useCanvasStore((state) => state.sidebarSize); - const stageWidth = window.innerWidth * ((100 - sidebarSize) / 100) - 280; + const stageWidth = window.innerWidth * ((100 - sidebarSize) / 100) - 200; const stageHeight = window.innerHeight - 64; const stageRef = useRef(null); const dragLayerRef = useRef(null);