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

@@ -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);
+        }
     }
 }

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>

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());

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">

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">

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(