58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import { useControlMode } from './hooks/useControlMode';
|
|
import { ControlToolbar } from './ControlToolbar';
|
|
import { ControlPalette } from './ControlPalette';
|
|
import { FlowViewer } from './FlowViewer';
|
|
import { RuleBuilder } from './RuleBuilder';
|
|
import '@/styles/control-mode.css';
|
|
|
|
interface ControlModeProps {
|
|
dashboardId: string;
|
|
cards: Record<string, any>[];
|
|
canvasRef: React.RefObject<HTMLDivElement | null>;
|
|
}
|
|
|
|
/**
|
|
* 제어 모드 오버레이 — 캔버스 위에 렌더
|
|
* ⚡ 버튼으로 토글, 읽기/편집 모드 전환
|
|
*/
|
|
export function ControlMode({ dashboardId, cards, canvasRef }: ControlModeProps) {
|
|
const { active, mode } = useControlMode();
|
|
|
|
if (!active) return null;
|
|
|
|
return (
|
|
<>
|
|
{/* 제어 모드 툴바 */}
|
|
<ControlToolbar dashboardId={dashboardId} />
|
|
|
|
{/* 읽기 모드: 카드 클릭 → 흐름 시각화 */}
|
|
{mode === 'view' && (
|
|
<FlowViewer cards={cards} canvasRef={canvasRef} dashboardId={dashboardId} />
|
|
)}
|
|
|
|
{/* 편집 모드: 규칙 빌더 */}
|
|
{mode === 'edit' && (
|
|
<RuleBuilder canvasRef={canvasRef} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 제어 모드 팔레트 wrapper — 사이드바에 삽입
|
|
*/
|
|
export function ControlPaletteWrapper() {
|
|
const { active, mode, addRuleNode } = useControlMode();
|
|
if (!active || mode !== 'edit') return null;
|
|
|
|
return (
|
|
<ControlPalette
|
|
onDropTable={() => {}}
|
|
onDropControl={() => {}}
|
|
/>
|
|
);
|
|
}
|