製品について

Molecules-ClickImageComponent

MoleculesのClickImageComponentについて解説します。 ClickImageComponentはBoxImageComponentとClickComponentの組み合わせです。 ClickComponentは引数にstd::function<void()>を持ち、イベントハンドラに引数を登録します。クリックイベント発生時に登録した関数を実行します。先に説明したBoxSelectComponentはこのClickComponentを使用して選択肢の開閉から値の設定までを行なっています。 引数はBoxComponentの位置、幅、高さ、背景色とImageComponentの画像名です。ClickComponentの引数は関数クロージャでクリックの度にCountを一つ増やす関数を渡してクリックイベント発生時の動作を確認できます。

Molecules-BoxTextComponent

MoleculesのBoxTextComponentについて解説します。 BoxTextComponentはBoxComponent（外枠）、BoxComponent（内枠）とTextComponentの組み合わせです。 TextComponentは親Componentに対して左上から文字サイズ分だけ描画します。上下均等な余白を設定するには親Componentに対してセンタリングを行うComponentが必要です。 BoxComponent（外枠）で描画位置を決め、BoxComponent（内枠）でTextComponentのセンタリングを行なっています。 入力パラメーターはBoxComponent（外枠）の配置、幅、高さ、色とTextComponentの更新制御フラグ、マスキングフラグ、テキスト本体、テキストの色を設定できます。 今後IME入力をサポートする予定です。

Molecules-BoxSelectComponent

MoleculesのBoxSelectComponentについて解説します。 BoxSelectComponentは選択したkeyとvalueを保持するコンポーネントです。選択肢はクリック時にリスト形式で表示されます。 BoxSelectComponentのテストではBoxComponentの配置リストをサンプルにしてテスト表示しています。 引数は位置、幅、高さ、選択肢の背景色、テキストの色、背景色です。 BoxSelectComponentは以下４つのComponentの組み合わせです。 Atoms-RectComponent Molecules-ClickItemComponent Molecules-BoxTextComponent Molecules-ListVerticalComponent RectComponentは配置を自由に決定できるコンポーネントです。選択した値をBoxTextComponentで表示し、その下にRectComponentで選択肢を表示しています。各選択肢は縦リスト形式で表示するため、ListVerticalComponentに選択肢のリストを設定します。選択肢をクリック時に選択中の値を選択した値に変更します。 BoxSelectComponentではいくつか処理に関する仕様を決めています。 クリック等のイベントを処理するイベントハンドラでは選択肢が展開中に他の要素をクリックした場合に選択肢の展開を閉じます。 また、描画の処理順は親コンポーネントから子コンポーネントへ深さ優先で描画していきます。他のコンポーネントと配置が重なった場合、展開されている選択肢が隠れる可能性があるため、レイヤーを設定しています。   BoxSelectComponentのBox Positionの場合、レイヤーが未設定の場合、選択肢は他のパラメータの表示で隠れてしまいます。しかし、レイヤーは設定された値の大きいものを描画処理順に関係なく後で描画するため、画像の通り手前に描画できます。  

Molecules-BoxSliderUintComponent

BoxSliderUintComponentについて解説します。 BoxSliderUintComponentはBoxComponentとSliderUintComponentで構成しています。BoxComponentで親コンポーネントに対して9種類の配置を選択できます。例ではCENTER_RIGHTのポジションを指定しています。   BoxComponentの背景色に青、SliderUintComponentの背景色に赤を指定しています。SliderUnitComponentは指定した範囲の値をとります。テストではMIN=0、MAX=UINT_MAXを指定し、初期値はMAX/2です。

Molecules-BoxImageComponent

MoleculesのBoxImageComponentを解説します。 MoleculesはAtomsや他のMoleculesを組み合わせて作成します。 BoxImageComponentはBoxComponentとImageComponentを組み合わせて作成しています。 ９種類の配置と画像を選択します。BoxComponentの幅、高さ、背景色も選択できます。 Componentの組み合わせの方法はConfigure仮想関数を実装してComponentの構成を指定します。 BoxImageComponentのテストではWindowComponent-BoxComponent-ImageComponentのように最終的にAtomsのDOM構造で構成され描画処理など設定した処理を構成後に実行します。 詳細はComponentのチュートリアルで解説します。    

Atoms-TextComponent

Atomsのテキストコンポーネントについて解説します。 入力パラメーターは文字サイズ、編集フラグ（ON→編集可、OFF→編集不可）、マスキングフラグ（ON→＊）、テキスト、文字の色です。 SDL2_ttfを用いて描画しています。文字フォントはpc-9800.ttfを使用していますが、描画モジュールで指定できます。SDL2_ttfは文字サイズ毎のサーフェイスを使用しますので、予め使用するフォントサイズをコンフィグに設定します。描画エンジンで指定されたフォントのサーフェイスを保持しています。描画モジュールで指定された文字サイズのサーフェイスを利用してSDL_renderを作成します。SDL_renderは文字列に変更があった場合に、サーフェイスから再生成しています。 文字コードはUTF8です。1byteずつ処理していますので、マルチバイト文字の場合、例えば一文字削除で最初に1byteの文字を削除します。続き文字ならさらに削除を続ける処理をします。日本語文字なら3byte削除することになります。左右カーソル移動も同様です。カーソル位置を表現するために「|」文字を使用しています。 今後IME対応とSDL3対応を進めていく予定です。文字列が変わった時にSDL_renderを再生成しないといけない仕様が変わったら嬉しいですね。