取り消しを押しても戻らない——編集履歴を安全に巻き戻すUndo/Redoの設計

export class History {
  private done: Command[] = [];   // 実行済み（undo で減る）
  private undone: Command[] = []; // 取り消し済み（redo で減る）
  private listeners = new Set<() => void>();
 
  constructor(private readonly maxDepth = 100) {}
 
  push(cmd: Command): void {
    cmd.do();
    // 合体できるなら直前の一手と束ねる（後述）
    const prev = this.done[this.done.length - 1];
    const merged = prev && cmd.coalesceWith?.(prev);
    if (merged) {
      this.done[this.done.length - 1] = merged;
    } else {
      this.done.push(cmd);
      if (this.done.length > this.maxDepth) this.done.shift(); // 上限で古い手を捨てる
    }
    this.undone = []; // 新しい操作は「やり直し」履歴を無効化する
    this.emit();
  }
 
  undo(): void {
    const cmd = this.done.pop();
    if (!cmd) return;
    cmd.undo();
    this.undone.push(cmd);
    this.emit();
  }
 
  redo(): void {
    const cmd = this.undone.pop();
    if (!cmd) return;
    cmd.do();
    this.done.push(cmd);
    this.emit();
  }
 
  canUndo(): boolean { return this.done.length > 0; }
  canRedo(): boolean { return this.undone.length > 0; }
  peekUndoLabel(): string | null {
    return this.done[this.done.length - 1]?.label ?? null;
  }
 
  subscribe(fn: () => void): () => void {
    this.listeners.add(fn);
    return () => this.listeners.delete(fn);
  }
  private emit(): void { this.listeners.forEach((fn) => fn()); }
}

export function coalesceByTime(
  prevAt: number,
  nowAt: number,
  windowMs = 400,
): boolean {
  return nowAt - prevAt <= windowMs; // 400ms 以内なら同じ一手とみなす
}

import { useSyncExternalStore } from "react";
 
export function useHistory(history: History) {
  const snapshot = useSyncExternalStore(
    (cb) => history.subscribe(cb),
    () => ({
      canUndo: history.canUndo(),
      canRedo: history.canRedo(),
      undoLabel: history.peekUndoLabel(),
    }),
  );
  return snapshot;
}

function ColorButton({ history, store }: Props) {
  const { canUndo, undoLabel } = useHistory(history);
  return (
    <>
      <Pressable onPress={() => history.push(changeColorCommand(store, next))}>
        <Text>色を変える</Text>
      </Pressable>
      <Pressable disabled={!canUndo} onPress={() => history.undo()}>
        <Text>{undoLabel ? `${undoLabel}を取り消す` : "取り消す"}</Text>
      </Pressable>
    </>
  );
}

// バックグラウンド遷移時に呼ぶ。直近 N 手ぶんの状態だけを残す。
export async function persistHistory(
  storage: AsyncStorageLike,
  key: string,
  states: EditorState[], // 各手の直後の状態（新しいものが末尾）
  keep = 20,
): Promise<void> {
  const recent = states.slice(-keep);
  await storage.setItem(key, JSON.stringify({ v: 1, states: recent }));
}
 
export async function restoreHistory(
  storage: AsyncStorageLike,
  key: string,
): Promise<EditorState[] | null> {
  const raw = await storage.getItem(key);
  if (!raw) return null;
  const parsed = JSON.parse(raw);
  if (parsed?.v !== 1) return null; // スキーマ版が違えば黙って捨てる
  return parsed.states as EditorState[];
}

export class History {
  // ...前掲に追加...
  commitBarrier(): void {
    // ここより前は取り消せない。履歴を空にして基準点を作る。
    this.done = [];
    this.undone = [];
    this.emit();
  }
}