- 부품 상자 CSS · 단추 기본 꼴을 CAD iframe 에 실음(integration/ui-kit.ts) · 자리 · 폭은 cad-* 그대로 - 상태막대 = ui-toggle--chip 22 · 특성/레이어 = ui-tabs 36 · ↶↷ · 리본 접기 · 탐색 막대 = ui-icon-btn 20 · 32 - 빠른 특성 · 블록 라이브러리 · 자리표 = ui-float-panel · 리본 넘침 · 스냅 · 명령 자동완성 = ui-ctx-menu - window.confirm · window.prompt → askConfirm · askText · 빈 안내 = ui-empty 작은 꼴 - 높이 단: 리본 칸 19→18 · 명령 칸 26→28 · 레이어 줄 40→42 · 문서 탭 25→24 · 도각 편집 단추 24 - 마우스 바탕 = --color-hover · 켜짐 = --color-accent-soft · 도면 그림 색(--draw-*) 안 건드림 - 안 쓰는 DropdownButton 지움(쓰는 곳 0 · grep) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
/** 상태막대 — AutoCAD 하단 제도 보조 토글 · 켜기 칩 부품(`ui-toggle--chip` · 단 22) */
|
|
import type { FC } from 'react';
|
|
import {
|
|
getAngleStep,
|
|
getGridEnabled,
|
|
getSnapEnabled,
|
|
getSnapTrackingEnabled,
|
|
setAngleStep,
|
|
setGridEnabled,
|
|
setSnapEnabled,
|
|
setSnapTrackingEnabled,
|
|
} from '../state';
|
|
|
|
interface StatusBarProps {
|
|
commandLineVisible: boolean;
|
|
onToggleCommandLine: () => void;
|
|
}
|
|
|
|
export const StatusBar: FC<StatusBarProps> = ({ commandLineVisible, onToggleCommandLine }) => {
|
|
const snap = getSnapEnabled();
|
|
const grid = getGridEnabled();
|
|
const ortho = getAngleStep() === 90;
|
|
const polar = getAngleStep() === 45;
|
|
const snapTracking = getSnapTrackingEnabled();
|
|
|
|
return (
|
|
<footer className="cad-statusbar controls">
|
|
<button
|
|
type="button"
|
|
className="ui-toggle ui-toggle--chip"
|
|
data-size="22"
|
|
aria-pressed={snap}
|
|
title="객체 스냅 (OSNAP)"
|
|
onClick={() => setSnapEnabled(!snap)}
|
|
>
|
|
객체 스냅
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ui-toggle ui-toggle--chip"
|
|
data-size="22"
|
|
aria-pressed={ortho}
|
|
title="직교 모드 (F8) — 90° 간격 각도 가이드"
|
|
onClick={() => setAngleStep(ortho ? 0 : 90)}
|
|
>
|
|
직교
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ui-toggle ui-toggle--chip"
|
|
data-size="22"
|
|
aria-pressed={polar}
|
|
title="극좌표 추적 (F10) — 45° 간격 각도 가이드"
|
|
onClick={() => setAngleStep(polar ? 0 : 45)}
|
|
>
|
|
극좌표 추적
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ui-toggle ui-toggle--chip"
|
|
data-size="22"
|
|
aria-pressed={snapTracking}
|
|
title="객체 스냅 추적 — 스냅점에 잠시 머물면 그 점에서 정렬선이 뻗는다"
|
|
onClick={() => setSnapTrackingEnabled(!snapTracking)}
|
|
>
|
|
스냅 추적
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ui-toggle ui-toggle--chip"
|
|
data-size="22"
|
|
aria-pressed={grid}
|
|
title="그리드 표시"
|
|
onClick={() => setGridEnabled(!grid)}
|
|
>
|
|
그리드
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ui-toggle ui-toggle--chip"
|
|
data-size="22"
|
|
aria-pressed={commandLineVisible}
|
|
title="명령행 표시/숨기기"
|
|
onClick={onToggleCommandLine}
|
|
>
|
|
명령행
|
|
</button>
|
|
<span className="cad-statusbar__hint">휠: 줌 · 휠 드래그: 초점이동 · Esc: 취소</span>
|
|
</footer>
|
|
);
|
|
};
|