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';
import { getAllOptions, setOption } from './optionsStore';

// 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();
  syncOptions();
  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();
});

// ── 옵션 패널 ────────────────────────────────────────────────────
// 값은 IndexedDB(hmw-viewer/options)에 남는다. 선가중치 배율은 재파싱 없이
// 즉시 반영되므로 드래그하면서 화면을 보고 맞출 수 있다.
const optionsPanel = document.getElementById('options')!;
const optLwOn = document.getElementById('optLwOn') as HTMLInputElement;
const optLwScale = document.getElementById('optLwScale') as HTMLInputElement;
const optLwScaleNum = document.getElementById('optLwScaleNum') as HTMLInputElement;
const optLwOut = document.getElementById('optLwOut')!;
const optGrid = document.getElementById('optGrid') as HTMLInputElement;
const optZoomSpeed = document.getElementById('optZoomSpeed') as HTMLInputElement;
const optZoomSpeedNum = document.getElementById('optZoomSpeedNum') as HTMLInputElement;
const opt25D = document.getElementById('opt25D') as HTMLInputElement;
const optZRow = document.getElementById('optZRow')!;
const optZScale = document.getElementById('optZScale') as HTMLInputElement;
const optZScaleNum = document.getElementById('optZScaleNum') as HTMLInputElement;

makePanelDraggableAndCollapsible(optionsPanel, {
  collapseBtnEl: document.getElementById('collapseOptBtn')!,
});
document.getElementById('optionsBtn')!.addEventListener('click', () => {
  optionsPanel.style.display = optionsPanel.style.display === 'flex' ? 'none' : 'flex';
});
document.getElementById('closeOptBtn')!.addEventListener('click', () => {
  optionsPanel.style.display = 'none';
});

/** 컨트롤 값을 뷰어의 현재 상태로 되돌린다(도면을 새로 열었을 때도 호출). */
function syncOptions() {
  const s = viewer.getLineweightScale();
  optLwOn.checked = viewer.getLineweightEnabled();
  optLwScale.value = String(s);
  optLwScaleNum.value = String(s);
  const classes = viewer.getLineweightClasses();
  optLwOut.textContent = classes.length
    ? classes.map((mm) => `${mm.toFixed(2)}mm → ${Math.round(mm * s * 10) / 10}px`).join('   ')
    : `이 도면에는 굵은 선이 없다 (0.50mm 였다면 ${Math.round(0.5 * s * 10) / 10}px)`;
}

function applyLwScale(v: number, persist = true) {
  if (!Number.isFinite(v) || v <= 0) return;
  viewer.setLineweightScale(v);
  if (persist) void setOption('lineweightScale', v);
  syncOptions();
}
optLwScale.addEventListener('input', () => applyLwScale(parseFloat(optLwScale.value)));
optLwScaleNum.addEventListener('input', () => applyLwScale(parseFloat(optLwScaleNum.value)));

optLwOn.addEventListener('change', () => {
  viewer.setLineweightEnabled(optLwOn.checked);
  void setOption('lineweightOn', optLwOn.checked);
  syncOptions();
});

optGrid.addEventListener('change', () => {
  viewer.setGrid(optGrid.checked);
  void setOption('grid', optGrid.checked);
});

function applyZoomSpeed(v: number, persist = true) {
  if (!Number.isFinite(v) || v <= 0) return;
  viewer.setZoomSpeed(v);
  optZoomSpeed.value = String(v);
  optZoomSpeedNum.value = String(v);
  if (persist) void setOption('zoomSpeed', v);
}
optZoomSpeed.addEventListener('input', () => applyZoomSpeed(parseFloat(optZoomSpeed.value)));
optZoomSpeedNum.addEventListener('input', () => applyZoomSpeed(parseFloat(optZoomSpeedNum.value)));

// ── 2.5D 보기 토글 ───────────────────────────────────────────────
// Top 뷰를 풀고 남동 등각(SE Isometric)으로 기울인다. 도면 정점은 이미 CAD
// 표고(Z)를 갖고 있으므로 재파싱·재생성 없이 카메라만 돌리면 등고선 같은
// 높낮이가 그대로 드러난다. 다시 누르면 원래 Top 뷰(회전 잠금)로 돌아온다.
// 뷰 상태라 IndexedDB 에 저장하지 않는다 — Z 과장 배율만 저장한다.
const view25Btn = document.getElementById('view25Btn')!;

function apply25D(on: boolean) {
  viewer.set25D(on);
  view25Btn.classList.toggle('on', on);
  view25Btn.textContent = on ? '2.5D 보기 ✓' : '2.5D 보기';
  opt25D.checked = on;
  optZRow.classList.toggle('disabled', !on);
  setStatus(on ? '2.5D 보기 · 왼쪽 드래그=회전, 가운데·오른쪽 드래그=이동' : 'Top 뷰');
}
view25Btn.addEventListener('click', () => apply25D(!viewer.is25D()));
opt25D.addEventListener('change', () => apply25D(opt25D.checked));

function applyZScale(v: number, persist = true) {
  if (!Number.isFinite(v) || v <= 0) return;
  viewer.setZScale(v);
  optZScale.value = String(v);
  optZScaleNum.value = String(v);
  if (persist) void setOption('zScale', v);
}
optZScale.addEventListener('input', () => applyZScale(parseFloat(optZScale.value)));
optZScaleNum.addEventListener('input', () => applyZScale(parseFloat(optZScaleNum.value)));

document.getElementById('optReset')!.addEventListener('click', () => {
  viewer.setLineweightScale(null);   // 뷰어 기본 배율
  viewer.setLineweightEnabled(null); // 도면의 LWDISPLAY 를 다시 따름
  viewer.setGrid(false);
  applyZoomSpeed(1);
  applyZScale(1);
  apply25D(false);
  optGrid.checked = false;
  void setOption('lineweightScale', null);
  void setOption('lineweightOn', null);
  void setOption('grid', false);
  syncOptions();
});

// 저장된 옵션 복원 (IndexedDB 는 비동기라 첫 도면 로드와 경쟁하지 않도록 즉시 적용)
void getAllOptions().then((o) => {
  if (typeof o.lineweightScale === 'number') applyLwScale(o.lineweightScale, false);
  if (typeof o.lineweightOn === 'boolean') viewer.setLineweightEnabled(o.lineweightOn);
  if (o.grid === true) { viewer.setGrid(true); optGrid.checked = true; }
  if (typeof o.zoomSpeed === 'number') applyZoomSpeed(o.zoomSpeed, false);
  if (typeof o.zScale === 'number') applyZScale(o.zScale, false);
  syncOptions();
});
syncOptions();
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());