DotPix Editor

React + Vite + Tailwind CSS v4 で構築された、Minecraftのアイテム作成に最適な高機能ドット絵エディタです。

主な機能

• マルチレイヤー対応: 最大30枚のレイヤー管理。表示/非表示、重なり順の変更が可能。
• 多彩な描画ツール: ペン、消しゴム、バケツ塗り、スポイトに加え、高解像度向けのブラシツールを搭載。
• 画像インポート: 写真を読み込み、Median Cut アルゴリズムで高品質なドット絵に自動変換。
• 相対色一括置換: 陰影や質感を保ったまま、特定の色系統を別の色へ一括で変更（HSLシフト）。
• 自動保存と履歴: 編集内容は localStorage に自動保存。Undo/Redo（Ctrl+Z/Y）に完全対応。
• データ軽量化: 保存データを数値化（シリアライズ）することで、ブラウザの容量制限内で大判サイズも保存可能。
• PNGエクスポート: 作成したアートを1px単位のPNG画像として書き出し。

技術スタック

• Frontend: React (TypeScript), Vite
• Styling: Tailwind CSS v4
• State Management: Custom Hooks (Composition Pattern)
• Testing: Playwright (E2E UI Testing)
• Icons: Lucide React

開発ガイド

前提条件

• Node.js: v18.0.0 以上 (v20以上を推奨)
• npm: v9.0.0 以上

環境構築ステップ

1. リポジトリのクローン

   git clone https://github.com/kosumo77/dot_paint_application.git
   cd dot_paint_application

2. 依存関係のインストール

   npm install

3. ブラウザのインストール (テスト用) Playwright を使用した UI テストを実行するために必要です。

   npx playwright install --with-deps

コマンド一覧

• 開発サーバーの起動

  npm run dev

  実行後、 http://localhost:5173 でエディタが開きます。

• ビルド

  npm run build

  dist ディレクトリに公開用のファイルが生成されます。

• プレビュー (ビルド済みファイルの確認)

  npm run preview

• UIテストの実行

  npx playwright test

• リンターの実行

  npm run lint

ドキュメント

プロジェクトの内部構造や各コンポーネントの詳細については、技術ドキュメントを参照してください。