eomsangdonandClaude Fable 5
17e14a25ed
사용자 편의성 점검 15건 중 반영 확정분 12건. 편집 손실 방지 - CAD에 미저장 표시(drawingDirty)를 두고, 도면을 바꾸기 전에 묻는다. 전에는 그은 선이 경고 없이 사라졌다(실측: 캔버스 서명이 원본과 동일). - 도면 전환을 겹쳐 눌러도 늦게 온 응답이 화면을 덮지 않게 가드를 뒀다. - 도면층 삭제·객체 이동을 되돌리기에 실어 Ctrl+Z로 돌아오게 했다. 확정한 도면은 읽기 전용 - runCommand 한 곳에서 보는 명령만 통과시킨다(허용 명시 방식). - 도면을 실을 때 앞 도면의 그리기 도구를 내린다 — 켜 둔 도구가 확정본에도 계속 그렸다. - 확정 버튼 자리를 [현재 도면 확정] / [수정]으로 가른다. 확정 해제는 [수정] 한 곳뿐 — 되돌리기·색 고르기로 확정이 풀리던 경로를 없앴다. 그 밖 - 잠금 도면층(도각·등고선·계류)은 마우스가 스쳐도 하이라이트하지 않는다. - 준비 중 도면 7종도 빈 도각으로 열린다(눌리지 않는 회색 버튼 제거). - 도면층 행이 잘리지 않게 패널을 300px로 넓히고 이름을 줄여 담는다. - 기본 그리기 색을 검정으로 — 흰 종이에 흰 선이라 안 보였다. - 색 고르는 동안 변경 통지가 연발하지 않는다. - 수량표는 앞 단계 산출물이라 도면에서 고치지 못하게 막고 안내한다. - 자동백업 칸을 도면별로 나눈다 — 되살리면 다른 도면에 붙었다. - 횡단 장 id를 시작 측점 기준으로 바꿔 구간이 달라져도 옛 확정이 안 붙는다. - 회사 도각 저장 전에 좌표를 검사하고, 기본 도각으로 되돌리기를 연다. - 횡단 파일이 없어도 나머지 도면 목록은 남는다. - 불러오는 중·실패를 화면에 표시한다. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
64 lines
2.3 KiB
TypeScript
64 lines
2.3 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 { 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(true);
|
|
|
|
const activeTool = (getActiveToolActor()?.getSnapshot()?.context?.type ?? null) as Tool | null;
|
|
|
|
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'
|
|
);
|
|
window.dispatchEvent(new Event('resize'));
|
|
}, [panelCollapsed, commandLineVisible]);
|
|
|
|
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)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|