A function to distribute boxes evenly along either the x or y axis.

distributeEvenly.ts

function distributeEvenly<
	T extends { x: number; y: number; height: number; width: number }
>(axis: "x" | "y", boxes: T[]) {
	const mboxes = [...boxes]
	const extent = axis === "x" ? "width" : "height"
	mboxes.sort((a, b) => a[axis] - b[axis])

	// Overall boxes span
	const last = mboxes[mboxes.length - 1]
	const dist = last[axis] + last[extent] - mboxes[0][axis]

	// Space used by boxes
	let span = 0
	for (let box of mboxes) {
		span += box[extent]
	}

	// New distance between boxes
	let step = (dist - span) / (mboxes.length - 1)
	let pos = mboxes[0][axis]

	for (let box of mboxes) {
		if (Math.abs(pos - box[axis]) >= 1e-6) {
			box[axis] += pos - box[axis]
		}
		pos += box[extent]
		pos += step
	}
	
	return mboxes
}

// Adapted from https://gitlab.com/inkscape/inkscape/-/blob/master/src/actions/actions-object-align.cpp