Skip to content

Commit 2fa21f7

Browse files
ArgoZhangArgoZhang
committed
feat: 增加 FitMode 功能
1 parent 16fe32a commit 2fa21f7

5 files changed

Lines changed: 110 additions & 64 deletions

File tree

‎src/components/BootstrapBlazor.PdfReader/PdfReader.razor‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,47 @@
88
<div class="bb-view-toolbar init">
99
<div class="bb-view-title">
1010
<div class="bb-view-icon bb-view-bar"><i class="fa-solid fa-bars"></i></div>
11-
<span class="bb-view-subject d-none d-sm-block">@_docTitle</span>
11+
<span class="bb-view-subject">@_docTitle</span>
1212
</div>
1313
<div class="@ViewBodyString">
14-
<input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span><div class="bb-view-pagesCount"></div>
14+
<input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span>
15+
<div class="bb-view-pagesCount"></div>
1516
<div class="bb-view-divider"></div>
16-
<div class="bb-view-icon bb-page-minus"><i class="fa-solid fa-minus"></i></div>
17-
<input type="text" class="bb-view-scale" @bind="CurrentScaleString" />
18-
<div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-plus"></i></div>
19-
<div class="bb-view-divider"></div>
20-
<div class="bb-view-icon btn-group">
21-
<button type="button" class="btn bb-view-fit-page" @onclick="FitToPage"><i class="fa-solid fa-arrows-left-right-to-line fa-rotate-90"></i></button>
22-
<button type="button" class="btn bb-view-fit-width" @onclick="FitToWidth"><i class="fa-solid fa-arrows-left-right-to-line"></i></button>
23-
<button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
24-
<span class="visually-hidden">Toggle Dropdown</span>
25-
</button>
26-
<div class="dropdown-menu dropdown-menu-end">
27-
<div class="dropdown-item">page-actual</div>
28-
<div class="dropdown-item">page-width</div>
29-
<div class="dropdown-item">page-height</div>
30-
<div class="dropdown-item">page-fit</div>
31-
<div class="dropdown-item">auto</div>
17+
<div class="bb-view-icon bb-page-minus"><i class="fa-solid fa-fw fa-minus"></i></div>
18+
<input type="text" class="bb-view-scale-input" @bind="CurrentScaleString" />
19+
<div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-fw fa-plus"></i></div>
20+
<div class="bb-view-scale">
21+
<div class="bb-view-divider"></div>
22+
<div class="bb-view-icon btn-group">
23+
<button type="button" class="btn bb-view-fit-height" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line fa-rotate-90"></i></button>
24+
<button type="button" class="btn bb-view-fit-width" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line"></i></button>
25+
<button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
26+
<span class="visually-hidden">Toggle Dropdown</span>
27+
</button>
28+
<div class="dropdown-menu dropdown-menu-end">
29+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">page-actual</div>
30+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">page-width</div>
31+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">page-height</div>
32+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageFit)">page-fit</div>
33+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.Auto)">auto</div>
34+
</div>
3235
</div>
36+
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-fw fa-rotate-left"></i></div>
37+
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-fw fa-rotate-right"></i></div>
3338
</div>
34-
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-rotate-left"></i></div>
35-
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-rotate-right"></i></div>
3639
</div>
3740
<div class="bb-view-controls">
3841
@if (ShowDownload)
3942
{
40-
<div class="bb-view-icon bb-view-download" @onclick="OnDownload"><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></div>
43+
<div class="bb-view-icon bb-view-download" @onclick="OnDownload"><i class="fa-solid fa-fw fa-arrow-right-to-bracket fa-rotate-90"></i></div>
4144
}
42-
<div class="bb-view-icon bb-view-print"><i class="fa-solid fa-print"></i></div>
45+
<div class="bb-view-icon bb-view-print"><i class="fa-solid fa-fw fa-print"></i></div>
4346
<div class="dropdown">
4447
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
4548
<i class="@MoreButtonIcon"></i>
4649
</button>
4750
<div class="dropdown-menu shadow dropdown-menu-end">
48-
@if (ShowTwoPagesOneViewButton)
51+
@if (ShowTwoPagesOneView)
4952
{
5053
<div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
5154
<Divider></Divider>

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

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,13 @@ public partial class PdfReader
5959
/// 获得/设置 是否适配当前页面宽度 默认 false
6060
/// </summary>
6161
[Parameter]
62-
public bool IsFitToPage { get; set; }
62+
public PdfReaderFitMode FitMode { get; set; }
6363

6464
/// <summary>
6565
/// 获得/设置 是否显示双页单视图按钮 默认 true 显示
6666
/// </summary>
6767
[Parameter]
68-
public bool ShowTwoPagesOneViewButton { get; set; } = true;
68+
public bool ShowTwoPagesOneView { get; set; } = true;
6969

7070
/// <summary>
7171
/// 获得/设置 是否启用双页单视图模式 默认 false
@@ -122,11 +122,11 @@ public partial class PdfReader
122122
.Build();
123123

124124
private string? ViewBodyString => CssBuilder.Default("bb-view-body")
125-
.AddClass("fit-page", IsFitToPage)
125+
.AddClass("fit-width", FitMode == PdfReaderFitMode.PageHeight)
126126
.Build();
127127

128128
private string? _docTitle;
129-
private bool _isFitToPage;
129+
private PdfReaderFitMode _fitMode;
130130
private uint _currentPage;
131131
private string? _url;
132132
private string? _currentScale;
@@ -190,7 +190,7 @@ protected override void OnParametersSet()
190190
{
191191
base.OnParametersSet();
192192

193-
MoreButtonIcon ??= "fa-solid fa-ellipsis-vertical";
193+
MoreButtonIcon ??= "fa-solid fa-fw fa-ellipsis-vertical";
194194
_twoPagesOneViewIcon ??= "fa-solid fa-fw";
195195

196196
if (CurrentPage == 0)
@@ -211,12 +211,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
211211

212212
if (firstRender)
213213
{
214-
_isFitToPage = IsFitToPage;
214+
_fitMode = FitMode;
215215
_currentPage = CurrentPage;
216216
_url = Url;
217217
_currentScale = CurrentScale;
218218
_enableTwoPagesOneView = EnableTwoPagesOneView;
219-
_showTwoPagesOneViewButton = ShowTwoPagesOneViewButton;
219+
_showTwoPagesOneViewButton = ShowTwoPagesOneView;
220220
}
221221

222222
if (_url != Url)
@@ -225,10 +225,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
225225
await InvokeInitAsync();
226226
}
227227

228-
if (_isFitToPage != IsFitToPage)
228+
if (_fitMode != FitMode)
229229
{
230-
_isFitToPage = IsFitToPage;
231-
await TriggerFit(_isFitToPage ? "fitToPage" : "fitToWidth");
230+
_fitMode = FitMode;
231+
await InvokeVoidAsync("setScaleValue", Id, _fitMode.ToDescriptionString());
232232
}
233233
if (_currentPage != CurrentPage)
234234
{
@@ -245,9 +245,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
245245
_enableTwoPagesOneView = EnableTwoPagesOneView;
246246
await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
247247
}
248-
if (_showTwoPagesOneViewButton != ShowTwoPagesOneViewButton)
248+
if (_showTwoPagesOneViewButton != ShowTwoPagesOneView)
249249
{
250-
_showTwoPagesOneViewButton = ShowTwoPagesOneViewButton;
250+
_showTwoPagesOneViewButton = ShowTwoPagesOneView;
251251
await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
252252
}
253253
}
@@ -259,7 +259,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
259259
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
260260
{
261261
Url,
262-
IsFitToPage,
262+
FitMode,
263263
EnableThumbnails,
264264
TriggerPagesInit = OnPagesInitAsync != null,
265265
TriggerPagesLoaded = OnPagesLoadedAsync != null,
@@ -277,12 +277,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
277277
/// <summary>
278278
/// 适应页面宽度
279279
/// </summary>
280-
public void FitToPage() => IsFitToPage = true;
281-
282-
/// <summary>
283-
/// 适应文档宽度
284-
/// </summary>
285-
public void FitToWidth() => IsFitToPage = false;
280+
public void SetFitMode(PdfReaderFitMode mode) => FitMode = mode;
286281

287282
/// <summary>
288283
/// 旋转页面方法
@@ -310,8 +305,6 @@ private async Task OnDownload()
310305
}
311306
}
312307

313-
private Task TriggerFit(string methodName) => InvokeVoidAsync(methodName, Id);
314-
315308
/// <summary>
316309
/// 页面开始初始化时回调方法
317310
/// </summary>

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@
3434
}
3535

3636
.bb-view-icon {
37-
margin: 0 .5rem;
3837
padding: .5rem;
3938
cursor: pointer;
4039
}
@@ -65,6 +64,10 @@
6564
max-width: 300px;
6665
}
6766

67+
.bb-view-pagesCount {
68+
padding-inline-end: .5rem;
69+
}
70+
6871
.bb-view-body {
6972
flex: 1;
7073
min-width: 0;
@@ -73,29 +76,35 @@
7376
flex-wrap: nowrap;
7477
align-items: center;
7578
justify-content: center;
79+
background-color: var(--bb-toolbar-background-color);
7680
}
7781

78-
.bb-view-body.fit-page .bb-view-fit-page {
82+
.bb-view-body.fit-width .bb-view-fit-height {
7983
display: none;
8084
}
8185

82-
.bb-view-body.fit-page .bb-view-fit-width {
86+
.bb-view-body.fit-width .bb-view-fit-width {
8387
display: block;
8488
}
8589

8690
.bb-view-body .bb-view-fit-width {
8791
display: none;
8892
}
8993

90-
.bb-view-num, .bb-view-scale {
94+
.bb-view-scale {
95+
display: flex;
96+
align-items: center;
97+
}
98+
99+
.bb-view-num, .bb-view-scale-input {
91100
width: 36px;
92101
text-align: center;
93102
background-color: #000;
94103
border: none;
95104
color: #fff;
96105
}
97106

98-
.bb-view-scale {
107+
.bb-view-scale-input {
99108
width: 40px;
100109
}
101110

@@ -107,16 +116,24 @@
107116
width: .6px;
108117
height: calc(var(--bb-pdf-toolbar-height) / 3);
109118
background-color: #777;
110-
margin: 0 1rem;
119+
margin: 0 0.5rem;
111120
}
112121

122+
.bb-view-divider + .bb-view-icon {
123+
padding-inline-start: 0;
124+
}
125+
113126
.bb-view-controls {
114127
display: flex;
115128
align-items: center;
116129
justify-content: center;
117130
padding: 0 1rem;
118131
}
119132

133+
.bb-view-controls .dropdown-toggle {
134+
padding: 7px;
135+
}
136+
120137
.bb-view-main {
121138
display: flex;
122139
width: 100%;

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

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,10 @@ export async function init(id, invoke, options) {
5151
Data.set(id, { el, pdfViewer });
5252
}
5353

54-
export function fitToWidth(id) {
54+
export function setScaleValue(id, value) {
5555
const { pdfViewer } = Data.get(id);
5656
if (pdfViewer) {
57-
pdfViewer.currentScaleValue = "page-height";
58-
}
59-
}
60-
61-
export function fitToPage(id) {
62-
const { pdfViewer } = Data.get(id);
63-
if (pdfViewer) {
64-
pdfViewer.currentScaleValue = "page-width";
57+
pdfViewer.currentScaleValue = value;
6558
}
6659
}
6760

@@ -118,11 +111,8 @@ const resetTwoPagesOneView = (el, pdfViewer) => {
118111

119112
const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
120113
eventBus.on("pagesinit", async () => {
121-
if (options.isFitToPage) {
122-
pdfViewer.currentScaleValue = "page-width";
123-
}
124-
else {
125-
pdfViewer.currentScaleValue = "page-actual";
114+
if (options.fitMode) {
115+
pdfViewer.currentScaleValue = fitMode;
126116
}
127117

128118
const numPages = pdfViewer.pagesCount;

‎src/components/BootstrapBlazor.PdfReader/PdfReaderFitMode.cs‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
2+
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
3+
// Website: https://www.blazor.zone or https://argozhang.github.io/
4+
5+
using System.ComponentModel;
6+
7+
namespace BootstrapBlazor.Components;
8+
9+
/// <summary>
10+
/// PdfReader 文档适配模式
11+
/// </summary>
12+
public enum PdfReaderFitMode
13+
{
14+
/// <summary>
15+
/// 页面宽度
16+
/// </summary>
17+
[Description("page-width")]
18+
PageWidth,
19+
20+
/// <summary>
21+
/// 实际大小
22+
/// </summary>
23+
[Description("page-actual")]
24+
PageActual,
25+
26+
/// <summary>
27+
/// 页面高度
28+
/// </summary>
29+
[Description("page-height")]
30+
PageHeight,
31+
32+
/// <summary>
33+
/// 自适应宽高
34+
/// </summary>
35+
[Description("page-fit")]
36+
PageFit,
37+
38+
/// <summary>
39+
/// 自动
40+
/// </summary>
41+
[Description("auto")]
42+
Auto
43+
}

0 commit comments

Comments
 (0)