eomsangdonandClaude Opus 5.5
de250ab759
- 부품 상자 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>
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
/** 블록 라이브러리 팔레트 — 저장한 블록을 고르면 삽입 도구가 켜진다 (INSERT/BLOCK) · 떠 있는 판 부품 */
|
|
import type { FC } from 'react';
|
|
import {
|
|
deleteBlock,
|
|
exportBlocksToFile,
|
|
getBlocks,
|
|
importBlocksFromFile,
|
|
} from '../blocks/block-library';
|
|
import { pickFile } from '../helpers/pick-file';
|
|
import { askConfirm } from '../integration/ui-kit';
|
|
import { startBlockInsert } from '../tools/insert-block-tool';
|
|
import { isBlockLibraryVisible, setBlockLibraryVisible } from './ui-state';
|
|
|
|
export const BlockLibraryPanel: FC = () => {
|
|
if (!isBlockLibraryVisible()) return null;
|
|
|
|
const blocks = getBlocks();
|
|
|
|
return (
|
|
<div className="ui-float-panel cad-block-library controls">
|
|
<div className="ui-float-panel__head">
|
|
<span className="ui-float-panel__title">블록 라이브러리</span>
|
|
<button
|
|
type="button"
|
|
className="ui-icon-btn ui-icon-btn--ghost"
|
|
data-size="24"
|
|
onClick={() => setBlockLibraryVisible(false)}
|
|
title="닫기"
|
|
aria-label="닫기"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="ui-float-panel__body">
|
|
{blocks.length === 0 ? (
|
|
<div className="ui-empty ui-empty--small">
|
|
<p className="ui-empty__text">객체를 선택하고 BLOCK 명령으로 저장하십시오.</p>
|
|
</div>
|
|
) : (
|
|
<ul className="cad-block-library__list">
|
|
{blocks.map((block) => (
|
|
<li key={block.name}>
|
|
<button
|
|
type="button"
|
|
className="ui-sidebar-row cad-block-library__name"
|
|
title={`객체 ${block.entities.length}개 — 클릭하면 삽입`}
|
|
onClick={() => {
|
|
setBlockLibraryVisible(false);
|
|
void startBlockInsert(block);
|
|
}}
|
|
>
|
|
{block.name}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ui-icon-btn ui-icon-btn--ghost"
|
|
data-size="20"
|
|
title="삭제"
|
|
aria-label="삭제"
|
|
onClick={async () => {
|
|
if (
|
|
await askConfirm({
|
|
message: `블록 '${block.name}'을 삭제하시겠습니까?`,
|
|
okLabel: '삭제',
|
|
danger: true,
|
|
})
|
|
) {
|
|
deleteBlock(block.name);
|
|
}
|
|
}}
|
|
>
|
|
✕
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
<div className="cad-block-library__actions">
|
|
<button
|
|
type="button"
|
|
className="ui-btn ui-btn--ghost"
|
|
data-size="24"
|
|
onClick={() => exportBlocksToFile()}
|
|
>
|
|
파일로 내보내기
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ui-btn ui-btn--ghost"
|
|
data-size="24"
|
|
onClick={() => pickFile('application/json', (file) => importBlocksFromFile(file))}
|
|
>
|
|
파일에서 가져오기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|