tdc_engineer/wingwall_3D_drawing
14
0 Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 3단계 배근도 기반 3D 철근배근 UI/UX 및 날개벽별 철근 격리 개선

Browse Source
This commit is contained in:
Antigravity Agent committed 2026-10-22 11:24:27 +09:00
1 parent 573c0bca11
commit c1f67c621c
4 files changed
+388 -269
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+76 -77
View File
@@ -174,16 +174,74 @@
</div>
<div class="step2-content-simple" style="gap:10px;">
<!-- 3.1 적용 배근도/구조도 요약 정보 바 -->
<div id="step3-rebar-summary-card"></div>
<!-- 3.2 3D 구조물 선택 패널 (암거 및 도면상 실제 날개벽 2개소) -->
<div class="panel-section" style="flex:1; display:flex; flex-direction:column; min-height:0; margin-bottom:0; padding:10px;">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
<h3 style="margin:0; font-size:12px;">3D 구조물 선택</h3>
<span style="font-size:10px; color:var(--text-muted);">부재 클릭 시 해당 부재 및 철근 집중</span>
<!-- 3.1 3D 구조물 선택 패널 (암거 및 실제 날개벽 2개소) -->
<div class="panel-section" style="margin-bottom:0; padding:10px;">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
<h3 style="margin:0; font-size:13px; font-weight:700;">3D 구조물 선택</h3>
<span style="font-size:10px; color:var(--text-muted);">클릭 시 해당 부재 기본 구도 설정</span>
</div>
<div id="step3-structures-list" class="step2-structures-scroll" style="gap:7px;"></div>
</div>
<!-- 3.2 3D 철근 투시 및 표현 제어 (좌측 바로 이동 배치) -->
<div class="panel-section" id="step3-ctrl-card" style="margin-bottom:0; padding:10px;">
<div class="card-header" style="padding:0 0 8px 0; background:transparent; border-bottom:1px solid var(--border-color); cursor:pointer;" id="step3-ctrl-header">
<span style="font-weight:700; font-size:12px; display:flex; align-items:center; gap:5px; color:var(--text-primary);">
<span>⚙️</span> 3D 철근 투시 및 표현 제어
</span>
<span id="step3-ctrl-toggle-icon" style="font-size:11px; color:var(--text-muted);">▾</span>
</div>
<div class="card-body" id="step3-ctrl-body" style="padding:8px 0 0 0; display:flex; flex-direction:column; gap:9px;">
<!-- 투시 및 굵기 제어 -->
<div class="ctrl-subgroup">
<div class="ctrl-row">
<span class="ctrl-label">콘크리트 반투명(X-Ray)</span>
<input type="range" id="step3-slider-opacity" min="0.05" max="0.9" step="0.05" value="0.30" class="mini-slider">
<span id="step3-opacity-val" class="ctrl-val">30%</span>
</div>
<div class="ctrl-row">
<span class="ctrl-label">철근 굵기 강조</span>
<input type="range" id="step3-slider-scale" min="1.0" max="3.0" step="0.2" value="1.6" class="mini-slider">
<span id="step3-scale-val" class="ctrl-val">1.6x</span>
</div>
</div>
<!-- 직경별 필터 -->
<div class="ctrl-subgroup">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:2px;">직경별 표시 제어</div>
<div class="dia-pill-group" id="step3-dia-pill-group">
<button class="dia-pill active" data-dia="ALL">전체</button>
<button class="dia-pill active" data-dia="H19" style="--c:#f43f5e;"><span class="dot"></span>H19</button>
<button class="dia-pill active" data-dia="H16" style="--c:#38bdf8;"><span class="dot"></span>H16</button>
<button class="dia-pill active" data-dia="H13" style="--c:#10b981;"><span class="dot"></span>H13</button>
</div>
</div>
<!-- 부위별 필터 -->
<div class="ctrl-subgroup">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:2px;">부위별 표시 제어</div>
<div class="zone-pill-group" id="step3-zone-pill-group">
<button class="zone-pill active" data-zone="우각부">우각부</button>
<button class="zone-pill active" data-zone="벽체">벽체</button>
<button class="zone-pill active" data-zone="저판">저판</button>
<button class="zone-pill active" data-zone="헌치">헌치</button>
</div>
</div>
<!-- 재료표 및 내보내기 -->
<div class="ctrl-subgroup export-subgroup" style="margin-top:2px; border-top:1px solid var(--border-color); padding-top:8px;">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:5px;">철근 재료표 및 내보내기</div>
<button class="btn btn-primary btn-sm" id="btn-step3-open-bom" style="width:100%; justify-content:center; margin-bottom:6px; font-size:11.5px; padding:6px 10px;">
📊 전체 철근 재료표 (BOM) 보기
</button>
<div class="export-btn-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
<button class="btn btn-sm" onclick="window.app.exportModel('csv')" style="font-size:10.5px; padding:5px;">📥 재료표 CSV</button>
<button class="btn btn-sm" onclick="window.app.exportModel('obj')" style="font-size:10.5px; padding:5px;">📦 OBJ 솔리드</button>
<button class="btn btn-sm" onclick="window.app.exportModel('stl')" style="font-size:10.5px; padding:5px;">🖨 3D STL</button>
<button class="btn btn-sm" onclick="window.app.exportModel('dxf')" style="font-size:10.5px; padding:5px;">📐 3D DXF</button>
</div>
</div>
</div>
<div id="step3-structures-list" class="step2-structures-scroll" style="gap:6px;"></div>
</div>
<!-- 3.3 하단 2단계 이동 버튼 -->
@@ -211,82 +269,23 @@
<div class="view-pane" id="viewport-3d" style="display:none;">
<div class="viewport-overlay" id="overlay-3d-legend"></div>
<!-- Step 3 Right HUD: Rebar Controls & Floating Detail Card -->
<!-- Step 3 Right HUD: Rebar Detail Floating Card Only (철근 선택 시에만 표출) -->
<div class="step3-right-hud" id="step3-right-hud" style="display:none;">
<!-- 3.2 철근 기호 상세 제원 창 (철근 선택 시에만 표시되는 플로팅 창) -->
<div class="step3-rebar-detail-card" id="step3-rebar-detail-card" style="display:none;">
<div class="card-header">
<div style="display:flex; align-items:center; gap:6px;">
<span id="step3-detail-title" style="font-weight:700; font-size:12px;">철근 상세 제원</span>
<span id="step3-detail-badge" class="badge" style="font-size:10px;">H16</span>
<!-- 2.1 & 2.2 철근 기호 상세 제원 창 (철근 선택 시에만 1.5배 확대 텍스트로 표출) -->
<div class="step3-rebar-detail-card" id="step3-rebar-detail-card" style="display:none; width:340px;">
<div class="card-header" style="padding:10px 14px;">
<div style="display:flex; align-items:center; gap:8px;">
<span id="step3-detail-title" style="font-weight:800; font-size:18px;">철근 상세 제원</span>
<span id="step3-detail-badge" class="badge" style="font-size:13px;">H16</span>
</div>
<button class="btn-close-sm" id="btn-close-rebar-detail" title="닫기">✕</button>
<button class="btn-close-sm" id="btn-close-rebar-detail" title="닫기" style="font-size:14px; padding:3px 8px;">✕</button>
</div>
<div class="card-body" id="step3-rebar-detail-body">
<div class="card-body" id="step3-rebar-detail-body" style="padding:12px 14px;">
<!-- SVG shape, dimensions, count, weight rendered dynamically -->
</div>
</div>
<!-- 3.3 & 3.4 3D 철근 투시·표현 제어 및 재료표·내보내기 우측 패널 -->
<div class="step3-ctrl-card" id="step3-ctrl-card">
<div class="card-header" style="cursor:pointer;" id="step3-ctrl-header">
<span style="font-weight:700; font-size:11.5px; display:flex; align-items:center; gap:5px;">
<span>⚙️</span> 3D 철근 투시 및 표현 제어
</span>
<span id="step3-ctrl-toggle-icon" style="font-size:11px; color:var(--text-muted);">▾</span>
</div>
<div class="card-body" id="step3-ctrl-body">
<!-- 3.3 투시 및 표현 제어 -->
<div class="ctrl-subgroup">
<div class="ctrl-row">
<span class="ctrl-label">콘크리트 반투명(X-Ray)</span>
<input type="range" id="step3-slider-opacity" min="0.05" max="0.9" step="0.05" value="0.30" class="mini-slider">
<span id="step3-opacity-val" class="ctrl-val">30%</span>
</div>
<div class="ctrl-row">
<span class="ctrl-label">철근 굵기 강조</span>
<input type="range" id="step3-slider-scale" min="1.0" max="3.0" step="0.2" value="1.6" class="mini-slider">
<span id="step3-scale-val" class="ctrl-val">1.6x</span>
</div>
</div>
<div class="ctrl-subgroup">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:2px;">직경별 표시 제어</div>
<div class="dia-pill-group" id="step3-dia-pill-group">
<button class="dia-pill active" data-dia="ALL">전체</button>
<button class="dia-pill active" data-dia="H19" style="--c:#f43f5e;"><span class="dot"></span>H19</button>
<button class="dia-pill active" data-dia="H16" style="--c:#38bdf8;"><span class="dot"></span>H16</button>
<button class="dia-pill active" data-dia="H13" style="--c:#10b981;"><span class="dot"></span>H13</button>
</div>
</div>
<div class="ctrl-subgroup">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:2px;">부위별 표시 제어</div>
<div class="zone-pill-group" id="step3-zone-pill-group">
<button class="zone-pill active" data-zone="우각부">우각부</button>
<button class="zone-pill active" data-zone="벽체">벽체</button>
<button class="zone-pill active" data-zone="저판">저판</button>
<button class="zone-pill active" data-zone="헌치">헌치</button>
</div>
</div>
<!-- 3.4 철근 재료표 및 3D 배근 내보내기 -->
<div class="ctrl-subgroup export-subgroup" style="margin-top:4px; border-top:1px solid var(--border-color); padding-top:8px;">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:5px;">철근 재료표 및 내보내기</div>
<button class="btn btn-primary btn-sm" id="btn-step3-open-bom" style="width:100%; justify-content:center; margin-bottom:6px; font-size:11.5px; padding:6px 10px;">
📊 전체 철근 재료표 (BOM) 보기
</button>
<div class="export-btn-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
<button class="btn btn-sm" onclick="window.app.exportModel('csv')" style="font-size:10.5px; padding:5px;">📥 재료표 CSV</button>
<button class="btn btn-sm" onclick="window.app.exportModel('obj')" style="font-size:10.5px; padding:5px;">📦 OBJ 솔리드</button>
<button class="btn btn-sm" onclick="window.app.exportModel('stl')" style="font-size:10.5px; padding:5px;">🖨 3D STL</button>
<button class="btn btn-sm" onclick="window.app.exportModel('dxf')" style="font-size:10.5px; padding:5px;">📐 3D DXF</button>
</div>
</div>
</div>
</div>
</div>
<div class="viewport-controls-bottom">