fix: [fire-shutter] SVG 미리보기 미표시 수정 (wrapper div 크기 명시, displaySvg 헬퍼 통합)

This commit is contained in:
김보곤
2026-03-08 20:23:48 +09:00
parent 4058d7735d
commit fed8729ff3

View File

@@ -507,6 +507,21 @@ function readSb() {
S.sb.motorSide = $('sbMotorSide').value;
}
// ============================
// SVG DISPLAY HELPER
// ============================
function displaySvg(svg) {
const c = $('svgContainer');
c.innerHTML = '';
const div = document.createElement('div');
div.style.cssText = 'width:100%;height:100%;display:flex;align-items:center;justify-content:center;';
div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
div.style.transformOrigin = 'center center';
div.innerHTML = svg;
c.appendChild(div);
$('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
}
// ============================
// RENDER DISPATCHER
// ============================
@@ -569,7 +584,7 @@ function renderSettingsPreview() {
<!-- Type label -->
<text x="${ox + sw/2}" y="${oy + boxH + (sh - boxH)/2 + 4}" fill="${S.productType === 'steel' ? '#94a3b8' : '#c084fc'}" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard" opacity="0.4">${S.productType === 'steel' ? '강판 슬랫' : '스크린 원단'}</text>
</svg>`;
$('svgContainer').innerHTML = svg;
displaySvg(svg);
}
// ============================
@@ -672,14 +687,7 @@ function renderGrCross() {
<text x="${ox + w/2}" y="${oy + d + 45}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL BODY (C-CHANNEL) — ${S.productType === 'steel' ? '강판형' : '스크린형'}</text>
</svg>`;
const c = $('svgContainer');
c.innerHTML = '';
const div = document.createElement('div');
div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
div.style.transformOrigin = 'center center';
div.innerHTML = svg;
c.appendChild(div);
$('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
displaySvg(svg);
}
function renderGrFront() {
@@ -718,13 +726,7 @@ function renderGrFront() {
<text x="${ox + rw/2}" y="${oy + rh + 50}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL — FRONT VIEW</text>
</svg>`;
const c = $('svgContainer');
c.innerHTML = '';
const div = document.createElement('div');
div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
div.innerHTML = svg;
c.appendChild(div);
$('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
displaySvg(svg);
}
// ============================
@@ -810,13 +812,7 @@ function renderSbFront() {
<text x="${ox + sw/2}" y="${oy - 10}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">HEAD BOX / CASE — t=${b.thickness}mm</text>
</svg>`;
const c = $('svgContainer');
c.innerHTML = '';
const div = document.createElement('div');
div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
div.innerHTML = svg;
c.appendChild(div);
$('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
displaySvg(svg);
}
function renderSbSide() {
@@ -863,13 +859,7 @@ function renderSbSide() {
<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>
</svg>`;
const c = $('svgContainer');
c.innerHTML = '';
const div = document.createElement('div');
div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
div.innerHTML = svg;
c.appendChild(div);
$('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
displaySvg(svg);
}
// ============================