SYNC_ScreenLayout

SYNC_ScreenLayoutは、AviUtl2で画面レイアウトを作成・編集するためのWin64プラグインです。同じ編集画面をAviUtl2なしで起動できる ScreenDesignMaker も同梱しています。

ドキュメント

• 利用できる機能と操作方法: このREADME
• 開発再開時の設計方針・規約・将来計画: note.md
• 実装状況の時点記録: HISTORY.md

起動形態

• AviUtl2プラグイン: SYNC_ScreenLayout_Filter.dpr / SYNC_ScreenLayout_Filter.dproj
• 単独デバッグアプリ: ScreenDesignMaker.dpr / ScreenDesignMaker.dproj

ScreenDesignMakerでは「ファイル」メニューから専用version 15 Document JSONを読み書きできます。AviUtl2プラグインでは、ホストと受け渡す配置データを編集します。
ScreenDesignMakerはPer-Monitor V2 DPI対応で、Windowsの表示倍率に合わせてVCLが再レイアウトし、文字を実解像度で描画します。

基本操作

• キャンバス移動: マウス中ボタンドラッグ
• オブジェクト移動: ドラッグ。矢印キーでも移動可能
• スナップ一時解除: Alt
• 作成時の水平・垂直拘束や回転刻み: Shift
• 画像配置: 画像ファイルをキャンバスへドラッグ＆ドロップ
• 左右反転／上下反転: 上部ツールバー、オブジェクトの右クリック「変形」、Shift+H／Shift+V
• 複数選択の整列・均等配置: 右クリック「整列と均等配置」
• Undo / Redo: 編集操作、フィルター、グループ、グラデーション編集などに対応

プロジェクト概要

パターン

色パネルの左から3番目のアイコンを選ぶと、斜線・ドット・格子・市松・波線・ハニカムを設定できます。
種類を選び、表示される項目だけを調整します。透明部分はプレビューの市松背景で確認できます。

• 上部は「透明度：」スライダー、選択色、塗りモードの順で固定し、色相・SVピッカーは下端に固定します。
  切り替わるのは中央のモード固有設定だけです。透明度スライダーは選択色に適用し、背景を0%にすると透過します。
• パラメーターは項目名とスライダーを横並びにし、数値は表示しません。広い値域は既定値付近を細かく扱える感度です。
  スライダー上のホイールと矢印キーで0.1ずつ、PageUp／PageDownで1ずつ調整できます。
  項目が多い場合はアプリ共通のスクロールバーで設定部分を縦にスクロールできます。
• 選択中の図形・文字・線へ適用します。作成ツール使用中や選択なしでは次回作成用の設定になります。
• 複数選択とドラッグ編集はUndo／Redoに対応し、保存には模様の種類・数値・色だけを含めます。

仮仕様・制限と実機確認事項はnote.mdを参照してください。

テクスチャ

色パネルの右端のテクスチャアイコンを選び、表示された画像領域へ1ファイルをドロップしてください。
領域をクリックしてファイルを選ぶこともできます。選択中の図形・文字・線に適用し、選択なしなら次回作成用になります。

• 配置：全面・全体・引き伸ばし・原寸。設定行をクリックして切り替えます。
• 繰り返し：なし・通常・鏡像。画像外は「なし」のとき透明です。
• キャンバスの丸ハンドル：移動。四角ハンドル：拡縮・回転。Shiftで15度刻み。
• パネルでも倍率・回転を調整でき、配置リセット・画像解除ができます。不透明度は上のスライダーです。
• 画像を埋め込んで保存するため、元ファイルを移動・削除しても保持されます。置換や直接操作はUndo／Redoに対応します。

キャンバスへの通常の画像D&Dは、従来どおり画像レイヤーを追加します。テクスチャの仮仕様・制限はnote.mdを参照してください。

プロジェクト構成の背景

• 元はMIF互換アプリとして開発し、SVG書き込みまで実装した段階でAviUtl2プラグインを同じ
  プロジェクトから作る構成にした。
• アプリとプラグインで共通化できる範囲が少なく、2つのモード切替も複雑になったため、現在は
  プロジェクトを分離している。
• このリポジトリはAviUtl2の画面レイアウトプラグイン専用とし、もう一方は単独アプリとして扱う。
• このプラグインは、シリアライズされた配置データをもとに画面レイアウトを表示・編集し、
  編集結果を再びシリアライズしてAviUtl2へ返す。
• 単独アプリ向けのMIF／SVGファイル入出力と、MIF互換／標準の編集モード切替は持たない。

オブジェクトのコピー・貼り付け・削除

• レイヤー一覧では通常クリックで単一選択、Ctrl＋クリックで追加・解除、Shift＋クリックで範囲選択、
  Ctrl＋Shift＋クリックで範囲追加ができます。選択済みの複数行は、そのままドラッグして一括移動できます。
• 選択したオブジェクトをCtrl+Cでコピー、Ctrl+Vで貼り付け、Deleteで削除できます。
  Ctrl+Xの切り取りと、右クリックメニューからの同じ操作にも対応します。
• コピーするのは形状・文字・塗り・フィルターなどを含む内部データです。通常の画像やテキストとして
  他のアプリと交換するものではありません。複数選択と入れ子グループもまとめてコピーできます。
• 貼り付け先は現在編集中の階層の最前面で、座標はコピー元と同じです。貼り付け後は挿入した一式を
  選択します。空白部分の右クリックからも貼り付けられます。削除・切り取り・貼り付けはUndo／Redoに対応します。
• Ctrl+Aは現在の階層を全選択します。ロック対象のコピーは可能ですが、削除・切り取りはできません。
  文字編集中のCtrl+A／C／X／VやDeleteは文字を対象にします。

座標と保存形式

• 配置データの論理座標はキャンバス中央を (0, 0) とし、右方向を+X、下方向を+Yとする。
• オブジェクトプロパティの X、Y は、矩形、画像、パス、および複数選択の外接範囲の
  中心座標を表す。
• 直線ツールの内部データは専用の線型を持たず、2頂点の開いたPathとして扱う。直線の
  オブジェクトプロパティは X、Y を中点、Length を長さ、Angle を角度として扱う。
  角度は右向きを0度とし、論理座標の+Y方向に合わせて画面上の時計回りを正とする。
• RectangleとShapeは塗り色を持つ。Pathの色情報は線色だけとし、太さ、線種、線端形状を持つ。
  アンチエイリアスと線結合形式は選択データを持たず、描画側の固定設定を使用する。
• 基本図形には複数の閉輪郭を持つ万能図形データを使用する。輪郭は直線または3次ベジェの
  区間からなり、穴や離れた領域も1図形として保持できる。Shapeツールは選択中のボタンまたは
  Gキーを再度選ぶと鋭角とベジェ頂点を切り替え、輪郭、制御点、頂点・区間種別、描画設定を
  JSONへ保存する。
• Shape、Rectangle、角丸Rectangleの加算・AND・XORは選択中の最背面図形、減算は最後に
  選択したアクティブ図形を結果の基準とする。Rectangle系は回転と角丸を反映した一時Pathとして
  演算し、結果だけを複数輪郭とEven-Odd規則のShapeで保持する。操作全体を1回のUndo／Redo対象とし、
  Undoでは元のレイヤー型、積層位置、回転、角半径を復元する。
• Document JSONは専用形式のversion 15とし、canvas.origin は中央原点を表す center に固定する。
  異なるversionおよび他の原点形式との互換性を持たない。専用の
  line レイヤーは保存せず、直線も closed: false かつ2頂点の path として保存する。

図形と線

• 楕円は回転前の外接矩形、回転、塗り設定を持つ独立レイヤーとする。円は楕円の縦横を
  同じにした状態として扱い、楕円ツールの配置中にShiftを押すと正円に制限する。
  楕円の選択は回転を反映した内部だけを当たり判定し、Rectangle系と同じ選択枠で移動、
  拡大縮小、回転、プロパティ編集を行う。
  円弧は楕円弧を対象とし、基礎楕円の外接矩形と回転、開始角、
  時計回りの掃引角、およびPathと同じ線設定を持つ。円弧ツールではドラッグ範囲へ
  上半分の180度弧を配置し、配置中にShiftを押すと基礎楕円を正円に制限する。
  選択後は始点の緑ハンドルと終点の青ハンドルをドラッグして角度範囲を変更する。
  選択中は線ツールバーから線属性、編集メニューの「配置とサイズ」から中心、幅、高さを編集する。
  開始角と終了角はキャンバス上のハンドルで変更し、矢印キーとShift+矢印キーでは
  他の矩形系図形と同じ距離だけ移動する。
  JSONではそれぞれ ellipse と arc として保存する。
• 図形と線は別レイヤーとして扱うが、同じ形の作成ツールはパレット上の1ボタンへまとめる。
  選択中のボタンまたは同じショートカットキーを再度選ぶと線／図形が切り替わり、アイコンも
  現在の種別を表示する。四角形の線は
  塗りを持たない閉じた輪郭として、Bounds、回転、線色、線幅、線種、不透明度を保持する。
  閉じた線なので端点形状は持たず、JSONでは rectangleLine として保存する。
• 角丸四角形の線も塗りを持たない独立レイヤーとし、四角形の線の属性に4隅の角丸半径を加える。
  角丸図形と同じ半径ハンドルで編集し、JSONでは roundedRectangleLine として保存する。
• 楕円の線は塗りを持たない閉じた楕円輪郭とし、楕円図形の直前へ配置する。配置中のShiftで
  正円へ制限し、線属性、回転、外接矩形を保持してJSONでは ellipseLine として保存する。
• 楕円弧の図形は、楕円弧の両端から楕円中心へ直線で閉じる扇形とする。楕円弧の線の直後へ
  配置し、塗り、回転、開始角、時計回り掃引角を保持する。配置後は線の楕円弧と同じ開始・終了
  角ハンドルで編集し、JSONでは ellipseArcShape として保存する。
• Pathの各頂点はShapeと同じく、座標、入出力制御点、鋭角／ベジェ種別、次区間の直線／
  3次ベジェ種別を保存する。
• Pathツールは開いた連続線を作成し、選択中のボタンまたはPキーを再度選ぶと次に確定する
  頂点を鋭角／ベジェへ切り替える。ダブルクリックまたは右クリックで作成を終了する。
• Pathツールのアイコンは4頂点程度の開いた線として表示し、Shapeツールは閉じた輪郭として
  内部を塗りつぶして表示する。各ツールで選んだ次頂点種別に応じ、両アイコンを角のある折れ線／
  滑らかなベジェへ即時に切り替え、現在の種別もステータスへ表示する。Path編集では頂点選択時に
  その種別をアイコンへ同期し、Pによるモード切替を選択頂点へ同時に適用する。
• ツールパレットは上から、選択、2点直線、自由線、Path、四角形、角丸四角形、楕円、楕円弧、
  Shape、テキストの順とする。
• 1文字ツールショートカットは、S=選択、R=四角形、U=角丸四角形、C=楕円、A=楕円弧、
  L=2点直線、P=Path、G=Shape、T=テキストとする。P／Gは対応ツールの選択中に再度押すと
  鋭角／ベジェを切り替える。文字入力欄にフォーカスがある間は
  1文字ショートカットを無効化する。画像はツールとショートカットを持たず、画像ファイルの
  ドラッグ＆ドロップだけで配置する。
• キャンバス表示の移動はマウスホイール押し込みの中ボタンドラッグで行う。右ボタンは移動へ
  使用せず、Path／Shape作成終了などの既存操作以外ではポップアップメニュー用に空ける。

オブジェクトメニュー

• ダークメニューの生成、任意座標への配置、多階層サブメニューは
  Lib/DarkMenu/VectArtDarkPopupMenu、複数ルートの排他切替、外側クリック、Esc、非アクティブ化の
  監視は Lib/DarkMenu/VectArtDarkMenuGroup が担当する。オブジェクトメニューの項目構成は
  ScreenLayoutObjectContextMenu、右クリック対象の選択は ScreenLayoutContextMenuInteraction に分離する。
  選択対象となるオブジェクトを右クリックすると共通メニューを表示する。
  オブジェクト型固有の項目は別ユニットで TScreenLayoutObjectMenuContributor を実装して登録し、
  表示直前に渡されるトップレベルまたは開いたグループ内の選択をもとに適用可否と項目を構成する。
  文字オブジェクトを単一選択した場合は「テキストの分解」を表示する。複数の表示行を持つ文字は
  1行ずつ、1表示行だけの文字はサロゲートペアを壊さない文字単位へ分解し、元の枠内スケール、配置、
  回転、書式、フィルターを各文字レイヤーへ引き継ぐ。置換全体を1回のUndo／Redo対象とする。
  同じメニューから字形ごとの閉じたパス図形にも分解できる。Skiaの字形アウトラインを複数輪郭と
  Even-Odd規則のShapeへ変換し、枠内スケール、配置、回転を頂点座標へ反映する。
• 開いた線または連続線のPathを単一選択すると、右クリックメニューの
  「線を閉じたパス図形へ変換」で表示上の線の外周をShapeへ変換できる。線色と共通ペイント、
  不透明度、フィルター、変形を引き継ぎ、均一幅、可変幅、線端、実線／破線を輪郭へ反映する。
  丸端は端点ごとに2本の3次ベジェとして生成するため、変換後も少数のハンドルで滑らかに編集できる。
  可変幅外周の描画用サンプル点は輪郭化時に簡略化し、直線やほぼ直線の区間へ大量の頂点を残さない。
  可変幅の鋭角は元のPath頂点を基準に前後のオフセット線を交点で結合し、交点より角側に残る
  描画サンプルも除去して内側の交差や欠けを防ぐ。外側の交点が線幅に対して長くなりすぎる角度では、
  マイター上限を適用する。
  丸端を選択した線は途中の外角も丸型で結合し、閉じたパスへの変換後は円弧部分を3次ベジェとして
  編集できる。均一幅の実線も通常表示から同じ外周生成を使うため、分解前後で角の見た目が変わらない。
  変換後は通常の閉じたパスとして頂点編集でき、変換全体をUndo／Redoできる。
• 単一選択した1表示行の文字には、各文字境界の下へ既存と同じ左右矢印を表示する。各矢印の
  左右ドラッグで、その境界だけの追加字間を文字サイズ比で変更し、後続文字の配置へ反映する。
  全体字間は従来の枠外矢印で引き続き変更でき、個別字間はその値への加算分としてJSONへ保存する。
  個別字間もダブルクリックで0へ戻り、ドラッグとリセットをUndo／Redo対象とする。複数表示行、
  1文字だけ、複数選択、ロック中の文字には個別矢印を表示しない。文字列自体を編集したときは、
  文字境界との対応が変わるため個別字間を初期化する。
• 自由線ツールは専用オブジェクトを増やさず、左ドラッグの軌跡を既存形式の開いたPath（連続線）
  として確定する。線属性ツールバーの均一幅／可変幅アイコンで幅の扱いを選び、既定は均一幅とする。
  可変幅でWindowsのペン入力から筆圧を取得できる場合は、線全長に対する位置と左右の幅倍率をPathへ
  保持し、筆圧100%を設定線幅として描画する。可変幅をマウスで描いた場合は、見た目が設定線幅と同じ
  両端100%の幅情報を持たせ、後の幅点編集へ引き継ぐ。均一幅では入力機器によらず設定線幅で描画する。
  選択中はマウス位置へ線幅を示す白黒の円と中心十字を
  表示し、ペン接触中は現在の筆圧へ追従する。ドラッグ中の軌跡にも筆圧による太さを即時反映する。
  パレットには波線アイコンを表示し、作成操作を1回のUndo／Redo対象とする。可変幅は現在、開いた
  実線Pathが対象で、破線を選んだ場合の確定表示は従来の均一幅となる。
• 可変幅Pathを単一選択すると、中心線上の緑色の幅点と、その両側に青色の幅ハンドルを表示する。
  左右のハンドルは個別にドラッグでき、中心線に対して非対称な線幅にも対応する。Ctrl+クリックで
  中心線上へ幅点を追加し、中間の緑色ハンドルを右クリックすると削除する。両端の幅点は削除できない。
  幅変更、追加、削除はそれぞれUndo／Redo対象とする。

選択と変形

• 選択ツールのハンドルでは、通常ドラッグは拡大縮小、Shiftは縦横比維持、Altは中心固定、
  Shift+Altは中心固定と縦横比維持を併用する。
• Ctrlを押して四隅をドラッグすると、その角だけを動かす自由変形になる。Ctrlで辺中央を
  ドラッグすると、その辺を辺方向へずらすせん断になる。Ctrl+Shiftは移動を水平・垂直・45度に制限する。
• Ctrl+Altで四隅をドラッグすると、同じ辺のもう一方の角を対称に動かす遠近変形になる。
  横方向のドラッグは上辺または下辺、縦方向のドラッグは左辺または右辺へ適用する。
  Ctrl+Shift+Altでは方向制限も併用できる。
• ドラッグ中は変形した選択枠を表示し、マウスを離すと1回のUndo単位として確定する。Escで
  開始前へ戻す。交差・退化する四辺形への操作は最後の有効な形で止める。
  単一選択、複数選択、グループ、開いたグループ内選択に対応し、変形は保存・複製でも保持する。
  ハンドル上のCtrlは自由変形が優先され、オブジェクト本体のCtrlクリックは複数選択に使う。
• 作成済みPathはShapeと同じ頂点編集表示を使用し、頂点種別変更、ベジェ制御点操作、
  区間分割、右クリックによる頂点削除をUndo／Redo対象として扱う。
• 新しい図形の作成開始時は既存レイヤー選択と頂点編集表示を解除する。Pathの当たり判定、
  外接範囲、移動、拡大縮小、プロパティ、レイヤーサムネイルはベジェ区間を反映する。
• Rectangle、画像、Path、Shapeの回転操作は、選択枠の上辺中央から伸ばした回転マークを
  使用する。四隅外側の従来回転点は表示せず、回転操作にも使用しない。PathとShapeは
  回転値を別途保持せず、操作開始時の外接範囲中心を基準にアンカーとベジェ制御点を直接回転する。
• Rectangle系、RectangleLine系、Arc、通常Textなど回転角を独立して保持する型は、回転マーク内を
  緑で表示し、マークのダブルクリックで0度へ戻す。リセットはUndo／Redo対象とする。画像、Path、
  Shape、グループ、文字パスなど座標へ回転を焼き込む型はマーク内を橙色で表示し、リセット対象外とする。
• Pathの線端は四角、丸、先端角90度の三角から選択し、設定UIは先端を拡大したアイコンで表す。
• レイヤー一覧は選択中の行が表示範囲へ入るよう自動で位置を補正する。Shapeのサムネイルは
  閉輪郭の直線・ベジェ区間を展開し、回転や頂点編集後の形状を反映する。
• 角丸四角はRectangleを基礎にした独立レイヤーとし、Bounds、回転、塗り設定に加えて
  左上、右上、右下、左下の角丸半径を保持する。角丸ツールはドラッグ範囲の短辺20%を
  初期共通半径として作成し、JSONでは roundedRectangle として保存する。単一選択時は
  上辺中央側の菱形ハンドルを左右へドラッグして、4隅の半径を0から短辺の半分まで
  一括変更できる。この操作を始めると個別の隅選択を解除し、4隅を共通半径へ戻す。
  各隅の丸ハンドルでは対象の隅だけを選択・調整し、隣接する角丸を維持したまま各辺に
  収まる範囲へ制限する。個別ハンドルのカーソルは隅の向きに対応した斜め矢印とする。

画像

• JSONの画像レイヤーは sourceFile で外部画像を参照できる。相対パスはJSONファイルの場所を
  基準に解決し、参照先が存在しないレイヤーはDocumentへ生成しない。
• ドロップした画像は縦横比を保ち、大きな画像はキャンバスの80%以内へ収めて配置する。
  画像レイヤーは4頂点で配置範囲を保持し、四角形と同じ選択枠で移動、拡大縮小、回転を行う。

テキスト

• テキストツールは、幅4px・文字行高のWindows標準Editを描画側の仮想カーソル位置へ置く。
  IME未確定文字列はEditが表示し、確定文字はEditへ残さず即座にDocumentへ挿入してSkiaで描画する。
  幅4pxで見えない未確定文字列は GCS_COMPSTR から取得し、仮想カーソル横の透明な下線付き表示へ
  ミラーする。IME確定またはIME終了時に仮表示を消す。
  Editの背景は背後の表示色を複数点から取得して近似し、取得できない場合は濃いグレーを使用する。
  Enter、Backspace、Delete、左右上下移動、行頭・行末、文書先頭・末尾、Shift範囲選択を独自処理する。
  Ctrl+A/C/X/Vは仮想選択範囲を対象とし、入力と貼り付けは選択範囲を置換する。
  入力中の確定済み文字とIME未確定文字は、背景色によらず判別できるよう黒い文字へ白い外縁を重ねて表示する。
  クリックだけの場合は既定幅から入力に合わせて横へ伸びる入力範囲を作り、明示的なEnterだけで改行する。
  ドラッグで入力範囲を作った場合は、その指定幅で自動折り返しする。入力中のEscは新規入力の
  取消または既存テキストの編集取消とし、用紙をクリックするなどフォーカスが外れた時点で確定する。
  テキスト編集中に編集中レイヤー以外をクリックした場合は、そのクリックで編集を確定して選択ツールへ
  戻し、同じクリックを選択操作として続行する。次のテキスト枠を連続作成せず、IME入力先も解除する。
  既存テキストの再編集では文字列だけを更新し、選択枠で変更済みのBoundsと折り返し幅を保持する。
  文字寸法からBoundsを確定する処理は新規テキスト作成時だけに行う。
  新規文字色は右下の作成色を使用し、確定後は入力枠を隠して背景なしの文字だけを描画する。
  レイヤー一覧のサムネイルには固定アイコンではなく実際の文字列を表示する。文字オブジェクトの
  Boundsを縦横比を保ってサムネイル内へ収め、文字サイズも同じ倍率で変形する。文字色、不透明度、
  表示状態、編集中の内容変更を反映する。
  確定後のBoundsは実際に表示する文字の計測幅と行高へ縮まる。ドラッグ作成した文字は指定範囲内で
  折り返す。レイヤー一覧へ表示し、選択後は四角形と同じ移動、拡大縮小、回転を行う。選択済みの
  テキストをダブルクリックすると再編集できる。文字ツールの選択中は、既存テキストをクリック
  するだけでそのレイヤーを選択して再編集へ入り、クリックした文字間へカーソルを置く。編集中も
  同じテキストのクリックでカーソルを移動し、Shiftを併用した場合は現在位置から範囲選択する。
  JSONでは text として保存する。
• テキストツールの選択中にボタンまたはTキーを再度選ぶと文字パスへ切り替える。文字パスは
  1オブジェクト内に開いたPathを内包し、既存Pathと同じ頂点選択、移動、区間分割、削除、
  鋭角／ベジェ変更、制御点操作を使用する。文字はPathへ上面、下面、左面、右面のいずれかを沿わせ、
  単一行、折り返しなし、字間調整なしとする。配置は文字単位のセルへ展開し、指定面の中央を
  Path上へ置く。通常テキストの9方向配置アイコンと同じツールバー位置へ文字パス専用の4方向アイコンを
  表示し、接触面を切り替える。接触面はUndo／Redo、複製、JSON保存・復元へ含める。選択枠は
  配置後の全セルから求めた外接範囲とし、Path編集後は再配置して追従させる。枠の移動と回転では
  文字とPathを一体変形し、四隅のサイズ変更ではPathを維持したままフォントサイズを均等変更する。
  選択済み文字パスの文字をクリックすると文字単位の回転枠と四隅ハンドルを表示する。ハンドルは
  表示より広い当たり判定を持ち、均等倍率でその文字だけを拡縮する。選択文字本体のドラッグでは
  マウス位置をPath上の最寄り位置へ近似投影し、セルの接触面中央をPath上に保ったまま個別移動する。
  拡縮後も接触面中央をPath上へ置き、後続文字は新しい送り幅で再配置する。個別位置と倍率は
  Undo／Redo、複製、JSON保存・復元へ含め、本文変更時には破棄する。隣接セルがPathの内側で重なる
  場合は、両方が自動位置なら後続文字をPath上で進めて接触を解消し、後続の自動文字へ間隔を伝播する。
  個別移動した文字には手動位置フラグを立て、手動文字が含まれる隣接組は衝突を検出しても自動補正
  しない。自動配置から最初に手動位置へ切り替える際は、衝突回避後の表示位置を個別オフセットへ変換し、
  ドラッグ開始時の位置を維持する。
  初回入力は Text を全選択した状態で開始し、入力中はPath変形を適用しない通常表示と黒い文字／白い
  外縁を使用する。Enterで確定して選択ツールへ戻し、確定時にIMEを閉じ、次の入力開始時に直前の
  IME状態を復元する。空文字で確定した新規文字パスはDocumentへ残さず、JSONでは textPath として
  保存する。

グループとレイヤー

• グループは子レイヤーを積層順のまま所有するコンテナレイヤーとし、子の座標はDocument座標の
  まま保持する。モデルは子グループを許可する再帰構造とし、通常レイヤーと既存グループを含む
  複数選択も再グループ化できる。Ctrl+Gで複数選択をグループ化し、Ctrl+Shift+Gで
  単一選択中のグループを解除する。どちらも操作全体を1回のUndo／Redo対象とする。
• レイヤー一覧はグループを1行で表示し、ツリー状の階層表示は行わない。通常時はグループ全体を
  1オブジェクトとして選択・移動・変形する。グループを開くと解除せずに子を個別編集でき、
  開いている間はグループの外接範囲が分かる補助表示を付ける。グループ行のサムネイルには
  子レイヤーの配置と色を合成して表示する。JSONでは group の再帰的な layers 配列へ子を保存する。
• 閉じたグループを選択してCtrl+Dを実行すると、子と入れ子構造を再帰的に保持した複製を24px
  ずらして同じトップレベルへ挿入する。複数グループの一括複製とUndo／Redoにも対応する。
• グループはキャンバスまたはレイヤー行のダブルクリックで開閉を切り替え、Escまたはキャンバス上の
  グループ範囲外クリックでも閉じる。閉じた状態ではグループ全体を一体として移動、拡大縮小、回転
  できる。開いているグループ範囲は橙色の破線、選択した直下の子は
  黒い選択枠で示す。直下の子はドラッグ移動、8方向ハンドルによる拡大縮小、上辺の回転
  ハンドルによる回転、およびObject PropertiesのX／Y／幅／高さ編集に対応する。これらの操作は
  グループを閉じた後にも有効なUndo／Redo対象とする。開いたグループ内で選択した子はDeleteで
  削除、Ctrl+Dで同じグループ内へ24pxずらして複製でき、型と描画属性を保持したまま各操作を
  Undo／Redoできる。前面／背面ボタンは選択した子のグループ内積層順を1段ずつ変更する。
• 開いたグループ内ではCtrl+クリックで直下の子を複数選択・選択解除できる。複数選択時は全体の
  外接選択枠を表示し、ドラッグ移動、8方向の拡大縮小、共通中心回りの回転を全選択子へ適用する。
  右クリックの「整列と均等配置」から左・中央・右、上・中央・下の整列を実行できる。3個以上では
  左右端または上下端のオブジェクトを固定し、中間オブジェクトの輪郭間隔を均等に配置できる。
  左右・上下反転も全体の外接範囲中央を共通軸として適用する。単一選択と閉じたグループは自身の
  外接範囲中央で反転し、文字、画像、塗り、模様、テクスチャ、影も見た目ごと反転する。
  変形全体を1回のUndo／Redo対象とする。Delete、Ctrl+D、前面／背面への1段移動も複数選択へ
  一括適用し、削除・複製では積層順を維持する。Undo／Redoでは複数選択状態も復元する。
• 開いたグループ内で直下の子を複数選択してCtrl+Gを実行すると、その親の子として新しい内部
  グループを作る。内部グループを単一選択したCtrl+Shift+Gでは解除し、元の積層位置と順序へ戻す。
  内部グループ化・解除も操作全体を1回のUndo／Redo対象とする。
• 開いているグループ内の内部グループをダブルクリックすると、その内部グループへ編集対象を移す。
  Escは親グループへ1階層ずつ戻り、最上位グループで押すとグループ編集を閉じる。レイヤー一覧は
  階層化せず、内部グループを編集中も所属する最上位グループ行を開状態として表示する。
  Undo／Redoやグループ解除で編集中の内部グループが階層から外れた場合は、残っている最も近い
  親グループへ編集対象を戻し、その親の直下に存在する選択だけを維持する。
• レイヤー一覧のトップレベル行は別の行へドラッグ＆ドロップして積層位置を変更できる。ドラッグ中は
  上側へ移動する場合は対象行の上端、下側へ移動する場合は対象行の下端に橙色の横線を表示し、
  移動全体を1回のUndo／Redo対象とする。

色とグラデーション

• 右下のカラーUIから単色またはグラデーションを選ぶ。グラデーションは線形、放射（楕円）、矩形、
  円形（角度）、線方向、線幅方向の6種類から選択できる。
• 色プレビューのクリックで点を選択し、共通カラーピッカーで色と不透明度を編集する。
  不透明度0%は透明、100%は不透明。Ctrl+クリックで中間点追加、右クリックで中間点削除を行う。
• 線形はキャンバス上のガイドの両端を移動できる。放射・矩形・円形では中心、主半径端、副軸を
  ドラッグし、位置、半径、角度、縦横比を編集する。放射系の種類へ切り替えた際はオブジェクト中央から始まる。
• 種類欄はグラデーション選択時だけ表示する。種類欄はダークテーマ、ガイドと点の枠は白黒で表示する。
• 線方向と線幅方向は線オブジェクト用で、点は色プレビューから編集する。
  曲線や角では近似描画になるため、自己交差や鋭角では色の段差が生じる場合がある。
• 編集はUndo／Redo、複製、version 15 JSON保存・復元へ反映する。
• 仮仕様と制約の詳細はnote.mdの「グラデーション拡張」を参照する。

フィルター

• 各レイヤーとグループへ、縁取り、影、ぼかしを順序付きで追加できる。
• フィルター一覧から追加、削除、有効／無効、並べ替え、主要値の変更ができる。
• 縁取り幅、影の相対位置、ぼかし範囲はキャンバス上の効果枠とハンドルから直接編集できる。
• フィルターの順序、状態、設定値は複製、グループ操作、Undo／Redo、version 15 JSONへ引き継がれる。

Codexから編集画面を操作する

ScreenDesignMakerまたはAviUtl2の「画面レイアウト - 編集」を開いている間は、専用Named Pipeから
現在のDocumentを取得し、検証後の変更を1回のUndo単位で反映できる。Codexへ操作させる場合は、最初に
CODEX_AUTOMATION.mdを読ませる。

背景と合成画像の取得、未適用案の画像プレビュー、文字計測、フォント一覧、配置範囲、文字・装飾の
作成例も取得できる。Codexが画像を見て人物や余白を判断し、編集可能な文字・図形として配置する。
参照背景が変わった場合も古い配置案を検出し、画像を取得し直してから編集する。