Colors, Container and more

samples/Sample7_FlyUI/FlyUISampleExtension.cs

@@ -7,6 +7,11 @@ public class FlyUiSampleExtension : WasmExtension
     public override void OnInitialized()
     {
         WindowContentElement content = new WindowContentElement();
-        Api.WindowProvider.CreatePopupWindow("Sample Window", content).Show();
+        var popup = Api.WindowProvider.CreatePopupWindow("Sample Window", content);
+
+        popup.Width = 800;
+        popup.Height = 720;
+        
+        popup.Show();
     }
 }

samples/Sample7_FlyUI/WindowContentElement.cs

@@ -10,16 +10,23 @@ public class WindowContentElement : StatelessElement
     public override CompiledControl BuildNative()
     {
         Layout layout = new Layout(body:
-            new Column(
-                new Center(
-                    new Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae neque nibh. Duis sed pharetra dolor. Donec dui sapien, aliquam id sodales in, ornare et urna. Mauris nunc odio, sagittis eget lectus at, imperdiet ornare quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod pellentesque blandit. Vestibulum sagittis, ligula non finibus lobortis, dolor lacus consectetur turpis, id facilisis ligula dolor vitae augue.",
-                        TextWrap.Wrap)
-                ),
-                new Align(
-                    alignment: Alignment.CenterRight, 
-                    child: new Text("- Paulo Coelho, The Alchemist (1233)")
-                    )
+            new Container(margin: Edges.All(25), child:
+                new Column(
+                    new Center(
+                        new Text(
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae neque nibh. Duis sed pharetra dolor. Donec dui sapien, aliquam id sodales in, ornare et urna. Mauris nunc odio, sagittis eget lectus at, imperdiet ornare quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod pellentesque blandit. Vestibulum sagittis, ligula non finibus lobortis, dolor lacus consectetur turpis, id facilisis ligula dolor vitae augue.",
+                            TextWrap.Wrap)
+                    ),
+                    new Align(
+                        alignment: Alignment.CenterRight,
+                        child: new Text("- Paulo Coelho, The Alchemist (1233)")
+                    ),
+                    new Container(
+                        margin: Edges.Symmetric(25, 0), 
+                        backgroundColor: Color.FromRgba(25, 25, 25, 255), 
+                        height: 200)
                 )
+            )
         );
 
         return layout.BuildNative();

src/PixiEditor.Extensions.CommonApi/FlyUI/Properties/Color.cs

@@ -0,0 +1,22 @@
+namespace PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+public struct Color
+{
+    public byte R { get; set; }
+    public byte G { get; set; }
+    public byte B { get; set; }
+    public byte A { get; set; }
+
+    public Color(byte r, byte g, byte b, byte a)
+    {
+        R = r;
+        G = g;
+        B = b;
+        A = a;
+    }
+
+    public static Color FromRgba(byte r, byte g, byte b, byte a)
+    {
+        return new Color(r, g, b, a);
+    }
+}

src/PixiEditor.Extensions.CommonApi/FlyUI/Properties/Colors.cs

@@ -0,0 +1,14 @@
+namespace PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+public static class Colors
+{
+    public static Color Black { get; } = new Color(0, 0, 0, 255);
+    public static Color White { get; } = new Color(255, 255, 255, 255);
+    public static Color Red { get; } = new Color(255, 0, 0, 255);
+    public static Color Green { get; } = new Color(0, 255, 0, 255);
+    public static Color Blue { get; } = new Color(0, 0, 255, 255);
+    public static Color Yellow { get; } = new Color(255, 255, 0, 255);
+    public static Color Cyan { get; } = new Color(0, 255, 255, 255);
+    public static Color Magenta { get; } = new Color(255, 0, 255, 255);
+    public static Color Transparent { get; } = new Color(0, 0, 0, 0);
+}

src/PixiEditor.Extensions.CommonApi/FlyUI/Properties/Edges.cs

@@ -0,0 +1,49 @@
+using System.Runtime.InteropServices;
+
+namespace PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+public struct Edges
+{
+    public double Left { get; set; }
+    public double Top { get; set; }
+    public double Right { get; set; }
+    public double Bottom { get; set; }
+
+    public Edges(double left, double top, double right, double bottom)
+    {
+        Left = left;
+        Top = top;
+        Right = right;
+        Bottom = bottom;
+    }
+    
+    public static Edges All(double value)
+    {
+        return new Edges(value, value, value, value);
+    }
+    
+    public static Edges Symmetric(double vertical, double horizontal)
+    {
+        return new Edges(horizontal, vertical, horizontal, vertical);
+    }
+    
+    public static Edges operator +(Edges a, Edges b)
+    {
+        return new Edges(a.Left + b.Left, a.Top + b.Top, a.Right + b.Right, a.Bottom + b.Bottom);
+    }
+    
+    public static Edges operator -(Edges a, Edges b)
+    {
+        return new Edges(a.Left - b.Left, a.Top - b.Top, a.Right - b.Right, a.Bottom - b.Bottom);
+    }
+    
+    public static Edges operator *(Edges a, double b)
+    {
+        return new Edges(a.Left * b, a.Top * b, a.Right * b, a.Bottom * b);
+    }
+    
+    public static Edges operator /(Edges a, double b)
+    {
+        return new Edges(a.Left / b, a.Top / b, a.Right / b, a.Bottom / b);
+    }
+}

src/PixiEditor.Extensions.Wasm/Api/FlyUI/CompiledControl.cs

@@ -1,4 +1,6 @@
-using System.Text;
+using System.Reflection;
+using System.Runtime.InteropServices;
+using System.Text;
 using PixiEditor.Extensions.CommonApi.FlyUI;
 
 namespace PixiEditor.Extensions.Wasm.Api.FlyUI;
@@ -92,7 +94,7 @@ public class CompiledControl
                 byte b => new byte[] { b },
                 char c => BitConverter.GetBytes(c),
                 string s => Encoding.UTF8.GetBytes(s),
-                null => Array.Empty<byte>(),
+                null => [],
                 _ => throw new Exception($"Unknown unmanaged type: {property.value.GetType()}")
             });
         }

src/PixiEditor.Extensions.Wasm/Api/FlyUI/Container.cs

@@ -0,0 +1,46 @@
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+namespace PixiEditor.Extensions.Wasm.Api.FlyUI;
+
+public class Container : SingleChildLayoutElement
+{
+    public Edges Margin { get; set; }
+    public Color BackgroundColor { get; set; }
+    
+    public double Width { get; set; }
+    public double Height { get; set; }
+
+    public Container(LayoutElement child = null, Edges margin = default, Color backgroundColor = default, double width = double.NaN, double height = double.NaN)
+    {
+        Margin = margin;
+        BackgroundColor = backgroundColor;
+        Width = width;
+        Height = height;
+        Child = child;
+    }
+    
+    public override CompiledControl BuildNative()
+    {
+        CompiledControl container = new CompiledControl(UniqueId, "Container");
+        container.AddProperty(Margin.Left);
+        container.AddProperty(Margin.Top);
+        container.AddProperty(Margin.Right);
+        container.AddProperty(Margin.Bottom);
+        
+        container.AddProperty(BackgroundColor.R);
+        container.AddProperty(BackgroundColor.G);
+        container.AddProperty(BackgroundColor.B);
+        container.AddProperty(BackgroundColor.A);
+        
+        container.AddProperty(Width);
+        container.AddProperty(Height);
+
+        if(Child != null)
+        {
+            container.AddChild(Child.BuildNative());
+        }
+
+        BuildPendingEvents(container);
+        return container;
+    }
+}

src/PixiEditor.Extensions/FlyUI/Converters/EdgesToThicknessConverter.cs

@@ -0,0 +1,29 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+namespace PixiEditor.Extensions.FlyUI.Converters;
+
+public class EdgesToThicknessConverter : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is Edges edges)
+        {
+            return new Thickness(edges.Left, edges.Top, edges.Right, edges.Bottom);
+        }
+
+        return null;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is Thickness thickness)
+        {
+            return new Edges(thickness.Left, thickness.Top, thickness.Right, thickness.Bottom);
+        }
+
+        return null;
+    }
+}

src/PixiEditor.Extensions/FlyUI/Converters/FlyUiColorToBrushConverter.cs

@@ -0,0 +1,23 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+using Color = PixiEditor.Extensions.CommonApi.FlyUI.Properties.Color;
+
+namespace PixiEditor.Extensions.FlyUI.Converters;
+
+public class FlyUiColorToBrushConverter : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is Color color)
+        {
+            return new SolidColorBrush(new Avalonia.Media.Color(color.A, color.R, color.G, color.B));
+        }
+        return null;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

src/PixiEditor.Extensions/FlyUI/Elements/Container.cs

@@ -0,0 +1,87 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Layout;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+using PixiEditor.Extensions.FlyUI.Converters;
+
+namespace PixiEditor.Extensions.FlyUI.Elements;
+
+public class Container : SingleChildLayoutElement, IPropertyDeserializable
+{
+    private Edges _margin = Edges.All(0);
+    private Color _backgroundColor = Colors.Transparent;
+    private double _width = double.NaN;
+    private double _height = double.NaN;
+    public Edges Margin { get => _margin; set => SetField(ref _margin, value); }
+    public Color BackgroundColor { get => _backgroundColor; set => SetField(ref _backgroundColor, value); }
+    public double Width { get => _width; set => SetField(ref _width, value); }
+    public double Height { get => _height; set => SetField(ref _height, value); }
+    
+    public override Control BuildNative()
+    {
+        Panel panel = new Panel();
+        
+        if(Child != null)
+        {
+            panel.Children.Add(Child.BuildNative());
+        }
+        
+        Binding marginBinding = new()
+        {
+            Source = this,
+            Path = nameof(Margin),
+            Converter = new EdgesToThicknessConverter(),
+        };
+        
+        Binding backgroundColorBinding = new()
+        {
+            Source = this,
+            Path = nameof(BackgroundColor),
+            Converter = new FlyUiColorToBrushConverter(),
+        };
+        
+        Binding widthBinding = new()
+        {
+            Source = this,
+            Path = nameof(Width),
+        };
+        
+        Binding heightBinding = new()
+        {
+            Source = this,
+            Path = nameof(Height),
+        };
+        
+        panel.Bind(Layoutable.MarginProperty, marginBinding);
+        panel.Bind(Panel.BackgroundProperty, backgroundColorBinding);
+        panel.Bind(Panel.WidthProperty, widthBinding);
+        panel.Bind(Panel.HeightProperty, heightBinding);
+        
+        return panel;
+    }
+
+    public IEnumerable<object> GetProperties()
+    {
+        yield return Margin.Left;
+        yield return Margin.Top;
+        yield return Margin.Right;
+        yield return Margin.Bottom;
+        
+        yield return BackgroundColor.R;
+        yield return BackgroundColor.G;
+        yield return BackgroundColor.B;
+        yield return BackgroundColor.A;
+        
+        yield return Width;
+        yield return Height;
+    }
+
+    public void DeserializeProperties(IEnumerable<object> values)
+    {
+        Margin = new Edges((double)values.ElementAt(0), (double)values.ElementAt(1), (double)values.ElementAt(2), (double)values.ElementAt(3));
+        BackgroundColor = new Color((byte)values.ElementAt(4), (byte)values.ElementAt(5), (byte)values.ElementAt(6), (byte)values.ElementAt(7));
+        Width = (double)values.ElementAt(8);
+        Height = (double)values.ElementAt(9);
+    }
+}

src/PixiEditor.Extensions/FlyUI/Elements/Text.cs

@@ -9,10 +9,11 @@ namespace PixiEditor.Extensions.FlyUI.Elements;
 
 public class Text : StatelessElement, IPropertyDeserializable
 {
+    private TextWrap _textWrap = TextWrap.None;
     private string _value = null!;
+ 
     public string Value { get => _value; set => SetField(ref _value, value); }
-    
-    public TextWrap TextWrap { get; set; } = TextWrap.None;
+    public TextWrap TextWrap { get => _textWrap; set => SetField(ref _textWrap, value); }
 
     public Text()
     {