GraphNodeに配置したUIElementsのLabelElementがデカい現象をuss無しで解消する方法

はじめに

唐突ですがGraphViewでノードを作成するサンプルとしては

の記事が非常に参考になりました。

UIElementsを並べてみる

さて、ではノードにUIElementsを配置してみよう、ついでにパラメータを水平方向に並べてみよう。
という事で

の記事を参考にしつつ水平方向に並べてみる。

LogNode.csのコンストラクタ抜粋

public LogNode() : base()
{
    title = "Log";

    _inputString = Port.Create<Edge>(Orientation.Horizontal, Direction.Input, Port.Capacity.Single, typeof(string));
    inputContainer.Add(_inputString);

    //水平方向に並べるための親を準備            
    var horizontal = new VisualElement();
    var fd = horizontal.style.flexDirection;
    fd.value = FlexDirection.Row;
    horizontal.style.flexDirection = fd;

    //TextFieldを水平に2つ並べる
    var textField = new TextField("Test1");
    horizontal.Add(textField);

    textField = new TextField("Test2");
    horizontal.Add(textField);

    mainContainer.Add(horizontal);
}

で、出来たのがコレ。

何じゃこれ。Test1,Test2のLabel領域がメッチャ広い上に入力領域がメッチャ狭い。しかもそのせいでノードがメッチャデカくなってしまっている…。

ラベル領域を狭める

これはいかん、という事でLabel領域を狭くする方法を調べたところ、ussで指定するのが良さそう。
ただ「uss用意するの面倒くさいから、scriptで直に指定する方法は無いかな？」と調べたところこんな感じ

LabelElementのminWidthを小さく

public LogNode() : base()
{
    title = "Log";

    _inputString = Port.Create<Edge>(Orientation.Horizontal, Direction.Input, Port.Capacity.Single, typeof(string));
    inputContainer.Add(_inputString);

    //水平方向に並べるための親を準備            
    var horizontal = new VisualElement();
    var fd = horizontal.style.flexDirection;
    fd.value = FlexDirection.Row;
    horizontal.style.flexDirection = fd;

    //TextFieldを水平に2つ並べる
    var textField = new TextField("Test1");
    textField.labelElement.style.minWidth = 10f; //←適当に小さい値を入れる
    horizontal.Add(textField);

    textField = new TextField("Test2");
    textField.labelElement.style.minWidth = 10f; //←適当に小さい値を入れる
    horizontal.Add(textField);

    mainContainer.Add(horizontal);
}

すると下記のような形に。

ラベルは小さくなったけど、入力領域が狭い…！

TextFieldのサイズ調整

使いづらいので、TextField自体のminSizeも修正しておきます

TextField自体も広げておく

public LogNode() : base()
{
    title = "Log";

    _inputString = Port.Create<Edge>(Orientation.Horizontal, Direction.Input, Port.Capacity.Single, typeof(string));
    inputContainer.Add(_inputString);

    //水平方向に並べるための親を準備            
    var horizontal = new VisualElement();
    var fd = horizontal.style.flexDirection;
    fd.value = FlexDirection.Row;
    horizontal.style.flexDirection = fd;

    //TextFieldを水平に2つ並べる
    var textField = new TextField("Test1");
    textField.labelElement.style.minWidth = 10f; //←適当に小さい値を入れる
    textField.style.minWidth = 64f; //← ついでにTextField自体のminSizeも広げておく
    horizontal.Add(textField);

    textField = new TextField("Test2");
    textField.labelElement.style.minWidth = 10f; //←適当に小さい値を入れる
    textField.style.minWidth = 64f; //← ついでにTextField自体のminSizeも広げておく
    horizontal.Add(textField);

    mainContainer.Add(horizontal);
}

で、出来たのがこちら。

まだ触りやすくなったかな？

編集後記

調べた感じ、素直にuss書いた方が良さそうかも？使いまわしも効くし。
ただ、minSizeを指定して調整する記事はそれほどヒットしなかったので、一応記事化して残しておきます。（つまり悪手かもしれん；）