# 画面設計書 28-EditColorScheme（配色編集）

## 概要

本ドキュメントは、Windows Terminal の配色スキーム編集画面（EditColorScheme）の設計を記述する。個別の配色スキームの色編集・プレビュー・名前変更・削除・デフォルト設定・複製を行う画面である。

### 本画面の処理概要

**業務上の目的・背景**：ターミナルの配色テーマを詳細に編集するための画面である。16色のANSIカラー（通常8色 + 明るい8色）に加え、前景色・背景色・カーソル色・選択背景色を個別に編集できる。ColorPicker フライアウトを使用して直感的な色選択が可能。ビルトインスキームは編集不可で複製のみ可能。

**画面へのアクセス方法**：ColorSchemes（配色一覧）画面からスキームをクリックするか、Enterキーを押すことでアクセスする。

**主要な操作・処理内容**：
1. 配色プレビュー表示（背景色上に各色名をその色で表示）
2. 16色（通常色 + 明るい色）の個別編集（ColorPicker フライアウト）
3. 前景色・背景色・カーソル色・選択背景色の編集
4. スキーム名の変更（テキストボックス + 確定/キャンセルボタン）
5. デフォルトスキームとして設定
6. スキームの複製（ビルトインスキーム用）
7. スキームの削除（確認フライアウト付き）

**画面遷移**：
- 遷移元：ColorSchemes（配色一覧）
- 遷移先：ColorSchemes（配色一覧）- 戻る操作（BreadcrumbBar経由）

**権限による表示制御**：IsEditable プロパティにより編集可能なスキームとビルトインスキームで表示内容が異なる。ビルトインスキーム（IsEditable=false）の場合は色編集グリッド・名前変更・削除ボタンが非表示になり、代わりに複製ボタンが表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 108 | カラースキーム管理 | 主機能 | 個別配色スキームの色編集・プレビュー・保存 |
| 82 | 設定の読み込み・保存 | 主機能 | 編集した配色の保存 |
| 84 | 設定UI | 主機能 | 配色編集のUI表示 |

## 画面種別

編集（詳細）

## URL/ルーティング

UWP/WinUI アプリケーションのためURL/ルーティングは適用されない。MainPage の contentFrame 内に Frame.Navigate で表示される。ナビゲーションパラメータとして ColorSchemeViewModel が渡される。

## 入出力項目

| 項目名 | 入出力 | データ型 | 説明 |
|--------|--------|----------|------|
| Name | 入出力 | String | スキーム名 |
| IsEditable | 入力（表示制御） | Boolean | 編集可能か |
| IsDefaultScheme | 入力（表示制御） | Boolean | デフォルトスキームか |
| NonBrightColorTable | 入出力 | IVector<ColorTableEntry> | 通常色テーブル（8色） |
| BrightColorTable | 入出力 | IVector<ColorTableEntry> | 明るい色テーブル（8色） |
| ForegroundColor | 入出力 | ColorTableEntry | 前景色 |
| BackgroundColor | 入出力 | ColorTableEntry | 背景色 |
| CursorColor | 入出力 | ColorTableEntry | カーソル色 |
| SelectionBackgroundColor | 入出力 | ColorTableEntry | 選択背景色 |

## 表示項目

| 表示領域 | 項目名 | コントロール種別 | 説明 |
|----------|--------|-----------------|------|
| プレビュー | プレビューグリッド | Grid（2列 x 9行） | 背景色上に各色名をその色で表示するプレビュー |
| 複製 | ColorScheme_InboxSchemeDuplicate | SettingContainer + Button | ビルトインスキーム用複製ボタン（IsEditable=false時のみ表示） |
| 色編集 | ColorScheme_ColorsHeader | SettingContainer（Expander、StartExpanded=True） | 色編集グリッド（IsEditable=true時のみ表示） |
| 色編集 | 通常色（Black〜White） | ラベル TextBlock + ColorButton（8色） | 左列：ラベル、中央列：通常色ボタン |
| 色編集 | 明るい色（BrightBlack〜BrightWhite） | ColorButton（8色） | 右列：明るい色ボタン |
| 色編集 | Foreground/Background/CursorColor/SelectionBackground | ラベル TextBlock + ColorButton（4色） | 右側列に前景色・背景色・カーソル色・選択背景色 |
| デフォルト設定 | SetAsDefaultContainer | SettingContainer + Button | デフォルトスキームとして設定ボタン |
| 名前変更 | RenameContainer | SettingContainer（Expander） + TextBox + ボタン2つ | 名前変更UI（IsEditable時のみ、確定 E8FB / キャンセル E711） |
| 名前変更エラー | RenameErrorTip | TeachingTip | 名前重複時のエラー表示 |
| 削除 | DeleteButton | Button（DeleteButtonStyle） + 確認Flyout | スキーム削除（IsEditable時のみ） |

## イベント仕様

### 1-OnNavigatedTo

ColorSchemes からナビゲートされた時に発火する。ナビゲーションパラメータから ColorSchemeViewModel を取得し、NameBox にスキーム名を設定する。テレメトリログとして "NavigatedToPage" イベント（PageId="colorSchemes.editColorScheme", SchemeName=スキーム名）を記録する。

### 2-ColorPickerChanged

各色ボタンのフライアウト内 ColorPicker で色が変更された時に発火する。ColorPicker の Tag プロパティに基づいて、変更対象の色（通常色テーブル、明るい色テーブル、前景色、背景色、カーソル色、選択背景色）を特定し、ViewModel の対応する ColorTableEntry の Color プロパティを更新する。Tag が uint8_t の場合はカラーテーブルインデックス、hstring の場合はシステムカラー名として処理される。

### 3-RenameAccept_Click

名前変更確定ボタンのクリック時に発火する。NameBox のテキストで `_RenameCurrentScheme` を呼び出す。

### 4-RenameCancel_Click

名前変更キャンセルボタンのクリック時に発火する。RenameErrorTip を閉じ、NameBox を元のスキーム名にリセットする。

### 5-NameBox_PreviewKeyDown

名前変更テキストボックス上でのキー押下時に発火する。Enter キーで名前変更確定、Escape キーでキャンセルを行う。

### 6-_RenameCurrentScheme（内部メソッド）

ViewModel の RequestRename メソッドを呼び出す。成功した場合は RenameErrorTip を閉じて NameBox にフォーカスを設定。失敗した場合（名前重複等）は RenameErrorTip を表示し、NameBox のテキストを全選択してフォーカスを設定する。

### 7-DeleteConfirmation_Click

削除確認ボタンのクリック時に発火する（x:Bind で ViewModel.DeleteConfirmation_Click にバインド）。

### 8-SetAsDefault_Click

デフォルト設定ボタンのクリック時に発火する（x:Bind で ViewModel.SetAsDefault_Click にバインド）。

### 9-Duplicate_Click

複製ボタンのクリック時に発火する（x:Bind で ViewModel.Duplicate_Click にバインド）。ビルトインスキームのコピーを作成する。

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ColorPickerChanged | メモリ上のモデル | UPDATE | カラーテーブルエントリの色を更新 |
| RenameAccept_Click | メモリ上のモデル | UPDATE | スキーム名を更新 |
| DeleteConfirmation_Click | メモリ上のモデル | DELETE | スキームを削除 |
| Duplicate_Click | メモリ上のモデル | INSERT | スキームを複製 |
| SetAsDefault_Click | メモリ上のモデル | UPDATE | デフォルトスキームを変更 |

### テーブル別更新項目詳細

全操作はメモリ上のモデル変更のみ。MainPage の SaveButton 経由で settings.json に永続化される。

## メッセージ仕様

| 種別 | メッセージID | 表示条件 | 内容 |
|------|-------------|----------|------|
| エラー | ColorScheme_RenameErrorTip | 名前変更失敗時（名前重複等） | TeachingTip として名前変更エラーを表示 |
| 確認 | ColorScheme_DeleteConfirmationMessage | 削除ボタン押下時（Flyout内） | 削除確認メッセージ |

## 例外処理

- 名前変更時の重複チェック: RequestRename が false を返した場合、RenameErrorTip を表示
- ビルトインスキームの編集防止: IsEditable=false の場合、色編集・名前変更・削除 UI が非表示

## 備考

- ColorPicker は IsHexInputVisible=True, IsAlphaSliderVisible=True で設定されている。色スライダーは非表示、チャネルテキスト入力も非表示。
- 色ボタン（ColorSchemesColorButtonStyle）をクリックするとフライアウトで ColorPicker が開く。
- プレビュー領域は幅348px で、背景色上に各色名テキストを対応する色で表示する視覚的なプレビュー。
- ColorTableDivider 定数（値=8）を境界として、通常色テーブルと明るい色テーブルを区別する。

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ColorSchemeViewModel.idl | `src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl` | Name, IsEditable, NonBrightColorTable/BrightColorTable, ForegroundColor/BackgroundColor/CursorColor/SelectionBackgroundColor, RequestRename, DeleteConfirmation_Click 等を確認 |
| 1-2 | ColorSchemes.idl | `src/cascadia/TerminalSettingsEditor/ColorSchemes.idl` | ColorTableEntry（Name, Tag, Color, AccessibleName）の構造を確認 |

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | EditColorScheme.cpp | `src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp` | コンストラクタ（行26-37）でAutomationProperties設定。OnNavigatedTo（行39-53）でViewModel取得とスキーム名設定 |

**主要処理フロー**:
1. **行39-44**: OnNavigatedTo で ViewModel 取得、NameBox にスキーム名設定
2. **行56-96**: ColorPickerChanged で Tag ベースの色更新ルーティング
3. **行98-141**: 名前変更関連（Accept, Cancel, PreviewKeyDown, _RenameCurrentScheme）

#### Step 3: XAML レイアウトを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | EditColorScheme.xaml | `src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml` | プレビューグリッド、色編集グリッド（7列構成: ラベル + 通常色 + 明るい色 + 間隔 + ラベル + システムカラー + 空）、名前変更UI、削除ボタンの構造を理解する |

### プログラム呼び出し階層図

```
ColorSchemes -> MainPage._Navigate -> EditColorScheme
    |
    +-- EditColorScheme::OnNavigatedTo
    |       +-- ColorSchemeViewModel 取得
    |       +-- NameBox.Text(schemeName)
    |       +-- TraceLogging
    |
    +-- ColorPickerChanged (色変更)
    |       +-- Tag 解析 (uint8_t: カラーテーブル / hstring: システムカラー)
    |       +-- ViewModel.NonBrightColorTable/BrightColorTable/ForegroundColor 等更新
    |
    +-- RenameAccept_Click / NameBox_PreviewKeyDown(Enter)
    |       +-- _RenameCurrentScheme
    |               +-- ViewModel.RequestRename(newName)
    |               +-- 成功: RenameErrorTip.Close
    |               +-- 失敗: RenameErrorTip.Open, NameBox.SelectAll
    |
    +-- DeleteConfirmation_Click (x:Bind -> ViewModel)
    +-- SetAsDefault_Click (x:Bind -> ViewModel)
    +-- Duplicate_Click (x:Bind -> ViewModel)
```

### データフロー図

```
[入力]                          [処理]                          [出力]

ColorSchemeViewModel ---------> EditColorScheme Page     -----> プレビューグリッド
  +-- Name                      |                               +-- 色ボタン (ColorPicker)
  +-- ColorTable (16色)          +-- x:Bind TwoWay               +-- 名前テキストボックス
  +-- FG/BG/Cursor/Selection     |                               +-- デフォルト/複製/削除ボタン
                                  +-- ColorPickerChanged
                                  |       +-- Tag解析 -> 色更新
                                  |
                                  +-- RequestRename
                                          +-- 名前バリデーション -> 成功/失敗
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| EditColorScheme.xaml | `src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml` | テンプレート | UI レイアウト定義 |
| EditColorScheme.cpp | `src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp` | ソース | ページ実装（色変更、名前変更ロジック） |
| ColorSchemeViewModel.idl | `src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl` | IDL | ViewModel インターフェース定義 |
| ColorSchemeViewModel.cpp | `src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp` | ソース | ViewModel 実装 |
| ColorSchemeViewModel.h | `src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h` | ソース | ViewModel クラス定義 |
| CommonResources.xaml | `src/cascadia/TerminalSettingsEditor/CommonResources.xaml` | リソース | 共通スタイル定義 |
