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). (#241)

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.

Author: radderz

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)" />

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;
             }