unity matrix4x4 propertydrawer using UI toolkit and uss

MatrixDrawer.cs

#if UNITY_EDITOR
using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine.UIElements;
#endif

using UnityEngine;


#if UNITY_EDITOR
[CustomPropertyDrawer(typeof(Matrix4x4))]
public class Matrix4x4Drawer : PropertyDrawer
{
    private static readonly string[] rows = { "H'", "S'", "V'", "A'" };
    private static readonly string[] cols = { "H", "S", "V", "A" };

    public override VisualElement CreatePropertyGUI(SerializedProperty property)
    {
        var root = new VisualElement();

        // Load styles
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>(
            "Assets/Scripts/Editor/MyStyle.uss");
        root.styleSheets.Add(styleSheet);

        // Create field label
        var fieldLabel = new Label(property.displayName);
        fieldLabel.AddToClassList("field-label");
        root.Add(fieldLabel);

        // Create matrix grid
        var matrixContainer = CreateMatrixGrid(property);
        root.Add(matrixContainer);

        return root;
    }

    private VisualElement CreateMatrixGrid(SerializedProperty matrixProperty)
    {
        var container = new VisualElement();
        container.AddToClassList("matrix-container");

        // Create header
        var header = new VisualElement();
        header.style.flexDirection = FlexDirection.Row;
        header.AddToClassList("matrix-header");

        // row/column filler
        var rowfiller = new Label();
        rowfiller.AddToClassList("row-label");
        header.Add(rowfiller);

        // Create column labels
        foreach (var col in cols)
        {
            var lbl = new Label(col);
            lbl.AddToClassList("col-label");
            header.Add(lbl);
        }
        container.Add(header);

        // Create rows
        for (var row = 0; row < 4; row++)
        {
            var rowContainer = new VisualElement();
            rowContainer.AddToClassList("row-container");

            // Row label
            var lbl = new Label(rows[row]);
            lbl.AddToClassList("row-label");
            rowContainer.Add(lbl);

            // Matrix cells
            for (var col = 0; col < 4; col++)
            {
                var cell = new FloatField();
                cell.AddToClassList("small-label");
                cell.label = $"M{row}{col}";
                cell.bindingPath = $"m{row}{col}";
                rowContainer.Add(cell);
            }

            container.Add(rowContainer);
        }

        container.Bind(matrixProperty.serializedObject);

        return container;
    }
}
#endif

MyStyle.uss

.matrix-container {
    margin-top: 5px;
    margin-bottom: 5px;
}

.unity-base-field__label {
    min-width: 35px;
}

.small-label {
    padding-left: 2%;
    margin: 0;
}

.row-container {
    margin-bottom: 4px;
    flex-direction: row;
}

.small-label,
.col-label {
    width: 20%;
    -unity-text-align: middle-right;
}

.row-label {
    width:4%;
}

I doubt someone will read this, but if you do, you have a great opportunity to see UI Toolkit in action. Because screw IMGUI.

I made a matrix with HSV transform, you can insert your own letters and many other things.