Skip to content

feat(PdfReader): add width observer function #743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 4 commits into from
Nov 28, 2025
Merged

feat(PdfReader): add width observer function #743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ab5086
refactor: 删除不使用的样式
ArgoZhang Nov 28, 2025
c93c1a2
refactor: 增加 loadPdf 方法
ArgoZhang Nov 28, 2025
2a62645
feat(PdfReader): add width observer function
ArgoZhang Nov 28, 2025
4485393
chore: bump version 10.0.4-beta03
ArgoZhang Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>
<Version>10.0.4-beta02</Version>
<Version>10.0.4-beta03</Version>
</PropertyGroup>

<PropertyGroup>
Expand Down
36 changes: 20 additions & 16 deletions src/components/BootstrapBlazor.PdfReader/PdfReader.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,36 @@
@inherits BootstrapModuleComponentBase

<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
<div class="bb-view-toolbar">
@if (ShowToolbar)
{
<div class="bb-view-title">
@if (ShowToolbar)
{
<div class="bb-view-toolbar">
<div class="bb-view-group bb-view-title">
@if (EnableThumbnails)
{
<div class="bb-view-icon bb-view-bar" title="@Localizer["ToggleSidebar"]"><i class="fa-solid fa-bars"></i></div>
}
<span class="bb-view-subject">@_docTitle</span>
</div>
<div class="@ViewBodyString">
<input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span>
<div class="bb-view-pagesCount"></div>
<div class="bb-view-divider"></div>
<div class="bb-view-icon bb-page-minus" title="@Localizer["ZoomOut"]"><i class="fa-solid fa-fw fa-minus"></i></div>
<input type="text" class="bb-view-scale-input" @bind="CurrentScaleString" />
<div class="bb-view-icon bb-page-plus" title="@Localizer["ZoomIn"]"><i class="fa-solid fa-fw fa-plus"></i></div>
<div class="bb-view-scale">
<div class="bb-view-group bb-view-group-page">
<input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span>
<div class="bb-view-pagesCount"></div>
</div>
<div class="bb-view-group bb-view-group-scale">
<div class="bb-view-divider"></div>
<div class="bb-view-icon bb-page-minus" title="@Localizer["ZoomOut"]"><i class="fa-solid fa-fw fa-minus"></i></div>
<input type="text" class="bb-view-scale-input" @bind="CurrentScaleString" />
<div class="bb-view-icon bb-page-plus" title="@Localizer["ZoomIn"]"><i class="fa-solid fa-fw fa-plus"></i></div>
</div>
<div class="bb-view-group bb-view-group-rotate">
<div class="bb-view-divider"></div>
<div class="bb-view-icon btn-group">
<button type="button" class="btn bb-view-fit-height" title="@Localizer["FitHeight"]" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line fa-rotate-90"></i></button>
<button type="button" class="btn bb-view-fit-width" title="@Localizer["FitWidth"]" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line"></i></button>
<button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
<div class="dropdown-menu dropdown-menu-end shadow">
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">@Localizer["PageActual"]</div>
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">@Localizer["FitWidth"]</div>
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">@Localizer["FitHeight"]</div>
Expand All @@ -38,7 +42,7 @@
<div class="bb-view-icon bb-view-fit-rotate" title="@Localizer["RotateRight"]" @onclick="RotateRight"><i class="fa-solid fa-fw fa-rotate-right"></i></div>
</div>
</div>
<div class="bb-view-controls">
<div class="bb-view-group bb-view-controls">
@if (ShowDownload)
{
<div class="bb-view-icon bb-view-download" title="@Localizer["Download"]" @onclick="OnDownload"><i class="fa-solid fa-fw fa-arrow-right-to-bracket fa-rotate-90"></i></div>
Expand All @@ -51,7 +55,7 @@
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<i class="@MoreButtonIcon"></i>
</button>
<div class="dropdown-menu shadow dropdown-menu-end bb-view-dropdown-menu">
<div class="dropdown-menu shadow dropdown-menu-end">
@if (ShowTwoPagesOneView)
{
<div class="dropdown-item dropdown-item-pages">
Expand Down Expand Up @@ -79,8 +83,8 @@
</div>
</div>
</div>
}
</div>
</div>
}
<div class="bb-view-main">
@if (EnableThumbnails)
{
Expand Down
2 changes: 1 addition & 1 deletion src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ public partial class PdfReader
.AddClassFromAttributes(AdditionalAttributes)
.Build();

private string? ViewBodyString => CssBuilder.Default("bb-view-body")
private string? ViewBodyString => CssBuilder.Default("bb-view-group bb-view-toolbar-main")
.AddClass("fit-width", FitMode == PdfReaderFitMode.PageHeight)
.Build();

Expand Down
22 changes: 9 additions & 13 deletions src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,13 @@
--bs-dropdown-link-active-color: var(--bs-dropdown-color);
}

.bb-view-title {
.bb-view-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
}

.bb-view-title {
padding: 0 1rem;
}

Expand Down Expand Up @@ -69,26 +72,22 @@
padding-inline-end: .5rem;
}

.bb-view-body {
.bb-view-toolbar-main {
justify-content: center;
flex: 1;
min-width: 0;
width: 1%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
background-color: var(--bb-toolbar-background-color);
}

.bb-view-body.fit-width .bb-view-fit-height {
.bb-view-toolbar-main.fit-width .bb-view-fit-height {
display: none;
}

.bb-view-body.fit-width .bb-view-fit-width {
.bb-view-toolbar-main.fit-width .bb-view-fit-width {
display: block;
}

.bb-view-body .bb-view-fit-width {
.bb-view-toolbar-main .bb-view-fit-width {
display: none;
}

Expand Down Expand Up @@ -125,9 +124,6 @@
}

.bb-view-controls {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
}

Expand Down
137 changes: 110 additions & 27 deletions src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,10 @@ export async function init(id, invoke, options) {
return;
}

const loadingTask = pdfjsLib.getDocument(options);
loadingTask.onProgress = function (progressData) {

};

loadingTask.onPassword = function (updatePassword, reason) {
if (reason === pdfjsLib.PasswordResponses.NEED_PASSWORD) {

}
else if (reason === pdfjsLib.PasswordResponses.INCORRECT_PASSWORD) {

}
};

const container = el.querySelector(".bb-view-container");
const eventBus = new pdfjsViewer.EventBus();
const pdfViewer = new pdfjsViewer.PDFViewer({
container,
eventBus
});

addEventListener(el, pdfViewer, eventBus, invoke, options);

const pdfDocument = await loadingTask.promise;
pdfViewer.setDocument(pdfDocument);
const pdfViewer = await loadPdf(el, invoke, options);
const observer = setObserver(el);

Data.set(id, { el, pdfViewer });
Data.set(id, { el, pdfViewer, observer });
}

export function setScaleValue(id, value) {
Expand Down Expand Up @@ -86,6 +63,107 @@ export function resetThumbnails(id) {
}
}

const loadPdf = async (el, invoke, options) => {
const loadingTask = pdfjsLib.getDocument(options);
loadingTask.onProgress = function (progressData) {

};

loadingTask.onPassword = function (updatePassword, reason) {
if (reason === pdfjsLib.PasswordResponses.NEED_PASSWORD) {

}
else if (reason === pdfjsLib.PasswordResponses.INCORRECT_PASSWORD) {

}
};

const container = el.querySelector(".bb-view-container");
const eventBus = new pdfjsViewer.EventBus();
const pdfViewer = new pdfjsViewer.PDFViewer({
container,
eventBus
});

addEventListener(el, pdfViewer, eventBus, invoke, options);

const pdfDocument = await loadingTask.promise;
pdfViewer.setDocument(pdfDocument);

return pdfViewer;
}

const setObserver = el => {
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (complexity): Consider refactoring setObserver to use a data-driven visibility model and correcting the dispose observer handling to reduce branching and DOM state complexity.

You can simplify setObserver quite a bit by making the toolbar behavior data‑driven and avoiding ad‑hoc DOM state (el.widths), while also fixing the observer lifecycle in dispose.

1. Replace imperative increaseSpace / decreaseSpace chains with data‑driven logic

Both functions encode the same ordering twice. You can centralize the order and visibility logic in one array and a pair of small helpers:

const setObserver = el => {
    const title      = el.querySelector(".bb-view-title");
    const subject    = el.querySelector(".bb-view-subject");
    const groupPage  = el.querySelector(".bb-view-group-page");
    const groupScale = el.querySelector(".bb-view-group-scale");
    const groupRotate= el.querySelector(".bb-view-group-rotate");
    const controls   = el.querySelector(".bb-view-controls");

    const groups = [
        { el: subject },
        { el: groupRotate },
        { el: groupScale },
        { el: groupPage },
        { el: controls }
    ];

    // You can recalc widths on demand instead of storing on `el`
    const getTotalWidth = () =>
        title.offsetWidth +
        groups.reduce((sum, { el }) => sum + (el.classList.contains("d-none") ? 0 : el.offsetWidth), 0);

    const collapseToFit = toolbarWidth => {
        // hide from lowest priority (end) until it fits
        for (let i = 0; i < groups.length && getTotalWidth() > toolbarWidth; i++) {
            const { el } = groups[i];
            if (!el.classList.contains("d-none")) {
                el.classList.add("d-none");
            }
        }
    };

    const expandToUseSpace = toolbarWidth => {
        // show from highest priority (end) while still fitting
        for (let i = groups.length - 1; i >= 0; i--) {
            const { el } = groups[i];
            if (!el.classList.contains("d-none")) continue;

            // optimistically show, measure, then revert if it doesn't fit
            el.classList.remove("d-none");
            if (getTotalWidth() > toolbarWidth) {
                el.classList.add("d-none");
            }
        }
    };

    const observer = new ResizeObserver(() => {
        const toolbar = el.querySelector(".bb-view-toolbar");
        if (!toolbar) return;

        const toolbarWidth = toolbar.offsetWidth;
        collapseToFit(toolbarWidth);
        expandToUseSpace(toolbarWidth);
    });

    observer.observe(el);
    return observer;
};

Key improvements:

  • The priority/order is encoded once in groups.
  • Width sums are computed via getTotalWidth() instead of repeated expressions.
  • No need for el.widths or mixing layout state into the DOM element.
  • Visibility logic is declarative: “these groups in this order, hide until it fits, then show while it fits.”

You can tweak the collapse/expand order to exactly match your current behavior (e.g., start collapsing from subject first, etc.) by changing the order in groups or the iteration direction.

2. Avoid el.widths as ad‑hoc storage

The above refactor removes el.widths entirely. If you still want cached widths, keep them in a closure variable instead of mutating the DOM node:

const widths = new Map(groups.map(g => [g.el, g.el.offsetWidth]));
// then use `widths.get(el)` instead of `el.widths[...]`

This keeps layout state local and self‑contained.

3. Fix dispose observer handling

You’re destructuring observer as a const and then trying to reassign it. Also, Data.remove(id) is called before you use el/observer. A safer pattern:

export function dispose(id) {
    const data = Data.get(id);
    Data.remove(id);

    if (!data) return;

    const { el, observer } = data;

    if (observer) {
        observer.disconnect();
        // no need to null it here, Data entry is already removed
    }

    if (el) {
        const minus = el.querySelector(".bb-page-minus");
        const plus = el.querySelector(".bb-page-plus");
        if (minus) EventHandler.off(minus, "click");
        if (plus)  EventHandler.off(plus, "click");
    }
}

This keeps the observer lifecycle clear and avoids illegal reassignment.

const title = el.querySelector(".bb-view-title");
const subject = el.querySelector(".bb-view-subject");
const groupPage = el.querySelector(".bb-view-group-page");
const groupScale = el.querySelector(".bb-view-group-scale");
const groupRotate = el.querySelector(".bb-view-group-rotate");
const controls = el.querySelector(".bb-view-controls");

Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing null checks for DOM elements. If ShowToolbar is false or any toolbar elements are not rendered, the querySelector calls (lines 97-102) will return null, causing line 104 to throw an error when accessing .offsetWidth on null. Add null checks before accessing offsetWidth properties or return early if toolbar elements are not found.

Suggested change
// Null checks for all toolbar elements
if (!title || !subject || !groupPage || !groupScale || !groupRotate || !controls) {
return;
}

Copilot uses AI. Check for mistakes.
el.widths = [subject.offsetWidth, groupRotate.offsetWidth, groupScale.offsetWidth, groupPage.offsetWidth, controls.offsetWidth];

const increaseSpace = toolbar => {
if (controls.classList.contains('d-none')) {
if (title.offsetWidth + el.widths[4] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width calculation is missing subject.offsetWidth. When checking if controls can be unhidden, the formula should include all elements: title.offsetWidth + subject.offsetWidth + groupRotate.offsetWidth + groupScale.offsetWidth + groupPage.offsetWidth + el.widths[4] < toolbar.offsetWidth. The current calculation omits subject, which could cause controls to be shown even when there isn't actually enough space.

Suggested change
if (title.offsetWidth + el.widths[4] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
if (title.offsetWidth + el.widths[0] + el.widths[4] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {

Copilot uses AI. Check for mistakes.
controls.classList.remove("d-none");
}
}
else if (groupPage.classList.contains('d-none')) {
if (title.offsetWidth + el.widths[3] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width calculation is missing subject.offsetWidth and incorrectly includes the hidden element's current width. When checking if groupPage can be unhidden, the formula should be: title.offsetWidth + subject.offsetWidth + groupRotate.offsetWidth + groupScale.offsetWidth + el.widths[3] + controls.offsetWidth < toolbar.offsetWidth. The current calculation omits subject and uses groupPage.offsetWidth (which is 0 when hidden) instead of just using el.widths[3].

Suggested change
if (title.offsetWidth + el.widths[3] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
if (title.offsetWidth + subject.offsetWidth + groupRotate.offsetWidth + groupScale.offsetWidth + el.widths[3] + controls.offsetWidth < toolbar.offsetWidth) {

Copilot uses AI. Check for mistakes.
groupPage.classList.remove("d-none");
}
}
else if (groupScale.classList.contains('d-none')) {
if (title.offsetWidth + el.widths[2] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width calculation is missing subject.offsetWidth and incorrectly includes the hidden element's current width. When checking if groupScale can be unhidden, the formula should be: title.offsetWidth + subject.offsetWidth + groupRotate.offsetWidth + el.widths[2] + groupPage.offsetWidth + controls.offsetWidth < toolbar.offsetWidth. The current calculation omits subject and uses groupScale.offsetWidth (which is 0 when hidden) instead of just using el.widths[2].

Suggested change
if (title.offsetWidth + el.widths[2] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
if (title.offsetWidth + subject.offsetWidth + groupRotate.offsetWidth + el.widths[2] + groupPage.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {

Copilot uses AI. Check for mistakes.
groupScale.classList.remove("d-none");
}
}
else if (groupRotate.classList.contains('d-none')) {
if (title.offsetWidth + el.widths[1] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width calculation is missing subject.offsetWidth and incorrectly includes the hidden element's current width. When checking if groupRotate can be unhidden, the formula should be: title.offsetWidth + subject.offsetWidth + el.widths[1] + groupScale.offsetWidth + groupPage.offsetWidth + controls.offsetWidth < toolbar.offsetWidth. The current calculation omits subject and uses groupRotate.offsetWidth (which is 0 when hidden) instead of just using el.widths[1].

Suggested change
if (title.offsetWidth + el.widths[1] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
if (title.offsetWidth + subject.offsetWidth + el.widths[1] + groupScale.offsetWidth + groupPage.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {

Copilot uses AI. Check for mistakes.
groupRotate.classList.remove("d-none");
}
}
else if (subject.classList.contains("d-none")) {
if (title.offsetWidth + el.widths[0] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width calculation incorrectly includes both el.widths[0] and the sum of other current widths. When checking if subject can be unhidden, since all other elements are visible at this point, the formula should simply be: title.offsetWidth + el.widths[0] + groupRotate.offsetWidth + groupScale.offsetWidth + groupPage.offsetWidth + controls.offsetWidth < toolbar.offsetWidth. Remove the redundant addition as it's already using stored width for subject.

Suggested change
if (title.offsetWidth + el.widths[0] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
if (title.offsetWidth + el.widths[0] + groupRotate.offsetWidth + groupScale.offsetWidth + groupPage.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {

Copilot uses AI. Check for mistakes.
subject.classList.remove("d-none");
}
}
Comment on lines +127 to +131
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Merge nested if conditions (merge-nested-ifs)

Suggested change
else if (subject.classList.contains("d-none")) {
if (title.offsetWidth + el.widths[0] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
subject.classList.remove("d-none");
}
}
else if (subject.classList.contains("d-none") && title.offsetWidth + el.widths[0] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
subject.classList.remove("d-none");
}


ExplanationReading deeply nested conditional code is confusing, since you have to keep track of which
conditions relate to which levels. We therefore strive to reduce nesting where
possible, and the situation where two if conditions can be combined using
and is an easy win.

}
const decreaseSpace = toolbar => {
while (title.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth > toolbar.offsetWidth) {
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width calculation is missing subject.offsetWidth. The while condition should be: title.offsetWidth + subject.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth > toolbar.offsetWidth. Without including subject's width when it's visible, the function will not hide elements when it should, causing toolbar overflow.

Suggested change
while (title.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth > toolbar.offsetWidth) {
while (
title.offsetWidth
+ (subject.classList.contains("d-none") ? 0 : subject.offsetWidth)
+ groupPage.offsetWidth
+ groupScale.offsetWidth
+ groupRotate.offsetWidth
+ controls.offsetWidth
> toolbar.offsetWidth
) {

Copilot uses AI. Check for mistakes.
if (subject.classList.contains("d-none") === false) {
subject.classList.add("d-none");
}
else if (groupRotate.classList.contains('d-none') === false) {
groupRotate.classList.add("d-none");
}
else if (groupScale.classList.contains('d-none') === false) {
groupScale.classList.add("d-none");
}
else if (groupPage.classList.contains('d-none') === false) {
groupPage.classList.add("d-none");
}
else if (controls.classList.contains('d-none') === false) {
controls.classList.add("d-none");
}
}
}

const observer = new ResizeObserver(entries => {
const toolbar = el.querySelector(".bb-view-toolbar");
if (toolbar === null) {
return;
}

Comment on lines +153 to +158
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ResizeObserver callback queries the DOM for .bb-view-toolbar on every resize event. Consider querying this element once during initialization (line 96-104) and storing it in a closure variable, then reuse it in the callback. This avoids repeated DOM queries on every resize.

Suggested change
const observer = new ResizeObserver(entries => {
const toolbar = el.querySelector(".bb-view-toolbar");
if (toolbar === null) {
return;
}
const toolbar = el.querySelector(".bb-view-toolbar");
if (toolbar === null) {
return;
}
const observer = new ResizeObserver(entries => {

Copilot uses AI. Check for mistakes.
decreaseSpace(toolbar);
increaseSpace(toolbar);
});

observer.observe(el);
return observer;
}

const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
eventBus.on("pagesinit", async () => {
if (options.fitMode) {
Expand Down Expand Up @@ -303,9 +381,14 @@ const printPdf = url => {
}

export function dispose(id) {
const { el, observer } = Data.get(id);
Data.remove(id);

const el = document.getElementById(id);
if (observer) {
observer.disconnect();
observer = null;
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assignment to observer has no effect as it's a function parameter. The assignment observer = null only modifies the local variable and doesn't prevent memory leaks. Since the observer is already disconnected on line 388, this line can be removed or is simply redundant.

Suggested change
observer = null;

Copilot uses AI. Check for mistakes.
}

if (el) {
const minus = el.querySelector(".bb-page-minus");
const plus = el.querySelector(".bb-page-plus");
Expand Down
24 changes: 0 additions & 24 deletions src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,30 +141,6 @@
margin-inline: 5px;
}

.pdfViewer .page.loadingIcon::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url("images/loading-icon.gif") center no-repeat;
display: none;
transition-property: display;
transition-delay: var(--loading-icon-delay);
z-index: 5;
contain: strict;
}

.pdfViewer .page.loading::after {
display: block;
}

.pdfViewer .page:not(.loading)::after {
transition-property: none;
display: none;
}

.pdfPresentationMode .pdfViewer {
padding-bottom: 0;
}
Expand Down