Merge branch 'main' into standard-renderer

TODO.md

@@ -3,6 +3,9 @@
 ## Bugfixes
 
 - ActionJustPressed and KeyboardKeyJustPressed don't detect inputs consistently.
+  - **Solution**: This is a problem related to custom frame pacing for fixed timestep. Raylib polls input in BeginFrame, which means certain functions related to JustPressed* may work incorrectly when polled in a separate timestep. This can be fixed if the entire input system will be moved to SDL or with a custom render + input backend altogether.
+- ~~Fix any remaining bugs with anchor positioning system.~~
+  - ~~Containers don't position their chilren correctly when using anchors and adding/removing them.~~ 
 
 ## Core
 
@@ -27,6 +30,7 @@
 
 - Serialize attribute.
 - Add automatic serialization of resources through source generation and System.Text.Json.
+  - Make sure this serialization system works well with CLR and NativeAOT.
 - ~~Provide means for fetching key/value configuration (INI? TOML?)~~
   - Expose some sort of ConfigFile class for safe key/value configuration fetching.
 
@@ -67,14 +71,17 @@
 
 ## UI
 
-- Basic widgets (button, label, text input)
-- Layout
-  - Containers
+- ~~Layout~~
+  - ~~Containers~~
     - ~~VerticalContainer~~
     - ~~HorizontalContainer~~
     - ~~GridContainer~~
     - ~~FlexContainer~~
-  - Positioning (anchors)
+  - ~~Positioning (anchors)~~
+- ~~Move layouting to Render instead of Update, use Update for input.~~
 - Input propagation
 - Basic input elements (button, text field, toggle).
-- Styling.
+- Styling
+  - Add style settings for UI panels (for buttons, labels, etc.).
+  - Find a way to reference external assets in the style (fonts, textures).
+  - Create a default style for widgets.

TestGame/TestGame.cs

@@ -56,7 +56,9 @@ public class TestGame : Game
         Input.AddInputMapping("reload", new IInputAction[] { new KeyInputAction(KeyboardKey.R) });
         _emitterId = _particleSystem.CreateEmitter(Renderer.WindowSize / 2, _fireEffect);
 
-        _uiSystem.AddElement(_container);
+        _frame.AddChild(_container);
+
+        _uiSystem.AddElement(_frame);
     }
 
 
@@ -78,18 +80,24 @@ public class TestGame : Game
             var lastChild = _container.Children.Last();
             _container.RemoveChild(lastChild);
         }
+
+        if (Input.IsMouseButtonDown(MouseButton.Left))
+        {
+            var mousePos = Input.GetMousePosition();
+            _frame.Size = new Rect(mousePos.X, mousePos.Y);
+        }
     }
 
     protected override void Render(double deltaTime)
     {
-        Renderer.ClearBackground(Color.Black);
-        foreach (var emitter in _particleSystem!.Emitters)
-        {
-            DrawEmitter(emitter);
-        }
+        Renderer.ClearBackground(Color.CadetBlue);
+        // foreach (var emitter in _particleSystem!.Emitters)
+        // {
+        //     DrawEmitter(emitter);
+        // }
 
-        Renderer.ResetTransform();
-        _uiSystem.Render(Renderer);
+        // Renderer.ResetTransform();
+        // _uiSystem.Render(Renderer);
     }
 
     private void DrawEmitter(ParticleEmitter emitter)
@@ -121,12 +129,20 @@ public class TestGame : Game
 
     private FlexContainer _container = new(minimumSize: new Rect(64.0f, 64.0f), new())
     {
-        ConfineToContents = false,
+        Anchor = Anchor.Center,
         Size = new Rect(500, 300),
-        Direction = FlexDirection.Row,
+        Direction = FlexDirection.Column,
         Justify = JustifyContent.Start,
         Align = AlignItems.Center,
         Wrap = true,
         Gap = 10f
     };
+
+    private Frame _frame = new();
+    // private VerticalContainer _container = new(new Rect(128.0f, 64.0f), new(), 16)
+    // {
+    //     ConfineToContents = true,
+    //     Anchor = Anchor.CenterLeft,
+    //     AnchorOffset = new Vector2(0.5f, 0.0f)
+    // };
 }

TestGame/TestGame.csproj

@@ -2,7 +2,7 @@
 
     <PropertyGroup>
         <OutputType>WinExe</OutputType>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>net9.0</TargetFramework>
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>disable</Nullable>
         <PublishAot>true</PublishAot>

Voile.OpenAL/Voile.OpenAL.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>net9.0</TargetFramework>
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>enable</Nullable>
         <AllowUnsafeBlocks>true</AllowUnsafeBlocks>

Voile/Source/Game.cs

@@ -108,7 +108,7 @@ namespace Voile
 
             if (Renderer is null)
             {
-                Renderer = new RaylibRenderSystem();
+                Renderer = new StandardRenderSystem();
             }
 
             if (Input is null)
@@ -164,6 +164,11 @@ namespace Voile
                 throw new NullReferenceException("No renderer provided.");
             }
 
+            if (Input is null)
+            {
+                throw new NullReferenceException("No input system provided.");
+            }
+
             Stopwatch stopwatch = Stopwatch.StartNew();
             double previousTime = stopwatch.Elapsed.TotalSeconds;
 
@@ -175,6 +180,8 @@ namespace Voile
 
                 _accumulator += elapsedTime;
 
+                Input.Poll();
+
                 while (_accumulator >= UpdateTimeStep)
                 {
                     foreach (var system in _updatableSystems)

Voile/Source/Input/InputSystem.cs

@@ -20,6 +20,12 @@ namespace Voile.Input
             CreateDefaultMappings();
         }
 
+        /// <summary>
+        /// Forces this input system to poll all of its inputs during current frame.<br />
+        /// Some backends require inputs to be polled once per specific interval. Override this method to implement this behavior. 
+        /// </summary>
+        public virtual void Poll() { }
+
         public void Shutdown() => Dispose();
 
         public void Dispose() => GC.SuppressFinalize(this);

Voile/Source/Input/RaylibInputSystem.cs

@@ -8,63 +8,63 @@ namespace Voile.Input
     /// </summary>
     public class RaylibInputSystem : InputSystem
     {
-        public override int GetCharPressed()
+        public override void Poll()
         {
-            return Raylib.GetCharPressed();
+            _justPressedKeys.Clear();
+            _justReleasedKeys.Clear();
+            _downKeys.Clear();
+
+            _pressedMouseButtons.Clear();
+            _releasedMouseButtons.Clear();
+            _downMouseButtons.Clear();
+
+            for (int key = 32; key <= 349; key++)
+            {
+                var k = (KeyboardKey)key;
+                if (Raylib.IsKeyPressed((Raylib_cs.KeyboardKey)k)) _justPressedKeys.Add(k);
+                if (Raylib.IsKeyReleased((Raylib_cs.KeyboardKey)k)) _justReleasedKeys.Add(k);
+                if (Raylib.IsKeyDown((Raylib_cs.KeyboardKey)k)) _downKeys.Add(k);
             }
 
-        public override Vector2 GetMousePosition()
+            foreach (MouseButton button in System.Enum.GetValues(typeof(MouseButton)))
             {
-            return Raylib.GetMousePosition();
+                var rayButton = (Raylib_cs.MouseButton)button;
+                if (Raylib.IsMouseButtonPressed(rayButton)) _pressedMouseButtons.Add(button);
+                if (Raylib.IsMouseButtonReleased(rayButton)) _releasedMouseButtons.Add(button);
+                if (Raylib.IsMouseButtonDown(rayButton)) _downMouseButtons.Add(button);
             }
 
-        public override float GetMouseWheelMovement()
-        {
-            return Raylib.GetMouseWheelMove();
+            _mousePosition = Raylib.GetMousePosition();
+            _mouseWheelMove = Raylib.GetMouseWheelMove();
         }
 
-        public override void HideCursor()
-        {
-            Raylib.HideCursor();
-        }
+        public override int GetCharPressed() => Raylib.GetCharPressed();
+        public override Vector2 GetMousePosition() => _mousePosition;
+        public override float GetMouseWheelMovement() => _mouseWheelMove;
 
-        public override bool IsKeyboardKeyDown(KeyboardKey key)
-        {
-            Raylib_cs.KeyboardKey rayKey = (Raylib_cs.KeyboardKey)key;
-            return Raylib.IsKeyDown(rayKey);
-        }
-
-        public override bool IsMousePressed(MouseButton button)
-        {
-            return Raylib.IsMouseButtonPressed((Raylib_cs.MouseButton)button);
-        }
-
-        public override bool IsMouseButtonReleased(MouseButton button)
-        {
-            return Raylib.IsMouseButtonReleased((Raylib_cs.MouseButton)button);
-        }
-
-        public override bool IsMouseButtonDown(MouseButton button)
-        {
-            return Raylib.IsMouseButtonDown((Raylib_cs.MouseButton)button);
-        }
-
-        public override bool KeyboardKeyJustPressed(KeyboardKey key)
-        {
-            Raylib_cs.KeyboardKey rayKey = (Raylib_cs.KeyboardKey)key;
-            return Raylib.IsKeyPressed(rayKey);
-        }
-
-        public override bool KeyboardKeyJustReleased(KeyboardKey key)
-        {
-            return Raylib.IsKeyReleased((Raylib_cs.KeyboardKey)key);
-        }
-
-        public override void SetMousePosition(Vector2 position)
-        {
-            Raylib.SetMousePosition((int)position.X, (int)position.Y);
-        }
+        public override void HideCursor() => Raylib.HideCursor();
         public override void ShowCursor() => Raylib.ShowCursor();
         public override bool IsCursorHidden() => Raylib.IsCursorHidden();
+
+        public override bool IsKeyboardKeyDown(KeyboardKey key) => _downKeys.Contains(key);
+        public override bool KeyboardKeyJustPressed(KeyboardKey key) => _justPressedKeys.Contains(key);
+        public override bool KeyboardKeyJustReleased(KeyboardKey key) => _justReleasedKeys.Contains(key);
+
+        public override bool IsMousePressed(MouseButton button) => _pressedMouseButtons.Contains(button);
+        public override bool IsMouseButtonReleased(MouseButton button) => _releasedMouseButtons.Contains(button);
+        public override bool IsMouseButtonDown(MouseButton button) => _downMouseButtons.Contains(button);
+
+        public override void SetMousePosition(Vector2 position) => Raylib.SetMousePosition((int)position.X, (int)position.Y);
+
+        private readonly HashSet<KeyboardKey> _justPressedKeys = new();
+        private readonly HashSet<KeyboardKey> _justReleasedKeys = new();
+        private readonly HashSet<KeyboardKey> _downKeys = new();
+
+        private readonly HashSet<MouseButton> _pressedMouseButtons = new();
+        private readonly HashSet<MouseButton> _releasedMouseButtons = new();
+        private readonly HashSet<MouseButton> _downMouseButtons = new();
+
+        private Vector2 _mousePosition;
+        private float _mouseWheelMove;
     }
 }

Voile/Source/Rendering/RaylibRenderSystem.cs

@@ -49,6 +49,7 @@ namespace Voile.Rendering
             _defaultFlags = flags;
 
             Raylib.SetConfigFlags(flags);
+            Raylib.SetTargetFPS(settings.TargetFps);
         }
 
         public override void CreateAndInitializeWithWindow(RendererSettings settings)

Voile/Source/Rendering/StandardRenderSystem.cs

@@ -363,7 +363,7 @@ namespace Voile.Rendering
 
         private Silk.NET.WebGPU.Color VoileColorToWebGPUColor(Color color)
         {
-            return new Silk.NET.WebGPU.Color(color.R, color.G, color.B, color.A);
+            return new Silk.NET.WebGPU.Color((double)color.R / 255, (double)color.G / 255, (double)color.B / 255, (double)color.A / 255);
         }
 
         private unsafe RenderPassColorAttachment CreateClearColorAttachment(TextureView* view, Color clearColor)

Voile/Source/UI/Anchor.cs

@@ -0,0 +1,41 @@
+using System.Numerics;
+
+namespace Voile.UI;
+
+public enum Anchor
+{
+    TopLeft,
+    TopCenter,
+    TopRight,
+    CenterLeft,
+    Center,
+    CenterRight,
+    BottomLeft,
+    BottomCenter,
+    BottomRight,
+    Fill
+}
+
+
+public static class AnchorExtensions
+{
+    public static Vector2 Calculate(this Anchor anchor, Vector2 parentPosition, Rect parentRect, Rect elementRect)
+    {
+        var size = new Vector2(elementRect.Width, elementRect.Height);
+        var parentSize = new Vector2(parentRect.Width, parentRect.Height);
+
+        return anchor switch
+        {
+            Anchor.TopLeft => Vector2.Zero,
+            Anchor.TopCenter => new Vector2((parentSize.X - size.X) / 2, 0),
+            Anchor.TopRight => new Vector2(parentSize.X - size.X, 0),
+            Anchor.CenterLeft => new Vector2(0, (parentSize.Y - size.Y) / 2),
+            Anchor.Center => (parentSize - size) / 2,
+            Anchor.CenterRight => new Vector2(parentSize.X - size.X, (parentSize.Y - size.Y) / 2),
+            Anchor.BottomLeft => new Vector2(0, parentSize.Y - size.Y),
+            Anchor.BottomCenter => new Vector2((parentSize.X - size.X) / 2, parentSize.Y - size.Y),
+            Anchor.BottomRight => parentSize - size,
+            _ => Vector2.Zero
+        };
+    }
+}

Voile/Source/UI/Containers/Container.cs

@@ -3,48 +3,22 @@ using Voile.Rendering;
 
 namespace Voile.UI.Containers;
 
+// TODO: make Container extend Widget, it already implements similar behaviors. 
 /// <summary>
 /// A base class for all UI containers, used to position and rendering child <see cref="IElement">s.
 /// </summary>
-public abstract class Container : IElement, IParentableElement, IUpdatableElement, IResizeableElement, IRenderableElement
+public abstract class Container : UIElement, IParentableElement
 {
     /// <inheritdoc />
-    public IReadOnlyList<IElement> Children => _children;
-    /// <inheritdoc />
-    public Vector2 Position { get; set; }
-    /// <inheritdoc />
-    public Rect MinimumRect { get; set; } = Rect.Zero;
-    /// <inheritdoc />
-    public Rect Size
-    {
-        get => _size;
-        set
-        {
-            _size = value;
-
-            if (value.Width < MinimumRect.Width)
-            {
-                _size.Width = MinimumRect.Width;
-            }
-
-            if (value.Height < MinimumRect.Height)
-            {
-                _size.Height = MinimumRect.Height;
-            }
-
-            MarkDirty();
-        }
-    }
-    /// <inheritdoc />
-    public bool Visible { get; set; } = true;
-    /// <inheritdoc />
-    public bool Dirty => _isDirty;
+    public IReadOnlyList<UIElement> Children => _children;
 
     /// <summary>
     /// Specifies if this <see cref="Container"/>'s minimum size will be confined to contents.
     /// </summary>
     public bool ConfineToContents { get; set; } = false;
 
+    public override Rect MinimumSize => _minimumSize;
+
     public Container()
     {
         MarkDirty();
@@ -52,29 +26,32 @@ public abstract class Container : IElement, IParentableElement, IUpdatableElemen
 
     public Container(Rect minimumSize)
     {
-        MinimumRect = minimumSize;
+        _minimumSize = minimumSize;
 
         MarkDirty();
     }
 
-    public Container(Rect minimumSize, List<IElement> children)
+    public Container(Rect minimumSize, List<UIElement> children)
     {
-        MinimumRect = minimumSize;
+        _minimumSize = minimumSize;
         _children = children;
 
         MarkDirty();
     }
 
-    public void Update()
+    protected override void OnUpdate()
     {
-        if (!_isDirty) return;
-        _isDirty = false;
-
-
         foreach (var child in _children)
         {
             if (child is not IUpdatableElement updatable) continue;
+
+            updatable.MarkDirty();
             updatable.Update();
+
+            if (child is IAnchorableElement anchorable)
+            {
+                anchorable.ApplyAnchor(GlobalPosition, Size);
+            }
         }
 
         Arrange();
@@ -85,8 +62,6 @@ public abstract class Container : IElement, IParentableElement, IUpdatableElemen
         }
     }
 
-    public void MarkDirty() => _isDirty = true;
-
     /// <summary>
     /// Called when this <see cref="Container"/> has to rearrange its children.
     /// </summary>
@@ -105,7 +80,7 @@ public abstract class Container : IElement, IParentableElement, IUpdatableElemen
 
         foreach (var child in Children)
         {
-            var pos = child.Position;
+            var pos = child.GlobalPosition;
             var size = child.Size;
 
             minX = MathF.Min(minX, pos.X);
@@ -119,26 +94,27 @@ public abstract class Container : IElement, IParentableElement, IUpdatableElemen
         float occupiedWidth = (maxX - minX) + padding * 2;
         float occupiedHeight = (maxY - minY) + padding * 2;
 
-        float finalWidth = MathF.Max(occupiedWidth, MinimumRect.Width);
-        float finalHeight = MathF.Max(occupiedHeight, MinimumRect.Height);
+        float finalWidth = MathF.Max(occupiedWidth, _minimumSize.Width);
+        float finalHeight = MathF.Max(occupiedHeight, _minimumSize.Height);
 
-        MinimumRect = new Rect(finalWidth, finalHeight);
+        Size = new Rect(finalWidth, finalHeight);
 
-        if (MinimumRect > _size)
+        if (_minimumSize > Size)
         {
-            _size = MinimumRect;
+            Size = _minimumSize;
         }
     }
 
-    public void AddChild(IElement child)
+    public void AddChild(UIElement child)
     {
         _children.Add(child);
+        child.SetParent(this);
 
         MarkDirty();
         Update();
     }
 
-    public void RemoveChild(IElement child)
+    public void RemoveChild(UIElement child)
     {
         _children.Remove(child);
 
@@ -146,7 +122,7 @@ public abstract class Container : IElement, IParentableElement, IUpdatableElemen
         Update();
     }
 
-    public void Render(RenderSystem renderer, Style style)
+    public override void Render(RenderSystem renderer, Style style)
     {
         foreach (var child in Children)
         {
@@ -155,13 +131,6 @@ public abstract class Container : IElement, IParentableElement, IUpdatableElemen
         }
     }
 
-    public void DrawSize(RenderSystem renderer)
-    {
-        renderer.SetTransform(Position, Vector2.Zero);
-        renderer.DrawRectangleOutline(new Vector2(Size.Width, Size.Height), Color.Red, 2.0f);
-    }
-
-    private List<IElement> _children = new();
-    private bool _isDirty;
-    private Rect _size = Rect.Zero;
+    private List<UIElement> _children = new();
+    private Rect _minimumSize = Rect.Zero;
 }

Voile/Source/UI/Containers/FlexContainer.cs

@@ -78,16 +78,16 @@ public class FlexContainer : Container
 
     public FlexContainer() : base() { }
 
-    public FlexContainer(Rect minimumSize, List<IElement> children) : base(minimumSize, children) { }
+    public FlexContainer(Rect minimumSize, List<UIElement> children) : base(minimumSize, children) { }
 
     public override void Arrange()
     {
         float containerMainSize = (Direction == FlexDirection.Row) ? Size.Width : Size.Height;
-        float mainPos = (Direction == FlexDirection.Row) ? Position.X : Position.Y;
-        float crossPos = (Direction == FlexDirection.Row) ? Position.Y : Position.X;
+        float mainPos = 0.0f;
+        float crossPos = 0.0f;
 
-        List<List<IElement>> lines = new();
-        List<IElement> currentLine = new();
+        List<List<UIElement>> lines = new();
+        List<UIElement> currentLine = new();
         float lineMainSum = 0f;
         float maxCross = 0f;
 
@@ -136,7 +136,7 @@ public class FlexContainer : Container
                     ? new Vector2(currentMain, alignedCross)
                     : new Vector2(alignedCross, currentMain);
 
-                child.Position = childPos;
+                child.LocalPosition = childPos;
 
                 currentMain += GetMainSize(childSize) + Gap;
             }
@@ -148,7 +148,7 @@ public class FlexContainer : Container
     private Vector2 GetChildSize(IElement child)
     {
         if (child is IResizeableElement resizeable)
-            return new Vector2(resizeable.MinimumRect.Width, resizeable.MinimumRect.Height);
+            return new Vector2(resizeable.MinimumSize.Width, resizeable.MinimumSize.Height);
         return new Vector2(child.Size.Width, child.Size.Height);
     }
 

Voile/Source/UI/Containers/Frame.cs

@@ -0,0 +1,19 @@
+namespace Voile.UI.Containers;
+
+public class Frame : Container
+{
+    public Frame()
+    {
+
+    }
+
+    public Frame(Rect minimumSize) : base(minimumSize)
+    {
+        
+    }
+
+    public override void Arrange()
+    {
+
+    }
+}

Voile/Source/UI/Containers/GridContainer.cs

@@ -21,7 +21,7 @@ public class GridContainer : Container
     /// </summary>
     public float RowSpacing { get; set; } = 16.0f;
 
-    public GridContainer(Rect minimumSize, List<IElement> children, int columns = 2, float colSpacing = 16.0f, float rowSpacing = 16.0f)
+    public GridContainer(Rect minimumSize, List<UIElement> children, int columns = 2, float colSpacing = 16.0f, float rowSpacing = 16.0f)
         : base(minimumSize, children)
     {
         Columns = columns;
@@ -38,16 +38,13 @@ public class GridContainer : Container
 
     public override void Arrange()
     {
-        float startX = Position.X;
-        float startY = Position.Y;
-
-        float currentX = startX;
-        float currentY = startY;
+        float currentX = 0.0f;
+        float currentY = 0.0f;
         int colIndex = 0;
 
         foreach (var child in Children)
         {
-            child.Position = new Vector2(currentX, currentY);
+            child.LocalPosition = new Vector2(currentX, currentY);
 
             float childWidth = 0.0f;
             float childHeight = 0.0f;
@@ -60,7 +57,7 @@ public class GridContainer : Container
             if (colIndex >= Columns)
             {
                 colIndex = 0;
-                currentX = startX;
+                currentX = 0.0f;
                 currentY += childHeight + RowSpacing;
             }
             else

Voile/Source/UI/Containers/HorizontalContainer.cs

@@ -13,7 +13,7 @@ public class HorizontalContainer : Container
     /// </summary>
     public float Spacing { get; set; } = 16.0f;
 
-    public HorizontalContainer(Rect minimumSize, List<IElement> children, float spacing = 16.0f) : base(minimumSize, children)
+    public HorizontalContainer(Rect minimumSize, List<UIElement> children, float spacing = 16.0f) : base(minimumSize, children)
     {
         Spacing = spacing;
     }
@@ -25,13 +25,13 @@ public class HorizontalContainer : Container
 
     public override void Arrange()
     {
-        float currentX = Position.X;
+        float currentX = 0.0f;
 
         for (int i = 0; i < Children.Count; i++)
         {
             var child = Children[i];
-            var pos = new Vector2(currentX, Position.Y);
-            child.Position = pos;
+            var pos = new Vector2(currentX, 0.0f);
+            child.LocalPosition = pos;
 
             currentX += child.Size.Width;
 

Voile/Source/UI/Containers/VerticalContainer.cs

@@ -13,7 +13,7 @@ public class VerticalContainer : Container
     /// </summary>
     public float Spacing { get; set; } = 16.0f;
 
-    public VerticalContainer(Rect minimumSize, List<IElement> children, float spacing = 16.0f) : base(minimumSize, children)
+    public VerticalContainer(Rect minimumSize, List<UIElement> children, float spacing = 16.0f) : base(minimumSize, children)
     {
         Spacing = spacing;
     }
@@ -25,13 +25,13 @@ public class VerticalContainer : Container
 
     public override void Arrange()
     {
-        float currentY = Position.Y;
+        float currentY = 0.0f;
 
         for (int i = 0; i < Children.Count; i++)
         {
             var child = Children[i];
-            var pos = new Vector2(Position.X, currentY);
-            child.Position = pos;
+            var pos = new Vector2(0.0f, currentY);
+            child.LocalPosition = pos;
 
             currentY += child.Size.Height;
 

Voile/Source/UI/IElement.cs

@@ -9,7 +9,7 @@ public interface IElement
     /// <summary>
     /// This element's position in pixels relative to the viewport top-left edge.
     /// </summary>
-    public Vector2 Position { get; set; }
+    public Vector2 GlobalPosition { get; }
     /// <summary>
     /// The size of this element.
     /// </summary>
@@ -21,17 +21,17 @@ public interface IParentableElement
     /// <summary>
     /// This parentable element's children.
     /// </summary>
-    public IReadOnlyList<IElement> Children { get; }
+    public IReadOnlyList<UIElement> Children { get; }
     /// <summary>
     /// Add a child element to this element.
     /// </summary>
-    /// <param name="child">Child <see cref="IElement"/>.</param>
-    public void AddChild(IElement child);
+    /// <param name="child">Child <see cref="UIElement"/>.</param>
+    public void AddChild(UIElement child);
     /// <summary>
     /// Remove a child element from this element.
     /// </summary>
-    /// <param name="child">Child <see cref="IElement"/> to remove.</param>
-    public void RemoveChild(IElement child);
+    /// <param name="child">Child <see cref="UIElement"/> to remove.</param>
+    public void RemoveChild(UIElement child);
 }
 
 public interface IResizeableElement
@@ -39,7 +39,7 @@ public interface IResizeableElement
     /// <summary>
     /// Get a minimum rectangle size for this element.
     /// </summary>
-    public abstract Rect MinimumRect { get; }
+    public abstract Rect MinimumSize { get; }
 }
 
 public interface IUpdatableElement
@@ -89,3 +89,10 @@ public interface IInputElement
     /// <param name="action">Input action to send.</param>
     void Input(UIInputContext action);
 }
+
+public interface IAnchorableElement
+{
+    public Anchor Anchor { get; set; }
+    public Vector2 AnchorOffset { get; set; }
+    public void ApplyAnchor(Vector2 parentPosition, Rect parentRect);
+}

Voile/Source/UI/UIElement.cs

@@ -0,0 +1,95 @@
+using System.Numerics;
+using Voile.Rendering;
+
+namespace Voile.UI;
+
+public abstract class UIElement : IElement, IRenderableElement, IResizeableElement, IUpdatableElement, IAnchorableElement
+{
+    public bool Visible { get; set; } = true;
+    public bool IgnoreInput { get; set; } = false;
+    public Vector2 LocalPosition { get; set; } = Vector2.Zero;
+    public Vector2 GlobalPosition => _parent?.GlobalPosition + LocalPosition ?? LocalPosition;
+
+    public Rect Size
+    {
+        get => _size;
+        set
+        {
+            _size = value;
+
+            if (value.Width < MinimumSize.Width)
+            {
+                _size.Width = MinimumSize.Width;
+            }
+
+            if (value.Height < MinimumSize.Height)
+            {
+                _size.Height = MinimumSize.Height;
+            }
+
+            MarkDirty();
+        }
+    }
+    public Vector2 AnchorOffset { get; set; } = Vector2.Zero;
+    public Anchor Anchor { get; set; } = Anchor.TopLeft;
+
+    public abstract Rect MinimumSize { get; }
+    public bool Dirty => _dirty;
+
+    public virtual void MarkDirty() => _dirty = true;
+
+    public void SetParent(UIElement parent)
+    {
+        _parent = parent;
+    }
+
+    public void Update()
+    {
+        if (!_dirty) return;
+        _dirty = false;
+
+        if (Size == Rect.Zero)
+            Size = MinimumSize;
+
+        OnUpdate();
+
+        if (_parent is not null && _parent.Size != Rect.Zero)
+        {
+            ApplyAnchor(_parent.GlobalPosition, _parent.Size);
+        }
+    }
+
+    public abstract void Render(RenderSystem renderer, Style style);
+    protected abstract void OnUpdate();
+
+    public void DrawSize(RenderSystem renderer)
+    {
+        renderer.SetTransform(GlobalPosition, Vector2.Zero);
+        renderer.DrawRectangleOutline(new Vector2(Size.Width, Size.Height), Color.Red, 2.0f);
+    }
+
+    /// <summary>
+    /// Determines if this <see cref="UIElement"/> contains a point within its confines.
+    /// </summary>
+    /// <param name="pointPosition">A global position of the point.</param>
+    /// <returns>True if the point is inside the widget; otherwise, false.</returns>
+    public bool ContainsPoint(Vector2 point)
+    {
+        return point.X >= GlobalPosition.X && point.Y >= GlobalPosition.Y &&
+               point.X <= GlobalPosition.X + Size.Width &&
+               point.Y <= GlobalPosition.Y + Size.Height;
+    }
+
+    /// <summary>
+    /// Applies this <see cref="UIElement"/> anchor.
+    /// </summary>
+    public virtual void ApplyAnchor(Vector2 parentPosition, Rect parentRect)
+    {
+        LocalPosition = Anchor.Calculate(parentPosition, parentRect, Size) + new Vector2(AnchorOffset.X, AnchorOffset.Y);
+    }
+
+    private bool _dirty = true;
+    private Rect _size = Rect.Zero;
+
+    private UIElement? _parent;
+}

Voile/Source/UI/UISystem.cs

@@ -22,29 +22,30 @@ public class UISystem : IUpdatableSystem, IRenderableSystem
         _style = style;
     }
 
-    public UISystem(InputSystem inputSystem, ResourceRef<Style> style, List<IElement> elements)
+    public UISystem(InputSystem inputSystem, ResourceRef<Style> style, List<UIElement> elements)
     {
         _input = inputSystem;
         _style = style;
         _elements = elements;
     }
 
-    public void AddElement(IElement element) => _elements.Add(element);
-    public void RemoveElement(IElement element) => _elements.Remove(element);
+    public void AddElement(UIElement element) => _elements.Add(element);
+    public void RemoveElement(UIElement element) => _elements.Remove(element);
 
     public void Update(double deltaTime)
     {
         HandleInput();
+    }
 
+    public void Render(RenderSystem renderer)
+    {
+        // Update elements each time UI system is rendered.
         foreach (var element in _elements)
         {
             if (element is not IUpdatableElement updatable) continue;
             updatable.Update();
         }
-    }
 
-    public void Render(RenderSystem renderer)
-    {
         foreach (var element in _elements)
         {
             if (element is IRenderableElement renderable)
@@ -115,7 +116,7 @@ public class UISystem : IUpdatableSystem, IRenderableSystem
         }
     }
 
-    private bool PropagateInput(List<IElement> elements, UIInputContext context)
+    private bool PropagateInput(List<UIElement> elements, UIInputContext context)
     {
         for (int i = elements.Count - 1; i >= 0; i--)
         {
@@ -139,7 +140,7 @@ public class UISystem : IUpdatableSystem, IRenderableSystem
     }
 
     private ResourceRef<Style> _style;
-    private List<IElement> _elements = new();
+    private List<UIElement> _elements = new();
     private InputSystem _input;
 
     private Vector2 _lastMousePosition = Vector2.Zero;

Voile/Source/UI/Widgets/Button.cs

@@ -18,7 +18,7 @@ public enum ButtonState
 public class Button : Widget
 {
     public string Label { get; set; } = "Button";
-    public override Rect MinimumRect => new Rect(Width: 128.0f, Height: 64.0f);
+    public override Rect MinimumSize => new Rect(Width: 128.0f, Height: 64.0f);
 
     public Button(string label, Action pressedAction)
     {
@@ -29,8 +29,8 @@ public class Button : Widget
     public override void Render(RenderSystem renderer, Style style)
     {
         // TODO: use a button color from style.
-        renderer.SetTransform(Position, Vector2.Zero);
-        renderer.DrawRectangle(new Vector2(MinimumRect.Width, MinimumRect.Height), new Color(0.25f, 0.25f, 0.25f));
+        renderer.SetTransform(GlobalPosition, Vector2.Zero);
+        renderer.DrawRectangle(new Vector2(MinimumSize.Width, MinimumSize.Height), new Color(0.25f, 0.25f, 0.25f));
     }
 
     protected override void OnInput(UIInputContext action)
@@ -38,5 +38,10 @@ public class Button : Widget
 
     }
 
+    protected override void OnUpdate()
+    {
+        throw new NotImplementedException();
+    }
+
     private Action _pressedAction;
 }

Voile/Source/UI/Widgets/Label.cs

@@ -6,7 +6,7 @@ namespace Voile.UI.Widgets;
 
 public class Label : Widget
 {
-    public override Rect MinimumRect => throw new NotImplementedException();
+    public override Rect MinimumSize => throw new NotImplementedException();
 
     public string Text { get; set; } = "Hello World!";
 
@@ -30,9 +30,14 @@ public class Label : Widget
     {
         // TODO: use style here.
         if (!_fontOverride.HasValue) return;
-        renderer.SetTransform(Position, Vector2.Zero);
+        renderer.SetTransform(GlobalPosition, Vector2.Zero);
         renderer.DrawText(_fontOverride, Text, Color.White);
     }
 
+    protected override void OnUpdate()
+    {
+        throw new NotImplementedException();
+    }
+
     private ResourceRef<Font> _fontOverride = ResourceRef<Font>.Empty();
 }

Voile/Source/UI/Widgets/RectangleWidget.cs

@@ -6,11 +6,11 @@ namespace Voile.UI.Widgets;
 
 public class RectangleWidget : Widget
 {
-    public override Rect MinimumRect { get; }
+    public override Rect MinimumSize { get; }
     public Color Color { get; set; } = Color.White;
     public RectangleWidget(Rect minimumRect, Color color) : base()
     {
-        MinimumRect = minimumRect;
+        MinimumSize = minimumRect;
         Color = color;
 
         _defaultColor = color;
@@ -22,7 +22,7 @@ public class RectangleWidget : Widget
 
     public override void Render(RenderSystem renderer, Style style)
     {
-        renderer.SetTransform(Position, Vector2.Zero);
+        renderer.SetTransform(GlobalPosition, Vector2.Zero);
         renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), Color);
     }
 
@@ -49,15 +49,15 @@ public class RectangleWidget : Widget
             Color = _defaultColor;
         }
 
-        if (mouseInside && inputContext.MouseDown)
-        {
-            Size = _downSize;
-        }
+        // if (mouseInside && inputContext.MouseDown)
+        // {
+        //     Size = _downSize;
+        // }
 
-        if (mouseInside && inputContext.MouseReleased)
-        {
-            Size = _defaultSize;
-        }
+        // if (mouseInside && inputContext.MouseReleased)
+        // {
+        //     Size = _defaultSize;
+        // }
 
         if (mouseInside && inputContext.MousePressed)
         {
@@ -65,6 +65,11 @@ public class RectangleWidget : Widget
         }
     }
 
+    protected override void OnUpdate()
+    {
+
+    }
+
     private Color _defaultColor;
     private Color _hoverColor;
 

Voile/Source/UI/Widgets/Widget.cs

@@ -7,13 +7,8 @@ namespace Voile.UI.Widgets;
 /// <summary>
 /// A base class for all UI widgets.
 /// </summary>
-public abstract class Widget : IElement, IRenderableElement, IInputElement, IResizeableElement, IUpdatableElement
+public abstract class Widget : UIElement, IInputElement
 {
-    public bool Visible { get; set; } = true;
-    public bool IgnoreInput { get; set; }
-    public Vector2 Position { get; set; } = Vector2.Zero;
-    public Rect Size { get; set; } = new();
-
     public Widget()
     {
         MarkDirty();
@@ -27,64 +22,22 @@ public abstract class Widget : IElement, IRenderableElement, IInputElement, IRes
 
     public Widget(Vector2 position)
     {
-        Position = position;
+        LocalPosition = position;
         MarkDirty();
     }
 
-    /// </inheritdoc>
-    public abstract Rect MinimumRect { get; }
-
-    public bool Dirty => _isDirty;
-
-    /// <summary>
-    /// Called when its time to draw this widget.
-    /// </summary>
-    /// <param name="renderer"></param>
-    public abstract void Render(RenderSystem renderer, Style style);
-
     public void Input(UIInputContext context)
     {
-        if (context.Handled) return;
+        if (context.Handled || IgnoreInput) return;
+        if (ContainsPoint(context.MousePosition))
+        {
             OnInput(context);
         }
+    }
 
     /// <summary>
     /// Called when this widget receives input.
     /// </summary>
     /// <param name="action">An input action this widget received.</param>
-    protected abstract void OnInput(UIInputContext action);
-
-    public void Update()
-    {
-        if (!_isDirty) return;
-        _isDirty = false;
-
-        if (Size == Rect.Zero)
-        {
-            Size = MinimumRect;
-        }
-    }
-
-    public void MarkDirty() => _isDirty = true;
-
-    public void DrawSize(RenderSystem renderer)
-    {
-        renderer.SetTransform(Position, Vector2.Zero);
-        renderer.DrawRectangleOutline(new Vector2(Size.Width, Size.Height), Color.Red, 2.0f);
-    }
-
-    /// <summary>
-    /// Determines if this <see cref="Widget"/> contains a point within its confines.
-    /// </summary>
-    /// <param name="pointPosition">A global position of the point.</param>
-    /// <returns>True if the point is inside the widget; otherwise, false.</returns>
-    public bool ContainsPoint(Vector2 pointPosition)
-    {
-        return pointPosition.X >= Position.X &&
-               pointPosition.Y >= Position.Y &&
-               pointPosition.X <= Position.X + Size.Width &&
-               pointPosition.Y <= Position.Y + Size.Height;
-    }
-
-    private bool _isDirty = true;
+    protected abstract void OnInput(UIInputContext context);
 }

Voile/Voile.csproj

@@ -2,7 +2,7 @@
 
     <PropertyGroup>
         <OutputType>Library</OutputType>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>net9.0</TargetFramework>
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>enable</Nullable>
         <AllowUnsafeBlocks>true</AllowUnsafeBlocks>