initial grid line size config work

src/PixiEditor/Data/Localization/Languages/en.json

@@ -248,6 +248,8 @@
   "REDO_DESCRIPTIVE": "Redo last action",
   "WINDOWS": "Windows",
   "TOGGLE_GRIDLINES": "Toggle gridlines",
+  "GRIDLINES_XSIZE": "Grid X Size",
+  "GRIDLINES_YSIZE": "Grid Y Size",
   "ZOOM_IN": "Zoom in",
   "ZOOM_OUT": "Zoom out",
   "NEW_WINDOW_FOR_IMG": "New window for current image",

src/PixiEditor/Views/Main/ViewportControls/Viewport.axaml

@@ -16,6 +16,7 @@
     xmlns:subViewModels="clr-namespace:PixiEditor.ViewModels.SubViewModels"
     xmlns:palettes="clr-namespace:PixiEditor.Views.Palettes"
     xmlns:palettes1="clr-namespace:PixiEditor.Extensions.CommonApi.Palettes;assembly=PixiEditor.Extensions.CommonApi"
+    xmlns:input="clr-namespace:PixiEditor.Views.Input"
     mc:Ignorable="d"
     x:Name="vpUc"
     d:DesignHeight="450"
@@ -133,6 +134,26 @@
                                           IsChecked="{Binding SnappingEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}" />
                         </StackPanel>
                         <Separator />
+                        <StackPanel Spacing="10" HorizontalAlignment="Center" Orientation="Horizontal">
+                            <TextBlock VerticalAlignment="Center"
+                                       ui:Translator.Key="GRIDLINES_XSIZE" />
+                            <input:NumberInput Width="32"
+                                         HorizontalAlignment="Left"
+                                         Min="1" Decimals="0"
+                                         Max="1024"
+                                         Value="{Binding GridLinesXSize, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}" />
+                        </StackPanel>
+                        <Separator />
+                        <StackPanel Spacing="10" HorizontalAlignment="Center" Orientation="Horizontal">
+                            <TextBlock VerticalAlignment="Center"
+                                       ui:Translator.Key="GRIDLINES_YSIZE" />
+                            <input:NumberInput Width="32"
+                                         HorizontalAlignment="Left"
+                                         Min="1" Decimals="0"
+                                         Max="1024"
+                                         Value="{Binding GridLinesYSize, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}" />
+                        </StackPanel>
+                        <Separator />
                         <TextBlock ui:Translator.Key="RENDER_PREVIEW" />
                         <ComboBox
                             ItemsSource="{Binding AvailableRenderOutputs, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}}"

src/PixiEditor/Views/Main/ViewportControls/Viewport.axaml.cs

@@ -63,6 +63,12 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
     public static readonly StyledProperty<bool> GridLinesVisibleProperty =
         AvaloniaProperty.Register<Viewport, bool>(nameof(GridLinesVisible), false);
 
+    public static readonly StyledProperty<double> GridLinesXSizeProperty =
+        AvaloniaProperty.Register<Viewport, double>(nameof(GridLinesXSize), 1.0);
+
+    public static readonly StyledProperty<double> GridLinesYSizeProperty =
+        AvaloniaProperty.Register<Viewport, double>(nameof(GridLinesYSize), 1.0);
+
     public static readonly StyledProperty<bool> ZoomOutOnClickProperty =
         AvaloniaProperty.Register<Viewport, bool>(nameof(ZoomOutOnClick), false);
 
@@ -176,6 +182,17 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
         set => SetValue(GridLinesVisibleProperty, value);
     }
 
+    public double GridLinesXSize
+    {
+        get => (double)GetValue(GridLinesXSizeProperty);
+        set => SetValue(GridLinesXSizeProperty, value);
+    }
+    public double GridLinesYSize
+    {
+        get => (double)GetValue(GridLinesYSizeProperty);
+        set => SetValue(GridLinesYSizeProperty, value);
+    }
+
     public bool Delayed
     {
         get => (bool)GetValue(DelayedProperty);

src/PixiEditor/Views/Main/ViewportControls/ViewportOverlays.cs

@@ -61,11 +61,11 @@ internal class ViewportOverlays
 
         brushShapeOverlay = new BrushShapeOverlay();
         BindMouseOverlayPointer();
-        
+
         vectorPathOverlay = new VectorPathOverlay();
         vectorPathOverlay.IsVisible = false;
         BindVectorPathOverlay();
-        
+
         textOverlay = new TextOverlay();
         BindTextOverlay();
 
@@ -118,17 +118,17 @@ internal class ViewportOverlays
     private void BindGridLines()
     {
         Binding isVisBinding = new() { Source = Viewport, Path = "GridLinesVisible", Mode = BindingMode.OneWay };
+        gridLinesOverlay.Bind(Visual.IsVisibleProperty, isVisBinding);
 
         Binding binding = new() { Source = Viewport, Path = "Document.Width", Mode = BindingMode.OneWay };
-
         gridLinesOverlay.Bind(GridLinesOverlay.PixelWidthProperty, binding);
-        gridLinesOverlay.Bind(GridLinesOverlay.ColumnsProperty, binding);
-
         binding = new Binding { Source = Viewport, Path = "Document.Height", Mode = BindingMode.OneWay };
-
         gridLinesOverlay.Bind(GridLinesOverlay.PixelHeightProperty, binding);
-        gridLinesOverlay.Bind(GridLinesOverlay.RowsProperty, binding);
-        gridLinesOverlay.Bind(Visual.IsVisibleProperty, isVisBinding);
+
+        Binding xBinding = new() { Source = Viewport, Path = "GridLinesXSize", Mode = BindingMode.OneWay };
+        gridLinesOverlay.Bind(GridLinesOverlay.GridXSizeProperty, xBinding);
+        Binding yBinding = new() { Source = Viewport, Path = "GridLinesYSize", Mode = BindingMode.OneWay };
+        gridLinesOverlay.Bind(GridLinesOverlay.GridYSizeProperty, yBinding);
     }
 
     private void BindSelectionOverlay()
@@ -233,22 +233,22 @@ internal class ViewportOverlays
         {
             Source = Viewport, Path = "Document.LineToolOverlayViewModel.LineEnd", Mode = BindingMode.TwoWay
         };
-        
+
         Binding showHandlesBinding = new()
         {
             Source = Viewport, Path = "Document.LineToolOverlayViewModel.ShowHandles", Mode = BindingMode.TwoWay
         };
-        
+
         Binding isSizeBoxEnabledBinding = new()
         {
             Source = Viewport, Path = "Document.LineToolOverlayViewModel.IsSizeBoxEnabled", Mode = BindingMode.TwoWay
         };
-        
+
         Binding addToUndoCommandBinding = new()
         {
             Source = Viewport, Path = "Document.LineToolOverlayViewModel.AddToUndoCommand", Mode = BindingMode.OneWay
         };
-        
+
         lineToolOverlay.Bind(Visual.IsVisibleProperty, isVisibleBinding);
         lineToolOverlay.Bind(LineToolOverlay.SnappingControllerProperty, snappingBinding);
         lineToolOverlay.Bind(LineToolOverlay.ActionCompletedProperty, actionCompletedBinding);
@@ -327,34 +327,34 @@ internal class ViewportOverlays
             Path = "Document.TransformViewModel.PassThroughPointerPressedCommand",
             Mode = BindingMode.OneWay
         };
-        
+
         Binding showHandlesBinding = new()
         {
             Source = Viewport, Path = "Document.TransformViewModel.ShowHandles", Mode = BindingMode.TwoWay
         };
-        
+
         Binding isSizeBoxEnabledBinding = new()
         {
             Source = Viewport, Path = "Document.TransformViewModel.IsSizeBoxEnabled", Mode = BindingMode.TwoWay
         };
 
         Binding zoomboxAngleBinding = new() { Source = Viewport, Path = "Zoombox.Angle", Mode = BindingMode.OneWay };
-        
+
         Binding scaleFromCenterBinding = new()
         {
             Source = Viewport, Path = "Document.TransformViewModel.ScaleFromCenter", Mode = BindingMode.OneWay
         };
-        
+
         Binding canAlignToPixelsBinding = new()
         {
             Source = Viewport, Path = "Document.TransformViewModel.CanAlignToPixels", Mode = BindingMode.OneWay
         };
-        
+
         Binding lockShearBinding = new()
         {
             Source = Viewport, Path = "Document.TransformViewModel.LockShear", Mode = BindingMode.OneWay
         };
-        
+
         Binding transformDraggedBinding = new()
         {
             Source = Viewport, Path = "Document.TransformViewModel.TransformDraggedCommand", Mode = BindingMode.OneWay
@@ -380,19 +380,19 @@ internal class ViewportOverlays
         transformOverlay.Bind(TransformOverlay.LockShearProperty, lockShearBinding);
         transformOverlay.Bind(TransformOverlay.TransformDraggedCommandProperty, transformDraggedBinding);
     }
-    
+
     private void BindVectorPathOverlay()
     {
         Binding pathBinding = new()
         {
             Source = Viewport, Path = "Document.PathOverlayViewModel.Path", Mode = BindingMode.TwoWay
         };
-        
+
         Binding addToUndoCommandBinding = new()
         {
             Source = Viewport, Path = "Document.PathOverlayViewModel.AddToUndoCommand", Mode = BindingMode.OneWay
         };
-        
+
         Binding snappingBinding = new()
         {
             Source = Viewport, Path = "Document.SnappingViewModel.SnappingController", Mode = BindingMode.OneWay
@@ -434,12 +434,12 @@ internal class ViewportOverlays
         {
             Source = ViewModelMain.Current.ToolsSubViewModel, Path = "ActiveTool.BrushShape", Mode = BindingMode.OneWay
         };
-        
+
         MultiBinding isVisibleMultiBinding = new()
         {
             Converter = new AllTrueConverter(),
             Mode = BindingMode.OneWay,
-            Bindings = new List<IBinding>() 
+            Bindings = new List<IBinding>()
             {
                 isTransformingBinding,
                 isOverCanvasBinding
@@ -448,7 +448,7 @@ internal class ViewportOverlays
 
         brushShapeOverlay.Bind(Visual.IsVisibleProperty, isVisibleMultiBinding);
         brushShapeOverlay.Bind(BrushShapeOverlay.BrushSizeProperty, brushSizeBinding);
-        brushShapeOverlay.Bind(BrushShapeOverlay.BrushShapeProperty, brushShapeBinding); 
+        brushShapeOverlay.Bind(BrushShapeOverlay.BrushShapeProperty, brushShapeBinding);
     }
 
     private void BindTextOverlay()
@@ -472,17 +472,17 @@ internal class ViewportOverlays
         {
             Source = Viewport, Path = "Document.TextOverlayViewModel.Font", Mode = BindingMode.OneWay
         };
-        
+
         Binding requestEditTextBinding = new()
         {
             Source = Viewport, Path = "Document.TextOverlayViewModel.RequestEditTextTrigger", Mode = BindingMode.OneWay
         };
-        
+
         Binding matrixBinding = new()
         {
             Source = Viewport, Path = "Document.TextOverlayViewModel.Matrix", Mode = BindingMode.OneWay
         };
-        
+
         Binding spacingBinding = new()
         {
             Source = Viewport, Path = "Document.TextOverlayViewModel.Spacing", Mode = BindingMode.OneWay
@@ -509,4 +509,3 @@ internal class ViewportOverlays
         textOverlay.Bind(TextOverlay.SelectionEndProperty, selectionEndBinding);
     }
 }
-

src/PixiEditor/Views/Overlays/GridLinesOverlay.cs

@@ -12,11 +12,11 @@ namespace PixiEditor.Views.Overlays;
 
 public class GridLinesOverlay : Overlay
 {
-    public static readonly StyledProperty<int> RowsProperty = AvaloniaProperty.Register<GridLinesOverlay, int>(
-        nameof(Rows));
+    public static readonly StyledProperty<double> GridXSizeProperty = AvaloniaProperty.Register<GridLinesOverlay, double>(
+        nameof(GridXSize));
 
-    public static readonly StyledProperty<int> ColumnsProperty = AvaloniaProperty.Register<GridLinesOverlay, int>(
-        nameof(Columns));
+    public static readonly StyledProperty<double> GridYSizeProperty = AvaloniaProperty.Register<GridLinesOverlay, double>(
+        nameof(GridYSize));
 
     public static readonly StyledProperty<int> PixelWidthProperty = AvaloniaProperty.Register<GridLinesOverlay, int>(
         nameof(PixelWidth));
@@ -36,16 +36,16 @@ public class GridLinesOverlay : Overlay
         set => SetValue(PixelWidthProperty, value);
     }
 
-    public int Columns
+    public double GridXSize
     {
-        get => GetValue(ColumnsProperty);
-        set => SetValue(ColumnsProperty, value);
+        get => GetValue(GridXSizeProperty);
+        set => SetValue(GridXSizeProperty, value);
     }
 
-    public int Rows
+    public double GridYSize
     {
-        get => GetValue(RowsProperty);
-        set => SetValue(RowsProperty, value);
+        get => GetValue(GridYSizeProperty);
+        set => SetValue(GridYSizeProperty, value);
     }
 
     private const float PenWidth = 0.8f;
@@ -56,6 +56,8 @@ public class GridLinesOverlay : Overlay
     static GridLinesOverlay()
     {
         IsVisibleProperty.Changed.Subscribe(OnIsVisibleChanged);
+        GridXSizeProperty.Changed.Subscribe(OnNumberChanged);
+        GridYSizeProperty.Changed.Subscribe(OnNumberChanged);
     }
 
     public GridLinesOverlay()
@@ -75,20 +77,20 @@ public class GridLinesOverlay : Overlay
         double width = PixelWidth;
         double height = PixelHeight;
 
-        double columnWidth = width / Columns;
-        double rowHeight = height / Rows;
+        double columnWidth = GridXSize;
+        double rowHeight = GridYSize;
 
         pen1.StrokeWidth = (float)ReciprocalConverter.Convert(ZoomScale);
         pen2.StrokeWidth = (float)ReciprocalConverter.Convert(ZoomScale, 1.2);
 
-        for (int i = 0; i < Columns; i++)
+        for (int i = 0; i < width / columnWidth; i++)
         {
             double x = i * columnWidth;
             context.DrawLine(new VecD(x, 0), new VecD(x, height), pen1);
             context.DrawLine(new VecD(x, 0), new VecD(x, height), pen2);
         }
 
-        for (int i = 0; i < Rows; i++)
+        for (int i = 0; i < height / rowHeight; i++)
         {
             double y = i * rowHeight;
             context.DrawLine(new VecD(0, y), new VecD(width, y), pen1);
@@ -103,4 +105,11 @@ public class GridLinesOverlay : Overlay
             gridLines.Refresh();
         }
     }
+    private static void OnNumberChanged(AvaloniaPropertyChangedEventArgs<double> e)
+    {
+        if (e.Sender is GridLinesOverlay gridLines)
+        {
+            gridLines.Refresh();
+        }
+    }
 }