dwg-dxf-viewer-sample/src/main.ts

/**
 * ═══════════════════════════════════════════════════════════════════
 *  DWG/DXF viewer sample — 모듈 조합 레시피
 *  (docs/modules-dwg-dxf.html 에 정리된 모듈을 그대로 조립)
 *
 *  이 프로젝트는 hmwebviewer 와 형제 폴더로 분리된 독립 샘플입니다.
 *  ═══════════════════════════════════════════════════════════════════
 *
 *  ┌─ 모듈 지도 카드 ──────────────┬─ 이 파일에서의 역할 ──────────┐
 *  │ acadrust-dwg (WASM)           │ DWG 바이트 → parseResult      │
 *  │ dxf-parser + dxfHatchHandler  │ DXF 텍스트 → parseResult      │
 *  │ dxfAdapter                    │ dxf-parser 출력을 공통 스키마로 │
 *  │ Viewer2D                      │ parseResult → three 씬 렌더   │
 *  │ three (peer)                  │ WebGLRenderer / OrbitControls │
 *  │ slugText + NanumGothic.ttf    │ TEXT/MTEXT 한글·라틴 표시     │
 *  │ ext2d                         │ .dwg / .dxf 확장자 판별       │
 *  └───────────────────────────────┴───────────────────────────────┘
 *
 *  흐름:  File/URL → (확장자 분기) → 파서 → CadParseResult → Viewer2D.load()
 */

// ── ① 모듈 지도의 각 카드 (src/viewer2d/*) ────────────────────────
import { Viewer2D } from './viewer2d/Viewer2D.js';
import { parseDwgBuffer, type CadParseResult } from './viewer2d/dwgParser';
import { parseDxfBuffer } from './viewer2d/parseDxf';
import { is2D, isDxf, isDwg } from './viewer2d/ext2d';
import { listCadSpaces, pickDefaultSpace } from './viewer2d/cadSpaces';
import { setDefaultFontUrl } from './viewer2d/slugText';
import { renderPropertyInspector } from './propertyInspector';
import { LayerPanelManager } from './layerPanel';
import { makePanelDraggableAndCollapsible } from './panelUtils';

// parseDxfBuffer 내부:
//   dxf-parser → HatchHandler → dxfAdapter
// parseDwgBuffer 내부:
//   acadrustParser → acadrust-dwg WASM

// ── ② 호스트 정적 자산 ──────────────────────────────────────────
setDefaultFontUrl('/fonts/NanumGothic-Regular.ttf');

// ── ③ Viewer2D 마운트 ───────────────────────────────────────────
const app = document.getElementById('app')!;
const statusEl = document.getElementById('status')!;
const spacesBar = document.getElementById('spaces')!;

// Layer panel elements
const layersPanel = document.getElementById('layers')!;
const layerList = document.getElementById('layerList')!;
const layerCount = document.getElementById('layerCount')!;
const layerSearch = document.getElementById('layerSearch') as HTMLInputElement;
const layerShowAll = document.getElementById('layerShowAll')!;
const layerHideAll = document.getElementById('layerHideAll')!;
const closeLayersBtn = document.getElementById('closeLayersBtn')!;
const collapseLayersBtn = document.getElementById('collapseLayersBtn')!;

// Properties panel elements
const propsPanel = document.getElementById('properties')!;
const propBody = document.getElementById('propBody')!;
const propsBtn = document.getElementById('propsBtn')!;
const zoomSelBtn = document.getElementById('zoomSelBtn')!;
const closePropsBtn = document.getElementById('closePropsBtn')!;
const collapsePropsBtn = document.getElementById('collapsePropsBtn')!;

function setStatus(msg: string, err = false) {
  statusEl.textContent = msg;
  statusEl.classList.toggle('err', err);
}

// Make floating UI panels draggable & collapsible
makePanelDraggableAndCollapsible(propsPanel, { collapseBtnEl: collapsePropsBtn });
makePanelDraggableAndCollapsible(layersPanel, { collapseBtnEl: collapseLayersBtn });

// Initial Property Inspector rendering (empty state)
renderPropertyInspector(propBody, null, { zoomBtnEl: zoomSelBtn });

const viewer = new Viewer2D(app);

// Layer Panel Manager
const layerManager = new LayerPanelManager(viewer, layerList, {
  countEl: layerCount,
  searchInputEl: layerSearch,
  showAllBtnEl: layerShowAll,
  hideAllBtnEl: layerHideAll,
});

viewer.onSelect((entity: unknown) => {
  if (!entity) {
    setStatus('deselected');
    renderPropertyInspector(propBody, null, { zoomBtnEl: zoomSelBtn });
    return;
  }
  // Show properties panel automatically on selection
  propsPanel.style.display = 'flex';
  renderPropertyInspector(propBody, entity, { zoomBtnEl: zoomSelBtn });

  const e = entity as { type?: string; layer?: string; handle?: { value?: string } };
  setStatus(`select ${e.type ?? '?'} · layer=${e.layer ?? '-'} · h=${e.handle?.value ?? '-'}`);
});

// CAD coordinates under the cursor (Model: UCS like AutoCAD; Layout: paper units)
const coordXEl = document.getElementById('coordX')!;
const coordYEl = document.getElementById('coordY')!;
function formatCadCoord(v: number): string {
  const a = Math.abs(v);
  if (a >= 1e6) return v.toFixed(1);
  if (a >= 1e3) return v.toFixed(2);
  if (a >= 1) return v.toFixed(3);
  return v.toFixed(4);
}
viewer.onPointerWorld((p) => {
  if (!p) {
    coordXEl.textContent = '—';
    coordYEl.textContent = '—';
    return;
  }
  coordXEl.textContent = formatCadCoord(p.x);
  coordYEl.textContent = formatCadCoord(p.y);
});

/** Model / Layout tab strip after each load or space switch. */
function fillSpaces() {
  const spaces = viewer.getSpaces();
  const active = viewer.getActiveSpace();
  spacesBar.innerHTML = '';
  if (spaces.length < 2 && !(spaces[0]?.entityCount)) {
    spacesBar.style.display = 'none';
    return;
  }
  spacesBar.style.display = 'flex';
  for (const s of spaces) {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = `${s.label}${s.entityCount ? ` (${s.entityCount})` : ''}`;
    btn.title = `${s.name} · handle ${s.handleHex}`;
    if (s.handleHex === active) btn.classList.add('active');
    btn.addEventListener('click', () => {
      if (s.handleHex === viewer.getActiveSpace()) return;
      viewer.setSpace(s.handleHex);
      fillSpaces();
      fillLayers();
      viewer.fit();
      setStatus(`space ${s.label} · ${s.entityCount} entities`);
    });
    spacesBar.append(btn);
  }
}

// ── ④ 파서 조합 ─────────────────────────────────────────────────
async function parseCad(buf: ArrayBuffer, name: string): Promise<CadParseResult> {
  if (isDxf(name)) return parseDxfBuffer(buf);
  if (isDwg(name)) return parseDwgBuffer(new Uint8Array(buf));
  const head = new TextDecoder('latin1').decode(
    new Uint8Array(buf, 0, Math.min(6, buf.byteLength)),
  );
  if (head.startsWith('AC')) return parseDwgBuffer(new Uint8Array(buf));
  return parseDxfBuffer(buf);
}

async function loadAndRender(buf: ArrayBuffer, name: string): Promise<CadParseResult> {
  const result = await parseCad(buf, name);
  const spaces = listCadSpaces(result);
  const def = pickDefaultSpace(spaces);
  viewer.load(result, { spaceHandle: def?.handleHex ?? null });
  viewer.resize();
  return result;
}

async function loadUrl(url: string, nameHint?: string) {
  const name = nameHint ?? url.split('?')[0]!.split('/').pop() ?? url;
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return loadAndRender(await res.arrayBuffer(), name);
}

async function loadFile(file: File) {
  if (!is2D(file.name)) throw new Error(`not .dwg/.dxf: ${file.name}`);
  return loadAndRender(await file.arrayBuffer(), file.name);
}

// ── ⑤ 호스트 UI 글루 ────────────────────────────────────────────
function fillLayers() {
  layerManager.update();
}

async function afterLoad(name: string, result: CadParseResult) {
  // Force cache invalidation for OLE image rendering
  const spaces = listCadSpaces(result);
  const active = spaces.find((s) => s.handleHex === viewer.getActiveSpace());
  const spaceNote = active ? ` · ${active.label}` : '';
  setStatus(`✓ ${name} · ${result.entities?.length ?? 0} entities${spaceNote}`);
  fillSpaces();
  fillLayers();
  viewer.fit();
}

async function run(label: string, job: () => Promise<CadParseResult>) {
  setStatus(`loading ${label}…`);
  try {
    await afterLoad(label, await job());
  } catch (err) {
    setStatus(`${label}: ${(err as Error).message}`, true);
    console.error(err);
  }
}

const civilFile = '/samples/civil.dwg';

document.getElementById('sample')!.addEventListener('click', () => {
  void run('BasicSample.dwg', () => loadUrl('/samples/BasicSample.dwg', 'BasicSample.dwg'));
});
document.getElementById('sampleCivil')?.addEventListener('click', () => {
  void run('C0060202-001-평면및종단면도.dwg', () => loadUrl(civilFile, 'C0060202-001-평면및종단면도.dwg'));
});
document.getElementById('sampleDxf')!.addEventListener('click', () => {
  void run('simple.dxf', () => loadUrl('/samples/simple.dxf', 'simple.dxf'));
});
document.getElementById('file')!.addEventListener('change', (ev) => {
  const file = (ev.target as HTMLInputElement).files?.[0];
  if (!file) return;
  void run(file.name, () => loadFile(file));
  (ev.target as HTMLInputElement).value = '';
});
let dark = true;
document.getElementById('fit')?.addEventListener('click', () => {
  viewer.fit();
});
document.getElementById('theme')!.addEventListener('click', () => {
  dark = !dark;
  viewer.setTheme(dark);
  fillLayers();
});
document.getElementById('layersBtn')!.addEventListener('click', () => {
  layersPanel.style.display = layersPanel.style.display === 'flex' ? 'none' : 'flex';
});
closeLayersBtn.addEventListener('click', () => {
  layersPanel.style.display = 'none';
});

propsBtn.addEventListener('click', () => {
  propsPanel.style.display = propsPanel.style.display === 'none' ? 'flex' : 'none';
});

zoomSelBtn.addEventListener('click', () => {
  viewer.zoomToSelection();
});

closePropsBtn.addEventListener('click', () => {
  propsPanel.style.display = 'none';
});

window.addEventListener('keydown', (e) => {
  if ((e.key === 'f' || e.key === 'F') && (e.target as HTMLElement)?.tagName !== 'INPUT') {
    viewer.fit();
  }
});

window.addEventListener('dragover', (e) => e.preventDefault());
window.addEventListener('drop', (e) => {
  e.preventDefault();
  const file = e.dataTransfer?.files?.[0];
  if (file) void run(file.name, () => loadFile(file));
});

const model = new URLSearchParams(location.search).get('model');
if (model) {
  void run(model, () => loadUrl(model));
} else {
  setStatus('ready');
}

window.addEventListener('resize', () => viewer.resize());