Function renderElements

app.js:3681–4323

()

}

function renderElements() {
  const scale = parseFloat(preview.dataset.scale || "1");
  preview.innerHTML = "";
  preview.style.position = "relative";

  const isOLED = driverMode === "u8g2";

  // Resolve asset references (assetId) into element preview/code fields.
  // This keeps old projects working while enabling the Assets Manager.
  const assetById = new Map((assets || []).filter(Boolean).map((a) => [a.id, a]));
  elements.forEach((el) => {
    if (!el || !el.assetId) return;
    const a = assetById.get(el.assetId);
    if (!a) return;
    if (el.type === "image") {
      if (a.dataUrl) el.previewUrl = a.dataUrl;
      if (a.rgb565) el.rgb565 = a.rgb565;
      if (a.width && a.height) {
        el.imageWidth = a.width;
        el.imageHeight = a.height;
      }
    } else if (el.type === "icon") {
      if (a.dataUrl) el.iconSrc = a.dataUrl;
      if (a.rgb565) el.rgb565 = a.rgb565;
      if (a.monoBitmap) el.monoBitmap = a.monoBitmap;
      if (a.width && a.height) {
        el.imageWidth = a.width;
        el.imageHeight = a.height;
      }
    }
  });

  // OLED mode: draw everything into a 1:1 canvas and scale it up pixelated.
  let oledCanvasOk = false;
  if (isOLED) {
    const canvas = document.createElement("canvas");
    canvas.id = "oledCanvas";
    canvas.width = dispWidth;
    canvas.height = dispHeight;
    canvas.style.position = "absolute";
    canvas.style.left = "0";
    canvas.style.top = "0";
    canvas.style.width = dispWidth * scale + "px";
    canvas.style.height = dispHeight * scale + "px";
    canvas.style.pointerEvents = "none";
    // Keep the OLED canvas above the background and below interaction overlays/icons
    canvas.style.zIndex = "4";
    canvas.style.imageRendering = "pixelated";
    canvas.style.imageRendering = "-moz-crisp-edges";
    canvas.style.imageRendering = "crisp-edges";
    preview.appendChild(canvas);

    const ctx = canvas.getContext("2d", { willReadFrequently: true });
    if (ctx) {
      try {
        ctx.imageSmoothingEnabled = false;
        ctx.clearRect(0, 0, dispWidth, dispHeight);