prime31 / Nez

Nez is a free 2D focused framework that works with MonoGame and FNA
MIT License
1.78k stars 362 forks source link

UI: Fixed container alignment and label padding #796

Closed stallratte closed 5 months ago

stallratte commented 5 months ago

Hello,

I fixed two bugs.

1) The top and bottom alignment of the Container is swapped.

Example setup:

public class MyUiScene : Scene {
    public override void Initialize() {
        ClearColor = Color.CornflowerBlue;

        var uiCanvas = CreateEntity("ui-canvas");
        uiCanvas.AddComponent(new MyUICanvas());
    }

    private class MyUICanvas : UICanvas {
        public override void Initialize() {
            Stage.SetDebugAll(true);

            var primitiveDrawable = new PrimitiveDrawable(Color.Brown);
            primitiveDrawable.MinWidth = 200;
            primitiveDrawable.MinHeight = 50;

            var container = Stage.AddElement(new Container(new Image(primitiveDrawable))).SetAlign(Align.Bottom).SetPadBottom(10);
            container.FillParent = true;
        }
    }
}

Screenshots: container_fix

2) Label ignores (left) padding

At the end of the Layout()-method, all previous calculation done to_textPosition.X is overridden: https://github.com/prime31/Nez/blob/033ce7f48ed5aef6a54d6ea8a5696dcbfd07dde5/Nez.Portable/UI/Widgets/Label.cs#L352-L357

I refactored the code a little bit to make it easier to understand.

Example setup:

public class MyUiScene : Scene {
    public override void Initialize() {
        ClearColor = Color.CornflowerBlue;

        var uiCanvas = CreateEntity("ui-canvas");
        uiCanvas.AddComponent(new MyUICanvas());
    }

    private class MyUICanvas : UICanvas {
        public override void Initialize() {
            Stage.SetDebugAll(true);

            var primitiveDrawable = new PrimitiveDrawable(Color.Brown);
            primitiveDrawable.SetPadding(0, 0, 5, 5);

            var label = new Label("Some text", new LabelStyle {
                FontScale = 6,
                Background = primitiveDrawable
            });
            var container = Stage.AddElement(new Container(label)).SetAlign(Align.Center);
            container.FillParent = true;
        }
    }
}

public class MyUiScene : Scene {
    public override void Initialize() {
        ClearColor = Color.CornflowerBlue;

        var uiCanvas = CreateEntity("ui-canvas");
        uiCanvas.AddComponent(new MyUICanvas());
    }

    private class MyUICanvas : UICanvas {
        public override void Initialize() {
            Stage.SetDebugAll(true);

            var primitiveDrawable = new PrimitiveDrawable(Color.Brown);
            primitiveDrawable.SetPadding(0, 0, 20, 20);

            var label = new Label("Some more text", new LabelStyle {
                FontScale = 6,
                Background = primitiveDrawable
            });
            label.SetWrap(true);
            var container = Stage.AddElement(new Container(label)).SetAlign(Align.Center);
            container.SetWidth(200);
            container.FillParent = true;
        }
    }
}

Screenshots: label_fix

Lastly I renamed NineSliceSpriteRenderer to match the name of the class it renders.

Best regards, stallratte