feat(ui): options panel with an IndexedDB-backed lineweight display scale
Set the default lineweight scale to 11 px/mm: the value the user matched against AutoCAD on the actual screen. The 20 px/mm derived from their screenshot was too heavy in practice - the capture and the monitor do not share a DPI - so the constant is now only a starting point. Move the lineweight controls off the toolbar into an Options panel: display toggle, scale slider plus number box, a readout of what the drawing's own weights come out to, grid toggle, zoom speed, and a reset. Settings persist in IndexedDB (hmw-viewer/options) rather than localStorage, so values keep their type and the store has room to grow per-drawing later; every call degrades quietly if storage is blocked. Scale changes still apply to the live materials - each fat batch now remembers its weight in mm - so dragging the slider retunes a 37MB drawing instantly. Verified headless: 0.35mm renders 3-4px at scale 11 and 8-9px at 25, matching the readout, and the value survives a reload via IndexedDB. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
minsung
File diff suppressed because one or more lines are too long
+64
-21
@@ -66,20 +66,25 @@
|
||||
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);
|
||||
/* 옵션 패널 — 값은 IndexedDB(hmw-viewer/options)에 저장된다 */
|
||||
#optBody { padding: 12px 14px; overflow: auto; font-size: 12px; color: var(--ink); }
|
||||
.opt-sec { margin-bottom: 16px; }
|
||||
.opt-sec > h4 {
|
||||
margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
|
||||
text-transform: uppercase; 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;
|
||||
.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.opt-row > label { flex: 1; color: var(--ink); }
|
||||
.opt-row input[type=range] { flex: 1; min-width: 90px; accent-color: var(--accent); }
|
||||
.opt-row input[type=number] {
|
||||
width: 58px; background: #0d1117; color: var(--ink);
|
||||
border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px;
|
||||
font: 12px var(--mono); text-align: right;
|
||||
}
|
||||
#lwScaleBox .unit { color: var(--muted); }
|
||||
#lwScaleOut { color: var(--accent); white-space: nowrap; }
|
||||
.opt-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
|
||||
.opt-unit { font: 11px var(--mono); color: var(--muted); }
|
||||
.opt-note { font: 11px var(--mono); color: var(--accent); line-height: 1.6; word-break: keep-all; }
|
||||
.opt-help { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 4px 0 0; }
|
||||
#status {
|
||||
margin-left: auto; font: 12px var(--mono); color: var(--muted);
|
||||
background: rgba(22,27,34,.85); border: 1px solid var(--line);
|
||||
@@ -183,6 +188,7 @@
|
||||
|
||||
#properties { right: 12px; }
|
||||
#layers { right: 344px; display: none; }
|
||||
#options { right: 676px; width: 340px; height: auto; max-height: 70vh; display: none; }
|
||||
|
||||
#propBody { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
|
||||
#layerBody { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
|
||||
@@ -212,7 +218,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-CycdONYE.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-VgpJrp_J.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
@@ -228,15 +234,7 @@
|
||||
<div id="spaces" title="Model Space / Paper Space (Layout)"></div>
|
||||
<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="optionsBtn" type="button" title="표시 옵션 (선가중치 · 그리드 · 줌)">옵션</button>
|
||||
<button id="layersBtn" type="button">Layers</button>
|
||||
<button id="propsBtn" type="button">Props (속성)</button>
|
||||
<div id="status">ready</div>
|
||||
@@ -272,6 +270,51 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 옵션 (Options) 패널 — 설정은 IndexedDB 에 저장 -->
|
||||
<div id="options" class="cad-panel">
|
||||
<div class="hdr">
|
||||
<h3><span>⚙️</span> 옵션 (Options)</h3>
|
||||
<div class="hdr-actions">
|
||||
<button id="optReset" type="button" title="기본값으로">↺ 기본값</button>
|
||||
<button id="collapseOptBtn" class="hdr-btn collapse-btn" type="button" title="접기">▾</button>
|
||||
<button id="closeOptBtn" class="hdr-btn" type="button" title="닫기">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="optBody">
|
||||
<div class="opt-sec">
|
||||
<h4>선가중치 (Lineweight)</h4>
|
||||
<div class="opt-row">
|
||||
<label for="optLwOn">표시 (LWDISPLAY)</label>
|
||||
<input id="optLwOn" type="checkbox" />
|
||||
</div>
|
||||
<div class="opt-row">
|
||||
<label for="optLwScale">표시 배율</label>
|
||||
<input id="optLwScale" type="range" min="2" max="60" step="0.5" value="11" />
|
||||
<input id="optLwScaleNum" type="number" min="1" max="80" step="0.5" value="11" />
|
||||
<span class="opt-unit">px/mm</span>
|
||||
</div>
|
||||
<div id="optLwOut" class="opt-note">—</div>
|
||||
<p class="opt-help">
|
||||
AutoCAD "선가중치 설정 → 표시 배율"과 같다. 모델 공간에서 선가중치는 줌과
|
||||
무관한 화면 픽셀로 그려지므로, 화면 DPI에 맞춰 이 값을 조정한다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="opt-sec">
|
||||
<h4>화면 (Display)</h4>
|
||||
<div class="opt-row">
|
||||
<label for="optGrid">그리드 표시</label>
|
||||
<input id="optGrid" type="checkbox" />
|
||||
</div>
|
||||
<div class="opt-row">
|
||||
<label for="optZoomSpeed">줌 속도</label>
|
||||
<input id="optZoomSpeed" type="range" min="0.2" max="3" step="0.1" value="1" />
|
||||
<input id="optZoomSpeedNum" type="number" min="0.1" max="5" step="0.1" value="1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 속성 (Properties) 패널 -->
|
||||
<div id="properties" class="cad-panel">
|
||||
<div class="hdr">
|
||||
|
||||
Reference in New Issue
Block a user