Added zone border and background color

src/PixiEditor.AvaloniaUI/Helpers/Converters/NodeInternalNameToStyleConverter.cs

@@ -8,8 +8,11 @@ namespace PixiEditor.AvaloniaUI.Helpers.Converters;
 
 internal class NodeInternalNameToStyleConverter : SingleInstanceConverter<NodeInternalNameToStyleConverter>
 {
-    public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    public override object Convert(object? value, Type targetType, object parameter, CultureInfo culture)
     {
+        if (value == null)
+            return AvaloniaProperty.UnsetValue;
+        
         string s = (string)value;
         s = s.Replace(".", string.Empty);
         

src/PixiEditor.AvaloniaUI/Helpers/Converters/UnsetSkipMultiConverter.cs

@@ -0,0 +1,20 @@
+using System.Globalization;
+using Avalonia;
+
+namespace PixiEditor.AvaloniaUI.Helpers.Converters;
+
+internal class UnsetSkipMultiConverter : SingleInstanceMultiValueConverter<UnsetSkipMultiConverter>
+{
+    public override object Convert(object value, Type targetType, object parameter, CultureInfo culture) => value;
+
+    public override object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        foreach (var value in values)
+        {
+            if (value is not UnsetValueType)
+                return value;
+        }
+
+        return AvaloniaProperty.UnsetValue;
+    }
+}

src/PixiEditor.AvaloniaUI/Models/DocumentModels/DocumentUpdater.cs

@@ -533,7 +533,7 @@ internal class DocumentUpdater
 
     private void ProcessCreateNodeZone(CreateNodeZone_ChangeInfo info)
     {
-        doc.NodeGraphHandler.AddZone(info.Id, info.StartId, info.EndId);
+        doc.NodeGraphHandler.AddZone(info.Id, info.internalName, info.StartId, info.EndId);
     }
 
     private void ProcessDeleteNodeFrame(DeleteNodeFrame_ChangeInfo info)

src/PixiEditor.AvaloniaUI/Models/Handlers/INodeGraphHandler.cs

@@ -15,7 +15,7 @@ internal interface INodeGraphHandler
    public void AddNode(INodeHandler node);
    public void RemoveNode(Guid nodeId);
    public void AddFrame(Guid frameId, IEnumerable<Guid> nodeIds);
-   public void AddZone(Guid frameId, Guid startId, Guid endId);
+   public void AddZone(Guid frameId, string internalName, Guid startId, Guid endId);
    public void RemoveFrame(Guid frameId);
    public void SetConnection(NodeConnectionViewModel connection);
    public void RemoveConnection(Guid nodeId, string property);

src/PixiEditor.AvaloniaUI/Styles/Templates/NodeFrameView.axaml

@@ -8,7 +8,9 @@
             <Setter.Value>
                 <ControlTemplate>
                     <Grid Width="{Binding Size.X, RelativeSource={RelativeSource FindAncestor, AncestorType=nodes:NodeFrameView}}">
-                        <Rectangle Fill="#60000000" Stroke="#90000000" StrokeThickness="2" RadiusX="10" RadiusY="10"
+                        <Rectangle Fill="{TemplateBinding Background}"
+                                   Stroke="{TemplateBinding BorderBrush}"
+                                   StrokeThickness="2" RadiusX="10" RadiusY="10"
                                    Width="{Binding Size.X, RelativeSource={RelativeSource FindAncestor, AncestorType=nodes:NodeFrameView}}"
                                    Height="{Binding Size.Y, RelativeSource={RelativeSource FindAncestor, AncestorType=nodes:NodeFrameView}}" />
                         <TextBlock Margin="10,10,0,0" Foreground="#C0FFFFFF" Text="Untitled..." FontStyle="Italic" />

src/PixiEditor.AvaloniaUI/Styles/Templates/NodeGraphView.axaml

@@ -114,7 +114,20 @@
                                     <nodes:NodeFrameView
                                         TopLeft="{Binding TopLeft}"
                                         BottomRight="{Binding BottomRight}"
-                                        Size="{Binding Size}" />
+                                        Size="{Binding Size}">
+                                        <nodes:NodeFrameView.Background>
+                                            <MultiBinding Converter="{converters:UnsetSkipMultiConverter}">
+                                                 <Binding Path="InternalName" Converter="{converters:NodeInternalNameToStyleConverter}" ConverterParameter="BackgroundBrush" />
+                                                 <DynamicResource ResourceKey="NodeFrameBackgroundBrush"/>
+                                            </MultiBinding>
+                                        </nodes:NodeFrameView.Background>
+                                        <nodes:NodeFrameView.BorderBrush>
+                                            <MultiBinding Converter="{converters:UnsetSkipMultiConverter}">
+                                                <Binding Path="InternalName" Converter="{converters:NodeInternalNameToStyleConverter}" ConverterParameter="BorderBrush" />
+                                                <DynamicResource ResourceKey="NodeFrameBorderBrush"/>
+                                            </MultiBinding>
+                                        </nodes:NodeFrameView.BorderBrush>
+                                    </nodes:NodeFrameView>
                                 </DataTemplate>
                             </ItemsControl.ItemTemplate>
                             <ItemsControl.ItemContainerTheme>

src/PixiEditor.AvaloniaUI/ViewModels/Document/NodeGraphViewModel.cs

@@ -57,12 +57,12 @@ internal class NodeGraphViewModel : ViewModelBase, INodeGraphHandler
         Frames.Add(frame);
     }
 
-    public void AddZone(Guid frameId, Guid startId, Guid endId)
+    public void AddZone(Guid frameId, string internalName, Guid startId, Guid endId)
     {
         var start = AllNodes.First(x => x.Id == startId);
         var end = AllNodes.First(x => x.Id == endId);
         
-        var zone = new NodeZoneViewModel(frameId, start, end);
+        var zone = new NodeZoneViewModel(frameId, internalName, start, end);
         
         Frames.Add(zone);
     }

src/PixiEditor.AvaloniaUI/ViewModels/Nodes/NodeFrameViewModelBase.cs

@@ -16,6 +16,8 @@ public abstract class NodeFrameViewModelBase : ObservableObject
     
     public ObservableCollection<INodeHandler> Nodes { get; }
 
+    public string InternalName { get; init; }
+    
     public Guid Id
     {
         get => id;

src/PixiEditor.AvaloniaUI/ViewModels/Nodes/NodeZoneViewModel.cs

@@ -8,8 +8,10 @@ public sealed class NodeZoneViewModel : NodeFrameViewModelBase
     private INodeHandler start;
     private INodeHandler end;
     
-    public NodeZoneViewModel(Guid id, INodeHandler start, INodeHandler end) : base(id, [start, end])
+    public NodeZoneViewModel(Guid id, string internalName, INodeHandler start, INodeHandler end) : base(id, [start, end])
     {
+        InternalName = internalName;
+        
         this.start = start;
         this.end = end;
         

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

@@ -1,3 +1,3 @@
 namespace PixiEditor.ChangeableDocument.ChangeInfos.NodeGraph;
 
-public record CreateNodeZone_ChangeInfo(Guid Id, Guid StartId, Guid EndId) : IChangeInfo;
+public record CreateNodeZone_ChangeInfo(Guid Id, string internalName, Guid StartId, Guid EndId) : IChangeInfo;

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

@@ -38,7 +38,7 @@ internal class CreateModifyImageNodePair_Change : Change
         {
             CreateNode_ChangeInfo.CreateFromNode(start, "Modify Image"),
             CreateNode_ChangeInfo.CreateFromNode(end, "Modify Image"),
-            new CreateNodeZone_ChangeInfo(zoneId, startId, endId)
+            new CreateNodeZone_ChangeInfo(zoneId, "PixiEditor.ModifyImageZone", startId, endId)
         };
     }
 

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

@@ -49,6 +49,10 @@
             <Color x:Key="VecISocketColor">#c9b4ca</Color>
             
             <Color x:Key="PixiEditorModifyImageNodeBorderColor">#68abdf</Color>
+            <Color x:Key="PixiEditorModifyImageNodeBackgroundColor">#4068abdf</Color>
+
+            <Color x:Key="NodeFrameBorderColor">#101010</Color>
+            <Color x:Key="NodeFrameBackgroundColor">#40101010</Color>
 
             <system:Double x:Key="ThemeDisabledOpacity">0.4</system:Double>
 
@@ -95,6 +99,11 @@
             
             <SolidColorBrush x:Key="PixiEditorModifyImageLeftNodeBorderBrush" Color="{StaticResource PixiEditorModifyImageNodeBorderColor}"/>
             <SolidColorBrush x:Key="PixiEditorModifyImageRightNodeBorderBrush" Color="{StaticResource PixiEditorModifyImageNodeBorderColor}"/>
+            <SolidColorBrush x:Key="PixiEditorModifyImageZoneBorderBrush" Color="{StaticResource PixiEditorModifyImageNodeBorderColor}"/>
+            <SolidColorBrush x:Key="PixiEditorModifyImageZoneBackgroundBrush" Color="{StaticResource PixiEditorModifyImageNodeBackgroundColor}"/>
+            
+            <SolidColorBrush x:Key="NodeFrameBorderBrush" Color="{StaticResource NodeFrameBorderColor}"/>
+            <SolidColorBrush x:Key="NodeFrameBackgroundBrush" Color="{StaticResource NodeFrameBackgroundColor}"/>
 
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
             <CornerRadius x:Key="ControlCornerRadiusTop">5, 5, 0, 0</CornerRadius>