feat(PdfReader): add OnPageChangedAsync parameter (#719)

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -13,12 +13,12 @@
             <div class="@ViewBodyString">
                 <input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span><div class="bb-view-pagesCount"></div>
                 <div class="bb-view-divider"></div>
-                <div class="bb-view-icon"><i class="fa-solid fa-minus"></i></div>
-                <input type="text" class="bb-view-scale" value="100%" />
-                <div class="bb-view-icon"><i class="fa-solid fa-plus"></i></div>
+                <div class="bb-view-icon bb-page-minus"><i class="fa-solid fa-minus"></i></div>
+                <input type="text" class="bb-view-scale" @bind="CurrentScaleString" />
+                <div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-plus"></i></div>
                 <div class="bb-view-divider"></div>
-                <div class="bb-view-icon bb-view-fit-page" @onclick="FitToPage"><i class="fa-solid fa-arrows-left-right-to-line"></i></div>
-                <div class="bb-view-icon bb-view-fit-width" @onclick="FitToWidth"><i class="fa-solid fa-arrows-left-right"></i></div>
+                <div class="bb-view-icon bb-view-fit-page" @onclick="FitToPage"><i class="fa-solid fa-arrows-left-right-to-line fa-rotate-90"></i></div>
+                <div class="bb-view-icon bb-view-fit-width" @onclick="FitToWidth"><i class="fa-solid fa-arrows-left-right-to-line"></i></div>
                 <div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-rotate-left"></i></div>
                 <div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-rotate-right"></i></div>
                 <div class="bb-view-divider"></div>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs

@@ -37,6 +37,9 @@ public partial class PdfReader
     private bool _isFitToPage;
     private uint _currentPage;
     private string? _url;
+    private string? _currentScale;
+
+    private readonly HashSet<string> AllowedScaleValues = ["page-actual", "page-width", "page-height", "page-fit", "auto"];
 
     private string CurrentPageString
     {
@@ -52,6 +55,33 @@ private void SetCurrentPage(string value)
         }
     }
 
+    private string CurrentScaleString
+    {
+        get => $"{Options.CurrentScale ?? "100"}%";
+        set => SetCurrentScale(value);
+    }
+
+    private void SetCurrentScale(string value)
+    {
+        if (string.IsNullOrEmpty(value))
+        {
+            Options.CurrentScale = "100";
+        }
+        else if (float.TryParse(value.TrimEnd("%"), out var v))
+        {
+            if (v > 500)
+            {
+                v = 500;
+            }
+            else if (v < 25)
+            {
+                v = 25;
+            }
+
+            Options.CurrentScale = v.ToString(CultureInfo.InvariantCulture);
+        }
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -82,6 +112,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _isFitToPage = Options.IsFitToPage;
             _currentPage = Options.CurrentPage;
             _url = Options.Url;
+            _currentScale = Options.CurrentScale;
         }
 
         if (_url != Options.Url)
@@ -100,6 +131,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentPage = Options.CurrentPage;
             await NavigateToPageAsync(_currentPage);
         }
+        if (_currentScale != Options.CurrentScale)
+        {
+            _currentScale = Options.CurrentScale;
+            await InvokeVoidAsync("scale", Id, _currentScale);
+        }
     }
 
     /// <summary>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css

@@ -31,6 +31,10 @@
     cursor: pointer;
 }
 
+    .bb-view-icon.disabled {
+        color: #6c757d;
+    }
+
 .bb-view-bar {
     margin-inline-end: 2rem;
 }