Abstracting the gridline into properties makes it customizable

Add a gridline custom example
MakesYT · Jan 27, 2024 · e71b043 · e71b043
1 parent fe0579e
commit e71b043
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 13 deletions.
diff --git a/Nodify.Avalonia.Example/MainWindow.axaml b/Nodify.Avalonia.Example/MainWindow.axaml
@@ -22,11 +22,22 @@
             <controls:NodifyEditor.Resources>
                 <converters:FlowToDirectionConverter x:Key="FlowToDirectionConverter" />
             </controls:NodifyEditor.Resources>
+            <controls:NodifyEditor.GridLineTemplate>
+                <DataTemplate>
+                    <controls:LargeGridLine Width="{Binding $parent[controls:NodifyEditor].Bounds.Width}"
+                                            OffsetX="{Binding $parent[controls:NodifyEditor].OffsetX}"
+                                            OffsetY="{Binding $parent[controls:NodifyEditor].OffsetY}"
+                                            Zoom="{Binding $parent[controls:NodifyEditor].Zoom}"
+                                            Height="{Binding $parent[controls:NodifyEditor].Bounds.Height}"
+                                            Spacing="30"
+                                            Thickness="0.5"
+                                            Brush="LightGray"
+                                            ZIndex="-2"/>
+                </DataTemplate>
+            </controls:NodifyEditor.GridLineTemplate>
             <controls:NodifyEditor.ConnectionTemplate>
                 <DataTemplate DataType="{x:Type viewModelBase:ConnectionViewModelBase}">
                     <Grid>
-
-
                         <controls:Connection
                             Direction="{Binding Source.Flow,Converter={StaticResource FlowToDirectionConverter}}"
                             Source="{Binding Source.Anchor}" Focusable="True"

diff --git a/Nodify.Avalonia/Controls/BaseConnection.axaml.cs b/Nodify.Avalonia/Controls/BaseConnection.axaml.cs
@@ -317,7 +317,6 @@ protected override Geometry CreateDefiningGeometry()
                 (Vector sourceOffset, Vector targetOffset) = GetOffset();
                 Point source = Source + sourceOffset;
                 Point target = Target + targetOffset;
-                Debug.WriteLine( "source: " + source + ", target: " + target);
                 var (arrowStart, arrowEnd) = DrawLineGeometry(context, source, target);
 
                 if (ArrowSize.Width != 0d && ArrowSize.Height != 0d)

diff --git a/Nodify.Avalonia/Controls/LargeGridLine.axaml.cs b/Nodify.Avalonia/Controls/LargeGridLine.axaml.cs
@@ -12,6 +12,24 @@ public class LargeGridLine : TemplatedControl
     public static readonly AvaloniaProperty<double> OffsetXProperty=AvaloniaProperty.Register<LargeGridLine,double>(nameof(OffsetX));
     public static readonly AvaloniaProperty<double> OffsetYProperty=AvaloniaProperty.Register<LargeGridLine,double>(nameof(OffsetY));
     public static readonly AvaloniaProperty<double> ZoomProperty=AvaloniaProperty.Register<LargeGridLine,double>(nameof(Zoom));
+    public static readonly AvaloniaProperty<IBrush> BrushProperty = AvaloniaProperty.Register<LargeGridLine, IBrush>(nameof(Brush),Brushes.Gainsboro);
+    public static readonly AvaloniaProperty<double> ThicknessProperty = AvaloniaProperty.Register<LargeGridLine, double>(nameof(Thickness),0.5);
+    public static readonly AvaloniaProperty<double> SpacingProperty = AvaloniaProperty.Register<LargeGridLine, double>(nameof(Spacing), 20);
+    public double Spacing
+    {
+        get { return (double)GetValue(SpacingProperty); }
+        set { SetValue(SpacingProperty, value); }
+    }
+    public IBrush Brush
+    {
+        get { return (IBrush)GetValue(BrushProperty); }
+        set { SetValue(BrushProperty, value); }
+    }
+    public double Thickness
+    {
+        get { return (double)GetValue(ThicknessProperty); }
+        set { SetValue(ThicknessProperty, value); }
+    }
 
     public double OffsetX
     {
@@ -45,19 +63,19 @@ protected override void OnInitialized()
     public override void Render(DrawingContext context)
     {
         base.Render(context);
-        var pen = new Pen(Brushes.LightGray, 0.5);
-        double step = 20;
+        var pen = new Pen(Brush, Thickness);
+        double step = Spacing;
         // Draw horizontal lines
         var offsetY = Math.Abs(OffsetY/Zoom);
         var offsetX = Math.Abs(OffsetX/Zoom);
-        for (double y = OffsetY%20; y < this.Bounds.Height; y += step)
+        for (double y = OffsetY%step; y < this.Bounds.Height; y += step)
         {
             context.DrawLine(pen, new Point(-offsetX, y), new Point(this.Bounds.Width, y));
         }
 
         // Draw vertical lines
 
-        for (double x = OffsetX%20; x < this.Bounds.Width; x += step)
+        for (double x = OffsetX%step; x < this.Bounds.Width; x += step)
         {
             context.DrawLine(pen, new Point(x, -offsetY), new Point(x, this.Bounds.Height));
         }

diff --git a/Nodify.Avalonia/Controls/NodifyEditor.axaml b/Nodify.Avalonia/Controls/NodifyEditor.axaml
@@ -19,6 +19,8 @@
                 Value="{StaticResource ConnectionTemplate}" />
         <Setter Property="PendingConnectionTemplate"
                 Value="{StaticResource PendingConnectionTemplate}" />
+        <Setter Property="GridLineTemplate" 
+                Value="{StaticResource GridLineTemplate}"></Setter>
         <Setter Property="Template">
             <ControlTemplate>
 
@@ -43,12 +45,7 @@
                                 </Setter>
                             </Style>
                         </Canvas.Resources>
-                        <controls:LargeGridLine Width="{Binding $parent[controls:NodifyEditor].Bounds.Width}"
-                                                OffsetX="{TemplateBinding OffsetX}"
-                                                OffsetY="{TemplateBinding OffsetY}"
-                                                Zoom="{TemplateBinding Zoom}"
-                                                Height="{Binding $parent[controls:NodifyEditor].Bounds.Height}"
-                                                ZIndex="-2"/>
+                        <ContentPresenter ZIndex="-2" ContentTemplate="{TemplateBinding GridLineTemplate}"/>
                         <ItemsPresenter Canvas.Top="{TemplateBinding OffsetY}" Canvas.Left="{TemplateBinding OffsetX}" ItemsPanel="{TemplateBinding ItemsPanel}" Name="ItemsPresenter" />
                         <ContentPresenter Name="PendingConnection" Content="{TemplateBinding PendingConnection}"
                                           ContentTemplate="{TemplateBinding PendingConnectionTemplate}" />

diff --git a/Nodify.Avalonia/Controls/NodifyEditor.axaml.cs b/Nodify.Avalonia/Controls/NodifyEditor.axaml.cs
@@ -66,6 +66,7 @@ public IEnumerable Connections
         public static readonly StyledProperty<IDataTemplate> ConnectionTemplateProperty = AvaloniaProperty.Register<NodifyEditor,IDataTemplate>(nameof(ConnectionTemplate));
         public static readonly StyledProperty<IDataTemplate> DecoratorTemplateProperty = AvaloniaProperty.Register<NodifyEditor,IDataTemplate>(nameof(DecoratorTemplate));
         public static readonly StyledProperty<IDataTemplate> PendingConnectionTemplateProperty = AvaloniaProperty.Register<NodifyEditor,IDataTemplate>(nameof(PendingConnectionTemplate));
+        public static readonly StyledProperty<IDataTemplate> GridLineTemplateProperty = AvaloniaProperty.Register<NodifyEditor,IDataTemplate>(nameof(GridLineTemplate));
         public static readonly StyledProperty<ControlTheme> SelectionRectangleThemeProperty = AvaloniaProperty.Register<NodifyEditor,ControlTheme>(nameof(SelectionRectangleTheme));
         public static readonly AvaloniaProperty DecoratorContainerStyleProperty = AvaloniaProperty.Register<NodifyEditor,Style>(nameof(DecoratorContainerStyle));
 
@@ -153,6 +154,11 @@ public DataTemplate PendingConnectionTemplate
             get => (DataTemplate)GetValue(PendingConnectionTemplateProperty);
             set => SetValue(PendingConnectionTemplateProperty, value);
         }
+        public DataTemplate GridLineTemplate
+        {
+            get => (DataTemplate)GetValue(GridLineTemplateProperty);
+            set => SetValue(GridLineTemplateProperty, value);
+        }
 
         /// <summary>
         /// Gets or sets the style to use for the selection rectangle.

diff --git a/Nodify.Avalonia/ResourceDictionaries/Nodify.axaml b/Nodify.Avalonia/ResourceDictionaries/Nodify.axaml
@@ -18,4 +18,12 @@
         <controls:PendingConnection IsTabStop="False" />
     </DataTemplate>
 
+    <DataTemplate x:Key="GridLineTemplate">
+        <controls:LargeGridLine Width="{Binding $parent[controls:NodifyEditor].Bounds.Width}"
+                                OffsetX="{Binding $parent[controls:NodifyEditor].OffsetX}"
+                                OffsetY="{Binding $parent[controls:NodifyEditor].OffsetY}"
+                                Zoom="{Binding $parent[controls:NodifyEditor].Zoom}"
+                                Height="{Binding $parent[controls:NodifyEditor].Bounds.Height}"
+                                ZIndex="-2"/>
+    </DataTemplate>
 </ResourceDictionary>