Function renderLayers

app.js:4790–4889

()

}

function renderLayers() {
  if (!layersList) return;
  layersList.innerHTML = "";
  // Top of list = front. Our elements array draws in order, so reverse for display.
  const list = elements.slice().reverse();
  list.forEach((el) => {
    const row = document.createElement("div");
    row.className = "layer-row" + (selectedIds && selectedIds.has(el.id) ? " selected" : "");
    row.draggable = true;
    row.dataset.id = el.id;

    const name = document.createElement("div");
    name.className = "layer-name";
    name.textContent = getLayerLabel(el);

    const meta = document.createElement("div");
    meta.className = "layer-meta";
    meta.textContent = `${Math.round(el.x)},${Math.round(el.y)} ${Math.round(el.w)}×${Math.round(el.h)}`;

    const actions = document.createElement("div");
    actions.className = "layer-actions";

    const btnHide = document.createElement("button");
    btnHide.type = "button";
    btnHide.className = "layer-action-btn" + (el.hidden ? " active" : "");
    btnHide.title = el.hidden ? "Show layer" : "Hide layer";
    btnHide.textContent = "H";
    btnHide.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      el.hidden = !el.hidden;
      // If hidden, also remove from selection
      if (el.hidden && selectedIds && selectedIds.has(el.id)) {
        selectedIds.delete(el.id);
        if (selectedId === el.id) selectedId = selectedIds.size ? Array.from(selectedIds)[selectedIds.size - 1] : null;
      }
      updatePropsInputs(false);
      renderElements();
      renderLayers();
      updateCode();
      pushHistory();
    });

    const btnLock = document.createElement("button");
    btnLock.type = "button";
    btnLock.className = "layer-action-btn" + (el.locked ? " active" : "");
    btnLock.title = el.locked ? "Unlock layer" : "Lock layer";
    btnLock.textContent = "L";
    btnLock.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      el.locked = !el.locked;
      renderLayers();
      pushHistory();
    });

    actions.appendChild(btnHide);
    actions.appendChild(btnLock);