feat(PdfReader): add TwoPagesOnView function (#721)

* refactor: 增加两页视图

* Revert "refactor: 增加两页视图"

This reverts commit b980542.

* refactor: 增加 tow page one view 功能

* chore: bump version 10.0.1-beta04

* feat: 增加两页一视图方法

* feat: 增加联动功能

* refactor: 精简代码

Author: ArgoZhang

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

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.1-beta01</Version>
+    <Version>10.0.1-beta04</Version>
   </PropertyGroup>
 
   <PropertyGroup>
@@ -17,10 +17,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <ProjectReference Include="..\..\..\..\BootstrapBlazor\src\BootstrapBlazor\BootstrapBlazor.csproj" />
     <!--<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />-->
   </ItemGroup>
 
+  <ItemGroup>
+    <ProjectReference Include="..\..\..\..\BootstrapBlazor\src\BootstrapBlazor\BootstrapBlazor.csproj" />
+  </ItemGroup>
+
   <ItemGroup>
     <Using Include="Microsoft.JSInterop" />
   </ItemGroup>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -21,13 +21,21 @@
                 <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>
-                <div class="bb-view-icon bb-view-draw"><i class="fa-solid fa-pen-to-square"></i></div>
             </div>
             <div class="bb-view-controls">
                 <div class="bb-view-icon bb-view-download"><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></div>
                 <div class="bb-view-icon bb-view-print"><i class="fa-solid fa-print"></i></div>
-                <div class="bb-view-icon bb-view-home"><i class="fa-solid fa-flag"></i></div>
+                <Dropdown TValue="string" Color="Color.None" SkipValidate="true" ShowLabel="false"
+                          IsPopover="false" MenuAlignment="Alignment.Right" Icon="@MoreButtonIcon">
+                    <ItemsTemplate>
+                        @if (Options.ShowTwoPagesOnViewButton)
+                        {
+                            <div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
+                            <Divider></Divider>
+                        }
+                        <div class="dropdown-item"><i class="fa-solid fa-fw"></i><span>Document properties</span></div>
+                    </ItemsTemplate>
+                </Dropdown>
             </div>
         </div>
     }

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

@@ -20,6 +20,12 @@ public partial class PdfReader
     [NotNull]
     public PdfReaderOptions? Options { get; set; }
 
+    /// <summary>
+    /// 获得/设置 更多按钮图标 默认为 null 使用内置图标
+    /// </summary>
+    [Parameter]
+    public string? MoreButtonIcon { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-pdf-reader")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -38,6 +44,8 @@ public partial class PdfReader
     private uint _currentPage;
     private string? _url;
     private string? _currentScale;
+    private bool _enableTwoPagesOneView;
+    private string? _twoPagesOneViewIcon;
 
     private readonly HashSet<string> AllowedScaleValues = ["page-actual", "page-width", "page-height", "page-fit", "auto"];
 
@@ -82,6 +90,14 @@ private void SetCurrentScale(string value)
         }
     }
 
+    private void OnToggleTwoPagesOneView()
+    {
+        _enableTwoPagesOneView = !_enableTwoPagesOneView;
+        Options.EnableTwoPagesOnView = _enableTwoPagesOneView;
+
+        _twoPagesOneViewIcon = _enableTwoPagesOneView ? "fa-solid fa-fw fa-check" : "fa-solid fa-fw";
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -96,6 +112,9 @@ protected override void OnParametersSet()
             Options.CurrentPage = 1;
         }
         _docTitle = Path.GetFileName(Options.Url);
+
+        MoreButtonIcon ??= "fa-solid fa-ellipsis-vertical";
+        _twoPagesOneViewIcon ??= "fa-solid fa-fw";
     }
 
     /// <summary>
@@ -113,6 +132,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentPage = Options.CurrentPage;
             _url = Options.Url;
             _currentScale = Options.CurrentScale;
+            _enableTwoPagesOneView = Options.EnableTwoPagesOnView;
         }
 
         if (_url != Options.Url)
@@ -136,6 +156,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentScale = Options.CurrentScale;
             await InvokeVoidAsync("scale", Id, _currentScale);
         }
+        if (_enableTwoPagesOneView != Options.EnableTwoPagesOnView)
+        {
+            _currentScale = Options.CurrentScale;
+            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
+        }
     }
 
     /// <summary>
@@ -147,7 +172,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         Options.Url,
         Options.IsFitToPage,
         TriggerPagesInit = Options.OnInitAsync != null,
-        TriggerPageChanged = Options.OnPageChangedAsync != null
+        TriggerPageChanged = Options.OnPageChangedAsync != null,
+        TriggerTowPagesOnViewChanged = Options.OnTwoPagesOneViewAsync != null
     });
 
     /// <summary>

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

@@ -18,6 +18,14 @@
         visibility: hidden;
     }
 
+    .bb-view-toolbar ::deep .btn {
+        --bs-btn-color: #fff;
+    }
+
+    .bb-view-toolbar ::deep .dropdown-toggle::after {
+        content: none;
+    }
+
 .bb-view-title {
     display: flex;
     align-items: center;

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

@@ -102,13 +102,25 @@ export function scale(id, scale) {
     }
 }
 
+export function setPages(id, enableTowPagesOnView) {
+    const { el, pdfViewer } = Data.get(id);
+    if (pdfViewer) {
+        if (enableTowPagesOnView) {
+            pdfViewer.spreadMode = 1;
+        }
+        else {
+            pdfViewer.spreadMode = 0;
+        }
+    }
+}
+
 const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
     eventBus.on("pagesinit", async () => {
         if (options.isFitToPage) {
             pdfViewer.currentScaleValue = "page-width";
         }
         else {
-            pdfViewer.currentScaleValue = 1.0;
+            pdfViewer.currentScaleValue = "page-actual";
         }
 
         const numPages = pdfViewer.pagesCount;
@@ -149,6 +161,18 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
 
     EventHandler.on(minus, "click", e => updateScale(pdfViewer, e.target, -1));
     EventHandler.on(plus, "click", e => updateScale(pdfViewer, e.target, 1));
+
+    const towPagesOneView = el.querySelector(".dropdown-item-pages");
+    if (towPagesOneView) {
+        EventHandler.on(towPagesOneView, "click", e => {
+            if (pdfViewer.spreadMode === 0) {
+                pdfViewer.spreadMode = 1;
+            }
+            else {
+                pdfViewer.spreadMode = 0;
+            }
+        });
+    }
 }
 
 const updateScale = (pdfViewer, button, rate) => {
@@ -159,7 +183,7 @@ const updateScale = (pdfViewer, button, rate) => {
     const scale = pdfViewer.currentScale;
     const current = Math.round(parseFloat(scale * 100), 0);
     const step = [25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500];
-    const findValues = step.filter(s => rate > 0 ? current  < s : current > s);
+    const findValues = step.filter(s => rate > 0 ? current < s : current > s);
     let v = 100;
     if (rate > 0) {
         v = findValues.shift();
@@ -177,7 +201,16 @@ export function dispose(id) {
     if (el) {
         const minus = el.querySelector(".bb-page-minus");
         const plus = el.querySelector(".bb-page-plus");
-        EventHandler.off(minus, "click");
-        EventHandler.off(plus, "click");
+        if (minus) {
+            EventHandler.off(minus, "click");
+        }
+        if (plus) {
+            EventHandler.off(plus, "click");
+        }
+
+        const towPagesOneView = el.querySelector(".dropdown-item-pages");
+        if (towPagesOneView) {
+            EventHandler.off(towPagesOneView, "click");
+        }
     }
 }

src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs

@@ -39,6 +39,16 @@ public class PdfReaderOptions
     /// </summary>
     public bool IsFitToPage { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示双页单视图按钮 默认 true 显示
+    /// </summary>
+    public bool ShowTwoPagesOnViewButton { get; set; } = true;
+
+    /// <summary>
+    /// 获得/设置 是否启用双页单视图模式 默认 false
+    /// </summary>
+    public bool EnableTwoPagesOnView { get; set; }
+
     /// <summary>
     /// 页面初始化回调方法
     /// </summary>
@@ -48,4 +58,9 @@ public class PdfReaderOptions
     /// 页面初始化回调方法
     /// </summary>
     public Func<uint, Task>? OnPageChangedAsync { get; set; }
+
+    /// <summary>
+    /// 设置双页单视图模式回调方法
+    /// </summary>
+    public Func<bool, Task>? OnTwoPagesOneViewAsync { get; set; }
 }