Transparent background fix (#213)

Author: Mateusz-Nejman

Pixed.Application/Controls/ImageGrid.cs

@@ -10,7 +10,6 @@ public ImageGrid()
     {
         ClipToBounds = false;
     }
-    public double Zoom { get; set; } = 1;
     public double GridWidth { get; set; }
     public double GridHeight { get; set; }
     public bool GridEnabled { get; set; } = false;

Pixed.Application/Controls/OverlayControl.cs

@@ -41,6 +41,8 @@ public void Render(ImmediateDrawingContext context)
         }
     }
 
+    public virtual double Zoom { get; set; } = 1;
+
     public override void Render(DrawingContext context)
     {
         context.Custom(new DrawOperation(new Rect(Bounds.X, Bounds.Y, Bounds.Width, Bounds.Height), this));

Pixed.Application/Controls/PaintCanvas.axaml

@@ -32,8 +32,8 @@
                     PointerPressed="Canvas_PointerPressed"
                     PointerReleased="Canvas_PointerReleased"
                     PointerWheelChanged="Canvas_PointerWheelChanged"
-              RenderOptions.BitmapInterpolationMode="None"
-              Background="{Binding TransparentBrush}">
+              RenderOptions.BitmapInterpolationMode="None">
+              <controls:TransparentBackground IsHitTestVisible="False" Width="{Binding ScaledGridWidth}" Height="{Binding ScaledGridHeight}" Name="transparentBackground"/>
               <controls:PixelImageControl Name="image" RenderOptions.BitmapInterpolationMode="None" Source="{Binding RenderModel}"/>
               <controls:ImageGrid Width="{Binding ScaledGridWidth}" Height="{Binding ScaledGridHeight}" Name="gridCanvas" IsHitTestVisible="False"/>
               <controls:SelectionOverlay Width="{Binding ScaledGridWidth}" Height="{Binding ScaledGridHeight}" Name="selectionOverlay" IsHitTestVisible="False"/>

Pixed.Application/Controls/PaintCanvas.axaml.cs

@@ -22,6 +22,7 @@ public PaintCanvas() : base()
         zoomBorder.GestureZoomEnabled = false;
         ViewModel.GridCanvas = gridCanvas;
         ViewModel.SelectionOverlay = selectionOverlay;
+        ViewModel.TransparentBackground = transparentBackground;
         ViewModel.ZoomValue = zoomBorder.Zoom;
         ViewModel.ZoomOffsetX = zoomBorder.OffsetX;
         ViewModel.ZoomOffsetY = zoomBorder.OffsetY;

Pixed.Application/Controls/SelectionOverlay.cs

@@ -16,7 +16,7 @@ internal class SelectionOverlay : OverlayControl
     private bool _drawLines = false;
     private float[] _pattern = [2f, 2f];
 
-    public double Zoom
+    public override double Zoom
     {
         get => _zoom;
         set

Pixed.Application/Controls/TransparentBackground.cs

@@ -0,0 +1,32 @@
+using Pixed.Application.Utils;
+using Pixed.Core;
+using SkiaSharp;
+
+namespace Pixed.Application.Controls;
+internal class TransparentBackground : OverlayControl
+{
+    public TransparentBackground()
+    {
+        ClipToBounds = true;
+    }
+    public override void Render(SKCanvas canvas)
+    {
+        SKPaint paint1 = new() { Color = new UniColor(76, 76, 76), Style = SKPaintStyle.Fill };
+        SKPaint paint2 = new() { Color = new UniColor(85, 85, 85), Style = SKPaintStyle.Fill };
+
+        float right = Bounds.Right.ToFloat();
+        float bottom = Bounds.Bottom.ToFloat();
+        int xCount = ((int)right / 32)+1;
+        int yCount = ((int)bottom / 32)+1;
+        float size = 32f / Zoom.ToFloat();
+
+        for(int x = 0; x < xCount; x++)
+        {
+            for(int y = 0; y < yCount; y++)
+            {
+                int c = (x + y) % 2;
+                canvas.DrawRect(x.ToFloat() * size, y.ToFloat() * size, size, size, c == 0 ? paint1 : paint2);
+            }
+        }
+    }
+}

Pixed.Application/ViewModels/PaintCanvasViewModel.cs

@@ -176,6 +176,7 @@ public double ZoomValue
     public ZoomBorder ZoomContainer { get; set; }
     public ImageGrid GridCanvas { get; set; }
     public SelectionOverlay SelectionOverlay { get; set; }
+    public TransparentBackground TransparentBackground { get; set; }
     public ImageBrush TransparentBrush
     {
         get => _transparentBrush;
@@ -306,6 +307,12 @@ public PaintCanvasViewModel(ApplicationData applicationData, ToolsManager toolSe
             {
                 SelectionOverlay.Zoom = entry.Zoom;
             }
+
+            if(TransparentBackground != null)
+            {
+                TransparentBackground.Zoom = entry.Zoom;
+            }
+
             RefreshZoomText();
             TransparentBrush = GetTransparentBackgroundBrush();
         });