feat: 배경 테마(다크/라이트)에 따른 ACI 7번 색상 동적 변경 적용

e2e_lin_test.cjs

@@ -30,12 +30,18 @@ async function runE2EDataTest() {
     }
   }
 
-  console.log('\n4. Verifying Complex Linetype Math in Viewer2D:');
-  const { getLinPattern } = require('./src/viewer2d/linParser.ts');
+  console.log('\n4. Verifying Complex Linetype Math in Viewer2D with DWG Embedded Data:');
+  const { getLinPattern, mergeDwgLinetypePattern } = await import('file:///d:/MYCLAUDE_PROJECT/dwg-dxf-viewer-sample/src/viewer2d/linParser.ts');
   const targetTypes = ['H-DICHL06', 'H-DICHL06R', 'H-DICHL02R', 'H-DICHL01R', 'H-DICHL05'];
   
+  const dwgLtMap = new Map();
+  for (const lt of lineTypes) {
+    if (lt.name && lt.pattern) dwgLtMap.set(lt.name.toUpperCase(), lt);
+  }
+
   for (const name of targetTypes) {
-    const pattern = getLinPattern(name);
+    const dwgLt = dwgLtMap.get(name);
+    const pattern = mergeDwgLinetypePattern(name, dwgLt?.pattern || [], dwgLt?.description);
     if (!pattern) {
       console.error(`   [FAIL] Pattern ${name} not found in registry!`);
       continue;

src/main.ts

@@ -203,14 +203,24 @@ document.getElementById('file')!.addEventListener('change', (ev) => {
   (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 === 'block' ? 'none' : 'block';
 });
 
+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();
@@ -219,7 +229,11 @@ window.addEventListener('drop', (e) => {
 });
 
 const model = new URLSearchParams(location.search).get('model');
-if (model) void run(model, () => loadUrl(model));
-else void run('C0060202-001-평면및종단면도.dwg', () => loadUrl(civilFile, 'C0060202-001-평면및종단면도.dwg'));
+if (model) {
+  void run(model, () => loadUrl(model));
+} else {
+  setStatus('ready');
+}
 
 window.addEventListener('resize', () => viewer.resize());
+

src/viewer2d/Viewer2D.d.ts

@@ -5,7 +5,7 @@ import type { CadSpace } from './cadSpaces';
 export class Viewer2D {
   constructor(container: HTMLElement);
   /** Render a DWG/DXF parseResult. `keepView` preserves pan/zoom on re-render. */
-  load(result: unknown, opts?: { keepView?: boolean; spaceHandle?: string | number | null }): void;
+  load(result: unknown, opts?: { keepView?: boolean; keepTheme?: boolean; spaceHandle?: string | number | null }): void;
   /** Zoom-extents to the loaded drawing. */
   fit(): void;
   /** Resync renderer/camera to the container size (call after un-hiding). */

src/viewer2d/Viewer2D.js

@@ -11,7 +11,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { aciToHex } from './aciColors.js';
 import { buildAllowedOwnerHexes, listCadSpaces } from './cadSpaces';
 import { SlugTextEngine, SlugTextBatch } from './slugText';
-import { getLinPattern } from './linParser';
+import { getLinPattern, mergeDwgLinetypePattern } from './linParser';
 
 const DEFAULT_COLOR = 0xc9d1d9;
 const ARC_SEGS      = 64;
@@ -50,6 +50,8 @@ export class Viewer2D {
 
     this._scene = new THREE.Scene();
     this._scene.background = new THREE.Color(0x0d1117);
+    this._isDark = true;
+    this._isLoading = false;
 
     const w = container.clientWidth  || 800;
     const h = container.clientHeight || 600;
@@ -243,43 +245,46 @@ export class Viewer2D {
   }
 
   load(result, opts = {}) {
-    this._lastResult = result;
-    this._selMeta = null;
-    this._clear();
-    this._entityMeta = [];
-    this._buildLayerMap(result?.tables?.layers);
-    this._buildStyleMap(result?.tables?.styles || result?.tables?.textStyles);
-    this._buildLinetypeMap(result);
-    // Sheet orientation: the active model-space viewport's VIEWTWIST rotates the
-    // view so a drawing stored tilted in WCS (rotated survey sheets — header UCS
-    // stays identity) displays with its title border upright. Applied as a
-    // camera-up rotation in _fit (geometry untouched → picking stays exact).
-    this._viewTwist = this._readViewTwist(result);
-    // Geometric pick index — the ACTUAL rendered geometry, not a bounds proxy.
-    // _pickSegs: flat [ax,ay,bx,by,…] of every line segment (lines, arcs, circles,
-    // polylines, block wires, dimension leaders/arrows) with a parallel owner-meta
-    // index. _pickFills: filled regions (hatch loops, SOLID quads, text quads)
-    // tested by even-odd point-in-polygon. _onClick raycasts these directly.
-    this._pickSegs = [];
-    this._pickSegMeta = [];
-    this._pickFills = [];
-    this._pickCurIdx = -1;
+    this._isLoading = true;
+    try {
+      this._lastResult = result;
+      this._selMeta = null;
+      this._clear();
+      this._entityMeta = [];
 
-    // Model vs Paper (Layout): never draw both spaces at once.
-    // - opts.spaceHandle provided (including null) → set active space
-    // - omitted → keep previous _activeSpaceHex if still valid for this file
-    if (Object.prototype.hasOwnProperty.call(opts, 'spaceHandle')) {
-      const sh = opts.spaceHandle;
-      if (sh == null || sh === '') this._activeSpaceHex = null;
-      else this._activeSpaceHex = typeof sh === 'number' ? sh.toString(16) : String(sh).toLowerCase();
-    }
+      // Model vs Paper (Layout): never draw both spaces at once.
+      // - opts.spaceHandle provided (including null) → set active space
+      // - omitted → keep previous _activeSpaceHex if still valid for this file
+      if (Object.prototype.hasOwnProperty.call(opts, 'spaceHandle')) {
+        const sh = opts.spaceHandle;
+        if (sh == null || sh === '') this._activeSpaceHex = null;
+        else this._activeSpaceHex = typeof sh === 'number' ? sh.toString(16) : String(sh).toLowerCase();
+      }
 
-    if (!opts.keepTheme) {
-      const spacesList = listCadSpaces(result);
-      const activeSp = spacesList.find((s) => s.handleHex === this._activeSpaceHex);
-      const isPaper = activeSp?.kind === 'paper';
-      this.setTheme(!isPaper);
-    }
+      if (!opts.keepTheme) {
+        const spacesList = listCadSpaces(result);
+        const activeSp = spacesList.find((s) => s.handleHex === this._activeSpaceHex);
+        const isPaper = activeSp?.kind === 'paper';
+        this.setTheme(!isPaper);
+      }
+
+      this._buildLayerMap(result?.tables?.layers);
+      this._buildStyleMap(result?.tables?.styles || result?.tables?.textStyles);
+      this._buildLinetypeMap(result);
+      // Sheet orientation: the active model-space viewport's VIEWTWIST rotates the
+      // view so a drawing stored tilted in WCS (rotated survey sheets — header UCS
+      // stays identity) displays with its title border upright. Applied as a
+      // camera-up rotation in _fit (geometry untouched → picking stays exact).
+      this._viewTwist = this._readViewTwist(result);
+      // Geometric pick index — the ACTUAL rendered geometry, not a bounds proxy.
+      // _pickSegs: flat [ax,ay,bx,by,…] of every line segment (lines, arcs, circles,
+      // polylines, block wires, dimension leaders/arrows) with a parallel owner-meta
+      // index. _pickFills: filled regions (hatch loops, SOLID quads, text quads)
+      // tested by even-odd point-in-polygon. _onClick raycasts these directly.
+      this._pickSegs = [];
+      this._pickSegMeta = [];
+      this._pickFills = [];
+      this._pickCurIdx = -1;
 
     const entities    = result?.entities || [];
     const lineVerts   = [];
@@ -1049,14 +1054,24 @@ export class Viewer2D {
     const fitBox = box.isEmpty() ? null : (this._trimmedContentBox(fitSamples, box) || box);
     this._contentBox = fitBox ? fitBox.clone() : null;
     if (!opts.keepView && fitBox && !fitBox.isEmpty()) this._fit(fitBox);
+    } finally {
+      this._isLoading = false;
+    }
   }
 
   // ── UI integration ─────────────────────────────────────────────────────────
 
   /** Swap canvas background for theme. dark=true → near-black (Model), false → white (Layout). */
   setTheme(dark) {
-    this._scene.background = new THREE.Color(dark ? 0x0a0b0d : 0xffffff);
+    const isDarkBool = !!dark;
+    const changed = (this._isDark !== isDarkBool);
+    this._isDark = isDarkBool;
+    this._scene.background = new THREE.Color(this._isDark ? 0x0a0b0d : 0xffffff);
     if (this._gridVisible) this._rebuildGrid();
+
+    if (changed && this._lastResult && !this._isLoading) {
+      this.load(this._lastResult, { keepView: true, keepTheme: true, spaceHandle: this._activeSpaceHex });
+    }
   }
 
   setGrid(visible) {
@@ -1547,7 +1562,7 @@ export class Viewer2D {
       const aci  = Math.abs(l.colorIndex ?? l.color ?? l.colorNumber ?? 7);
       return {
         name,
-        colorHex: '#' + ((aciToHex(aci) ?? DEFAULT_COLOR).toString(16).padStart(6, '0')),
+        colorHex: '#' + ((aciToHex(aci, this._isDark) ?? DEFAULT_COLOR).toString(16).padStart(6, '0')),
         count: counts.get(name) || 0,
         visible: !hidden.has(name),
       };
@@ -1566,7 +1581,8 @@ export class Viewer2D {
     }
     if (!ltName || ltName === 'Continuous' || ltName === 'ByLayer' || ltName === 'ByBlock') return null;
 
-    const pattern = getLinPattern(ltName);
+    const upperKey = ltName.toUpperCase().trim();
+    const pattern = this._dwgLinPatterns?.get(upperKey) || getLinPattern(ltName);
     if (!pattern) return null;
 
     const entScale = (e.entityHeader?.linetypeScale > 0 ? e.entityHeader.linetypeScale : 1);
@@ -1750,10 +1766,11 @@ export class Viewer2D {
       } else if (elem.type === 'text') {
         const pState = getPathState(s);
         if (elem.text && pendingTexts) {
-          // 1. Text Height: Exact text style DWG table height if fixed, else linetype elem.scale
+          // 1. Data-driven Text Height: (fixedH * elem.scale) or (elem.scale * 0.5) to match arrowhead scale ratio
           const sName = (elem.style || 'STANDARD').toUpperCase();
           const fixedH = this._textStyleHeightMap?.get(sName) || 0;
-          const baseH = fixedH > 0 ? fixedH : (elem.scale || 0.2);
+          const sFactor = (elem.scale > 0 ? elem.scale * 0.5 : 0.1);
+          const baseH = fixedH > 0 ? (fixedH * sFactor) : sFactor;
           const h = baseH * ltscale;
 
           let angle = pState.angle + ((elem.rotation || 0) * Math.PI) / 180;
@@ -1771,18 +1788,24 @@ export class Viewer2D {
           const sinT = Math.sin(angle);
 
           const xo = (elem.xOffset || 0) * ltscale;
-          // alignV: 2 (middle) centers text quad on origin; set yo=0 so middle lies directly on grey arrow line axis
+          // Vertical mid alignment: set yo = 0 so text middle lies directly on line center axis
           const yo = 0;
 
-          // 2. Exact Visual Midpoint: position text at exact midpoint of empty text gap (between arrowhead tip and next dash)
-          let gapMidOffset = 0;
+          // 2. Exact Visual Midpoint: determine primary text gap (previous vs next gap)
+          const prevElem = elements[(elemIdx - 2 + elements.length) % elements.length];
           const nextElem = elements[elemIdx % elements.length];
-          if (nextElem && nextElem.type === 'gap') {
-            const gapLen = Math.abs(nextElem.val || 0) * ltscale;
-            gapMidOffset = gapLen / 2;
-          }
 
-          const midState = gapMidOffset > 1e-6 ? getPathState(s + gapMidOffset) : pState;
+          const prevGapLen = (prevElem && prevElem.type === 'gap') ? Math.abs(prevElem.val || 0) * ltscale : 0;
+          const nextGapLen = (nextElem && nextElem.type === 'gap') ? Math.abs(nextElem.val || 0) * ltscale : 0;
+
+          let midState = pState;
+          if (prevGapLen > nextGapLen && prevGapLen > 1e-6) {
+            // Text belongs inside previous gap (e.g. H-DICHL06R reverse mode S2 = -0.99)
+            midState = getPathState(s - prevGapLen / 2);
+          } else if (nextGapLen > 1e-6) {
+            // Text belongs inside next gap (e.g. H-DICHL06 forward mode S3 = -0.74)
+            midState = getPathState(s + nextGapLen / 2);
+          }
 
           const tx = midState.x + (xo * cosT - yo * sinT);
           const ty = midState.y + (xo * sinT + yo * cosT);
@@ -1793,8 +1816,8 @@ export class Viewer2D {
             height: Math.max(h, 0.01),
             rotation: angle,
             color,
-            alignH: 1, // center horizontally in gap between arrowheads
-            alignV: 2, // center vertically on line axis
+            alignH: 1, // center horizontally in gap
+            alignV: 2, // center vertically on line axis (vertical mid)
           });
         }
       }
@@ -1906,7 +1929,7 @@ export class Viewer2D {
       const handle = l.handle?.value ?? l.handle;
       const name   = l.name ?? l.layerName;
       const aci    = Math.abs(l.colorIndex ?? l.color ?? l.colorNumber ?? 7);
-      const hex    = aciToHex(aci) ?? DEFAULT_COLOR;
+      const hex    = aciToHex(aci, this._isDark) ?? DEFAULT_COLOR;
       if (handle != null) this._layerByHandle.set(String(handle), hex);
       if (name)           this._layerByName.set(name, hex);
       if (handle != null && name) this._layerNameByHandle.set(String(handle), name);
@@ -1929,11 +1952,21 @@ export class Viewer2D {
   // _resolveDash to turn an entity's linetype into a dash/gap size.
   _buildLinetypeMap(result) {
     this._ltPatterns = new Map();
+    this._dwgLinPatterns = new Map();
     this._layerLtByName = new Map();
     this._layerLtByHandle = new Map();
     this._globalLtscale = (result?.vars?.ltscale > 0 ? result.vars.ltscale : 1);
     for (const lt of (result?.tables?.lineTypes ?? [])) {
-      if (lt?.name) this._ltPatterns.set(lt.name, Array.isArray(lt.pattern) ? lt.pattern : []);
+      if (lt?.name) {
+        const patArr = Array.isArray(lt.pattern) ? lt.pattern : [];
+        this._ltPatterns.set(lt.name, patArr);
+        if (patArr.length > 0) {
+          const merged = mergeDwgLinetypePattern(lt.name, patArr, lt.description);
+          if (merged) {
+            this._dwgLinPatterns.set(lt.name.toUpperCase().trim(), merged);
+          }
+        }
+      }
     }
     for (const l of (result?.tables?.layers ?? [])) {
       const name = l.name ?? l.layerName;
@@ -1988,7 +2021,7 @@ export class Viewer2D {
     const aci = entity.entityHeader?.colorIndex
              ?? entity.color ?? entity.colorIndex ?? entity.colorNumber ?? 256;
     if (aci != null) {
-      const hex = aciToHex(aci);
+      const hex = aciToHex(aci, this._isDark);
       if (hex !== null) return hex;
     }
     const lh = entity.layerHandle?.value ?? entity.layerHandle;
@@ -2882,7 +2915,7 @@ export class Viewer2D {
     } else if (t.bgColorRgb && (t.bgColorRgb.r != null)) {
       bgColor = ((t.bgColorRgb.r & 255) << 16) | ((t.bgColorRgb.g & 255) << 8) | (t.bgColorRgb.b & 255);
     } else if (t.bgColorIndex != null) {
-      const hex = aciToHex(t.bgColorIndex);
+      const hex = aciToHex(t.bgColorIndex, this._isDark);
       if (hex != null) bgColor = hex;
     }
 

src/viewer2d/aciColors.js

@@ -47,8 +47,9 @@ const VARIANTS_SL = [
   [0.00, 0.30],  // 9: dark gray
 ];
 
-export function aciToHex(aci) {
+export function aciToHex(aci, isDark = true) {
   if (aci == null || aci === 0 || aci === 256) return null;
+  if (aci === 7) return isDark ? 0xFFFFFF : 0x000000;
   if (aci <= 9) return FIXED[aci] ?? null;
   if (aci >= 250 && aci <= 255) {
     const v = Math.round(40 + (aci - 250) * 43);

src/viewer2d/linParser.ts

@@ -299,3 +299,92 @@ export function getLinPattern(name: string): LinPattern | undefined {
 export function getAllRegisteredPatterns(): Map<string, LinPattern> {
   return globalRegistry;
 }
+
+export function mergeDwgLinetypePattern(
+  ltName: string,
+  dwgPattern: number[],
+  description?: string
+): LinPattern | undefined {
+  if (!ltName) return undefined;
+  const base = getLinPattern(ltName);
+  if (!dwgPattern || !dwgPattern.length) return base;
+
+  if (!base) {
+    const elements: LinElement[] = [];
+    let totalLength = 0;
+    for (const val of dwgPattern) {
+      if (val > 1e-6) {
+        elements.push({
+          type: 'dash',
+          val,
+          scale: 1,
+          rotation: 0,
+          isAbsoluteAngle: false,
+          isUprightAngle: false,
+          xOffset: 0,
+          yOffset: 0,
+        });
+        totalLength += val;
+      } else if (val < -1e-6) {
+        const absVal = Math.abs(val);
+        elements.push({
+          type: 'gap',
+          val: -absVal,
+          scale: 1,
+          rotation: 0,
+          isAbsoluteAngle: false,
+          isUprightAngle: false,
+          xOffset: 0,
+          yOffset: 0,
+        });
+        totalLength += absVal;
+      }
+    }
+    return {
+      name: ltName,
+      description: description || '',
+      elements,
+      patternLength: Math.max(totalLength, 0.1),
+    };
+  }
+
+  // Merge DWG numeric dash/gap values into base pattern elements
+  const newElements: LinElement[] = [];
+  let dwgValIdx = 0;
+  let totalLength = 0;
+
+  for (const elem of base.elements) {
+    if (elem.type === 'dash') {
+      const dwgVal =
+        dwgValIdx < dwgPattern.length && dwgPattern[dwgValIdx] > 0
+          ? dwgPattern[dwgValIdx]
+          : elem.val || 0.05;
+      if (dwgValIdx < dwgPattern.length && dwgPattern[dwgValIdx] > 0) {
+        dwgValIdx++;
+      }
+      newElements.push({ ...elem, val: dwgVal });
+      totalLength += dwgVal;
+    } else if (elem.type === 'gap') {
+      const dwgVal =
+        dwgValIdx < dwgPattern.length && dwgPattern[dwgValIdx] < 0
+          ? dwgPattern[dwgValIdx]
+          : elem.val;
+      if (dwgValIdx < dwgPattern.length && dwgPattern[dwgValIdx] < 0) {
+        dwgValIdx++;
+      }
+      const absVal = Math.abs(dwgVal || 0.1);
+      newElements.push({ ...elem, val: -absVal });
+      totalLength += absVal;
+    } else {
+      newElements.push({ ...elem });
+    }
+  }
+
+  return {
+    ...base,
+    description: description || base.description,
+    elements: newElements,
+    patternLength: Math.max(totalLength, 0.1),
+  };
+}
+