minsungandClaude Opus 5.5
855b7f4ad6
fetchWithProgress reports every network chunk; only re-render when the "x MB / y MB" label actually changes (#1). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
dwg-dxf-viewer-hm
dwg-dxf-viewer-sample(vanilla TS + Three.js)의 DWG/DXF 2D 뷰어를 React 19 + HMDesign(@hm-design/ui) 로
다시 만든 앱입니다. 뷰어 엔진(Viewer2D, acadrust-dwg WASM, dxf-parser …)은 원본 그대로 쓰고, UI만 HMDesign
컴포넌트로 새로 구성했습니다.
실행
Node 20.19+ / 22.12+ (확인: Node 24.11.1, npm 11.7.0).
git clone --recurse-submodules <repo> dwg-dxf-viewer-hm
cd dwg-dxf-viewer-hm
# submodule 없이 clone 했다면: git submodule update --init --recursive
npm install # postinstall 이 @hm-design/ui dist 를 빌드한다
npm run dev # http://localhost:5173
| 명령 | 내용 |
|---|---|
npm run build |
tsc + vite build → dist/ |
npm run preview |
빌드 결과 미리보기 (4173) |
npm run hm:build |
HMDesign 갱신 후 @hm-design/ui dist 강제 재빌드 |
npm run guard |
HMDesign AI Generation Guard (--scope FULL_SCREEN --mode GNB_ONLY) |
?model=/samples/civil.dwg 처럼 주소에 붙이면 시작할 때 자동으로 엽니다.
HMDesign 연결
vendor/HMDesign= git submodule (https://gitea.hmac.kr/b25027/HMDesign.git,main)- 그 안의
packages/ui를 이 저장소의 npm workspace 로 등록 →@hm-design/ui가 submodule 을 가리킨다 scripts/setup-hmdesign.mjs(postinstall):vendor/HMDesign/node_modules→ 이 저장소node_modulesjunction (HMDesign 빌드 스크립트가 자기 루트의 typescript/shadcn 을 읽기 때문) 후 package dist 빌드. submodule 내용은 수정하지 않는다@hm-design/center-graphic은 쓰지 않는다
구조
src/
engine/ ← dwg-dxf-viewer-sample 에서 그대로 복사 (로직·import 경로 변경 없음)
viewer2d/* Viewer2D.js, 파서, acadrust-dwg WASM, cadSpaces, slugText …
layerPanel.ts LayerPanelManager (레이어 표시 상태)
panelUtils.ts 창 드래그 / 접기
propertyInspector.ts formatEntityProperties
optionsStore.ts IndexedDB hmw-viewer/options
components/
DwgViewerCanvas.tsx Viewer2D React 래퍼 (useRef + useEffect, 옵션 → setter 단방향)
AppHeader.tsx GNB (샘플 도면 메뉴, 파일 열기, 정보)
ViewerToolbar.tsx Model/Layout, 맞춤 보기, 2.5D, 캔버스 테마, 창 토글
FloatingPanel.tsx 드래그·접기·크기조절 창 (HM Card)
LayersPanel.tsx / PropertiesPanel.tsx / OptionsPanel.tsx
StageOverlays.tsx 빈 화면, 로딩(Progress + LoadingScreen), 드롭 안내
StatusBar.tsx 상태 문구, Zoom, CAD 좌표(우하단), 오픈소스 고지 링크
AboutDialog.tsx 모듈 구성 + 오픈소스 고지 (acadrust MPL-2.0, local patch)
lib/ main.ts 의 파서 조합·좌표 포맷, topProgress.ts 의 fetch/paint 헬퍼
public/ NanumGothic, 샘플 도면, 라이선스 원문·패치, 모듈 지도
라이선스
acadrust 0.4.1(MPL-2.0, read_mesh 로컬 패치 수정본)이 WASM 으로 포함됩니다.
고지·원문·패치: THIRD-PARTY-NOTICES.md, public/licenses/ (배포 시 /licenses/…).
앱에서는 GNB 정보 버튼과 상태 표시줄의 "오픈소스 고지"에서 열립니다.