# 帳票設計書 8-スタイルエディタ

## 概要

本ドキュメントは、Dear ImGuiライブラリのスタイルエディタ（Style Editor）機能に関する帳票設計書である。ImGuiのスタイル設定（色、サイズ、角丸など）をGUI上で編集・保存・エクスポートするためのウィンドウについて記述する。

### 本帳票の処理概要

スタイルエディタ（ShowStyleEditor）は、ImGuiの外観を制御するImGuiStyleの全ての設定をGUI上でリアルタイムに編集できるツールウィンドウである。変更はリアルタイムでアプリケーションに反映され、設定はC++コードとしてエクスポート可能。

**業務上の目的・背景**：ImGuiアプリケーションの外観をカスタマイズする際、コードを変更してリビルドする従来の方法は非効率的である。スタイルエディタにより、ランタイムで視覚的にスタイルを調整し、満足のいく設定が得られたらC++コードとしてエクスポートできる。これにより、UIデザインの反復作業が大幅に効率化される。

**帳票の利用シーン**：開発者がアプリケーションの外観をカスタマイズしたい場合に、ShowStyleEditor関数を呼び出してウィンドウを表示する。スライダーやカラーピッカーで設定を調整し、「Export」ボタンでC++コードをクリップボードまたはTTYに出力する。デモウィンドウのConfiguration > Style, Fontsセクションからも呼び出し可能。

**主要な出力内容**：
1. General設定（フォントサイズ、フレーム角丸、ボーダー有無等）
2. Sizesタブ（各種パディング、ボーダーサイズ、角丸等の詳細設定）
3. Colorsタブ（全てのスタイルカラーの編集・エクスポート）
4. Renderingタブ（アンチエイリアス、カーブ精度等）

**帳票の出力タイミング**：
- リアルタイム：設定変更は即座にアプリケーションに反映
- エクスポート：「Export」ボタンクリック時にC++コードを出力

**帳票の利用者**：アプリケーション開発者、UIデザイナー

## 帳票種別

設定編集UI + コードエクスポート（クリップボード/TTY）

## 利用画面

| 画面No | 画面名 | URL/ルーティング | 出力操作 |
|--------|--------|-----------------|---------|
| - | Style Editor | - | ShowStyleEditor()関数呼び出し |
| - | デモウィンドウ | - | Configuration > Style, Fontsチェックボックス |
| - | デモウィンドウ | - | Tools > Style Editorメニュー |

## 出力形式

### 基本仕様

| 項目 | 内容 |
|-----|------|
| ファイル形式 | C++コード（テキスト） |
| 用紙サイズ | N/A |
| 向き | N/A |
| ファイル名 | N/A（クリップボード/TTY出力） |
| 出力方法 | クリップボードまたはTTY |
| 文字コード | UTF-8 |

### エクスポート設定

| 項目 | 内容 |
|-----|------|
| 出力先選択 | To Clipboard / To TTY |
| フィルタ | Only Modified Colors（変更分のみ出力） |
| フォーマット | ImVec4 colors[ImGuiCol_XXX] = ImVec4(...); |

## 帳票レイアウト

### レイアウト概要

タブ形式で複数のカテゴリに分かれた設定画面。

```
[General]
  - Colors Selector
  - Fonts Selector
  - FontSizeBase
  - FrameRounding
  - WindowBorder/FrameBorder/PopupBorder

[Save Ref] [Revert Ref]

[Details]
  [Sizes] [Colors] [Rendering] [Fonts]
```

### 出力項目（Colorsエクスポート時）

| No | 項目名 | 説明 | データ取得元 | 表示形式 |
|----|-------|------|-------------|---------|
| 1 | 変数宣言 | colors配列の取得 | - | ImVec4* colors = GetStyle().Colors; |
| 2 | カラー設定 | 各色の設定コード | style.Colors[i] | colors[ImGuiCol_XXX] = ImVec4(r, g, b, a); |

## 出力条件

### 抽出条件

| 条件名 | 説明 | 必須 |
|-------|------|-----|
| Export実行 | Exportボタンクリック | Yes |
| Only Modified Colors | ONの場合、変更された色のみ出力 | No |

### ソート順

| 優先度 | 項目 | 昇順/降順 |
|-------|------|---------|
| 1 | ImGuiCol列挙順 | 昇順 |

## データベース参照仕様

### 参照テーブル一覧

N/A（データベースは使用しない）

### 内部データ構造参照

| データ構造 | 用途 | アクセス方法 |
|-----------|------|-------------|
| ImGuiStyle | 現在のスタイル | GetStyle() |
| ImGuiStyle ref_saved_style | 比較用保存スタイル | static変数 |
| ImGuiIO | IO設定 | GetIO() |

## 計算仕様

### 計算項目一覧

| 項目名 | 計算式 | 端数処理 | 備考 |
|-------|-------|---------|------|
| なし | - | - | - |

## 処理フロー

### 表示フロー

```mermaid
flowchart TD
    A[ShowStyleEditor呼び出し] --> B[参照スタイル初期化]
    B --> C[Generalセクション表示]
    C --> D[Save Ref/Revert Refボタン]
    D --> E{タブ選択}
    E -->|Sizes| F[Sizesタブ表示]
    E -->|Colors| G[Colorsタブ表示]
    E -->|Rendering| H[Renderingタブ表示]
    E -->|Fonts| I[Fontsタブ表示]
    F --> J[終了]
    G --> J
    H --> J
    I --> J
```

### エクスポートフロー

```mermaid
flowchart TD
    A[Exportボタンクリック] --> B{出力先?}
    B -->|To Clipboard| C[LogToClipboard]
    B -->|To TTY| D[LogToTTY]
    C --> E[LogText: 変数宣言]
    D --> E
    E --> F{Only Modified Colors?}
    F -->|Yes| G[変更色のみループ]
    F -->|No| H[全色ループ]
    G --> I[LogText: カラー設定]
    H --> I
    I --> J[LogFinish]
```

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 表示メッセージ | 対処方法 |
|----------|---------|--------------|---------|
| なし | - | - | - |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定データ件数 | ImGuiCol_COUNT（約60色） |
| 目標出力時間 | 即時 |
| 更新頻度 | 毎フレーム（設定変更時即座に反映） |

## セキュリティ考慮事項

- エクスポートされるコードは純粋なスタイル設定のみであり、機密性は低い
- クリップボードへの出力時は、他アプリケーションからアクセス可能

## 備考

- RendererHasTexturesフラグがない場合、フォントスケーリングに関する警告が表示される
- Save Refで現在のスタイルを保存し、Revert Refで復元可能
- 各色には隣接する同系統の色との比較プレビューが表示される
- HEX形式での色入力にも対応

---

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

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

### 推奨読解順序

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

まず、スタイル設定で使用されるデータ構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | imgui.h | `imgui.h` | ImGuiStyle構造体を確認 |
| 1-2 | imgui.h | `imgui.h` | ImGuiCol列挙型（色定義）を確認 |
| 1-3 | imgui.h | `imgui.h` | GetStyle()、ShowStyleEditor()宣言を確認 |

**読解のコツ**: ImGuiStyleの各メンバとImGuiCol_XXXの対応を理解する。

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

処理の起点となる関数を特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | imgui_demo.cpp | `imgui_demo.cpp` | 8350-8420行目: ShowStyleEditor関数の冒頭 |

**主要処理フロー**:
1. **8355-8364行目**: 参照スタイルの初期化と取得
2. **8371行目**: PushItemWidthでウィジェット幅設定
3. **8374-8404行目**: Generalセクション（Colors/Fonts選択、基本設定）
4. **8406-8415行目**: Save Ref/Revert Refボタン
5. **8418行目以降**: BeginTabBarでタブ形式の詳細設定

#### Step 3: Colorsタブとエクスポート機能を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | imgui_demo.cpp | `imgui_demo.cpp` | 8521-8544行目: Colorsタブとエクスポート機能 |

**主要処理フロー**:
- **8525-8530行目**: Export実行部分（LogToClipboard/LogToTTY選択）
- **8531行目**: LogTextで変数宣言出力
- **8532-8539行目**: 色設定のループ出力
- **8540行目**: LogFinishで出力完了

#### Step 4: その他のタブを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | imgui_demo.cpp | `imgui_demo.cpp` | 8420-8519行目: Sizesタブ |
| 4-2 | imgui_demo.cpp | `imgui_demo.cpp` | Renderingタブ、Fontsタブ |

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

```
ShowStyleEditor(ref)
    │
    ├─ [初期化]
    │      ├─ ImGuiStyle& style = GetStyle()
    │      └─ static ImGuiStyle ref_saved_style
    │
    ├─ [Generalセクション]
    │      ├─ ShowStyleSelector("Colors##Selector")
    │      ├─ ShowFontSelector("Fonts##Selector")
    │      ├─ DragFloat("FontSizeBase", ...)
    │      ├─ SliderFloat("FrameRounding", ...)
    │      └─ Checkbox("WindowBorder", ...)
    │
    ├─ [Save Ref / Revert Ref]
    │      ├─ Button("Save Ref") → *ref = ref_saved_style = style
    │      └─ Button("Revert Ref") → style = *ref
    │
    ├─ BeginTabBar("##tabs")
    │      │
    │      ├─ BeginTabItem("Sizes")
    │      │      └─ [各種サイズスライダー]
    │      │
    │      ├─ BeginTabItem("Colors")
    │      │      ├─ Button("Export")
    │      │      │      ├─ LogToClipboard() / LogToTTY()
    │      │      │      ├─ LogText("ImVec4* colors = ...")
    │      │      │      ├─ [色ループ] LogText("colors[ImGuiCol_XXX]...")
    │      │      │      └─ LogFinish()
    │      │      └─ [カラーエディット群]
    │      │
    │      ├─ BeginTabItem("Rendering")
    │      │      └─ [アンチエイリアス設定等]
    │      │
    │      └─ BeginTabItem("Fonts")
    │             └─ [フォント表示・設定]
    │
    └─ EndTabBar()
```

### データフロー図

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

ユーザー操作 ────────────▶ スライダー/チェックボックス
                              │
                              ▼
                        ImGuiStyle変更 ──────────▶ [リアルタイム反映]
                              │
                              ▼
Exportボタン ────────────▶ LogToClipboard/LogToTTY
                              │
                              ▼
                        LogText(C++コード) ──────▶ クリップボード/TTY
                              │
                              ▼
                        LogFinish()
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| imgui.h | `imgui.h` | ヘッダー | ImGuiStyle、ImGuiCol、公開API宣言 |
| imgui_demo.cpp | `imgui_demo.cpp` | ソース | ShowStyleEditorの実装 |
| imgui.cpp | `imgui.cpp` | ソース | LogToClipboard/LogToTTY/LogFinishの実装 |
