GUI3について

GUI3は単純に描画したい位置を指定して描画しようという考えから開発を始めました。Reactのような状態管理をそのままネイティブのレンダラーに指示して描画しています。

GUI3はWEBフロント開発の感覚でUI構築できることを目標にしています。コンポーネントは状態管理と他のコンポーネントを組み合わせて構成します。状態管理はOOPのカプセル化を基準としつつ、グローバルストアStoreを定義しています。

GUI3の処理フローは毎フレームで「コンポーネントの構成→イベントの検知→イベント対象DOMの特定→イベントハンドラの実行→レイヤ順にコンポーネントの描画」を行います。

GUI3ではイベントの検知、コンポーネントの描画にSDL3を使用しています。SDL3で処理対象となるAtomsComponentは準備してあるので、SDLについての知識がなくても標準のコンポーネントを組み合わせ流だけで描画できます。

コンポーネントの描画にはSDLのRenderCopyを実行します。ただし、コンポーネント数が多くなった場合に、その都度RenderCopyを実行して描画するのはコストがかかるので代わりにコンポーネントをひとまとまりの画像としてキャプチャするコンポーネントを用意してあります（CaptureComponent）。使用方法はキャプチャーしたいコンポーネントの親コンポーネントにCaptureComponentを指定するだけです。

GUI3はアトミックデザインをもとにコンポーネントを分類しています。Atomsは描画対象となる最小限のコンポーネントです。MoleculesはAtoms、Moleculesを組み合わせて繰り返し呼び出されるパーツです。OrganismsはAtomsやMoleculesを組み合わせ、プロジェクト毎のロジックを入れて完成された機能を作成します。Templatesはコンポーネントの配置を定義します。PagesはTemplatesにOrganisms以下を指定してページ全体を完成します。

アトミックデザインはアーキテクチャ上ではAtomsが最上位の境界にあります。全てのコンポーネントはAtomsコンポーネントに依存しています。状態変数のスコープと逆になりますが、OrganismsやPagesで使う共通変数定義はMoleculesフォルダに定義するとプログラムしやすくなったりします。定義はMoleculesフォルダで行い、宣言はOrganisms、Pagesで行うと見通しが良くなったりします。

GUI3では毎フレームでコンポーネントの構成を行います。コンポーネントの構成configureで状態に合わせて構成を変更できます。最上位コンポーネントとしあらかじめIndexComponentが指定されていますので、SPA（Simgle Page Application）を構築することができます。