eomsangdonandClaude Sonnet 5
2dc0a71ba7
- ui-state.ts ribbonCollapsed · Ribbon.tsx 접기 단추 · 탭 누르면 펼침
- App.css --cad-ribbon-height 를 Toolbar.tsx 가 접힘 때 26px 로
- aislo-drawing-bridge.ts load 곁값 ribbonCollapsed 받아 반영
- cad_host.ts CadLoadExtra 칸 추가 · M02_MasterTemplete_Drawing.ts 가 true 로 보냄
(도면 양식 · 구조물 도면 둘 다 이 파일 한 곳을 씀)
- B07 은 곁값을 안 보내 펼침 그대로(코드 확인 · cad.load 호출 둘 다 5번째 인자 없음)
- 구조물 편집 머리 제목(② 열 머리 글)은 이미 다른 창이 끝냈음(commit 65f43ca0) — 손대지 않음
검증: CAD 빌드 · 루트 npm run typecheck · M02 시험 18개(구조물·도면 영역) 통과 ·
ORCA 로 도면 양식(00_template_A1) 처음 접힘(26px) → 단추로 펼침(122px) 확인.
구조물 도면(rv 등) 은 서버가 만드는 빈 문서에 `layers` 키가 없어 CAD import 단계에서
조용히 실패(레이어 접근 에러) — 리본 접기와 무관한 기존 결함 · 손대지 않음(브레인에게 보고).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EUypcnp5d1gU2aeKh9F2H7
69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
/**
|
|
* CAD 화면 골격 조립 — 제목표시줄 · 리본 · 좌측 팔레트 · 탐색막대 · 명령행 · 상태막대.
|
|
* 각 조각은 자기 파일에 있고, 여기서는 배치와 표시 상태만 다룬다.
|
|
*/
|
|
import { type FC, useEffect, useState } from 'react';
|
|
import { CommandLine } from './CommandLine';
|
|
import { InspectorPanel } from './InspectorPanel';
|
|
import { QuickProperties } from './QuickProperties';
|
|
import { BlockLibraryPanel } from './BlockLibraryPanel';
|
|
import { LayersWidget, PropertiesWidget, TextStyleWidget } from './RibbonWidgets';
|
|
import { QuickAccessBar } from './QuickAccessBar';
|
|
import { Ribbon } from '../ribbon/Ribbon';
|
|
import { StatusBar } from './StatusBar';
|
|
import { useCadRefresh } from './use-cad-refresh';
|
|
import { isRibbonCollapsed } from './ui-state';
|
|
import { getActiveToolActor } from '../state';
|
|
import type { Tool } from '../tools';
|
|
import { ViewControls } from './ViewControls';
|
|
|
|
export const Toolbar: FC = () => {
|
|
useCadRefresh();
|
|
const [panelCollapsed, setPanelCollapsed] = useState(false);
|
|
const [commandLineVisible, setCommandLineVisible] = useState(false);
|
|
|
|
const activeTool = (getActiveToolActor()?.getSnapshot()?.context?.type ?? null) as Tool | null;
|
|
const ribbonCollapsed = isRibbonCollapsed();
|
|
|
|
useEffect(() => {
|
|
// 편 상태의 폭은 App.css의 `--cad-panel-width` 기본값을 쓴다. 여기 숫자를 박아
|
|
// 두면 스타일에서 넓혀도 이 인라인 값이 덮는다(2026-09-01 실측: 300px 무시됨).
|
|
if (panelCollapsed) document.documentElement.style.setProperty('--cad-panel-width', '0px');
|
|
else document.documentElement.style.removeProperty('--cad-panel-width');
|
|
document.documentElement.style.setProperty(
|
|
'--cad-command-height',
|
|
commandLineVisible ? '86px' : '0px'
|
|
);
|
|
// 리본 접힘 — 탭 줄(26px)만 남기고 패널 줄 자리를 걷는다(`Ribbon.tsx` 가 안 그림).
|
|
if (ribbonCollapsed) document.documentElement.style.setProperty('--cad-ribbon-height', '26px');
|
|
else document.documentElement.style.removeProperty('--cad-ribbon-height');
|
|
window.dispatchEvent(new Event('resize'));
|
|
}, [panelCollapsed, commandLineVisible, ribbonCollapsed]);
|
|
|
|
return (
|
|
<>
|
|
<QuickAccessBar />
|
|
<Ribbon
|
|
activeTool={activeTool}
|
|
widgets={{
|
|
properties: <PropertiesWidget />,
|
|
layers: <LayersWidget />,
|
|
textStyle: <TextStyleWidget />,
|
|
}}
|
|
/>
|
|
<InspectorPanel
|
|
collapsed={panelCollapsed}
|
|
onToggleCollapsed={() => setPanelCollapsed((value) => !value)}
|
|
/>
|
|
<ViewControls />
|
|
<QuickProperties />
|
|
<BlockLibraryPanel />
|
|
{commandLineVisible && <CommandLine />}
|
|
<StatusBar
|
|
commandLineVisible={commandLineVisible}
|
|
onToggleCommandLine={() => setCommandLineVisible((value) => !value)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|