More UI work

DaggerFramework/Source/UI/MarginPanel.cs

@@ -5,6 +5,7 @@ namespace DaggerFramework.UI;
 public class MarginPanel : Panel
 {
     public Vector2 RelativeMargin { get; set; }
+    public Vector2 AbsoluteMargin { get; set; }
     public MarginPanel(PanelStyle style) : base(style)
     {
     }
@@ -14,6 +15,10 @@ public class MarginPanel : Panel
         base.RearrangeChild(idx, child);
 
         var rect = child.Rect;
-        rect.Position = Rect.Size * RelativeMargin;
+
+        var absoluteMargin = Rect.Size * RelativeMargin + AbsoluteMargin;
+
+        rect.Position = Rect.Position + absoluteMargin;
+        rect.Size = rect.Size - absoluteMargin * 2;
     }
 }

DaggerFramework/Source/UI/UIElement.cs

@@ -25,7 +25,8 @@ public abstract class UIElement
 
     public void Render(Renderer renderer)
     {
-        renderer.SetTransform(Rect.Position, Vector2.Zero, 0);
+        Vector2 parentPos = parent != null ? parent.Rect.Position : Vector2.Zero;
+        renderer.SetTransform(Rect.Position + parentPos, Vector2.Zero, 0);
         OnRender(renderer);
 
         foreach (UIElement child in children)

TestGame/UiLayer.cs

@@ -44,24 +44,43 @@ public class UiLayer : Layer
 
         var style = new PanelStyle()
         {
-            BackgroundColor = new Color(0.25f, 0.25f, 0.25f, 1.0f)
+            BackgroundColor = new Color(0.2f, 0.2f, 0.2f, 1.0f)
         };
 
         _panel = new MarginPanel(style)
         {
-            ExpandRatio = new Vector2(0.5f, 1.0f),
+            ExpandRatio = new Vector2(0.5f, 1f),
-            RelativeMargin = Vector2.One * 0.01f
+            AbsoluteMargin = Vector2.One * 16f
         };
         _screenContainer.AddChild(_panel);
 
         var exampleText = new TextLabel()
         {
             Font = _defaultFont,
-            FontSize = 30,
+            FontSize = 20,
-            Text = "This Panel will occupy 50% of the screen.\nHow cool is that?"
+            Text = "This Panel will occupy 50% of the screen.\nThis text in particular is inside a panel with an absolute margin of 16px.\nHow cool is that?"
         };
 
-        _panel.AddChild(exampleText);
+        var contentPanel = new MarginPanel(new PanelStyle()
+        {
+            BackgroundColor = new Color(0.25f, 0.25f, 0.25f, 1.0f)
+        })
+        {
+            AbsoluteMargin = Vector2.One * 32f
+        };
+
+        _panel.AddChild(contentPanel);
+
+        var verticalPanel = new MarginPanel(new PanelStyle()
+        {
+            BackgroundColor = new Color(0.1f, 0.1f, 0.1f, 1.0f),
+        })
+        {
+            AbsoluteMargin = Vector2.One * 8f,
+        };
+
+        contentPanel.AddChild(verticalPanel);
+        verticalPanel.AddChild(exampleText);
 
         // var verticalPanel = new VerticalPanel(new PanelStyle()
         // {