Colored connections and remove pen allocation in ConnectionLine.cs

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

@@ -7,9 +7,18 @@
         <Setter Property="IsHitTestVisible" Value="False"/>
         <Setter Property="Template">
             <ControlTemplate>
-                    <nodes:ConnectionLine Color="{DynamicResource ThemeForegroundBrush}" Thickness="2"
+                    <nodes:ConnectionLine Thickness="2"
                           StartPoint="{Binding StartPoint, RelativeSource={RelativeSource TemplatedParent}}"
-                          EndPoint="{Binding EndPoint, RelativeSource={RelativeSource TemplatedParent}}" />
+                          EndPoint="{Binding EndPoint, RelativeSource={RelativeSource TemplatedParent}}">
+                        <nodes:ConnectionLine.LineBrush>
+                            <LinearGradientBrush>
+                                <LinearGradientBrush.GradientStops>
+                                    <GradientStop Offset="0" Color="{Binding InputProperty.SocketBrush.Color, RelativeSource={RelativeSource TemplatedParent}}" />
+                                    <GradientStop Offset="1" Color="{Binding OutputProperty.SocketBrush.Color, RelativeSource={RelativeSource TemplatedParent}}" />
+                                </LinearGradientBrush.GradientStops>
+                            </LinearGradientBrush>
+                        </nodes:ConnectionLine.LineBrush>
+                    </nodes:ConnectionLine>
             </ControlTemplate>
         </Setter>
     </ControlTheme>

src/PixiEditor.AvaloniaUI/Views/Nodes/ConnectionLine.cs

@@ -6,14 +6,16 @@ namespace PixiEditor.AvaloniaUI.Views.Nodes;
 
 public class ConnectionLine : Control
 {
-    public static readonly StyledProperty<SolidColorBrush> ColorProperty = AvaloniaProperty.Register<ConnectionLine, SolidColorBrush>("Color");
+    private Pen pen = new() { LineCap = PenLineCap.Round };
+    
+    public static readonly StyledProperty<LinearGradientBrush> ColorProperty = AvaloniaProperty.Register<ConnectionLine, LinearGradientBrush>("Color");
     public static readonly StyledProperty<double> ThicknessProperty = AvaloniaProperty.Register<ConnectionLine, double>("Thickness");
     public static readonly StyledProperty<Point> StartPointProperty = AvaloniaProperty.Register<ConnectionLine, Point>("StartPoint");
     public static readonly StyledProperty<Point> EndPointProperty = AvaloniaProperty.Register<ConnectionLine, Point>("EndPoint");
 
-    public SolidColorBrush Color
+    public LinearGradientBrush LineBrush
     {
-        get { return (SolidColorBrush)GetValue(ColorProperty); }
+        get { return GetValue(ColorProperty); }
         set { SetValue(ColorProperty, value); }
     }
 
@@ -63,6 +65,12 @@ public class ConnectionLine : Control
         ctx.BeginFigure(p1, false);
         ctx.CubicBezierTo(controlPoint, controlPoint2, p2);
         
-        context.DrawGeometry(Color, new Pen(Color, Thickness) { LineCap = PenLineCap.Round }, geometry);
+        LineBrush.StartPoint = new RelativePoint(p1.X, p1.Y, RelativeUnit.Absolute);
+        LineBrush.EndPoint = new RelativePoint(p2.X, p2.Y, RelativeUnit.Absolute);
+
+        pen.Brush = LineBrush;
+        pen.Thickness = Thickness;
+        
+        context.DrawGeometry(LineBrush, pen, geometry);
     }
 }