Added Paintable Property

src/PixiEditor.ChangeableDocument/Changeables/Graph/Nodes/CreateImageNode.cs

@@ -2,8 +2,10 @@
 using Drawie.Backend.Core;
 using Drawie.Backend.Core.Bridge;
 using Drawie.Backend.Core.ColorsImpl;
+using Drawie.Backend.Core.ColorsImpl.Paintables;
 using Drawie.Backend.Core.Surfaces;
 using Drawie.Backend.Core.Surfaces.ImageData;
+using Drawie.Backend.Core.Surfaces.PaintImpl;
 using Drawie.Numerics;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Interfaces;
 
@@ -16,7 +18,7 @@ public class CreateImageNode : Node, IPreviewRenderable
 
     public InputProperty<VecI> Size { get; }
 
-    public InputProperty<Color> Fill { get; }
+    public InputProperty<Paintable> Fill { get; }
 
     public RenderInputProperty Content { get; }
 
@@ -30,7 +32,7 @@ public class CreateImageNode : Node, IPreviewRenderable
     {
         Output = CreateOutput<Texture>(nameof(Output), "IMAGE", null);
         Size = CreateInput(nameof(Size), "SIZE", new VecI(32, 32)).WithRules(v => v.Min(VecI.One));
-        Fill = CreateInput(nameof(Fill), "FILL", Colors.Transparent);
+        Fill = CreateInput<Paintable>(nameof(Fill), "FILL", new ColorPaintable(Colors.Transparent));
         Content = CreateRenderInput(nameof(Content), "CONTENT");
         ContentOffset = CreateInput(nameof(ContentOffset), "CONTENT_OFFSET", VecD.Zero);
         RenderOutput = CreateRenderOutput("RenderOutput", "RENDER_OUTPUT", () => new Painter(OnPaint));
@@ -54,7 +56,16 @@ public class CreateImageNode : Node, IPreviewRenderable
     {
         var surface = textureCache.RequestTexture(0, Size.Value, context.ProcessingColorSpace, false);
 
-        surface.DrawingSurface.Canvas.Clear(Fill.Value);
+        if (Fill.Value is ColorPaintable colorPaintable)
+        {
+            surface.DrawingSurface.Canvas.Clear(colorPaintable.Color);
+        }
+        else
+        {
+            using Paint paint = new Paint();
+            paint.SetPaintable(Fill.Value);
+            surface.DrawingSurface.Canvas.DrawRect(0, 0, Size.Value.X, Size.Value.Y, paint);
+        }
 
         int saved = surface.DrawingSurface.Canvas.Save();
 

src/PixiEditor.ChangeableDocument/Changeables/Graph/Nodes/Shapes/EllipseNode.cs

@@ -1,6 +1,7 @@
 using PixiEditor.ChangeableDocument.Changeables.Graph.Nodes.Shapes.Data;
 using PixiEditor.ChangeableDocument.Rendering;
 using Drawie.Backend.Core.ColorsImpl;
+using Drawie.Backend.Core.ColorsImpl.Paintables;
 using Drawie.Numerics;
 
 namespace PixiEditor.ChangeableDocument.Changeables.Graph.Nodes.Shapes;
@@ -10,8 +11,8 @@ public class EllipseNode : ShapeNode<EllipseVectorData>
 {
     public InputProperty<VecD> Center { get; }
     public InputProperty<VecD> Radius { get; }
-    public InputProperty<Color> StrokeColor { get; }
-    public InputProperty<Color> FillColor { get; }
+    public InputProperty<Paintable> StrokeColor { get; }
+    public InputProperty<Paintable> FillColor { get; }
     public InputProperty<int> StrokeWidth { get; }
 
     public EllipseNode()
@@ -19,8 +20,8 @@ public class EllipseNode : ShapeNode<EllipseVectorData>
         Center = CreateInput<VecD>("Position", "POSITION", VecI.Zero);
         Radius = CreateInput<VecD>("Radius", "RADIUS", new VecD(32, 32)).WithRules(
             v => v.Min(new VecD(1)));
-        StrokeColor = CreateInput<Color>("StrokeColor", "STROKE_COLOR", new Color(0, 0, 0, 255));
-        FillColor = CreateInput<Color>("FillColor", "FILL_COLOR", new Color(0, 0, 0, 255));
+        StrokeColor = CreateInput<Paintable>("StrokeColor", "STROKE_COLOR", new Color(0, 0, 0, 255));
+        FillColor = CreateInput<Paintable>("FillColor", "FILL_COLOR", new Color(0, 0, 0, 255));
         StrokeWidth = CreateInput<int>("StrokeWidth", "STROKE_WIDTH", 1);
     }
 

src/PixiEditor.ChangeableDocument/Changes/NodeGraph/ConversionTable.cs

@@ -1,5 +1,7 @@
 using System.Numerics;
 using System.Reflection;
+using Drawie.Backend.Core.ColorsImpl;
+using Drawie.Backend.Core.ColorsImpl.Paintables;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Context;
 using Drawie.Backend.Core.Shaders.Generation;
 using Drawie.Numerics;
@@ -12,36 +14,38 @@ public static class ConversionTable
         new()
         {
             {
-                typeof(double), 
-                [
+                typeof(double), [
                     (typeof(int), new TypeConverter<double, int>(DoubleToInt)),
                     (typeof(VecD), new TypeConverter<double, VecD>(DoubleToVecD)),
                     (typeof(VecI), new TypeConverter<double, VecI>(DoubleToVecI))
                 ]
             },
             {
-                typeof(int), 
-                [
+                typeof(int), [
                     (typeof(double), new TypeConverter<int, double>(ConvertIntToDouble)),
                     (typeof(VecI), new TypeConverter<int, VecI>(IntToVecI)),
                     (typeof(VecD), new TypeConverter<int, VecD>(IntToVecD)),
                 ]
             },
             {
-                typeof(VecD), 
-                [
+                typeof(VecD), [
                     (typeof(double), new TypeConverter<VecD, double>(VecDToDouble)),
                     (typeof(int), new TypeConverter<VecD, int>(VecDToInt)),
                     (typeof(VecI), new TypeConverter<VecD, VecI>(VecDToVecI)),
                 ]
             },
             {
-                typeof(VecI),
-                [
+                typeof(VecI), [
                     (typeof(double), new TypeConverter<VecI, double>(VecIToDouble)),
                     (typeof(int), new TypeConverter<VecI, int>(VecIToInt)),
                     (typeof(VecD), new TypeConverter<VecI, VecD>(VecIToVecD))
                 ]
+            },
+            {
+                typeof(Color),
+                [
+                    (typeof(Paintable), new TypeConverter<Color, Paintable>(c => new ColorPaintable(c))),
+                ]
             }
         };
 
@@ -66,7 +70,7 @@ public static class ConversionTable
             result = arg;
             return true;
         }
-        
+
         if (_conversionTable.TryGetValue(arg.GetType(), out var converters))
         {
             foreach (var (outType, converter) in converters)
@@ -78,7 +82,7 @@ public static class ConversionTable
                 }
             }
         }
-        
+
         try
         {
             result = System.Convert.ChangeType(arg, targetType);
@@ -90,7 +94,7 @@ public static class ConversionTable
             return false;
         }
     }
-    
+
     public static object Convert(object arg, Type targetType)
     {
         if (TryConvert(arg, targetType, out var result))
@@ -110,52 +114,52 @@ public static class ConversionTable
     {
         return i;
     }
-    
+
     private static double VecDToDouble(VecD vec)
     {
         return vec.X;
-    } 
-    
+    }
+
     private static double VecIToDouble(VecI vecI)
     {
         return vecI.X;
     }
-    
+
     private static VecD DoubleToVecD(double d)
     {
         return new VecD(d, d);
     }
-    
+
     private static VecI DoubleToVecI(double d)
     {
         return new VecI((int)d, (int)d);
     }
-    
+
     private static VecI IntToVecI(int i)
     {
         return new VecI(i, i);
     }
-    
+
     private static VecD IntToVecD(int i)
     {
         return new VecD(i, i);
     }
-    
+
     private static int VecIToInt(VecI vec)
     {
         return vec.X;
     }
-    
+
     private static VecD VecIToVecD(VecI vec)
     {
         return new VecD(vec.X, vec.Y);
     }
-    
+
     private static VecI VecDToVecI(VecD vec)
     {
         return new VecI((int)vec.X, (int)vec.Y);
     }
-    
+
     private static int VecDToInt(VecD vec)
     {
         return (int)vec.X;

src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -52,6 +52,7 @@
             <Color x:Key="FloatSocketColor">#ffc66d</Color>
             <Color x:Key="DoubleSocketColor">#efb66d</Color>
             <Color x:Key="ColorSocketColor">#8cf2dd</Color>
+            <Color x:Key="PaintableSocketColor">#48b099</Color>
             <Color x:Key="VecDSocketColor">#c984ca</Color>
             <Color x:Key="Vec3DSocketColor">#597513</Color>
             <Color x:Key="VecISocketColor">#c9b4ca</Color>
@@ -145,6 +146,7 @@
             <SolidColorBrush x:Key="DoubleSocketBrush" Color="{StaticResource DoubleSocketColor}"/>
             <SolidColorBrush x:Key="Float1SocketBrush" Color="{StaticResource DoubleSocketColor}"/>
             <SolidColorBrush x:Key="ColorSocketBrush" Color="{StaticResource ColorSocketColor}"/>
+            <SolidColorBrush x:Key="PaintableSocketBrush" Color="{StaticResource PaintableSocketColor}"/>
             <SolidColorBrush x:Key="Half4SocketBrush" Color="{StaticResource ColorSocketColor}"/>
             <SolidColorBrush x:Key="VecDSocketBrush" Color="{StaticResource VecDSocketColor}"/>
             <SolidColorBrush x:Key="Vec3DSocketBrush" Color="{StaticResource Vec3DSocketColor}"/>
@@ -155,6 +157,7 @@
             <SolidColorBrush x:Key="Int1SocketBrush" Color="{StaticResource IntSocketColor}"/>
             <SolidColorBrush x:Key="StringSocketBrush" Color="{StaticResource StringSocketColor}"/>
             <SolidColorBrush x:Key="Matrix3X3SocketBrush" Color="{StaticResource Matrix3X3SocketColor}"/>
+
             <ConicGradientBrush x:Key="ShapeVectorDataSocketBrush" GradientStops="{StaticResource ShapeDataSocketGradient}"/>
             <SolidColorBrush x:Key="EllipseVectorDataSocketBrush" Color="{StaticResource EllipseDataSocketColor}"/>
             <SolidColorBrush x:Key="PointsVectorDataSocketBrush" Color="{StaticResource PointsDataSocketColor}"/>

src/PixiEditor/Helpers/Extensions/ColorHelpers.cs

@@ -58,6 +58,7 @@ internal static class ColorHelpers
             conicGradientBrush.Angle,
             conicGradientBrush.GradientStops.Select(stop =>
                 new GradientStop(new BackendColor(stop.Color.R, stop.Color.G, stop.Color.B), stop.Offset))),
+        null => null,
 
     };
 
@@ -83,6 +84,7 @@ internal static class ColorHelpers
             Center = new RelativePoint(conicGradientPaintable.Center.X, conicGradientPaintable.Center.Y, RelativeUnit.Absolute),
             GradientStops = ToAvaloniaGradientStops(conicGradientPaintable.GradientStops)
         },
+        null => null,
         _ => throw new NotImplementedException()
     };
 

src/PixiEditor/PixiEditor.csproj

@@ -143,6 +143,10 @@
       <DependentUpon>FontFamilySettingView.axaml</DependentUpon>
       <SubType>Code</SubType>
     </Compile>
+    <Compile Update="Views\Nodes\Properties\ColorPropertyView.axaml.cs">
+      <DependentUpon>ColorPropertyView.axaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
   </ItemGroup>
 
   <ItemGroup>

src/PixiEditor/ViewModels/Document/Nodes/Shapes/EllipseNodeViewModel.cs

@@ -1,7 +1,13 @@
+using Drawie.Backend.Core.ColorsImpl.Paintables;
+using PixiEditor.ChangeableDocument.Changeables.Graph;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Nodes.Shapes;
 using PixiEditor.ViewModels.Nodes;
+using PixiEditor.ViewModels.Nodes.Properties;
+using PixiEditor.Views.Nodes.Properties;
 
 namespace PixiEditor.ViewModels.Document.Nodes.Shapes;
 
 [NodeViewModel("ELLIPSE_NODE", "SHAPE", "\uE910")]
-internal class EllipseNodeViewModel : NodeViewModel<EllipseNode>;
+internal class EllipseNodeViewModel : NodeViewModel<EllipseNode>
+{
+}

src/PixiEditor/ViewModels/Nodes/Properties/ColorPropertyViewModel.cs

@@ -1,12 +1,16 @@
-using PixiEditor.Helpers.Extensions;
-using Drawie.Backend.Core.ColorsImpl;
+using Drawie.Backend.Core.ColorsImpl;
+using PixiEditor.Helpers.Extensions;
 
 namespace PixiEditor.ViewModels.Nodes.Properties;
 
 internal class ColorPropertyViewModel : NodePropertyViewModel<Color>
 {
-    public ColorPropertyViewModel(NodeViewModel node, Type valueType) : base(node, valueType)
+    private bool enableGradients = false;
+
+    public bool EnableGradients
     {
+        get => enableGradients;
+        set => SetProperty(ref enableGradients, value);
     }
 
     public new Avalonia.Media.Color Value
@@ -14,4 +18,8 @@ internal class ColorPropertyViewModel : NodePropertyViewModel<Color>
         get => base.Value.ToColor();
         set => base.Value = value.ToColor();
     }
+
+    public ColorPropertyViewModel(NodeViewModel node, Type valueType) : base(node, valueType)
+    {
+    }
 }

src/PixiEditor/ViewModels/Nodes/Properties/PaintablePropertyViewModel.cs

@@ -0,0 +1,26 @@
+using Avalonia.Media;
+using PixiEditor.Helpers.Extensions;
+using Drawie.Backend.Core.ColorsImpl.Paintables;
+
+namespace PixiEditor.ViewModels.Nodes.Properties;
+
+internal class PaintablePropertyViewModel : NodePropertyViewModel<Paintable>
+{
+    private bool enableGradients = true;
+
+    public bool EnableGradients
+    {
+        get => enableGradients;
+        set => SetProperty(ref enableGradients, value);
+    }
+
+    public new IBrush Value
+    {
+        get => base.Value.ToBrush();
+        set => base.Value = value.ToPaintable();
+    }
+
+    public PaintablePropertyViewModel(NodeViewModel node, Type valueType) : base(node, valueType)
+    {
+    }
+}

src/PixiEditor/Views/Nodes/Properties/ColorPropertyView.axaml

@@ -12,7 +12,7 @@
     <Grid HorizontalAlignment="{Binding IsInput, Converter={converters:BoolToValueConverter FalseValue='Right', TrueValue='Stretch'}}">
         <TextBlock VerticalAlignment="Center" ui:Translator.Key="{Binding DisplayName}"/>
         <colorPicker:PortableColorPicker
-            EnableGradientsTab="False"
+            EnableGradientsTab="false"
             PointerPressed="InputElement_OnPointerPressed"
             Width="40" Height="20"
             IsVisible="{Binding ShowInputField}"

src/PixiEditor/Views/Nodes/Properties/PaintablePropertyView.axaml

@@ -0,0 +1,21 @@
+<properties:NodePropertyView xmlns="https://github.com/avaloniaui"
+                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                             xmlns:properties="clr-namespace:PixiEditor.Views.Nodes.Properties"
+                             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+                             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+                             xmlns:input="clr-namespace:PixiEditor.Views.Input"
+                             xmlns:colorPicker="clr-namespace:ColorPicker;assembly=ColorPicker.AvaloniaUI"
+                             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+                             x:Class="PixiEditor.Views.Nodes.Properties.PaintablePropertyView">
+    <Grid HorizontalAlignment="{Binding IsInput, Converter={converters:BoolToValueConverter FalseValue='Right', TrueValue='Stretch'}}">
+        <TextBlock VerticalAlignment="Center" ui:Translator.Key="{Binding DisplayName}"/>
+        <colorPicker:PortableColorPicker
+            EnableGradientsTab="{Binding EnableGradients}"
+            PointerPressed="InputElement_OnPointerPressed"
+            Width="40" Height="20"
+            IsVisible="{Binding ShowInputField}"
+            SelectedBrush="{Binding Value, Mode=TwoWay}" />
+    </Grid>
+</properties:NodePropertyView>

src/PixiEditor/Views/Nodes/Properties/PaintablePropertyView.axaml.cs

@@ -0,0 +1,20 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Markup.Xaml;
+
+namespace PixiEditor.Views.Nodes.Properties;
+
+public partial class PaintablePropertyView : NodePropertyView
+{
+    public PaintablePropertyView()
+    {
+        InitializeComponent();
+    }
+
+    private void InputElement_OnPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        e.Handled = true;
+    }
+}
+