From a565feaedff35f5deabe37ba6d5e46551063dd20 Mon Sep 17 00:00:00 2001
From: xxorza <xxorza@gmail.com>
Date: Sat, 18 May 2024 15:48:31 +0300
Subject: [PATCH] Implement UI improvements and refactor codebase

This commit introduces several UI improvements such as altering certain colors and borders, repositioning nodes, and adding new Brushes in Styles.xaml. In addition, significant refactoring was done to simplify code in MainWindow.xaml.cs by using binding in MainWindow.xaml instead of manually redrawing connections. Adjustments were also made to the positioning of nodes in ViewModel.cs, and parts of the Connection.cs code were streamlined or removed as part of the refactoring.
---
 Editor.NET/Editor.NET/Connection.cs          | 26 ++++-----------
 Editor.NET/Editor.NET/MainWindow.xaml        | 35 ++++++++++++++++----
 Editor.NET/Editor.NET/MainWindow.xaml.cs     | 20 -----------
 Editor.NET/Editor.NET/Node.xaml              |  9 ++---
 Editor.NET/Editor.NET/Styles.xaml            |  6 ++++
 Editor.NET/Editor.NET/ViewModel/ViewModel.cs |  2 +-
 6 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/Editor.NET/Editor.NET/Connection.cs b/Editor.NET/Editor.NET/Connection.cs
index ed37b0f..5793ac3 100644
--- a/Editor.NET/Editor.NET/Connection.cs
+++ b/Editor.NET/Editor.NET/Connection.cs
@@ -34,18 +34,7 @@ public class Connection : ClickControl {
         typeof(Connection),
         new PropertyMetadata(Brushes.Coral)
     );
-
-    public static readonly DependencyProperty BrushProperty = DependencyProperty.Register(
-        nameof(Brush), typeof(Brush),
-        typeof(Connection),
-        new PropertyMetadata(Brushes.SlateGray)
-    );
-
-    public Brush Brush {
-        get { return (Brush)GetValue(BrushProperty); }
-        set { SetValue(BrushProperty, value); }
-    }
-
+    
     public Connection() {
         LeftButtonClick += LeftButtonClickHandler;
         MouseDoubleClick += MouseButtonEventHandler;
@@ -89,13 +78,7 @@ private void MouseButtonEventHandler(object sender, MouseButtonEventArgs e) {
     protected override void OnRender(DrawingContext drawingContext) {
         base.OnRender(drawingContext);
 
-        Pen pen;
-        if (IsMouseOver) {
-            pen = new Pen(HoverBrush, Thickness * 1.5);
-        } else {
-            pen = new Pen(Brush, Thickness);
-        }
-
+    
         Point[] points = [
             new(InputPosition.X - 5, InputPosition.Y),
             new(InputPosition.X - 50, InputPosition.Y),
@@ -114,6 +97,9 @@ protected override void OnRender(DrawingContext drawingContext) {
         path.Figures.Add(pathFigure);
 
         drawingContext.DrawGeometry(null, new Pen(Brushes.Transparent, 5), path);
-        drawingContext.DrawGeometry(null, pen, path);
+        drawingContext.DrawGeometry(null, new Pen(BorderBrush, Thickness), path);
+        if (IsMouseOver) {
+            drawingContext.DrawGeometry(null, new Pen(HoverBrush, Thickness * 1.5), path);
+        }
     }
 }
\ No newline at end of file
diff --git a/Editor.NET/Editor.NET/MainWindow.xaml b/Editor.NET/Editor.NET/MainWindow.xaml
index 13d47a7..d72b14e 100644
--- a/Editor.NET/Editor.NET/MainWindow.xaml
+++ b/Editor.NET/Editor.NET/MainWindow.xaml
@@ -14,7 +14,7 @@
         Height="450"
         Width="800"
         Background="#292929"
-        
+
         Loaded="MainWindow_OnLoaded">
     <Grid>
         <Grid.RowDefinitions>
@@ -44,19 +44,40 @@
                     <RowDefinition Height="*" />
                     <RowDefinition Height="Auto" MinHeight="50" />
                 </Grid.RowDefinitions>
-                
-                <Canvas
+
+                <!-- <Canvas -->
+                <!--     Grid.Row="0" -->
+                <!--     x:Name="ConnectionCanvas" /> -->
+                <ItemsControl
                     Grid.Row="0"
-                    x:Name="ConnectionCanvas" />
-                
+                    ItemsSource="{Binding Connections}">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate DataType="{x:Type viewModel:Connection}">
+                            <local:Connection
+                                InputPosition="{Binding Input.CanvasPosition}" 
+                                OutputPosition="{Binding Output.CanvasPosition}" 
+                                BorderBrush="{StaticResource Blue}"
+                                HoverBrush="{StaticResource HighlightOverlayBrush}"
+                                Thickness="2"
+                                Width="500"
+                                Height="500"
+                                />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <Canvas />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                </ItemsControl>
+
                 <ItemsControl
                     Grid.Row="0"
                     ItemsSource="{Binding Nodes}">
                     <ItemsControl.ItemTemplate>
                         <DataTemplate DataType="{x:Type viewModel:Node}">
                             <local:Node
-                                NodeDataContext="{Binding}"
-                                Width="Auto" Height="Auto" />
+                                NodeDataContext="{Binding}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                     <ItemsControl.ItemsPanel>
diff --git a/Editor.NET/Editor.NET/MainWindow.xaml.cs b/Editor.NET/Editor.NET/MainWindow.xaml.cs
index a398840..e526bf3 100644
--- a/Editor.NET/Editor.NET/MainWindow.xaml.cs
+++ b/Editor.NET/Editor.NET/MainWindow.xaml.cs
@@ -24,29 +24,9 @@ public MainWindow() {
         InitializeComponent();
 
         this.DataContext = _viewModel;
-
-        _viewModel.Connections.CollectionChanged += (sender, args) => { RedrawConnections(); };
-        RedrawConnections();
     }
 
-    private void RedrawConnections() {
-        ConnectionCanvas.Children.Clear();
-
-        foreach (var connection in _viewModel.Connections) {
-            var connectionView = new Connection {
-                Thickness = 2,
-            };
 
-            connectionView.SetBinding(Connection.OutputPositionDependencyProperty,
-                new Binding("Output.CanvasPosition") { Source = connection }
-            );
-            connectionView.SetBinding(Connection.InputPositionDependencyProperty,
-                new Binding("Input.CanvasPosition") { Source = connection }
-            );
-
-            ConnectionCanvas.Children.Add(connectionView);
-        }
-    }
 
     private void AddDesignNodeButton_OnClick(object sender, RoutedEventArgs e) {
         _viewModel.Nodes.Add(new DesignNode());
diff --git a/Editor.NET/Editor.NET/Node.xaml b/Editor.NET/Editor.NET/Node.xaml
index c091158..5600e39 100644
--- a/Editor.NET/Editor.NET/Node.xaml
+++ b/Editor.NET/Editor.NET/Node.xaml
@@ -41,15 +41,16 @@
         </ResourceDictionary>
     </UserControl.Resources>
 
-    <Border BorderBrush="#333"
+    <Border BorderBrush="#444"
             Margin="4" Padding="0"
-            BorderThickness="1"
+            BorderThickness="2"
             Background="#222"
             CornerRadius="2">
 
         <StackPanel Orientation="Vertical" Margin="0">
-            <Border Background="#333"
-                    CornerRadius="2 2 0 0"
+            <Border Background="#444"
+                    Margin="-1 -1 -1 0"
+                    CornerRadius="1 1 0 0"
                     Padding="0"
                     MouseLeftButtonDown="Title_OnMouseLeftButtonDown"
                     MouseLeftButtonUp="Title_OnMouseLeftButtonUp">
diff --git a/Editor.NET/Editor.NET/Styles.xaml b/Editor.NET/Editor.NET/Styles.xaml
index b4af089..ade27e1 100644
--- a/Editor.NET/Editor.NET/Styles.xaml
+++ b/Editor.NET/Editor.NET/Styles.xaml
@@ -8,6 +8,12 @@
     <Brush x:Key="Green">#53A957</Brush>
     <Brush x:Key="Blue">#34A0F6</Brush>
     <Brush x:Key="Red">#F53636</Brush>
+    
+    <Brush x:Key="LiteYellow">#FFDD80</Brush>
+    <Brush x:Key="LiteGreen">#80FF84</Brush>
+    <Brush x:Key="LiteBlue">#80C8FF</Brush>
+    <Brush x:Key="LiteRed">#FF8080</Brush>
+    
     <Brush x:Key="DarkWhite">#BBBCC1</Brush>
 
     <Style TargetType="Label">
diff --git a/Editor.NET/Editor.NET/ViewModel/ViewModel.cs b/Editor.NET/Editor.NET/ViewModel/ViewModel.cs
index 2180ea3..a09a565 100644
--- a/Editor.NET/Editor.NET/ViewModel/ViewModel.cs
+++ b/Editor.NET/Editor.NET/ViewModel/ViewModel.cs
@@ -380,7 +380,7 @@ public DesignMainWindowViewModel() {
             CanvasPosition = new Point(30.0f, 50.0f),
         });
         Nodes.Add(new DesignNode() {
-            CanvasPosition = new Point(100.0f, 150.0f),
+            CanvasPosition = new Point(220.0f, 130.0f),
         });
 
         Connections.Add(new Connection(