Function alignSelected

app.js:7001–7045

(mode)

function alignSelected(mode) {
  const ids = selectedIds && selectedIds.size ? Array.from(selectedIds) : (selectedId ? [selectedId] : []);
  const els = ids.map((id) => elements.find((e) => e.id === id)).filter(Boolean);
  if (!els.length) return;

  if (els.length === 1) {
    const el = els[0];
    if (mode === "left") el.x = 0;
    else if (mode === "right") el.x = dispWidth - el.w;
    else if (mode === "hcenter") el.x = Math.round((dispWidth - el.w) / 2);
    else if (mode === "top") el.y = 0;
    else if (mode === "bottom") el.y = dispHeight - el.h;
    else if (mode === "vcenter") el.y = Math.round((dispHeight - el.h) / 2);
  } else {
    // Multi-select: align within current selection bounds.
    const minX = Math.min(...els.map((e) => e.x));
    const minY = Math.min(...els.map((e) => e.y));
    const maxX = Math.max(...els.map((e) => e.x + e.w));
    const maxY = Math.max(...els.map((e) => e.y + e.h));
    const midX = (minX + maxX) / 2;
    const midY = (minY + maxY) / 2;

    els.forEach((el) => {
      if (mode === "left") el.x = Math.round(minX);
      else if (mode === "right") el.x = Math.round(maxX - el.w);
      else if (mode === "hcenter") el.x = Math.round(midX - el.w / 2);
      else if (mode === "top") el.y = Math.round(minY);
      else if (mode === "bottom") el.y = Math.round(maxY - el.h);
      else if (mode === "vcenter") el.y = Math.round(midY - el.h / 2);
    });
  }

  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();
}

alignLeftBtn.addEventListener("click", () => alignSelected("left"));
alignRightBtn.addEventListener("click", () => alignSelected("right"));