AMR_Toolkit アーキテクチャ

1. ページ構造

1.1 ホームページ (/pages/home.tsx)

• アプリケーションのメインランディングページ
• 利用可能な機能の概要を表示
• PGMビューアーへのリンクを提供
• データベース項目の表示と管理

1.2 PGMビューアー (/pages/pgm-viewer.tsx)

• PGMファイルの表示・編集機能を提供
• レイヤー管理システムを実装
• 描画ツールとグリッド表示機能を搭載

2. コンポーネント構成

2.1 共通コンポーネント

• Sidebar: アプリケーション全体のナビゲーション
• DatabaseItems: データベース関連の操作インターフェース
• Toast通知: ユーザーへのフィードバック表示

2.2 PGMビューアーコンポーネント

• PGMViewer: PGMファイルの表示と編集
• LayerPanel: レイヤー管理インターフェース
• DrawingTools: 描画ツールの制御

3. データフロー

3.1 PGMファイル処理

1. ファイルの読み込み (ドラッグ&ドロップまたはファイル選択)
2. PGMデータのパース
3. レイヤーマネージャーでの表示処理
4. 編集内容のローカルストレージへの保存

3.2 描画システム

1. ユーザーの入力イベント処理
2. レイヤー管理システムでの描画処理
3. 変更履歴の管理
4. 状態の永続化

4. 主要機能

4.1 表示機能

• PGMファイルの表示
• ズーム・パン操作
• グリッド表示
• 座標情報の表示

4.2 編集機能

• ペンツール
• 消しゴムツール
• レイヤー管理
• Undo/Redo

4.3 データ管理

• PGMファイルの保存
• 描画データの永続化
• ビューア状態の保存

5. パフォーマンス最適化

5.1 描画最適化

• レイヤーシステムによる効率的な描画
• requestAnimationFrameの活用
• デバウンスとスロットリングの適用

5.2 メモリ管理

• 描画履歴の制限
• 不要なリソースの解放
• キャンバスのクリーンアップ

6. エラーハンドリング

6.1 エラー検出

• ファイル読み込みエラー
• 描画エラー
• データベース操作エラー

6.2 リカバリー機能

• 状態のリセット
• 自動再読み込み
• エラー通知