From 5dd2b45b21c6f7c22d65d5c25d51e480db0561ac Mon Sep 17 00:00:00 2001
From: Mark Radcliffe <mark.radcliffe@blackhawk.io>
Date: Tue, 4 Jul 2023 12:21:38 +1200
Subject: [PATCH] Fix SVG to have a view box based on the encoding size and
 enable scaling to be handled by the Width/Height and the renderer (browser).

This improves the central positioning of QR Code, before the QR Code depending on the size of the encoded value would have different padding on the right/bottom since the scaling was all in integers.
---
 .../Components/Barcode/MudBarcode.razor               | 11 +++++++----
 .../Components/Barcode/MudBarcode.razor.cs            |  9 ++-------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor b/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor
index 0e6d6313..7476af98 100644
--- a/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor
+++ b/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor
@@ -2,17 +2,20 @@
 @inherits MudComponentBase
 
 <a href="@(Clickable ? Value : null)" target="@Target">
-   @{
+    @{
         var content = GetCode();
     }
     @if (content != null)
     {
-        <svg width="@Width" height="@Height" style="background-color:@BackgroundColor">
+        var viewBoxWidth = @content.ModuleSizeX * content.Columns;
+        var viewBoxHeight = @content.ModuleSizeY * content.Rows;
+
+        <svg width="@Width" height="@Height" style="background-color:@BackgroundColor" viewBox="0 0 @viewBoxWidth @viewBoxHeight">
             @for (int y = 0; y < content.Rows; y++)
             {
-                @for(int x = 0; x < content.Columns; x++)
+                @for (int x = 0; x < content.Columns; x++)
                 {
-                    @if(content[x,y])
+                    @if (content[x, y])
                     {
                         <rect class="d-flex align-center justify-center" width="@content.ModuleSizeX" height="@content.ModuleSizeY" style="@($"fill:{Color}; stroke-width:{StrokeWidth}px; stroke:{Color}")"
                               x="@(x * content.ModuleSizeX)" y="@(y * content.ModuleSizeY)" />
diff --git a/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor.cs
index 5ba4e37a..14e97001 100644
--- a/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor.cs
+++ b/CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor.cs
@@ -28,7 +28,7 @@ public partial class MudBarcode : MudComponentBase
         /// Increase the stroke width if readers can not read the barcode easily.
         /// </summary>
         [Parameter]
-        public int StrokeWidth { get; set; }
+        public double StrokeWidth { get; set; }
 
         [Parameter]
         public int Height { get; set; } = 200;
@@ -57,14 +57,9 @@ protected BarcodeResult GetCode()
 
             try
             {
-                var width = Width;
-                var height = Height;
-
                 var matrix = Encoder.encode(Value, BarcodeFormat, 0, 0);
 
-                var moduleSizeX = width / matrix.Width;
-                var moduleSizeY = height / matrix.Height;
-                var result = new BarcodeResult(matrix, moduleSizeX, moduleSizeY);
+                var result = new BarcodeResult(matrix, 1, 1);
                 ErrorText = null;
                 return result;
             }