Use GenericPropertyView for label and separate output and input

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

@@ -14,19 +14,24 @@ internal class BoolToValueConverter : MarkupConverter
     {
         if (value is bool and true)
         {
-            return GetValue(TrueValue);
+            return GetValue(TrueValue, targetType);
         }
 
-        return GetValue(FalseValue);
+        return GetValue(FalseValue, targetType);
     }
 
-    private object GetValue(object value)
+    private object GetValue(object value, Type targetType)
     {
         if (value is string s && s.StartsWith("localized:"))
         {
             return new LocalizedString(s.Split("localized:")[1]);
         }
 
+        if (value is string enumString && targetType.IsEnum)
+        {
+            return Enum.Parse(targetType, enumString);
+        }
+
         return value;
     }
 

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

@@ -6,7 +6,7 @@
         <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid Margin="-5, 2" ColumnDefinitions="Auto, *, Auto">
+                <Grid Margin="-5, 2" ColumnDefinitions="15, *, 15" MinHeight="18">
                     <properties:NodeSocket Name="PART_InputSocket"
                                            Node="{Binding DataContext.Node, RelativeSource={RelativeSource TemplatedParent}}"
                                            Label="{Binding DataContext.DisplayName, RelativeSource={RelativeSource TemplatedParent}}"
@@ -18,12 +18,12 @@
                             <x:Boolean>True</x:Boolean>
                         </properties:NodeSocket.IsInput>
                     </properties:NodeSocket>
-                    <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" />
+                    <ContentPresenter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Content="{TemplateBinding Content}" />
                     <properties:NodeSocket Grid.Column="2" Name="PART_OutputSocket"
                                            Label="{Binding DataContext.DisplayName, RelativeSource={RelativeSource TemplatedParent}}"
+                                           HorizontalAlignment="Right"
                                            IsFunc="{Binding DataContext.IsFunc, RelativeSource={RelativeSource TemplatedParent}}"
-                                           IsVisible="{Binding !DataContext.IsInput,
-                    RelativeSource={RelativeSource TemplatedParent}}"
+                                           IsVisible="{Binding !DataContext.IsInput,RelativeSource={RelativeSource TemplatedParent}}"
                                            SocketBrush="{Binding DataContext.SocketBrush, RelativeSource={RelativeSource TemplatedParent}}">
                         <properties:NodeSocket.IsInput>
                             <x:Boolean>False</x:Boolean>

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

@@ -1,13 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:nodes="clr-namespace:PixiEditor.AvaloniaUI.Views.Nodes"
-                    xmlns:properties="clr-namespace:PixiEditor.AvaloniaUI.Views.Nodes.Properties"
-                    xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions">
+                    xmlns:properties="clr-namespace:PixiEditor.AvaloniaUI.Views.Nodes.Properties">
     <ControlTheme TargetType="properties:NodeSocket" x:Key="{x:Type properties:NodeSocket}">
         <Setter Property="Template">
             <ControlTemplate>
                 <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-                    <TextBlock VerticalAlignment="Center" Margin="0, 0, 2, 0" ui:Translator.Key="{TemplateBinding Label}" IsVisible="{Binding !IsInput, RelativeSource={RelativeSource TemplatedParent}}"/>
                     <Grid Name="PART_ConnectPort">
                         <Ellipse Width="10" Height="10" 
                                  Fill="{TemplateBinding SocketBrush}" 
@@ -18,7 +15,6 @@
                                    RenderTransform="rotate(45deg)"
                                    IsVisible="{Binding IsFunc, RelativeSource={RelativeSource TemplatedParent}}"/>
                     </Grid>
-                    <TextBlock VerticalAlignment="Center" Margin="2, 0, 0, 0" ui:Translator.Key="{TemplateBinding Label}" IsVisible="{Binding IsInput, RelativeSource={RelativeSource TemplatedParent}}"/>
                 </StackPanel>
             </ControlTemplate>
         </Setter>

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

@@ -34,28 +34,23 @@
                                            FontWeight="Bold" />
                             </Border>
                             <Border Grid.Row="1" Background="{DynamicResource ThemeControlMidBrush}">
-                                <Grid>
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="0.5*" />
-                                        <ColumnDefinition Width="0.5*" />
-                                    </Grid.ColumnDefinitions>
-
-                                    <ItemsControl ItemsSource="{TemplateBinding Inputs}" ClipToBounds="False">
+                                <StackPanel>
+                                    <ItemsControl ItemsSource="{TemplateBinding Outputs}"
+                                                  ClipToBounds="False">
                                         <ItemsControl.ItemContainerTheme>
                                             <ControlTheme TargetType="ContentPresenter">
                                                 <Setter Property="DataContext" Value="." />
                                             </ControlTheme>
                                         </ItemsControl.ItemContainerTheme>
                                     </ItemsControl>
-                                    <ItemsControl Grid.Column="1" ItemsSource="{TemplateBinding Outputs}"
-                                                  ClipToBounds="False">
+                                    <ItemsControl ItemsSource="{TemplateBinding Inputs}" ClipToBounds="False">
                                         <ItemsControl.ItemContainerTheme>
                                             <ControlTheme TargetType="ContentPresenter">
                                                 <Setter Property="DataContext" Value="." />
                                             </ControlTheme>
                                         </ItemsControl.ItemContainerTheme>
                                     </ItemsControl>
-                                </Grid>
+                                </StackPanel>
                             </Border>
                             <Border CornerRadius="0, 0, 4.5, 4.5" Grid.Row="2" ClipToBounds="True">
                                 <visuals:SurfaceControl Width="200" Height="200"

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

@@ -20,7 +20,7 @@ internal abstract class NodePropertyViewModel : ViewModelBase, INodePropertyHand
     
     private ObservableCollection<INodePropertyHandler> connectedInputs = new();
     private INodePropertyHandler? connectedOutput;
-    
+
     public string DisplayName
     {
         get => displayName;

src/PixiEditor.AvaloniaUI/Views/Nodes/Properties/GenericPropertyView.axaml

@@ -2,7 +2,14 @@
              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:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
              xmlns:properties="clr-namespace:PixiEditor.AvaloniaUI.Views.Nodes.Properties"
+             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="PixiEditor.AvaloniaUI.Views.Nodes.Properties.GenericPropertyView">
+    <Grid>
+        <TextBlock
+            ui:Translator.Key="{Binding DisplayName}"
+            HorizontalAlignment="{Binding IsInput, Converter={converters:BoolToValueConverter FalseValue='Right', TrueValue='Left'}}"/>
+    </Grid>
 </properties:NodePropertyView>