Nodes - Added gradient nodes

Nodes - Added color gradient pin type
Data bindings - Changed color gradient data bindings to now take a color gradient

src/Artemis.UI/Screens/VisualScripting/CableView.axaml

@@ -55,10 +55,10 @@
                     <DataTemplate DataType="skiaSharp:SKColor">
                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                             <TextBlock x:Name="HexDisplay"
-                                       Text="{CompiledBinding Converter={StaticResource SKColorToStringConverter}}"
+                                       Text="{CompiledBinding Converter={StaticResource SKColorToStringConverter}, Mode=OneWay}"
                                        VerticalAlignment="Center"
-                                       HorizontalAlignment="Stretch" 
-                                       FontFamily="Consolas"/>
+                                       HorizontalAlignment="Stretch"
+                                       FontFamily="Consolas" />
                             <Border Margin="5 0 0 0"
                                     VerticalAlignment="Bottom"
                                     HorizontalAlignment="Right"
@@ -69,22 +69,25 @@
                                     BorderBrush="{DynamicResource ColorPickerButtonOutline}"
                                     CornerRadius="4"
                                     ClipToBounds="True">
-								<Border CornerRadius="4">
-									<Border.Background>
-										<SolidColorBrush Color="{Binding Converter={StaticResource SKColorToColorConverter}}" />
-									</Border.Background>
-								</Border>
+                                <Border CornerRadius="4">
+                                    <Border.Background>
+                                        <SolidColorBrush Color="{Binding Converter={StaticResource SKColorToColorConverter}, Mode=OneWay}" />
+                                    </Border.Background>
+                                </Border>
                             </Border>
                         </StackPanel>
                     </DataTemplate>
+                    <DataTemplate DataType="core:ColorGradient">
+                        <TextBlock Text="Color gradient" FontFamily="Consolas" />
+                    </DataTemplate>
                     <DataTemplate DataType="core:Numeric">
-                        <TextBlock Text="{Binding}" FontFamily="Consolas"/>
+                        <TextBlock Text="{Binding Mode=OneWay}" FontFamily="Consolas" />
                     </DataTemplate>
                     <DataTemplate DataType="collections:IList">
-                        <TextBlock Text="{Binding Count, StringFormat='List - {0} item(s)'}" FontFamily="Consolas"/>
+                        <TextBlock Text="{Binding Count, StringFormat='List - {0} item(s)', Mode=OneWay}" FontFamily="Consolas" />
                     </DataTemplate>
                     <DataTemplate>
-                        <TextBlock Text="{Binding}" FontFamily="Consolas"/>
+                        <TextBlock Text="{Binding Mode=OneWay}" FontFamily="Consolas" />
                     </DataTemplate>
                 </ContentControl.DataTemplates>
             </ContentControl>

src/Artemis.UI/Screens/VisualScripting/NodeView.axaml

@@ -51,7 +51,7 @@
                             <avalonia:MaterialIcon Kind="AlertCircle"></avalonia:MaterialIcon>
                         </Button>
 
-                        <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="10 0 0 0" Text="{CompiledBinding Node.Name}" ToolTip.Tip="{CompiledBinding Node.Description}"/>
+                        <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="10 0 0 0" Text="{CompiledBinding Node.Name}" ToolTip.Tip="{CompiledBinding Node.Description}" />
 
                         <Button Grid.Column="2" VerticalAlignment="Center" Classes="icon-button icon-button-small" Margin="5" Command="{CompiledBinding DeleteNode}">
                             <avalonia:MaterialIcon Kind="Close"></avalonia:MaterialIcon>
@@ -60,21 +60,36 @@
                 </Border>
             </Border>
 
-            <Grid Grid.Row="1" ColumnDefinitions="Auto,*,Auto" Margin="4">
-                <StackPanel Grid.Column="0" IsVisible="{CompiledBinding HasInputPins}">
+            <Grid Grid.Row="1" RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto" Margin="4">
+                <ContentControl Grid.Row="0"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="3"
+                                Margin="5"
+                                Content="{CompiledBinding CustomNodeViewModel}"
+                                IsVisible="{CompiledBinding DisplayCustomViewModelAbove}" />
+
+                <StackPanel Grid.Row="1" Grid.Column="0" IsVisible="{CompiledBinding HasInputPins}">
                     <ItemsControl Items="{CompiledBinding InputPinViewModels}" Margin="4 0" />
                     <ItemsControl Items="{CompiledBinding InputPinCollectionViewModels}" />
                 </StackPanel>
 
-                <ContentControl Grid.Column="1"
-                                Name="CustomViewModelContainer"
+                <ContentControl Grid.Row="1"
+                                Grid.Column="1"
                                 Content="{CompiledBinding CustomNodeViewModel}"
-                                IsVisible="{CompiledBinding CustomNodeViewModel, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                VerticalAlignment="{CompiledBinding CustomViewModelVerticalAlignment}"
+                                IsVisible="{CompiledBinding DisplayCustomViewModelBetween}" />
 
-                <StackPanel Grid.Column="2" IsVisible="{CompiledBinding HasOutputPins}">
+                <StackPanel Grid.Row="1" Grid.Column="2" IsVisible="{CompiledBinding HasOutputPins}">
                     <ItemsControl Items="{CompiledBinding OutputPinViewModels}" Margin="4 0" />
                     <ItemsControl Items="{CompiledBinding OutputPinCollectionViewModels}" />
                 </StackPanel>
+
+                <ContentControl Grid.Row="2"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="3"
+                                Margin="5"
+                                Content="{CompiledBinding CustomNodeViewModel}"
+                                IsVisible="{CompiledBinding DisplayCustomViewModelBelow}" />
             </Grid>
         </Grid>
     </Border>

src/Artemis.UI/Screens/VisualScripting/NodeViewModel.cs

@@ -13,6 +13,7 @@ using Artemis.UI.Shared.Services.NodeEditor;
 using Artemis.UI.Shared.Services.NodeEditor.Commands;
 using Avalonia;
 using Avalonia.Controls.Mixins;
+using Avalonia.Layout;
 using DynamicData;
 using DynamicData.Binding;
 using ReactiveUI;
@@ -34,6 +35,10 @@ public class NodeViewModel : ActivatableViewModelBase
     private ObservableAsPropertyHelper<bool>? _isStaticNode;
     private double _startX;
     private double _startY;
+    private bool _displayCustomViewModelAbove;
+    private bool _displayCustomViewModelBetween;
+    private bool _displayCustomViewModelBelow;
+    private VerticalAlignment _customViewModelVerticalAlignment;
 
     public NodeViewModel(NodeScriptViewModel nodeScriptViewModel, INode node, INodeVmFactory nodeVmFactory, INodeEditorService nodeEditorService, IWindowService windowService)
     {
@@ -132,15 +137,32 @@ public class NodeViewModel : ActivatableViewModelBase
                 }
             });
 
-            if (Node is Node coreNode)
-                CustomNodeViewModel = coreNode.GetCustomViewModel(nodeScriptViewModel.NodeScript);
+            // Set up the custom node VM if needed
+            if (Node is ICustomViewModelNode customViewModelNode)
+            {
+                CustomNodeViewModel = customViewModelNode.GetCustomViewModel(nodeScriptViewModel.NodeScript);
+                if (customViewModelNode.ViewModelPosition == CustomNodeViewModelPosition.AbovePins)
+                    DisplayCustomViewModelAbove = true;
+                else if (customViewModelNode.ViewModelPosition == CustomNodeViewModelPosition.BelowPins)
+                    DisplayCustomViewModelBelow = true;
+                else
+                {
+                    DisplayCustomViewModelBetween = true;
+                    
+                    if (customViewModelNode.ViewModelPosition == CustomNodeViewModelPosition.BetweenPinsTop)
+                        CustomViewModelVerticalAlignment = VerticalAlignment.Top;
+                    else if (customViewModelNode.ViewModelPosition == CustomNodeViewModelPosition.BetweenPinsTop)
+                        CustomViewModelVerticalAlignment = VerticalAlignment.Center;
+                    else
+                        CustomViewModelVerticalAlignment = VerticalAlignment.Bottom;
+                }
+            }
         });
     }
 
     public bool IsStaticNode => _isStaticNode?.Value ?? true;
     public bool HasInputPins => _hasInputPins?.Value ?? false;
     public bool HasOutputPins => _hasOutputPins?.Value ?? false;
-
     public NodeScriptViewModel NodeScriptViewModel { get; }
     public INode Node { get; }
     public ReadOnlyObservableCollection<PinViewModel> InputPinViewModels { get; }
@@ -149,16 +171,40 @@ public class NodeViewModel : ActivatableViewModelBase
     public ReadOnlyObservableCollection<PinCollectionViewModel> OutputPinCollectionViewModels { get; }
     public ReadOnlyObservableCollection<PinViewModel> PinViewModels { get; }
 
+    public bool IsSelected
+    {
+        get => _isSelected;
+        set => RaiseAndSetIfChanged(ref _isSelected, value);
+    }
+    
     public ICustomNodeViewModel? CustomNodeViewModel
     {
         get => _customNodeViewModel;
         set => RaiseAndSetIfChanged(ref _customNodeViewModel, value);
     }
 
-    public bool IsSelected
+    public bool DisplayCustomViewModelAbove
     {
-        get => _isSelected;
-        set => RaiseAndSetIfChanged(ref _isSelected, value);
+        get => _displayCustomViewModelAbove;
+        set => RaiseAndSetIfChanged(ref _displayCustomViewModelAbove, value);
+    }
+
+    public bool DisplayCustomViewModelBetween
+    {
+        get => _displayCustomViewModelBetween;
+        set => RaiseAndSetIfChanged(ref _displayCustomViewModelBetween, value);
+    }
+
+    public bool DisplayCustomViewModelBelow
+    {
+        get => _displayCustomViewModelBelow;
+        set => RaiseAndSetIfChanged(ref _displayCustomViewModelBelow, value);
+    }
+
+    public VerticalAlignment CustomViewModelVerticalAlignment
+    {
+        get => _customViewModelVerticalAlignment;
+        set => RaiseAndSetIfChanged(ref _customViewModelVerticalAlignment, value);
     }
 
     public ReactiveCommand<Unit, Unit> ShowBrokenState { get; }