Text, row and column changes + Align

samples/Sample7_FlyUI/WindowContentElement.cs

@@ -1,4 +1,6 @@
-using PixiEditor.Extensions.Wasm.Api.FlyUI;
+using PixiEditor.Extensions.CommonApi.FlyUI;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+using PixiEditor.Extensions.Wasm.Api.FlyUI;
 using PixiEditor.Extensions.Wasm.Api.Localization;
 
 namespace FlyUISample;
@@ -10,9 +12,14 @@ public class WindowContentElement : StatelessElement
         Layout layout = new Layout(body:
             new Column(
                 new Center(
-                    new Text("Hello there!")
+                    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 Text("This is a sample window content element."))
+                new Align(
+                    alignment: Alignment.CenterRight, 
+                    child: new Text("- Paulo Coelho, The Alchemist (1233)")
+                    )
+                )
         );
 
         return layout.BuildNative();

src/PixiEditor.AvaloniaUI/Views/Dialogs/PixiEditorPopup.cs

@@ -46,6 +46,9 @@ public partial class PixiEditorPopup : Window, IPopupWindow
     public PixiEditorPopup()
     {
         CloseCommand = new RelayCommand(ClosePopup);
+#if DEBUG
+        this.AttachDevTools();
+#endif
     }
 
     public override void Show()

src/PixiEditor.DevTools/Layouts/LivePreviewWindowState.cs

@@ -1,4 +1,6 @@
-using PixiEditor.Extensions.CommonApi.FlyUI.Events;
+using PixiEditor.Extensions.CommonApi.FlyUI;
+using PixiEditor.Extensions.CommonApi.FlyUI.Events;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
 using PixiEditor.Extensions.FlyUI.Elements;
 using PixiEditor.Extensions.IO;
 using PixiEditor.Extensions.Runtime;

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

@@ -0,0 +1,14 @@
+namespace PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+public enum Alignment
+{
+    TopLeft,
+    TopCenter,
+    TopRight,
+    CenterLeft,
+    Center,
+    CenterRight,
+    BottomLeft,
+    BottomCenter,
+    BottomRight
+}

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

@@ -0,0 +1,8 @@
+namespace PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+public enum TextWrap
+{
+    None,
+    Wrap,
+    WrapWithOverflow
+}

src/PixiEditor.Extensions.CommonApi/IByteSerializable.cs

@@ -1,7 +0,0 @@
-namespace PixiEditor.Extensions.CommonApi;
-
-public interface IByteSerializable
-{
-    byte[] Serialize();
-    void Deserialize(byte[] data);
-}

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

@@ -0,0 +1,27 @@
+using PixiEditor.Extensions.CommonApi.FlyUI;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+namespace PixiEditor.Extensions.Wasm.Api.FlyUI;
+
+public class Align : SingleChildLayoutElement
+{
+    public Alignment Alignment { get; set; }
+
+    public Align(Alignment alignment = Alignment.TopLeft, LayoutElement child = null)
+    {
+        Child = child;
+        Alignment = alignment;
+    }
+
+    public override CompiledControl BuildNative()
+    {
+        CompiledControl control = new CompiledControl(UniqueId, "Align");
+        control.AddProperty((int)Alignment);
+        
+        if (Child != null)
+            control.AddChild(Child.BuildNative());
+
+        BuildPendingEvents(control);
+        return control;
+    }
+}

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

@@ -1,13 +1,18 @@
-namespace PixiEditor.Extensions.Wasm.Api.FlyUI;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
 
-public class Text(string value) : StatelessElement
+namespace PixiEditor.Extensions.Wasm.Api.FlyUI;
+
+public class Text(string value, TextWrap wrap = TextWrap.None) : StatelessElement
 {
     public string Value { get; set; } = value;
+    
+    public TextWrap TextWrap { get; set; } = wrap;
 
     public override CompiledControl BuildNative()
     {
         CompiledControl text = new CompiledControl(UniqueId, "Text");
         text.AddProperty(Value, typeof(string));
+        text.AddProperty((int)TextWrap);
 
         BuildPendingEvents(text);
         return text;

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

@@ -0,0 +1,27 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace PixiEditor.Extensions.FlyUI.Converters;
+
+public class EnumToEnumConverter<T1, T2> : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is T1 enumValue)
+        {
+            return (T2)(object)enumValue;
+        }
+
+        return null;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is T2 enumValue)
+        {
+            return (T1)(object)enumValue;
+        }
+
+        return null;
+    }
+}

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

@@ -1,9 +1,11 @@
 using Avalonia.Controls;
 using Avalonia.Layout;
+using PixiEditor.Extensions.CommonApi.FlyUI;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
 
 namespace PixiEditor.Extensions.FlyUI.Elements;
 
-public class Align : SingleChildLayoutElement
+public class Align : SingleChildLayoutElement, IPropertyDeserializable
 {
     public Alignment Alignment { get; set; }
 
@@ -61,17 +63,14 @@ public class Align : SingleChildLayoutElement
             _ => throw new ArgumentOutOfRangeException(nameof(alignment), alignment, null)
         };
     }
-}
 
-public enum Alignment
-{
-    TopLeft,
-    TopCenter,
-    TopRight,
-    CenterLeft,
-    Center,
-    CenterRight,
-    BottomLeft,
-    BottomCenter,
-    BottomRight
+    public void DeserializeProperties(IEnumerable<object> values)
+    {
+        Alignment = (Alignment)(int)values.FirstOrDefault();
+    }
+    
+    IEnumerable<object> IPropertyDeserializable.GetProperties()
+    {
+        yield return (int)Alignment;
+    }
 }

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

@@ -8,7 +8,7 @@ namespace PixiEditor.Extensions.FlyUI.Elements;
 
 public class Column : MultiChildLayoutElement
 {
-    private DockPanel panel;
+    private StackPanel panel;
 
     public Column()
     {
@@ -45,20 +45,15 @@ public class Column : MultiChildLayoutElement
 
     public override Control BuildNative()
     {
-        panel = new DockPanel
+        panel = new StackPanel()
         {
-            LastChildFill = true,
+            Orientation = Orientation.Vertical,
             HorizontalAlignment = HorizontalAlignment.Stretch,
             VerticalAlignment = VerticalAlignment.Stretch
         };
 
         panel.Children.AddRange(Children.Select(x => x.BuildNative()));
 
-        foreach (var child in panel.Children)
-        {
-            DockPanel.SetDock(child, Dock.Top);
-        }
-
         return panel;
     }
 }

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

@@ -1,12 +1,13 @@
 using System.Collections.Specialized;
 using Avalonia.Controls;
+using Avalonia.Layout;
 using Avalonia.Threading;
 
 namespace PixiEditor.Extensions.FlyUI.Elements;
 
 public class Row : MultiChildLayoutElement
 {
-    private DockPanel panel;
+    private StackPanel panel;
     public Row()
     {
     }
@@ -42,20 +43,15 @@ public class Row : MultiChildLayoutElement
 
     public override Control BuildNative()
     {
-        panel = new DockPanel()
+        panel = new StackPanel()
         {
-            LastChildFill = true,
+            Orientation = Orientation.Horizontal,
             HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Stretch,
             VerticalAlignment = Avalonia.Layout.VerticalAlignment.Stretch
         };
 
         panel.Children.AddRange(Children.Select(x => x.BuildNative()));
 
-        foreach (var child in panel.Children)
-        {
-            DockPanel.SetDock(child, Dock.Left);
-        }
-
         return panel;
     }
 }

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

@@ -1,6 +1,9 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Data;
+using Avalonia.Media;
+using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+using PixiEditor.Extensions.FlyUI.Converters;
 
 namespace PixiEditor.Extensions.FlyUI.Elements;
 
@@ -8,37 +11,50 @@ public class Text : StatelessElement, IPropertyDeserializable
 {
     private string _value = null!;
     public string Value { get => _value; set => SetField(ref _value, value); }
+    
+    public TextWrap TextWrap { get; set; } = TextWrap.None;
 
     public Text()
     {
 
     }
 
-    public Text(string value = "")
+    public Text(string value = "", TextWrap textWrap = TextWrap.None)
     {
         Value = value;
+        TextWrap = textWrap;
     }
 
     public override Control BuildNative()
     {
         TextBlock textBlock = new();
-        Binding binding = new()
+        Binding valueBinding = new()
         {
             Source = this,
             Path = nameof(Value),
         };
+        
+        Binding textWrapBinding = new()
+        {
+            Source = this,
+            Path = nameof(TextWrap),
+            Converter = new EnumToEnumConverter<TextWrap, TextWrapping>(),
+        };
 
-        textBlock.Bind(TextBlock.TextProperty, binding);
+        textBlock.Bind(TextBlock.TextProperty, valueBinding);
+        textBlock.Bind(TextBlock.TextWrappingProperty, textWrapBinding);
         return textBlock;
     }
 
     IEnumerable<object> IPropertyDeserializable.GetProperties()
     {
         yield return Value;
+        yield return TextWrap;
     }
 
     void IPropertyDeserializable.DeserializeProperties(IEnumerable<object> values)
     {
         Value = (string)values.ElementAt(0);
+        TextWrap = (TextWrap)values.ElementAt(1);
     }
 }

src/PixiEditor.Extensions/Helpers/SpanUtility.cs

@@ -14,6 +14,40 @@ public static class SpanUtility
             return Encoding.UTF8.GetString(span[offset..(offset + stringLength)]);
         }
 
+        if (type == typeof(int))
+        {
+            int value = BitConverter.ToInt32(span[offset..(offset + sizeof(int))]);
+            offset += sizeof(int);
+            return value;
+        }
+        if (type == typeof(bool))
+        {
+            bool value = BitConverter.ToBoolean(span[offset..(offset + sizeof(bool))]);
+            offset += sizeof(bool);
+            return value;
+        }
+
+        if (type == typeof(byte))
+        {
+            byte value = span[offset];
+            offset++;
+            return value;
+        }
+
+        if (type == typeof(float))
+        {
+            float value = BitConverter.ToSingle(span[offset..(offset + sizeof(float))]);
+            offset += sizeof(float);
+            return value;
+        }
+
+        if (type == typeof(double))
+        {
+            double value = BitConverter.ToDouble(span[offset..(offset + sizeof(double))]);
+            offset += sizeof(double);
+            return value;
+        }
+
         return Marshal.PtrToStructure(span[offset..(offset + Marshal.SizeOf(type))].GetPinnableReference(), type);
     }
 }