feat(viewer2d): make the lineweight display scale adjustable from the toolbar

The px-per-mm mapping was a hard-coded guess twice over, and the right
value depends on the monitor - AutoCAD has the same knob as the Adjust
Display Scale slider. Expose it: a slider plus a number box next to the
lineweight toggle, with a readout of what the drawing's own weights come
out to (0.35mm -> 7px, 0.50mm -> 10px at the 20 px/mm default). The
value persists in localStorage.

Retuning applies to the live materials instead of rebuilding the scene.
The hairline cut-off is a millimetre value, so changing the scale moves
every weight by the same factor without changing which bucket a segment
belongs to - each fat batch now remembers its weight in mm, and only
material.linewidth is rewritten. That keeps a drag on the slider instant
even on the 37 MB road drawing.

Measured headless on its 0.35mm gutter line: 2-3px at scale 8, 7px at
20, 14px at 40 - matching the readout in each case.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
minsung
2026-08-05 08:47:59 +09:00
co-authored by Claude Opus 5
parent cf1298749b
commit a924b1ec34
6 changed files with 6086 additions and 9 deletions
File diff suppressed because one or more lines are too long
+23 -1
View File
@@ -66,6 +66,20 @@
button.primary { background: #238636; border-color: #2ea043; }
button.wasm { border-color: var(--wasm); color: var(--wasm); }
label.btn input { display: none; }
/* 선가중치 표시 배율 조절 (슬라이더 + 직접 입력 + 환산 결과) */
#lwScaleBox {
display: flex; align-items: center; gap: 6px;
background: var(--panel); border: 1px solid var(--line);
border-radius: 8px; padding: 5px 10px; font: 12px var(--mono); color: var(--muted);
}
#lwScaleBox input[type=range] { width: 110px; accent-color: var(--accent); }
#lwScaleBox input[type=number] {
width: 52px; background: #0d1117; color: var(--ink);
border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px;
font: 12px var(--mono); text-align: right;
}
#lwScaleBox .unit { color: var(--muted); }
#lwScaleOut { color: var(--accent); white-space: nowrap; }
#status {
margin-left: auto; font: 12px var(--mono); color: var(--muted);
background: rgba(22,27,34,.85); border: 1px solid var(--line);
@@ -198,7 +212,7 @@
}
.layer-sub-btn:hover { color: var(--ink); border-color: var(--accent); background: rgba(63,185,80,.1); }
</style>
<script type="module" crossorigin src="/assets/index-BsOJ4upQ.js"></script>
<script type="module" crossorigin src="/assets/index-CycdONYE.js"></script>
</head>
<body>
<div id="app"></div>
@@ -215,6 +229,14 @@
<button id="fit" type="button">Fit (F)</button>
<button id="theme" type="button">Theme</button>
<button id="lwt" type="button" title="선가중치 표시 (AutoCAD LWDISPLAY)">선가중치</button>
<!-- 표시 배율: AutoCAD "선가중치 설정 → 표시 배율" 슬라이더에 해당.
리로드 없이 즉시 반영된다. -->
<div id="lwScaleBox" title="선가중치 표시 배율 (px / mm)">
<input id="lwScale" type="range" min="2" max="60" step="1" value="20" />
<input id="lwScaleNum" type="number" min="1" max="80" step="1" value="20" />
<span class="unit">px/mm</span>
<span id="lwScaleOut"></span>
</div>
<button id="layersBtn" type="button">Layers</button>
<button id="propsBtn" type="button">Props (속성)</button>
<div id="status">ready</div>