# 画面設計書 6-Style Editor

## 概要

ImGuiのスタイル（色、サイズ、フォント等）をリアルタイムで編集できるエディタの設計書である。開発者はこのツールを使用してUIの外観をカスタマイズし、設定をコードとしてエクスポートできる。

### 本画面の処理概要

Style Editorは、ImGuiの全スタイルプロパティ（色、サイズ、角丸、パディング等）をGUIで編集し、その変更をリアルタイムでプレビューできるツールである。

**業務上の目的・背景**：ImGuiのデフォルトスタイルをカスタマイズしてアプリケーションの外観を調整する必要がある場合に使用する。編集した設定はC++コードとしてエクスポートでき、アプリケーションに組み込むことができる。また、Dark/Light/Classicの3種類のプリセットスタイルを切り替えることもできる。

**画面へのアクセス方法**：
1. Demo Windowのメニューバーから「Tools」→「Style Editor」を選択
2. Demo Window内のConfigurationセクションにある「Style Editor」チェックボックスを有効にする
3. コード内で直接`ImGui::ShowStyleEditor()`を呼び出す

**主要な操作・処理内容**：
1. Colorsセレクタでプリセットスタイル（Dark/Light/Classic）を選択する
2. Fontsセレクタでフォントを選択する
3. FontSizeBaseで基本フォントサイズを調整する
4. 各種サイズ（WindowPadding、FramePadding等）を調整する
5. 各種カラーを編集する
6. 「Export」ボタンで設定をC++コードとしてエクスポートする

**画面遷移**：
- 遷移元：Demo Window（Tools Menu、Configuration Section）、またはアプリケーションコードからの直接呼び出し
- 遷移先：なし

**権限による表示制御**：なし

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | ShowStyleEditor | 主機能 | スタイルエディタの表示 |
| 24 | Begin | 主機能 | ウィンドウの開始処理 |
| 25 | End | 主機能 | ウィンドウの終了処理 |
| 129 | ColorEdit3 | 主機能 | RGBカラーの編集 |
| 130 | ColorEdit4 | 主機能 | RGBAカラーの編集 |
| 112 | SliderFloat | 補助機能 | スタイル値の調整スライダー |
| 106 | DragFloat | 補助機能 | スタイル値のドラッグ入力 |
| 103 | BeginCombo | 補助機能 | スタイル選択コンボボックス |
| 104 | EndCombo | 補助機能 | コンボボックスの終了 |
| 21 | StyleColorsDark | 補助機能 | ダークスタイルの適用 |
| 22 | StyleColorsLight | 補助機能 | ライトスタイルの適用 |
| 23 | StyleColorsClassic | 補助機能 | クラシックスタイルの適用 |

## 画面種別

設定/編集画面

## URL/ルーティング

N/A（Immediate Mode GUIのため、URLやルーティングの概念は適用されない）

## 入出力項目

| 項目名 | 型 | 入力/出力 | 必須 | 説明 |
|--------|-----|----------|------|------|
| ref | ImGuiStyle* | 入力 | 任意 | 比較用の参照スタイル。NULLの場合は内部で保存したスタイルを使用 |

## 表示項目

| 項目名 | 説明 |
|--------|------|
| Colorsセレクタ | Dark/Light/Classicのプリセット選択 |
| Fontsセレクタ | フォント選択 |
| FontSizeBase | 基本フォントサイズ |
| FontScaleMain | メインフォントスケール |
| FontScaleDpi | DPIフォントスケール |
| FrameRounding | フレーム角丸 |
| WindowBorderチェックボックス | ウィンドウ境界線の有効/無効 |
| FrameBorderチェックボックス | フレーム境界線の有効/無効 |
| PopupBorderチェックボックス | ポップアップ境界線の有効/無効 |
| Save Refボタン | 現在のスタイルを参照として保存 |
| Revert Refボタン | 参照スタイルに戻す |
| Sizesタブ | サイズ関連設定（パディング、ボーダー、角丸等） |
| Colorsタブ | 全カラー設定の編集 |
| Fontsタブ | フォント詳細設定 |
| Renderingタブ | レンダリング関連設定 |

## イベント仕様

### 1-プリセットスタイル選択

Colorsセレクタでプリセットを選択すると、StyleColorsDark/Light/Classic関数が呼ばれ、全カラーが一括で変更される。同時に参照スタイルも更新される。

### 2-個別カラー編集

Colorsタブで各カラーをColorEdit4で編集すると、style.Colors[ImGuiCol_XXX]が即座に更新され、UI全体に反映される。

### 3-サイズ設定変更

Sizesタブで各サイズ値を変更すると、style.XXXが即座に更新され、UI全体に反映される。

### 4-Save Ref / Revert Ref

Save Refボタンで現在のスタイルが参照として保存される。Revert Refボタンで参照スタイルに戻る。

### 5-カラーエクスポート

ColorsタブのExportボタンをクリックすると、変更されたカラー設定がC++コード形式でクリップボードまたはTTYに出力される。

### 6-カラーフラッシュ

Colorsタブで各カラーの「?」ボタンをクリックすると、DebugFlashStyleColor関数が呼ばれ、該当カラーが使用されている箇所が視覚的にフラッシュ表示される。

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

N/A（Dear ImGuiはUIライブラリであり、データベース操作は行わない）

## メッセージ仕様

N/A

## 例外処理

| 状態 | 処理内容 |
|------|----------|
| RendererHasTexturesなし | フォントスケーリングがスムーズでない旨の警告を表示 |

## 備考

- ShowStyleEditorはウィンドウを作成せず、内容のみを描画する。ウィンドウ内で使用する場合は呼び出し側でBegin/Endを行う
- Demo Windowでは専用のウィンドウ内で呼び出される（行374-379）
- 参照スタイル（ref）を使用することで、変更点を視覚的に確認できる
- IMGUI_DISABLE_DEMO_WINDOWSマクロが定義されている場合、この関数は空実装になる

---

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

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

### 推奨読解順序

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

スタイル設定を保持する構造体を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | imgui.h | `imgui.h` | ImGuiStyle構造体でスタイル設定を定義 |

**読解のコツ**: ImGuiStyleには、Alpha、WindowPadding、FramePadding、Colors[]等の全スタイルプロパティが含まれる。

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

ShowStyleEditor関数がStyle Editorの描画処理のエントリーポイント。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | imgui_demo.cpp | `imgui_demo.cpp` | ShowStyleEditor()関数（行8350以降）がエントリーポイント |

**主要処理フロー**:
1. **行8355-8364**: 参照スタイルの初期化
2. **行8373-8404**: Generalセクション（スタイル選択、フォント、基本設定）
3. **行8407-8415**: Save Ref / Revert Refボタン
4. **行8418-8686**: タブバー（Sizes、Colors、Fonts、Rendering）

#### Step 3: スタイル選択関数を理解する

プリセットスタイルを適用する関数群。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | imgui_demo.cpp | `imgui_demo.cpp` | ShowStyleSelector()関数（行8311-8339） |
| 3-2 | imgui.cpp | `imgui.cpp` | StyleColorsDark/Light/Classic関数 |

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

```
ImGui::ShowStyleEditor(ImGuiStyle* ref)
    |
    +-- GetStyle() [現在のスタイル取得]
    |
    +-- [Generalセクション]
    |       +-- ShowStyleSelector("Colors##Selector")
    |       |       +-- StyleColorsDark() / StyleColorsLight() / StyleColorsClassic()
    |       +-- ShowFontSelector("Fonts##Selector")
    |       +-- DragFloat("FontSizeBase", ...)
    |       +-- SliderFloat("FrameRounding", ...)
    |       +-- Checkbox("WindowBorder", ...)
    |
    +-- Button("Save Ref")
    +-- Button("Revert Ref")
    |
    +-- BeginTabBar("##tabs")
    |       |
    |       +-- BeginTabItem("Sizes")
    |       |       +-- SliderFloat2("WindowPadding", ...)
    |       |       +-- SliderFloat2("FramePadding", ...)
    |       |       +-- [その他サイズ設定]
    |       |
    |       +-- BeginTabItem("Colors")
    |       |       +-- Button("Export")
    |       |       |       +-- LogToClipboard() / LogToTTY()
    |       |       +-- TextFilter.Draw()
    |       |       +-- [各カラーについてループ]
    |       |       |       +-- Button("?")
    |       |       |       |       +-- DebugFlashStyleColor()
    |       |       |       +-- ColorEdit4()
    |       |       |       +-- Button("Save") / Button("Revert")
    |       |
    |       +-- BeginTabItem("Fonts")
    |       +-- BeginTabItem("Rendering")
    |
    +-- EndTabBar()
```

### データフロー図

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

ref (ImGuiStyle*)  ──────▶ ShowStyleEditor() ─────────────▶  スタイル編集UI
                                  |
GetStyle() ────────────▶         |
(現在のスタイル)                  |
                                  |
ref_saved_style ◀───────▶       |  ◀──── Save Ref
(保存された参照)                  |
                                  |
                                  ▼
                           style.XXX更新
                           (リアルタイム反映)
                                  |
                                  ▼
                           クリップボード/TTY
                           (エクスポート時)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| imgui_demo.cpp | `imgui_demo.cpp` | ソース | ShowStyleEditor()の実装 |
| imgui.h | `imgui.h` | ヘッダー | ShowStyleEditor()のAPI宣言、ImGuiStyle構造体定義 |
| imgui.cpp | `imgui.cpp` | ソース | StyleColorsDark/Light/Classic関数の実装 |
