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

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

https://qiita.com/ma_sh/items/7627a6151e849f5a0ede

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

# UIElementsを並べてみる

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

https://hacchi-man.hatenablog.com/entry/2020/11/22/220000

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

```cs: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);
}
```
で、出来たのがコレ。
![スクリーンショット 2021-08-20 231813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/17e16f41-dbe6-0dc6-b66c-9d782c16e3fd.png)
何じゃこれ。Test1,Test2のLabel領域がメッチャ広い上に入力領域がメッチャ狭い。しかもそのせいでノードがメッチャデカくなってしまっている…。

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

```cs: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);
}
```
すると下記のような形に。
![スクリーンショット 2021-08-20 232831.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/e75cef5b-abf8-bc50-ee56-6e4f3c78c416.png)
ラベルは小さくなったけど、入力領域が狭い…！

#TextFieldのサイズ調整
使いづらいので、TextField自体のminSizeも修正しておきます

```cs: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);
}
```
で、出来たのがこちら。
![20210820a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/4b83d441-499f-2efc-6780-4d93a6763651.png)
まだ触りやすくなったかな？

# 編集後記

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