Reactで、マス目に色を塗るドット絵エディターを作る方法

import { cellsOnLine, floodFill, type Pixels, type Point } from './pixels';

export const SIZE = 16;

export type State = {
  pixels: Pixels;
  past: Pixels[]; // 元に戻すための履歴
  strokeStart: Pixels | null; // ドラッグを始めたときの絵
};

export type Action =
  | { type: 'begin' }
  | { type: 'paint'; from: Point; to: Point; color: string | null }
  | { type: 'end' }
  | { type: 'fill'; at: Point; color: string }
  | { type: 'undo' };

const inside = ({ x, y }: Point) => x >= 0 && y >= 0 && x < SIZE && y < SIZE;

export const initialState: State = {
  pixels: Array(SIZE * SIZE).fill(null),
  past: [],
  strokeStart: null,
};

export function editorReducer(state: State, action: Action): State {
  switch (action.type) {
    case 'begin':
      return { ...state, strokeStart: state.pixels };
    case 'paint': {
      let next = state.pixels;
      for (const p of cellsOnLine(action.from, action.to)) {
        const i = p.y * SIZE + p.x;
        if (!inside(p) || next[i] === action.color) continue;
        if (next === state.pixels) next = [...state.pixels];
        (next as (string | null)[])[i] = action.color;
      }
      return next === state.pixels ? state : { ...state, pixels: next };
    }
    case 'end': {
      const start = state.strokeStart;
      if (start === null) return state;
      // 1回のドラッグで何か変わったときだけ、始めたときの絵を履歴に積む
      const past = start === state.pixels ? state.past : [...state.past, start];
      return { ...state, past, strokeStart: null };
    }
    case 'fill': {
      if (!inside(action.at)) return state;
      const next = floodFill(state.pixels, SIZE, action.at, action.color);
      if (next === state.pixels) return state;
      return { ...state, pixels: next, past: [...state.past, state.pixels] };
    }
    case 'undo': {
      if (state.past.length === 0) return state;
      return { ...state, pixels: state.past[state.past.length - 1], past: state.past.slice(0, -1) };
    }
  }
}

import { useReducer, useRef, useState } from 'react';
import { editorReducer, initialState, SIZE } from './editorReducer';
import { download, exportPng } from './exportPng';
import type { Point } from './pixels';

type Tool = 'pen' | 'eraser' | 'fill';

const PALETTE = ['#1f2a30', '#ffffff', '#d85878', '#f2b632', '#3aa655', '#00c8e8', '#6a4bc4', '#8a5a3c'];
const TOOLS: { id: Tool; label: string }[] = [
  { id: 'pen', label: 'ペン' },
  { id: 'eraser', label: '消しゴム' },
  { id: 'fill', label: '塗りつぶし' },
];

export function PixelEditor() {
  const [state, dispatch] = useReducer(editorReducer, initialState);
  const [color, setColor] = useState(PALETTE[0]);
  const [tool, setTool] = useState<Tool>('pen');
  const last = useRef<Point | null>(null); // ドラッグ中、最後に塗ったマス

  // ポインターの位置から、何列目・何行目のマスかを求める
  function cellAt(e: React.PointerEvent<HTMLDivElement>): Point {
    const r = e.currentTarget.getBoundingClientRect();
    return {
      x: Math.floor(((e.clientX - r.left) / r.width) * SIZE),
      y: Math.floor(((e.clientY - r.top) / r.height) * SIZE),
    };
  }

  function onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
    if (e.button !== 0) return;
    const p = cellAt(e);
    if (tool === 'fill') {
      dispatch({ type: 'fill', at: p, color });
      return;
    }
    e.currentTarget.setPointerCapture(e.pointerId);
    last.current = p;
    dispatch({ type: 'begin' });
    dispatch({ type: 'paint', from: p, to: p, color: tool === 'eraser' ? null : color });
  }

  function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
    const from = last.current;
    if (from === null) return;
    const to = cellAt(e);
    if (to.x === from.x && to.y === from.y) return;
    dispatch({ type: 'paint', from, to, color: tool === 'eraser' ? null : color });
    last.current = to;
  }

  function endStroke() {
    if (last.current === null) return;
    last.current = null;
    dispatch({ type: 'end' });
  }

  return (
    <div className="pixel-editor">
      <div className="toolbar">
        {TOOLS.map((t) => (
          <button key={t.id} type="button" aria-pressed={tool === t.id} onClick={() => setTool(t.id)}>
            {t.label}
          </button>
        ))}
        <button type="button" onClick={() => dispatch({ type: 'undo' })} disabled={state.past.length === 0}>
          元に戻す
        </button>
        <button type="button" onClick={async () => download(await exportPng(state.pixels, SIZE, 16), 'pixel-art.png')}>
          PNGで保存
        </button>
      </div>
      <div className="palette">
        {PALETTE.map((c) => (
          <button
            key={c}
            type="button"
            aria-label={c}
            aria-pressed={color === c}
            style={{ background: c }}
            onClick={() => setColor(c)}
          />
        ))}
      </div>
      <div
        className="grid"
        style={{ gridTemplateColumns: `repeat(${SIZE}, 1fr)` }}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endStroke}
        onPointerCancel={endStroke}
      >
        {state.pixels.map((c, i) => (
          <div key={i} className="cell" style={{ background: c ?? undefined }} />
        ))}
      </div>
    </div>
  );
}

.pixel-editor .grid {
  display: grid;
  width: 320px;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  background: #fff;
  outline: 1px solid #9aa5ab;
}
.pixel-editor .cell { box-shadow: inset 0 0 0 0.5px #d5dde0; }

// a から b までの直線が通るマス（ブレゼンハムのアルゴリズム）
export function cellsOnLine(a: Point, b: Point): Point[] {
  const cells: Point[] = [];
  const dx = Math.abs(b.x - a.x);
  const dy = -Math.abs(b.y - a.y);
  const sx = a.x < b.x ? 1 : -1;
  const sy = a.y < b.y ? 1 : -1;
  let err = dx + dy;
  let { x, y } = a;
  while (true) {
    cells.push({ x, y });
    if (x === b.x && y === b.y) break;
    const e2 = 2 * err;
    if (e2 >= dy) { err += dy; x += sx; }
    if (e2 <= dx) { err += dx; y += sy; }
  }
  return cells;
}

cellsOnLine (1,1)→(6,3): (1,1) (2,1) (3,2) (4,2) (5,3) (6,3)
cellsOnLine (2,5)→(2,1): (2,5) (2,4) (2,3) (2,2) (2,1)

// start と同じ色でつながったマス（上下左右）を color で塗る
export function floodFill(pixels: Pixels, size: number, start: Point, color: string): Pixels {
  const target = pixels[start.y * size + start.x];
  if (target === color) return pixels;
  const next = [...pixels];
  const stack: Point[] = [start];
  while (stack.length > 0) {
    const { x, y } = stack.pop()!;
    if (x < 0 || y < 0 || x >= size || y >= size) continue;
    const i = y * size + x;
    if (next[i] !== target) continue;
    next[i] = color;
    stack.push({ x: x + 1, y }, { x: x - 1, y }, { x, y: y + 1 }, { x, y: y - 1 });
  }
  return next;
}

塗りつぶしの前: .#.. / .#.. / ##.. / ....
(0,0) を塗りつぶし: o#.. / o#.. / ##.. / ....
(3,0) を塗りつぶし: .#oo / .#oo / ##oo / oooo

3×3 の前: .#. / #.. / ...
3×3 の (2,2) を塗りつぶし: .#o / #oo / ooo

import type { Pixels } from './pixels';

// 1マスを scale px の正方形にして PNG にする。塗っていないマスは透明のまま
export function exportPng(pixels: Pixels, size: number, scale: number): Promise<Blob> {
  const canvas = document.createElement('canvas');
  canvas.width = size * scale;
  canvas.height = size * scale;
  const ctx = canvas.getContext('2d')!;
  pixels.forEach((color, i) => {
    if (color === null) return;
    ctx.fillStyle = color;
    ctx.fillRect((i % size) * scale, Math.floor(i / size) * scale, scale, scale);
  });
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('toBlob failed'))), 'image/png');
  });
}

export function download(blob: Blob, fileName: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
  setTimeout(() => URL.revokeObjectURL(url), 0);
}

保存したファイル名: pixel-art.png
PNG: 256×256、チャンネル 4
  左上（塗っていないマス） (0,0) の RGBA: 0,0,0,0
  枠の角 (3,3) の左上の画素 (48,48) の RGBA: 31,42,48,255
  枠の角 (3,3) の右下の画素 (63,63) の RGBA: 31,42,48,255
  内側 (7,7) の中ほど (120,120) の RGBA: 216,88,120,255