Allow to set default orientation for PdfViewer #578

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewerDocumentation.razor

@@ -14,6 +14,12 @@
 <SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
 <Demo Type="typeof(PdfViewer_Demo_01_Examples)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Orientation" PageUrl="@pageUrl" HashTagName="orientation" />
+<div class="mb-3">
+    Set the <code>Orientation</code> parameter to <code>Orientation.Landscape</code> to change the default orientation from <b>Portrait</b> to <b>Landscape</b>.
+</div>
+<Demo Type="typeof(PdfViewer_Demo_02_Orientation)" Tabs="true" />
+
 @code {
     private string pageUrl = "/pdf-viewer";
     private string title = "Blazor Pdf Viewer Component";

BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewer_Demo_02_Orientation.razor

@@ -0,0 +1,17 @@
+<p>@eventLog</p>
+
+<PdfViewer Class="mb-3"
+           Url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+           Orientation="Orientation.Landscape"
+           OnDocumentLoaded="OnDocumentLoaded"
+           OnPageChanged="OnPageChanged" />
+
+@code {
+    private string eventLog { get; set; } = $"Last event: ..., CurrentPage: 0, TotalPages: 0";
+
+    private void OnDocumentLoaded(PdfViewerEventArgs args)
+        => eventLog = $"Last event: OnDocumentLoaded, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
+
+    private void OnPageChanged(PdfViewerEventArgs args)
+        => eventLog = $"Last event: OnPageChanged, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
+}

blazorbootstrap/Components/PdfViewer/PdfViewer.razor

@@ -32,6 +32,7 @@
                 <ul class="dropdown-menu">
                     <li><span class="dropdown-item d-flex align-items-center" role="button" @onclick="RotateClockwiseAsync"><Icon Class="mx-2" Name="IconName.ArrowClockwise" Size="IconSize.x5" /> Rotate Clockwise</span></li>
                     <li><span class="dropdown-item d-flex align-items-center" role="button" @onclick="RotateCounterclockwiseAsync"><Icon Class="mx-2" Name="IconName.ArrowCounterclockwise" Size="IconSize.x5" /> Rotate Counterclockwise</span></li>
+                    <li><span class="dropdown-item d-flex align-items-center" role="button" @onclick="SwitchOrientationAsync"><Icon Class="mx-2" Name="IconName.Compass" Size="IconSize.x5" /> Switch Orientation</span></li>
                     <li><span class="dropdown-item d-flex align-items-center" role="button" @onclick="FirstPageAsync"><Icon Class="mx-2" Name="IconName.ChevronBarUp" Size="IconSize.x5" /> Go to First Page</span></li>
                     <li><span class="dropdown-item d-flex align-items-center" role="button" @onclick="LastPageAsync"><Icon Class="mx-2" Name="IconName.ChevronBarDown" Size="IconSize.x5" /> Go to Last Page</span></li>
                     <li><span class="dropdown-item d-flex align-items-center" role="button" @onclick="ResetZoomAsync"><Icon Class="mx-2" Name="IconName.PlusSlashMinus" Size="IconSize.x5" /> Reset Zoom</span></li>

blazorbootstrap/Components/PdfViewer/PdfViewer.razor.cs

@@ -9,6 +9,9 @@ public partial class PdfViewer : BlazorBootstrapComponentBase
     private int minZoomLevel = 1;
 
     private DotNetObjectReference<PdfViewer>? objRef;
+
+    private Orientation? oldOrientation;
+
     private int pageNumber = 0;
     private int pagesCount = 0;
 
@@ -25,12 +28,28 @@ public partial class PdfViewer : BlazorBootstrapComponentBase
 
     protected override async Task OnInitializedAsync()
     {
+        rotation = Orientation == Orientation.Portrait ? 0 : -90;
         objRef ??= DotNetObjectReference.Create(this);
         await base.OnInitializedAsync();
 
         QueueAfterRenderAction(async () => await PdfViewerJsInterop.InitializeAsync(objRef!, ElementId!, scale, rotation, Url!), new RenderPriority());
     }
 
+    protected override async Task OnParametersSetAsync()
+    {
+        if (Rendered)
+        {
+            if (!Orientation.Equals(oldOrientation))
+            {
+                oldOrientation = Orientation;
+                rotation = Orientation == Orientation.Portrait ? 0 : -90;
+                await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
+            }
+        }
+
+        await base.OnParametersSetAsync();
+    }
+
     [JSInvokable]
     public void DocumentLoaded(PdfViewerModel pdfViewerModel)
     {
@@ -105,13 +124,35 @@ private async Task RotateClockwiseAsync()
         rotation += 90;
         rotation = rotation.Equals(360) ? 0 : rotation;
         await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
+
+        // Orientation
+        SetOrientation();
     }
 
     private async Task RotateCounterclockwiseAsync()
     {
         rotation -= 90;
         rotation = rotation.Equals(-360) ? 0 : rotation;
         await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
+
+        // Orientation
+        SetOrientation();
+    }
+
+    private void SetOrientation()
+    {
+        if (rotation == 0)
+            oldOrientation = Orientation = Orientation.Portrait;
+        else if (rotation == -90)
+            oldOrientation = Orientation = Orientation.Landscape;
+    }
+
+    private async Task SwitchOrientationAsync()
+    {
+        oldOrientation = Orientation;
+        Orientation = Orientation == Orientation.Portrait ? Orientation.Landscape : Orientation.Portrait;
+        rotation = Orientation == Orientation.Portrait ? 0 : -90;
+        await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
     }
 
     private async Task ZoomInAsync()
@@ -164,12 +205,21 @@ private async Task ResetZoomAsync()
     /// </summary>
     [Parameter] public EventCallback<PdfViewerEventArgs> OnPageChanged { get; set; }
 
+    /// <summary>
+    /// Provides JavaScript interop functionality for the PDF viewer.
+    /// </summary>
     [Inject] private PdfViewerJsInterop PdfViewerJsInterop { get; set; } = default!;
 
     /// <summary>
-    /// Gets or sets the PDF URL.
+    /// Gets or sets the URL of the PDF document to be displayed.
     /// </summary>
     [Parameter] public string? Url { get; set; }
 
+    /// <summary>
+    /// Gets or sets the preferred orientation for the PDF viewer.
+    /// </summary>
+    [Parameter]
+    public Orientation Orientation { get; set; }
+
     #endregion
 }

blazorbootstrap/Enums/Orientation.cs

@@ -0,0 +1,7 @@
+namespace BlazorBootstrap;
+
+public enum Orientation
+{
+    Portrait,
+    Landscape,
+}