diff --git a/src/busbar-ui.js b/src/busbar-ui.js index fc8f69b..edbb27c 100644 --- a/src/busbar-ui.js +++ b/src/busbar-ui.js @@ -123,7 +123,7 @@ export function initBusbarUI({ onDownloadSingle, onDownloadAll, onFaceFilterChan b.classList.toggle('active', b.dataset.filter === faceFilter); }); if (bottomFaceWrap) bottomFaceWrap.hidden = (faceFilter === 'top'); - if (onFaceFilterChange) onFaceFilterChange(); + if (onFaceFilterChange) onFaceFilterChange(faceFilter); renderBusbarList(); }); }); diff --git a/src/main.js b/src/main.js index 0003256..a3c23ab 100644 --- a/src/main.js +++ b/src/main.js @@ -18,14 +18,14 @@ function scaleCanvasById(id) { const canvas = document.getElementById(id); if (!canvas) return; const dpr = window.devicePixelRatio || 1; + // Let CSS (width:100%, height:720px) control the display size. + // Only update the drawing buffer to match the current CSS-rendered size × DPR. const rect = canvas.getBoundingClientRect(); if (rect.width === 0 || rect.height === 0) return; canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); - canvas.style.width = rect.width + 'px'; - canvas.style.height = rect.height + 'px'; } function scaleCanvasForDPI() { @@ -642,11 +642,14 @@ async function initializeApp() { initBusbarUI({ onDownloadSingle: downloadSingleBusbar, onDownloadAll: downloadAllBusbarsZip, - onFaceFilterChange() { - requestAnimationFrame(() => { + onFaceFilterChange(filter) { + // Double rAF: first frame applies the hidden/visible DOM change, + // second frame reads the settled flex layout dimensions. + requestAnimationFrame(() => requestAnimationFrame(() => { scaleCanvasById('preview'); + if (filter === 'both') scaleCanvasById('preview-bottom'); redrawBusbarOverlay(); - }); + })); }, }); renderBusbarList();