feat: [fire-shutter] 셔터박스 측면도를 실제 절곡 구조로 개선
- 단순 사각형 → L자형 실제 판재 구조 (후면/상판/전면/하판 4개 판) - 절곡도 기준 플랜지 접합부 표시 (20mm, 50mm, 15mm, 13mm, 17mm) - 전면판 높이(240mm)와 후면판 높이(380mm) 차이 반영 - 가이드레일 진입부 표시 (레일70, 100mm 올라옴) - 슬랫 출구 개방 영역 표시 - 치수선: 깊이, 전체높이, 전면높이, 하판폭, 레일폭
This commit is contained in:
@@ -1218,26 +1218,73 @@ function renderSbFront() {
|
||||
|
||||
function renderSbSide() {
|
||||
const b = S.sb;
|
||||
const sc = Math.min(500 / b.depth, 600 / b.height);
|
||||
const sd = b.depth * sc, sh = b.height * sc;
|
||||
const p = PRODUCTS[S.productType];
|
||||
const D = b.depth, H = b.height;
|
||||
const fH = p.sb.frontH; // 전면 높이 (screen:240, steel:410)
|
||||
const sc = Math.min(480 / D, 520 / H);
|
||||
const pad = 80;
|
||||
const svgW = sd + pad * 2 + 100, svgH = sh + pad * 2 + 60;
|
||||
const ox = pad + 50, oy = pad;
|
||||
const shaftR = (b.shaftDia / 2) * sc;
|
||||
const shaftCx = ox + sd / 2;
|
||||
const shaftCy = oy + sh * 0.45;
|
||||
const rollR = shaftR + 20 * sc;
|
||||
const sD = D*sc, sH = H*sc, sfH = fH*sc;
|
||||
const svgW = sD + pad*2 + 150, svgH = sH + pad*2 + 100;
|
||||
const ox = pad + 65, oy = pad + 30;
|
||||
const vt = Math.max(5, (b.thickness||1.6)*sc*3); // 판 두께 (표시용 확대)
|
||||
const bpW = Math.min(fH, D-50)*sc; // 하판 폭 (≒ frontH, 절곡도 기준 240mm)
|
||||
const railW = (S.productType==='screen' ? 70 : 120)*sc;
|
||||
const railUp = 100*sc;
|
||||
const shaftR = (b.shaftDia/2)*sc;
|
||||
// 샤프트: 상판~하판 사이 공간 중앙에 배치
|
||||
const shaftCx = ox + sD*0.48;
|
||||
const shaftCy = oy + sfH*0.5;
|
||||
const rollR = shaftR + 20*sc;
|
||||
const pf='#4b5563', ps='#6b7280', ff='#374151';
|
||||
|
||||
// 절곡 치수 (절곡도 기준)
|
||||
const f20=20*sc, f50=50*sc, f55=55*sc, f15=15*sc, f13=13*sc, f17=17*sc;
|
||||
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" style="max-width:100%;max-height:100%;">
|
||||
<text x="${svgW/2}" y="25" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 측면 단면도 (Side Cross-Section)</text>
|
||||
<!-- Case outer -->
|
||||
<rect x="${ox}" y="${oy}" width="${sd}" height="${sh}" fill="#374151" opacity="0.3" stroke="#94a3b8" stroke-width="2.5" rx="4"/>
|
||||
<!-- Shaft -->
|
||||
<text x="${svgW/2}" y="22" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 측면 단면도 (Side Cross-Section)</text>
|
||||
|
||||
<!-- L자형 내부 공간 (연한 배경) -->
|
||||
<path d="M${ox+vt},${oy+vt} L${ox+sD-vt},${oy+vt} L${ox+sD-vt},${oy+sfH-vt} L${ox+sD-bpW+vt},${oy+sfH-vt} L${ox+sD-bpW+vt},${oy+sH} L${ox+vt},${oy+sH} Z" fill="rgba(55,65,81,0.12)"/>
|
||||
|
||||
<!-- ━━━ 4개 주요 판재 ━━━ -->
|
||||
<!-- 후면판 (벽측, 전체높이 ${H}mm) -->
|
||||
<rect x="${ox}" y="${oy}" width="${vt}" height="${sH}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
|
||||
<!-- 상판 (전체깊이 ${D}mm) -->
|
||||
<rect x="${ox}" y="${oy}" width="${sD}" height="${vt}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
|
||||
<!-- 전면판 (개구부, ${fH}mm) -->
|
||||
<rect x="${ox+sD-vt}" y="${oy}" width="${vt}" height="${sfH}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
|
||||
<!-- 하판 (${Math.round(bpW/sc)}mm) -->
|
||||
<rect x="${ox+sD-bpW}" y="${oy+sfH-vt}" width="${bpW}" height="${vt}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
|
||||
|
||||
<!-- ━━━ 절곡 플랜지 (접합부) ━━━ -->
|
||||
<!-- 후면 상부: 20mm 내향 플랜지 (상판 연결) -->
|
||||
<rect x="${ox+vt}" y="${oy+vt}" width="${f20}" height="${vt*0.6}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
|
||||
<!-- 후면 상부: 55mm+15mm 립 (고정 브라켓) -->
|
||||
<rect x="${ox+vt}" y="${oy+vt+f55}" width="${f15}" height="${vt*0.6}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
|
||||
<!-- 전면 상부: 50mm 내향 플랜지 (상판 연결) -->
|
||||
<rect x="${ox+sD-vt-f50}" y="${oy+vt}" width="${f50}" height="${vt*0.6}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
|
||||
<!-- 전면 상부: 15mm+20mm 이중 접합 -->
|
||||
<rect x="${ox+sD-vt-f50}" y="${oy+vt+f15}" width="${f20}" height="${vt*0.5}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1" opacity="0.7"/>
|
||||
<!-- 후면 하부: 50mm 선반 (레일 지지) -->
|
||||
<rect x="${ox+vt}" y="${oy+sH-vt}" width="${f50}" height="${vt}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
|
||||
<!-- 하판 좌측: 13mm 절곡 플랜지 -->
|
||||
<rect x="${ox+sD-bpW-f13}" y="${oy+sfH-vt}" width="${f13}" height="${vt}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
|
||||
<!-- 하판 하부: 17mm 탭 (좌/우) -->
|
||||
<rect x="${ox+sD-bpW}" y="${oy+sfH}" width="${f17}" height="${vt*0.5}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
|
||||
<rect x="${ox+sD-f17}" y="${oy+sfH}" width="${f17}" height="${vt*0.5}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
|
||||
<!-- 전면 하부: 17mm+13mm 접합부 -->
|
||||
<rect x="${ox+sD-vt-f17}" y="${oy+sfH-f13}" width="${f17}" height="${f13}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1" opacity="0.6"/>
|
||||
|
||||
<!-- ━━━ 가이드레일 진입부 (하단 좌측) ━━━ -->
|
||||
<rect x="${ox}" y="${oy+sH-railUp}" width="${railW}" height="${railUp}" fill="rgba(100,116,139,0.15)" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4 2" rx="2"/>
|
||||
<text x="${ox+railW/2}" y="${oy+sH-railUp/2}" fill="#64748b" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">레일 ${Math.round(railW/sc)}</text>
|
||||
<text x="${ox+railW/2}" y="${oy+sH-railUp/2+12}" fill="#64748b" font-size="7" text-anchor="middle" font-family="Pretendard" opacity="0.7">↑ 100mm 진입</text>
|
||||
|
||||
<!-- ━━━ 내부 구성품 ━━━ -->
|
||||
${b.showShaft ? `
|
||||
<circle cx="${shaftCx}" cy="${shaftCy}" r="${shaftR}" fill="#475569" stroke="#64748b" stroke-width="2"/>
|
||||
<circle cx="${shaftCx}" cy="${shaftCy}" r="4" fill="#94a3b8"/>
|
||||
` : ''}
|
||||
<!-- Slat roll -->
|
||||
${b.showSlatRoll ? `
|
||||
<circle cx="${shaftCx}" cy="${shaftCy}" r="${rollR}" fill="none" stroke="#f59e0b" stroke-width="3" opacity="0.5" stroke-dasharray="6 3"/>
|
||||
${Array.from({length:5},(_,i) => {
|
||||
@@ -1245,19 +1292,47 @@ function renderSbSide() {
|
||||
return r < rollR ? `<circle cx="${shaftCx}" cy="${shaftCy}" r="${r}" fill="none" stroke="#f59e0b" stroke-width="0.5" opacity="0.3"/>` : '';
|
||||
}).join('')}
|
||||
` : ''}
|
||||
<!-- Motor (side view = circle) -->
|
||||
${b.showMotor ? `
|
||||
<circle cx="${shaftCx}" cy="${shaftCy}" r="${shaftR * 0.6}" fill="#2563eb" opacity="0.5" stroke="#3b82f6" stroke-width="1.5"/>
|
||||
<text x="${shaftCx}" y="${shaftCy + 3}" fill="white" font-size="8" font-weight="900" text-anchor="middle" font-family="Pretendard">M</text>
|
||||
<circle cx="${shaftCx}" cy="${shaftCy}" r="${shaftR*0.6}" fill="#2563eb" opacity="0.5" stroke="#3b82f6" stroke-width="1.5"/>
|
||||
<text x="${shaftCx}" y="${shaftCy+3}" fill="white" font-size="8" font-weight="900" text-anchor="middle" font-family="Pretendard">M</text>
|
||||
` : ''}
|
||||
<!-- Slat exit -->
|
||||
<rect x="${ox + sd * 0.2}" y="${oy + sh - 5}" width="${sd * 0.6}" height="5" fill="#f59e0b" opacity="0.6" rx="1"/>
|
||||
<!-- Slat curtain going down -->
|
||||
<line x1="${ox + sd * 0.5}" y1="${oy + sh}" x2="${ox + sd * 0.5}" y2="${oy + sh + 30}" stroke="#9ca3af" stroke-width="2" stroke-dasharray="4 2"/>
|
||||
<text x="${ox + sd * 0.5 + 10}" y="${oy + sh + 20}" fill="#94a3b8" font-size="9" font-weight="700" font-family="Pretendard">↓ 슬랫</text>
|
||||
<!-- Dimensions -->
|
||||
<text x="${ox + sd/2}" y="${oy + sh + 50}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">깊이 ${b.depth} mm</text>
|
||||
<text x="${ox + sd + 25}" y="${oy + sh/2 + 4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">${b.height} mm</text>
|
||||
|
||||
<!-- 슬랫 출구 (하판~후면 사이 개방부) -->
|
||||
<line x1="${ox+sD-bpW+vt}" y1="${oy+sfH}" x2="${ox+sD-bpW+vt}" y2="${oy+sH+15}" stroke="#9ca3af" stroke-width="2" stroke-dasharray="4 2"/>
|
||||
<text x="${ox+sD-bpW+vt+10}" y="${oy+sH+8}" fill="#94a3b8" font-size="9" font-weight="700" font-family="Pretendard">↓ 슬랫</text>
|
||||
<!-- 개방 영역 표시 -->
|
||||
<text x="${ox+(sD-bpW)*0.5+vt}" y="${oy+sfH+(sH-sfH)*0.5}" fill="rgba(148,163,184,0.3)" font-size="10" text-anchor="middle" font-family="Pretendard">개방</text>
|
||||
|
||||
<!-- ━━━ 치수선 ━━━ -->
|
||||
<!-- 깊이 (상단) -->
|
||||
<line x1="${ox}" y1="${oy-15}" x2="${ox+sD}" y2="${oy-15}" stroke="#3b82f6" stroke-width="1"/>
|
||||
<line x1="${ox}" y1="${oy-20}" x2="${ox}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>
|
||||
<line x1="${ox+sD}" y1="${oy-20}" x2="${ox+sD}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>
|
||||
<text x="${ox+sD/2}" y="${oy-22}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">깊이 ${D} mm</text>
|
||||
<!-- 전체 높이 (우측) -->
|
||||
<line x1="${ox+sD+15}" y1="${oy}" x2="${ox+sD+15}" y2="${oy+sH}" stroke="#3b82f6" stroke-width="1"/>
|
||||
<line x1="${ox+sD+10}" y1="${oy}" x2="${ox+sD+20}" y2="${oy}" stroke="#3b82f6" stroke-width="0.5"/>
|
||||
<line x1="${ox+sD+10}" y1="${oy+sH}" x2="${ox+sD+20}" y2="${oy+sH}" stroke="#3b82f6" stroke-width="0.5"/>
|
||||
<text x="${ox+sD+25}" y="${oy+sH/2+4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">${H} mm</text>
|
||||
<!-- 전면 높이 (우측 외곽) -->
|
||||
<line x1="${ox+sD+45}" y1="${oy}" x2="${ox+sD+45}" y2="${oy+sfH}" stroke="#22c55e" stroke-width="1"/>
|
||||
<line x1="${ox+sD+40}" y1="${oy}" x2="${ox+sD+50}" y2="${oy}" stroke="#22c55e" stroke-width="0.5"/>
|
||||
<line x1="${ox+sD+40}" y1="${oy+sfH}" x2="${ox+sD+50}" y2="${oy+sfH}" stroke="#22c55e" stroke-width="0.5"/>
|
||||
<text x="${ox+sD+55}" y="${oy+sfH/2+4}" fill="#22c55e" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">${fH} mm</text>
|
||||
<!-- 하판 폭 (하단) -->
|
||||
<line x1="${ox+sD-bpW}" y1="${oy+sfH+18}" x2="${ox+sD}" y2="${oy+sfH+18}" stroke="#64748b" stroke-width="0.8"/>
|
||||
<line x1="${ox+sD-bpW}" y1="${oy+sfH+13}" x2="${ox+sD-bpW}" y2="${oy+sfH+23}" stroke="#64748b" stroke-width="0.5"/>
|
||||
<line x1="${ox+sD}" y1="${oy+sfH+13}" x2="${ox+sD}" y2="${oy+sfH+23}" stroke="#64748b" stroke-width="0.5"/>
|
||||
<text x="${ox+sD-bpW/2}" y="${oy+sfH+32}" fill="#64748b" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">하판 ${Math.round(bpW/sc)} mm</text>
|
||||
<!-- 레일 폭 (하단 좌측) -->
|
||||
<line x1="${ox}" y1="${oy+sH+15}" x2="${ox+railW}" y2="${oy+sH+15}" stroke="#64748b" stroke-width="0.8"/>
|
||||
<line x1="${ox}" y1="${oy+sH+10}" x2="${ox}" y2="${oy+sH+20}" stroke="#64748b" stroke-width="0.5"/>
|
||||
<line x1="${ox+railW}" y1="${oy+sH+10}" x2="${ox+railW}" y2="${oy+sH+20}" stroke="#64748b" stroke-width="0.5"/>
|
||||
<text x="${ox+railW/2}" y="${oy+sH+28}" fill="#64748b" font-size="8" font-weight="700" text-anchor="middle" font-family="Pretendard">${Math.round(railW/sc)} mm</text>
|
||||
|
||||
<!-- 측면 라벨 -->
|
||||
<text x="${ox-12}" y="${oy+sH/2}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard" transform="rotate(-90,${ox-12},${oy+sH/2})">벽측 (후면)</text>
|
||||
<text x="${ox+sD+8}" y="${oy+sfH/2}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard" transform="rotate(90,${ox+sD+8},${oy+sfH/2})">개구부 (전면)</text>
|
||||
</svg>`;
|
||||
|
||||
displaySvg(svg);
|
||||
|
||||
Reference in New Issue
Block a user