Added category colors

src/PixiEditor.ChangeableDocument/ChangeInfos/NodeGraph/NodeMetadata.cs

@@ -12,11 +12,30 @@ public class NodeMetadata
 
     public Guid? PairNodeGuid { get; set; }
     public string? ZoneUniqueName { get; private set; }
+    
+    public string? Category { get; private set; }
 
     public void AddAttributes(IReadOnlyNode node)
     {
         Type type = node.GetType();
-        PairNodeAttribute? attribute = type.GetCustomAttribute<PairNodeAttribute>();
+        
+        AddNodeInfoAttribute(type);
+        AddPairAttributes(type);
+    }
+
+    private void AddNodeInfoAttribute(Type type)
+    {
+        var attribute = type.GetCustomAttribute<NodeInfoAttribute>();
+
+        if (attribute == null)
+            return;
+
+        Category = attribute.Category;
+    }
+
+    private void AddPairAttributes(Type type)
+    {
+        var attribute = type.GetCustomAttribute<PairNodeAttribute>();
 
         if (attribute == null)
             return;

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

@@ -38,6 +38,11 @@
 
             <Color x:Key="NotificationCardBackgroundColor">#303030</Color>
             
+            <!--                          -->
+            <!--     <| Node Colors |>    -->
+            <!--                          -->
+            
+            <!-- Sockets -->
             <Color x:Key="DefaultSocketColor">#c0334e</Color>
             <Color x:Key="ImageSocketColor">#99c47a</Color>
             <Color x:Key="BoolSocketColor">#68abdf</Color>
@@ -49,6 +54,7 @@
             <Color x:Key="IntSocketColor">#4C64B1</Color>
             <Color x:Key="PointListSocketColor">#7f5280</Color>
             
+            <!-- Zones & Frames -->
             <Color x:Key="PixiEditorModifyImageBorderColor">#68abdf</Color>
             <Color x:Key="PixiEditorModifyImageNodeBackgroundColor">#4068abdf</Color>
 
@@ -57,6 +63,13 @@
 
             <Color x:Key="NodeFrameBorderColor">#101010</Color>
             <Color x:Key="NodeFrameBackgroundColor">#40101010</Color>
+            
+            <!-- Categories -->
+            <Color x:Key="ImageCategoryBackgroundColor">#5B7348</Color>
+            <Color x:Key="ShapeCategoryBackgroundColor">#654266</Color>
+            <Color x:Key="NumbersCategoryBackgroundColor">#666666</Color>
+            <Color x:Key="ColorCategoryBackgroundColor">#3B665D</Color>
+            <Color x:Key="AnimationCategoryBackgroundColor">#4D4466</Color>
 
             <system:Double x:Key="ThemeDisabledOpacity">0.4</system:Double>
 
@@ -92,6 +105,11 @@
             
             <SolidColorBrush x:Key="SelectionFillBrush" Color="{StaticResource SelectionFillColor}"/>
             
+            <!--                           -->
+            <!--     <| Node Brushes |>    -->
+            <!--                           -->
+            
+            <!-- Sockets -->
             <SolidColorBrush x:Key="DefaultSocketBrush" Color="{StaticResource DefaultSocketColor}"/>
             <SolidColorBrush x:Key="TextureSocketBrush" Color="{StaticResource ImageSocketColor}"/>
             <SolidColorBrush x:Key="TextureSamplerSocketBrush" Color="{StaticResource ImageSocketColor}"/>
@@ -109,6 +127,7 @@
             <SolidColorBrush x:Key="Int1SocketBrush" Color="{StaticResource IntSocketColor}"/>
             <SolidColorBrush x:Key="PointListSocketBrush" Color="{StaticResource PointListSocketColor}"/>
             
+            <!-- Zones & Frames -->
             <SolidColorBrush x:Key="PixiEditorModifyImageLeftBorderBrush" Color="{StaticResource PixiEditorModifyImageBorderColor}"/>
             <SolidColorBrush x:Key="PixiEditorModifyImageRightBorderBrush" Color="{StaticResource PixiEditorModifyImageBorderColor}"/>
             <SolidColorBrush x:Key="PixiEditorModifyImageZoneBorderBrush" Color="{StaticResource PixiEditorModifyImageBorderColor}"/>
@@ -121,6 +140,13 @@
 
             <SolidColorBrush x:Key="NodeFrameBorderBrush" Color="{StaticResource NodeFrameBorderColor}"/>
             <SolidColorBrush x:Key="NodeFrameBackgroundBrush" Color="{StaticResource NodeFrameBackgroundColor}"/>
+            
+            <!-- Categories -->
+            <SolidColorBrush x:Key="ImageCategoryBackgroundBrush" Color="{StaticResource ImageCategoryBackgroundColor}" />
+            <SolidColorBrush x:Key="ShapeCategoryBackgroundBrush" Color="{StaticResource ShapeCategoryBackgroundColor}" />
+            <SolidColorBrush x:Key="NumbersCategoryBackgroundBrush" Color="{StaticResource NumbersCategoryBackgroundColor}" />
+            <SolidColorBrush x:Key="ColorCategoryBackgroundBrush" Color="{StaticResource ColorCategoryBackgroundColor}" />
+            <SolidColorBrush x:Key="AnimationCategoryBackgroundBrush" Color="{StaticResource AnimationCategoryBackgroundColor}" />
 
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
             <CornerRadius x:Key="ControlCornerRadiusTop">5, 5, 0, 0</CornerRadius>

src/PixiEditor/Models/Handlers/INodeHandler.cs

@@ -1,5 +1,6 @@
 using System.Collections.ObjectModel;
 using System.ComponentModel;
+using Avalonia.Media;
 using ChunkyImageLib;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Interfaces;
 using PixiEditor.ChangeableDocument.ChangeInfos.NodeGraph;
@@ -13,6 +14,7 @@ public interface INodeHandler : INotifyPropertyChanged
 {
     public Guid Id { get; }
     public string NodeNameBindable { get; set; }
+    public IBrush CategoryBackgroundBrush { get; }
     public string InternalName { get; }
     public NodeMetadata Metadata { get; set; }
     public ObservableRangeCollection<INodePropertyHandler> Inputs { get; }

src/PixiEditor/Styles/Templates/NodeGraphView.axaml

@@ -39,6 +39,7 @@
                                     <nodes:NodeView
                                         Node="{Binding}"
                                         DisplayName="{Binding NodeNameBindable}"
+                                        CategoryBackgroundBrush="{Binding CategoryBackgroundBrush}"
                                         Inputs="{Binding Inputs}"
                                         BorderBrush="{Binding InternalName, Converter={converters:NodeInternalNameToStyleConverter}, ConverterParameter='BorderBrush'}"
                                         BorderThickness="2"

src/PixiEditor/Styles/Templates/NodeView.axaml

@@ -30,7 +30,7 @@
                             </Grid.RowDefinitions>
                             <Border Padding="{TemplateBinding Padding}" Grid.ColumnSpan="3" Grid.Row="0"
                                     CornerRadius="4.5, 4.5, 0 ,0"
-                                    Background="{DynamicResource ThemeControlHighBrush}">
+                                    Background="{TemplateBinding CategoryBackgroundBrush}">
                                 <TextBlock ui:Translator.Key="{TemplateBinding DisplayName}"
                                            FontWeight="Bold" />
                             </Border>

src/PixiEditor/ViewModels/Nodes/NodeViewModel.cs

@@ -1,5 +1,6 @@
 using System.Collections.ObjectModel;
 using Avalonia;
+using Avalonia.Media;
 using ChunkyImageLib;
 using CommunityToolkit.Mvvm.ComponentModel;
 using PixiEditor.ChangeableDocument.Actions.Generated;
@@ -17,6 +18,7 @@ using PixiEditor.ViewModels.Document;
 namespace PixiEditor.ViewModels.Nodes;
 internal class NodeViewModel : ObservableObject, INodeHandler
 {
+    private IBrush? categoryBrush;
     private string nodeNameBindable;
     private VecD position;
     private ObservableRangeCollection<INodePropertyHandler> inputs = new();
@@ -46,6 +48,25 @@ internal class NodeViewModel : ObservableObject, INodeHandler
     }
 
     public string InternalName { get; init; }
+
+    public IBrush CategoryBackgroundBrush
+    {
+        get
+        {
+            if (categoryBrush == null)
+            {
+                if (Metadata?.Category != null && Application.Current.Styles.TryGetResource($"{Stylize(Metadata.Category)}CategoryBackgroundBrush", App.Current.ActualThemeVariant, out var brushObj) && brushObj is IBrush brush)
+                {
+                    categoryBrush = brush;
+                }
+
+            }
+
+            return categoryBrush;
+
+            string Stylize(string input) => string.Concat(input[0].ToString().ToUpper(), input.ToLower().AsSpan(1));
+        }
+    }
     
     public NodeMetadata? Metadata { get; set; }
 

src/PixiEditor/Views/Nodes/NodeView.cs

@@ -5,6 +5,7 @@ using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
+using Avalonia.Media;
 using Avalonia.VisualTree;
 using ChunkyImageLib;
 using PixiEditor.Helpers;
@@ -40,6 +41,9 @@ public class NodeView : TemplatedControl
     public static readonly StyledProperty<bool> IsSelectedProperty = AvaloniaProperty.Register<NodeView, bool>(
         nameof(IsSelected));
 
+    public static readonly StyledProperty<IBrush> CategoryBackgroundBrushProperty = AvaloniaProperty.Register<NodeView, IBrush>(
+        nameof(CategoryBackgroundBrush));
+
     public static readonly StyledProperty<ICommand> SelectNodeCommandProperty =
         AvaloniaProperty.Register<NodeView, ICommand>("SelectNodeCommand");
 
@@ -88,6 +92,12 @@ public class NodeView : TemplatedControl
         set => SetValue(DisplayNameProperty, value);
     }
 
+    public IBrush CategoryBackgroundBrush
+    {
+        get => GetValue(CategoryBackgroundBrushProperty);
+        set => SetValue(CategoryBackgroundBrushProperty, value);
+    }
+
     public ICommand SelectNodeCommand
     {
         get { return (ICommand)GetValue(SelectNodeCommandProperty); }