feat(PdfReader): add rotate function (#713)

* chore: 更新工程依赖

* feat(PdfReader): add Rotate function

* feat: 增加旋转按钮功能

* refactor: 更改变量名称

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj

@@ -1,5 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
+  <PropertyGroup>
+    <Version>10.0.1-beta01</Version>
+  </PropertyGroup>
+  
   <PropertyGroup>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Pdf Reader</PackageTags>
     <Description>Bootstrap UI components extensions of PdfReader</Description>
@@ -14,6 +18,7 @@
 
   <ItemGroup>
     <ProjectReference Include="..\..\..\..\BootstrapBlazor\src\BootstrapBlazor\BootstrapBlazor.csproj" />
+    <!--<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />-->
   </ItemGroup>
 
   <ItemGroup>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -17,7 +17,8 @@
             <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-rotate"><i class="fa-solid fa-rotate-left"></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>
             <div class="bb-view-icon bb-view-draw"><i class="fa-solid fa-pen-to-square"></i></div>
         </div>

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

@@ -93,15 +93,31 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <summary>
     /// 适应页面宽度
     /// </summary>
-    /// <returns></returns>
     public void FitToPage() => IsFitToPage = true;
 
     /// <summary>
     /// 适应文档宽度
     /// </summary>
-    /// <returns></returns>
     public void FitToWidth() => IsFitToPage = false;
 
+    /// <summary>
+    /// 旋转页面方法
+    /// </summary>
+    /// <returns></returns>
+    public async Task RotateLeft()
+    {
+        await InvokeVoidAsync("rotate", Id, -90);
+    }
+
+    /// <summary>
+    /// 旋转页面方法
+    /// </summary>
+    /// <returns></returns>
+    public async Task RotateRight()
+    {
+        await InvokeVoidAsync("rotate", Id, 90);
+    }
+
     private Task TriggerFit(string methodName) => InvokeVoidAsync(methodName, Id);
 
     /// <summary>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -93,6 +93,15 @@ export function fitToPage(id) {
     }
 }
 
+export function rotate(id, step) {
+    const pdfViewer = Data.get(id);
+    if (pdfViewer) {
+        let rotate = pdfViewer.pagesRotation || 360;
+        rotate += step;
+        pdfViewer.pagesRotation = rotate % 360;
+    }
+}
+
 export function dispose(id) {
     Data.get(id);
 }
@@ -252,16 +261,16 @@ export async function print(invoke, elementId, url) {
         1000);
 }
 
-export function rotate(invoke, elementId, rotation) {
-    const pdf = getPdf(elementId);
+//export function rotate(invoke, elementId, rotation) {
+//    const pdf = getPdf(elementId);
 
-    if (pdf == null || Number.isNaN(rotation) || rotation % 90 !== 0)
-        return;
+//    if (pdf == null || Number.isNaN(rotation) || rotation % 90 !== 0)
+//        return;
 
-    pdf.rotation = rotation;
+//    pdf.rotation = rotation;
 
-    queueRenderPage(pdf, pdf.pageNum);
-}
+//    queueRenderPage(pdf, pdf.pageNum);
+//}
 
 export function zoomInOut(invoke, elementId, scale) {
     const pdf = getPdf(elementId);