Reordering

/**
 * Putting the items of a row in another order: columns, tabs, anything laid end
 * to end and dragged, or moved a place at a time by a key.
 *
 * - An order is a list of keys. It need not be complete: what it does not name
 *   comes after what it does, as it came, so that an order remembered from
 *   before an item existed still places the rest. A key that names nothing is
 *   passed over.
 * - An item dragged along the row lands past a neighbour once the pointer is
 *   past the neighbour's middle — the same going either way, whatever the
 *   widths.
 * - A move that changes nothing returns the list it was given.
 */

/** The items in the order their keys are listed in; those not listed after, as they came. */
export function arrange<T>(
  items: readonly T[],
  order: readonly string[] | undefined,
  keyOf: (item: T) => string,
): readonly T[] {
  if (order === undefined || order.length === 0) return items;
  const place = new Map<string, number>();
  for (const key of order) if (!place.has(key)) place.set(key, place.size);
  const last = place.size;
  // The sort is stable: items sharing the last place keep the order they came in.
  const placed = items.map((item) => ({ item, at: place.get(keyOf(item)) ?? last }));
  let moved = false;
  for (let index = 1; index < placed.length; index += 1) {
    if (placed[index]!.at < placed[index - 1]!.at) moved = true;
  }
  if (!moved) return items;
  return placed.toSorted((a, b) => a.at - b.at).map(({ item }) => item);
}

/** The list with the item at `from` taken to the place `to`, held within the list. */
export function moveItem<T>(items: readonly T[], from: number, to: number): readonly T[] {
  const last = items.length - 1;
  if (!Number.isInteger(from) || from < 0 || from > last) return items;
  const place = Math.min(Math.max(Math.trunc(to), 0), last);
  if (place === from) return items;
  const next = items.slice();
  next.splice(place, 0, ...next.splice(from, 1));
  return next;
}

/**
 * The place an item dragged to `position` takes among items laid end to end.
 * `starts[i]` is where item `i` begins, and one past the last is where they all
 * end; `position` is measured as they are. The answer is the item's place in
 * the list as it will be: its own, while it has passed no neighbour's middle.
 */
export function landingPlace(starts: ArrayLike<number>, from: number, position: number): number {
  let place = 0;
  for (let index = 0; index + 1 < starts.length; index += 1) {
    if (index !== from && (starts[index]! + starts[index + 1]!) / 2 < position) place += 1;
  }
  return place;
}