Browse Source

Nodes visual haul

flabbet 1 year ago
parent
commit
0921c7468e

+ 10 - 1
src/PixiEditor.AvaloniaUI/Data/Localization/Languages/en.json

@@ -606,5 +606,14 @@
   "VIDEO_FILES": "Video Files",
   "MP4_FILE": "MP4 Videos",
   "COLUMNS": "Columns",
-    "ROWS": "Rows"
+    "ROWS": "Rows",
+  "BACKGROUND": "Background",
+  "OPACITY": "Opacity",
+  "IS_VISIBLE": "Is visible",
+  "CLIP_TO_MEMBER_BELOW": "Clip to member below",
+  "BLEND_MODE": "Blend mode",
+  "MASK": "Mask",
+  "MASK_IS_VISIBLE": "Mask is visible",
+  "OUTPUT": "Output",
+  "INPUT": "Input"
 }

+ 4 - 2
src/PixiEditor.AvaloniaUI/Styles/Templates/NodePropertyViewTemplate.axaml

@@ -6,11 +6,12 @@
         <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid Margin="-10, 0">
+                <Grid Margin="-5, 2">
                     <Grid.ColumnDefinitions>10*, *, 10*</Grid.ColumnDefinitions>
                     <properties:NodeSocket Name="PART_InputSocket"
                                            Node="{Binding DataContext.Node, RelativeSource={RelativeSource TemplatedParent}}"
                                            Label="{Binding DataContext.DisplayName, RelativeSource={RelativeSource TemplatedParent}}"
+                                           SocketBrush="{Binding DataContext.SocketBrush, RelativeSource={RelativeSource TemplatedParent}}"
                                            IsVisible="{Binding DataContext.IsInput, 
                     RelativeSource={RelativeSource TemplatedParent}}">
                         <properties:NodeSocket.IsInput>
@@ -21,7 +22,8 @@
                     <properties:NodeSocket Grid.Column="2" Name="PART_OutputSocket"
                                            Label="{Binding DataContext.DisplayName, RelativeSource={RelativeSource TemplatedParent}}"
                                            IsVisible="{Binding !DataContext.IsInput,
-                    RelativeSource={RelativeSource TemplatedParent}}">
+                    RelativeSource={RelativeSource TemplatedParent}}"
+                                           SocketBrush="{Binding DataContext.SocketBrush, RelativeSource={RelativeSource TemplatedParent}}">
                         <properties:NodeSocket.IsInput>
                             <x:Boolean>False</x:Boolean>
                         </properties:NodeSocket.IsInput>

+ 6 - 5
src/PixiEditor.AvaloniaUI/Styles/Templates/NodeSocket.axaml

@@ -1,14 +1,15 @@
 <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:properties="clr-namespace:PixiEditor.AvaloniaUI.Views.Nodes.Properties"
+                    xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions">
     <ControlTheme TargetType="properties:NodeSocket" x:Key="{x:Type properties:NodeSocket}">
         <Setter Property="Template">
             <ControlTemplate>
-                <StackPanel Orientation="Horizontal">
-                    <TextBlock Text="{TemplateBinding Label}" IsVisible="{Binding !IsInput, RelativeSource={RelativeSource TemplatedParent}}"/>
-                    <Ellipse Width="10" Height="10" Fill="Red" Name="PART_ConnectPort"/>
-                    <TextBlock Text="{TemplateBinding Label}" IsVisible="{Binding IsInput, RelativeSource={RelativeSource TemplatedParent}}"/>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                    <TextBlock Margin="0, 0, 2, 0" ui:Translator.Key="{TemplateBinding Label}" IsVisible="{Binding !IsInput, RelativeSource={RelativeSource TemplatedParent}}"/>
+                    <Ellipse Width="10" Height="10" Fill="{TemplateBinding SocketBrush}" Name="PART_ConnectPort"/>
+                    <TextBlock Margin="2, 0, 0, 0" ui:Translator.Key="{TemplateBinding Label}" IsVisible="{Binding IsInput, RelativeSource={RelativeSource TemplatedParent}}"/>
                 </StackPanel>
             </ControlTemplate>
         </Setter>

+ 9 - 7
src/PixiEditor.AvaloniaUI/Styles/Templates/NodeView.axaml

@@ -1,24 +1,27 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:nodes="clr-namespace:PixiEditor.AvaloniaUI.Views.Nodes"
-                    xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals">
+                    xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
+                    xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions">
     <ControlTheme TargetType="nodes:NodeView" x:Key="{x:Type nodes:NodeView}">
         <Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}" />
         <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-        <Setter Property="Margin" Value="5" />
         <Setter Property="Padding" Value="5" />
+        <Setter Property="ClipToBounds" Value="False"/>
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}"
-                        BoxShadow="0 0 5 0 Black"
                         Margin="{TemplateBinding Margin}"
                         Name="RootBorder">
-                        <Grid>
+                    <Border.Effect>
+                        <DropShadowEffect Opacity="0.5" BlurRadius="25"></DropShadowEffect>
+                    </Border.Effect>
+                    <Grid>
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto" />
                                 <RowDefinition Height="Auto" />
@@ -27,11 +30,10 @@
                             <Border Padding="{TemplateBinding Padding}" Grid.ColumnSpan="3" Grid.Row="0"
                                     CornerRadius="4.5, 4.5, 0 ,0"
                                     Background="{DynamicResource ThemeControlHighBrush}">
-                                <TextBlock Text="{TemplateBinding DisplayName}"
+                                <TextBlock ui:Translator.Key="{TemplateBinding DisplayName}"
                                            FontWeight="Bold" />
                             </Border>
-                            <Border Grid.Row="1" Background="{DynamicResource ThemeControlMidBrush}"
-                                    Padding="{TemplateBinding Padding}">
+                            <Border Grid.Row="1" Background="{DynamicResource ThemeControlMidBrush}">
                                 <Grid>
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="0.5*" />

+ 34 - 4
src/PixiEditor.AvaloniaUI/ViewModels/Nodes/NodePropertyViewModel.cs

@@ -1,5 +1,7 @@
 using System.Collections.ObjectModel;
 using Avalonia;
+using Avalonia.Media;
+using Avalonia.Styling;
 using PixiEditor.AvaloniaUI.Models.DocumentModels;
 using PixiEditor.AvaloniaUI.Models.Handlers;
 using PixiEditor.AvaloniaUI.ViewModels.Nodes.Properties;
@@ -13,6 +15,7 @@ internal abstract class NodePropertyViewModel : ViewModelBase, INodePropertyHand
     private object value;
     private INodeHandler node;
     private bool isInput;
+    private IBrush socketBrush;
     
     private ObservableCollection<INodePropertyHandler> connectedInputs = new();
     private INodePropertyHandler? connectedOutput;
@@ -58,10 +61,37 @@ internal abstract class NodePropertyViewModel : ViewModelBase, INodePropertyHand
         get => propertyName;
         set => SetProperty(ref propertyName, value);
     }
+    
+    public IBrush SocketBrush
+    {
+        get => socketBrush;
+        set => SetProperty(ref socketBrush, value);
+    }
+    
+    public Type PropertyType { get; }
 
-    public NodePropertyViewModel(INodeHandler node)
+    public NodePropertyViewModel(INodeHandler node, Type propertyType)
     {
         Node = node;
+        PropertyType = propertyType;
+        if (Application.Current.Styles.TryGetResource($"{PropertyType.Name}SocketBrush", App.Current.ActualThemeVariant, out object brush))
+        {
+            if (brush is IBrush brushValue)
+            {
+                SocketBrush = brushValue;
+            }
+        }
+        
+        if(SocketBrush == null)
+        {
+            if(Application.Current.Styles.TryGetResource($"DefaultSocketBrush", App.Current.ActualThemeVariant, out object defaultBrush))
+            {
+                if (defaultBrush is IBrush defaultBrushValue)
+                {
+                    SocketBrush = defaultBrushValue;
+                }
+            }
+        }
     }
 
     public static NodePropertyViewModel? CreateFromType(Type type, INodeHandler node)
@@ -72,10 +102,10 @@ internal abstract class NodePropertyViewModel : ViewModelBase, INodePropertyHand
         Type viewModelType = Type.GetType($"PixiEditor.AvaloniaUI.ViewModels.Nodes.Properties.{name}");
         if (viewModelType == null)
         {
-            return new GenericPropertyViewModel(node);
+            return new GenericPropertyViewModel(node, type);
         }
         
-        return (NodePropertyViewModel)Activator.CreateInstance(viewModelType, node);
+        return (NodePropertyViewModel)Activator.CreateInstance(viewModelType, node, type);
     }
 }
 
@@ -89,7 +119,7 @@ internal abstract class NodePropertyViewModel<T> : NodePropertyViewModel
         set => SetProperty(ref nodeValue, value);
     }
     
-    public NodePropertyViewModel(NodeViewModel node) : base(node)
+    public NodePropertyViewModel(NodeViewModel node, Type valueType) : base(node, valueType)
     {
     }
 }

+ 1 - 1
src/PixiEditor.AvaloniaUI/ViewModels/Nodes/Properties/GenericPropertyViewModel.cs

@@ -4,7 +4,7 @@ namespace PixiEditor.AvaloniaUI.ViewModels.Nodes.Properties;
 
 internal class GenericPropertyViewModel : NodePropertyViewModel
 {
-    public GenericPropertyViewModel(INodeHandler node) : base(node)
+    public GenericPropertyViewModel(INodeHandler node, Type valueType) : base(node, valueType)
     {
     }
 }

+ 10 - 0
src/PixiEditor.AvaloniaUI/Views/Nodes/Properties/NodeSocket.cs

@@ -2,6 +2,7 @@
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
+using Avalonia.Media;
 using PixiEditor.AvaloniaUI.Helpers;
 using PixiEditor.AvaloniaUI.Models.Handlers;
 
@@ -12,6 +13,15 @@ public class NodeSocket : TemplatedControl
     public static readonly StyledProperty<bool> IsInputProperty = AvaloniaProperty.Register<NodeSocket, bool>("IsInput");
     public static readonly StyledProperty<string> LabelProperty = AvaloniaProperty.Register<NodeSocket, string>("Label");
 
+    public static readonly StyledProperty<IBrush> SocketBrushProperty = AvaloniaProperty.Register<NodeSocket, IBrush>(
+        "SocketBrush");
+
+    public IBrush SocketBrush
+    {
+        get => GetValue(SocketBrushProperty);
+        set => SetValue(SocketBrushProperty, value);
+    }
+
     public static readonly StyledProperty<INodeHandler> NodeProperty = AvaloniaProperty.Register<NodeSocket, INodeHandler>(
         "Node");
 

+ 1 - 1
src/PixiEditor.ChangeableDocument/ChangeInfos/NodeGraph/CreateNode_ChangeInfo.cs

@@ -21,7 +21,7 @@ public record CreateNode_ChangeInfo(
 
     public static CreateNode_ChangeInfo CreateFromNode(IReadOnlyNode node)
     {
-        return new CreateNode_ChangeInfo(node.GetType().Name, node.Position, node.Id,
+        return new CreateNode_ChangeInfo(node.GetType().Name.Replace("Node", ""), node.Position, node.Id,
             CreatePropertyInfos(node.InputProperties, true, node.Id),
             CreatePropertyInfos(node.OutputProperties, false, node.Id));
     }

+ 10 - 0
src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -37,6 +37,11 @@
             <Color x:Key="SelectionFillColor">#510051ff</Color>
 
             <Color x:Key="NotificationCardBackgroundColor">#303030</Color>
+            
+            <Color x:Key="DefaultSocketColor">#c0334e</Color>
+            <Color x:Key="ImageSocketColor">#99c47a</Color>
+            <Color x:Key="BoolSocketColor">#68abdf</Color>
+            <Color x:Key="FloatSocketColor">#ffc66d</Color>
 
             <system:Double x:Key="ThemeDisabledOpacity">0.4</system:Double>
 
@@ -71,6 +76,11 @@
             <SolidColorBrush x:Key="ThumbBrush" Color="{StaticResource ThumbColor}"/>
             
             <SolidColorBrush x:Key="SelectionFillBrush" Color="{StaticResource SelectionFillColor}"/>
+            
+            <SolidColorBrush x:Key="DefaultSocketBrush" Color="{StaticResource DefaultSocketColor}"/>
+            <SolidColorBrush x:Key="ChunkyImageSocketBrush" Color="{StaticResource ImageSocketColor}"/>
+            <SolidColorBrush x:Key="BooleanSocketBrush" Color="{StaticResource BoolSocketColor}"/>
+            <SolidColorBrush x:Key="SingleSocketBrush" Color="{StaticResource FloatSocketColor}"/>
 
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
             <CornerRadius x:Key="ControlCornerRadiusTop">5, 5, 0, 0</CornerRadius>

+ 1 - 0
src/PixiEditor.UI.Common/PixiEditor.UI.Common.csproj

@@ -11,6 +11,7 @@
       <AvaloniaResource Include="Fonts\pixiperfect.ttf" />
       <None Remove="Assets\Animations\LoadingIndicator.json" />
       <AvaloniaResource Include="Assets\Animations\LoadingIndicator.json" />
+      <None Remove="Accents\Img_illust_mikunt-3.png" />
     </ItemGroup>
 
     <ItemGroup>