Function distributeSelected

app.js:7054–7105

(axis)

alignVCenterBtn.addEventListener("click", () => alignSelected("vcenter"));

function distributeSelected(axis) {
  const ids = selectedIds && selectedIds.size ? Array.from(selectedIds) : [];
  const els = ids.map((id) => elements.find((e) => e.id === id)).filter(Boolean);
  if (els.length < 3) return;

  if (axis === "h") {
    const sorted = els.slice().sort((a, b) => a.x - b.x);
    const minX = sorted[0].x;
    const maxX = sorted[sorted.length - 1].x + sorted[sorted.length - 1].w;
    const totalW = sorted.reduce((s, e) => s + e.w, 0);
    const gap = (maxX - minX - totalW) / (sorted.length - 1);
    let cursor = minX;
    sorted.forEach((el, idx) => {
      if (idx === 0) {
        cursor = el.x + el.w + gap;
        return;
      }
      if (idx === sorted.length - 1) return; // keep last anchored
      el.x = Math.round(cursor);
      cursor = el.x + el.w + gap;
    });
  } else {
    const sorted = els.slice().sort((a, b) => a.y - b.y);
    const minY = sorted[0].y;
    const maxY = sorted[sorted.length - 1].y + sorted[sorted.length - 1].h;
    const totalH = sorted.reduce((s, e) => s + e.h, 0);
    const gap = (maxY - minY - totalH) / (sorted.length - 1);
    let cursor = minY;
    sorted.forEach((el, idx) => {
      if (idx === 0) {
        cursor = el.y + el.h + gap;
        return;
      }
      if (idx === sorted.length - 1) return; // keep last anchored
      el.y = Math.round(cursor);
      cursor = el.y + el.h + gap;
    });
  }

  if (snapToGrid && gridSize > 0) {
    els.forEach((el) => {
      el.x = Math.round(el.x / gridSize) * gridSize;
      el.y = Math.round(el.y / gridSize) * gridSize;
    });
  }

  updatePropsInputs(false);
  renderElements();
  renderLayers();
  updateCode();
  pushHistory();
}

if (distributeHBtn) distributeHBtn.addEventListener("click", () => distributeSelected("h"));
if (distributeVBtn) distributeVBtn.addEventListener("click", () => distributeSelected("v"));