Skip to content

Commit 0d93c46

Browse files
committed
Allow to set default orientation for PdfViewer #578
1 parent 885c794 commit 0d93c46

File tree

5 files changed

+82
-1
lines changed

5 files changed

+82
-1
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@
1414
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
1515
<Demo Type="typeof(PdfViewer_Demo_01_Examples)" Tabs="true" />
1616

17+
<SectionHeading Size="HeadingSize.H2" Text="Orientation" PageUrl="@pageUrl" HashTagName="orientation" />
18+
<div class="mb-3">
19+
Set the <code>Orientation</code> parameter to <code>Orientation.Landscape</code> to change the default orientation from <b>Portrait</b> to <b>Landscape</b>.
20+
</div>
21+
<Demo Type="typeof(PdfViewer_Demo_02_Orientation)" Tabs="true" />
22+
1723
@code {
1824
private string pageUrl = "/pdf-viewer";
1925
private string title = "Blazor Pdf Viewer Component";
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<p>@eventLog</p>
2+
3+
<PdfViewer Class="mb-3"
4+
Url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
5+
Orientation="Orientation.Landscape"
6+
OnDocumentLoaded="OnDocumentLoaded"
7+
OnPageChanged="OnPageChanged" />
8+
9+
@code {
10+
private string eventLog { get; set; } = $"Last event: ..., CurrentPage: 0, TotalPages: 0";
11+
12+
private void OnDocumentLoaded(PdfViewerEventArgs args)
13+
=> eventLog = $"Last event: OnDocumentLoaded, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
14+
15+
private void OnPageChanged(PdfViewerEventArgs args)
16+
=> eventLog = $"Last event: OnPageChanged, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
17+
}

blazorbootstrap/Components/PdfViewer/PdfViewer.razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
<ul class="dropdown-menu">
3333
<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>
3434
<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>
35+
<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>
3536
<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>
3637
<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>
3738
<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

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ public partial class PdfViewer : BlazorBootstrapComponentBase
99
private int minZoomLevel = 1;
1010

1111
private DotNetObjectReference<PdfViewer>? objRef;
12+
13+
private Orientation? oldOrientation;
14+
1215
private int pageNumber = 0;
1316
private int pagesCount = 0;
1417

@@ -25,12 +28,28 @@ public partial class PdfViewer : BlazorBootstrapComponentBase
2528

2629
protected override async Task OnInitializedAsync()
2730
{
31+
rotation = Orientation == Orientation.Portrait ? 0 : -90;
2832
objRef ??= DotNetObjectReference.Create(this);
2933
await base.OnInitializedAsync();
3034

3135
QueueAfterRenderAction(async () => await PdfViewerJsInterop.InitializeAsync(objRef!, ElementId!, scale, rotation, Url!), new RenderPriority());
3236
}
3337

38+
protected override async Task OnParametersSetAsync()
39+
{
40+
if (Rendered)
41+
{
42+
if (!Orientation.Equals(oldOrientation))
43+
{
44+
oldOrientation = Orientation;
45+
rotation = Orientation == Orientation.Portrait ? 0 : -90;
46+
await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
47+
}
48+
}
49+
50+
await base.OnParametersSetAsync();
51+
}
52+
3453
[JSInvokable]
3554
public void DocumentLoaded(PdfViewerModel pdfViewerModel)
3655
{
@@ -105,13 +124,35 @@ private async Task RotateClockwiseAsync()
105124
rotation += 90;
106125
rotation = rotation.Equals(360) ? 0 : rotation;
107126
await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
127+
128+
// Orientation
129+
SetOrientation();
108130
}
109131

110132
private async Task RotateCounterclockwiseAsync()
111133
{
112134
rotation -= 90;
113135
rotation = rotation.Equals(-360) ? 0 : rotation;
114136
await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
137+
138+
// Orientation
139+
SetOrientation();
140+
}
141+
142+
private void SetOrientation()
143+
{
144+
if (rotation == 0)
145+
oldOrientation = Orientation = Orientation.Portrait;
146+
else if (rotation == -90)
147+
oldOrientation = Orientation = Orientation.Landscape;
148+
}
149+
150+
private async Task SwitchOrientationAsync()
151+
{
152+
oldOrientation = Orientation;
153+
Orientation = Orientation == Orientation.Portrait ? Orientation.Landscape : Orientation.Portrait;
154+
rotation = Orientation == Orientation.Portrait ? 0 : -90;
155+
await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
115156
}
116157

117158
private async Task ZoomInAsync()
@@ -164,12 +205,21 @@ private async Task ResetZoomAsync()
164205
/// </summary>
165206
[Parameter] public EventCallback<PdfViewerEventArgs> OnPageChanged { get; set; }
166207

208+
/// <summary>
209+
/// Provides JavaScript interop functionality for the PDF viewer.
210+
/// </summary>
167211
[Inject] private PdfViewerJsInterop PdfViewerJsInterop { get; set; } = default!;
168212

169213
/// <summary>
170-
/// Gets or sets the PDF URL.
214+
/// Gets or sets the URL of the PDF document to be displayed.
171215
/// </summary>
172216
[Parameter] public string? Url { get; set; }
173217

218+
/// <summary>
219+
/// Gets or sets the preferred orientation for the PDF viewer.
220+
/// </summary>
221+
[Parameter]
222+
public Orientation Orientation { get; set; }
223+
174224
#endregion
175225
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
namespace BlazorBootstrap;
2+
3+
public enum Orientation
4+
{
5+
Portrait,
6+
Landscape,
7+
}

0 commit comments

Comments
 (0)