Image control

samples/Sample7_FlyUI/WindowContentElement.cs

@@ -24,7 +24,8 @@ public class WindowContentElement : StatelessElement
                     new Container(
                         margin: Edges.Symmetric(25, 0), 
                         backgroundColor: Color.FromRgba(25, 25, 25, 255), 
-                        height: 200)
+                        child: new Column(
+                            new Image("/Pizza.png")))
                 )
             )
         );

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

@@ -25,9 +25,9 @@ public class CompiledControl
         Properties.Add((value, typeof(T)));
     }
 
-    public void AddProperty(string value, Type type)
+    public void AddStringProperty(string value)
     {
-        Properties.Add((value, type));
+        Properties.Add((value, typeof(string)));
     }
 
     public void AddChild(CompiledControl child)

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

@@ -0,0 +1,38 @@
+using PixiEditor.Extensions.Wasm.Bridge;
+
+namespace PixiEditor.Extensions.Wasm.Api.FlyUI;
+
+public class Image : StatelessElement
+{
+    private string source = null!;
+
+    public string Source
+    {
+        get => source;
+        set
+        {
+            if (value.StartsWith("/") || value.StartsWith("/Resources/") || value.StartsWith("Resources/"))
+            {
+                source = Native.to_resources_full_path(value);    
+            }
+            else
+            {
+                source = value;
+            }
+        }
+    }
+    
+    public Image(string source)
+    {
+        Source = source;
+    }
+    
+    public override CompiledControl BuildNative()
+    {
+        CompiledControl image = new CompiledControl(UniqueId, "Image");
+        
+        image.AddStringProperty(Source);
+        BuildPendingEvents(image);
+        return image;
+    }
+}

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

@@ -11,7 +11,7 @@ public class Text(string value, TextWrap wrap = TextWrap.None) : StatelessElemen
     public override CompiledControl BuildNative()
     {
         CompiledControl text = new CompiledControl(UniqueId, "Text");
-        text.AddProperty(Value, typeof(string));
+        text.AddStringProperty(Value);
         text.AddProperty((int)TextWrap);
 
         BuildPendingEvents(text);

src/PixiEditor.Extensions.Wasm/Bridge/Native.cs

@@ -57,4 +57,7 @@ internal static partial class Native
             element.RaiseEvent(eventName ?? "", new ElementEventArgs());
         }
     }
+
+    [MethodImpl(MethodImplOptions.InternalCall)]
+    public static extern string to_resources_full_path(string value);
 }

src/PixiEditor.Extensions.WasmRuntime/Api/ResourcesApi.cs

@@ -0,0 +1,22 @@
+namespace PixiEditor.Extensions.WasmRuntime.Api;
+
+internal class ResourcesApi : ApiGroupHandler
+{
+    [ApiFunction("to_resources_full_path")]
+    public string ToResourcesFullPath(string path)
+    {
+        string resourcesPath = Path.Combine(Path.GetDirectoryName(Extension.Location), "Resources");
+        string fullPath = path;
+
+        if (path.StartsWith("/") || path.StartsWith("/Resources/"))
+        {
+            fullPath = Path.Combine(resourcesPath, path[1..]);
+        }
+        else if (path.StartsWith("Resources/"))
+        {
+            fullPath = Path.Combine(resourcesPath, path[10..]);
+        }
+
+        return fullPath;
+    }
+}

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

@@ -0,0 +1,22 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+using Avalonia.Media.Imaging;
+
+namespace PixiEditor.Extensions.FlyUI.Converters;
+
+public class PathToBitmapConverter : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is string path)
+        {
+            return new Bitmap(path);
+        }
+        return null;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

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

@@ -0,0 +1,39 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using PixiEditor.Extensions.FlyUI.Converters;
+
+namespace PixiEditor.Extensions.FlyUI.Elements;
+
+public class Image : StatelessElement, IPropertyDeserializable
+{
+    private string _source = null!;
+    public string Source { get => _source; set => SetField(ref _source, value); }
+    
+    public override Control BuildNative()
+    {
+        Avalonia.Controls.Image image = new();
+        
+        Binding sourceBinding = new()
+        {
+            Source = this,
+            Path = nameof(Source),
+            Converter = new PathToBitmapConverter(),
+        };
+        
+        image.Bind(Avalonia.Controls.Image.SourceProperty, sourceBinding);
+        
+        return image;
+    }
+
+
+    public IEnumerable<object> GetProperties()
+    {
+        yield return Source;
+    }
+
+    public void DeserializeProperties(IEnumerable<object> values)
+    {
+        Source = (string)values.ElementAt(0);
+    }
+}