Function updatePreviewSize

app.js:3263–3315

()

function updatePreviewSize() {
  const previewWrapper = document.querySelector(".preview-wrapper");
  if (!previewWrapper) return;
  
  
  const wrapperRect = previewWrapper.getBoundingClientRect();
  const availableWidth = wrapperRect.width - 32; 
  const availableHeight = wrapperRect.height - 32; 
  
  
  const baseScale = Math.min(
    availableWidth / dispWidth,
    availableHeight / dispHeight
  );
  // OLED should scale by an integer so everything snaps to the pixel grid.
  const scale = driverMode === "u8g2"
    ? Math.max(1, Math.floor(baseScale * clamp(zoomFactor || 1, 0.5, 3)))
    : baseScale;

  preview.style.width = dispWidth * scale + "px";
  preview.style.height = dispHeight * scale + "px";
  preview.style.backgroundColor = bgColor;

  // OLED mode: show individual pixels
  if (driverMode === "u8g2") {
    preview.classList.add('oled-display');
    // For OLED, use nearest neighbor scaling to show pixels clearly
    preview.style.imageRendering = 'pixelated';
    preview.style.imageRendering = '-moz-crisp-edges';
    preview.style.imageRendering = 'crisp-edges';

    // Set pixel grid size based on scale (each display pixel = 1 physical pixel at 1:1 scale)
    const pixelSize = Math.max(1, scale);
    preview.style.setProperty('--pixel-size', pixelSize + 'px');
  } else {
    preview.classList.remove('oled-display');
    preview.style.imageRendering = 'auto';
    preview.style.removeProperty('--pixel-size');
  }

  preview.dataset.scale = scale;
  const driverLabel = driverMode === "u8g2" ? "U8g2 OLED" : "TFT_eSPI";
  displayInfo.textContent = `${driverLabel} · ${dispWidth}x${dispHeight} px`;

  applyViewportTransform();
  // Rulers + guides need to follow rendered size
  setTimeout(() => {
    try { ensureRulers(); } catch (_) {}
  }, 0);
  setTimeout(() => {
    try { renderGuides(); } catch (_) {}
  }, 0);
}

function addAssetElementToCanvas(assetId) {
  const a = (assets || []).find((x) => x && x.id === assetId);