Skip to content

feat(PdfReader): add thumbnails rotate function #725

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 3 commits into from
Nov 26, 2025
Merged

feat(PdfReader): add thumbnails rotate function #725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e974a11
refactor: 增加旋转样式
ArgoZhang Nov 26, 2025
882ed79
feat: 增加 rotationchanging 事件
ArgoZhang Nov 26, 2025
61ab1ef
chore: bump version 10.0.1-beta06
ArgoZhang Nov 26, 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.1-beta05</Version>
<Version>10.0.1-beta06</Version>
</PropertyGroup>

<PropertyGroup>
Expand Down
2 changes: 2 additions & 0 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 @@ -112,6 +112,7 @@
}

.bb-view-thumbnails {
--thumb-rotate: 0;
Copy link

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

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

The default value for --thumb-rotate is set to 0 (unitless), but it's used as rotate(var(--thumb-rotate)) which expects a value with units. While CSS is lenient and treats rotate(0) the same as rotate(0deg), for consistency and clarity, consider setting the default to 0deg instead of 0.

Suggested change
--thumb-rotate: 0;
--thumb-rotate: 0deg;

Copilot uses AI. Check for mistakes.
flex-basis: 0;
overflow: auto;
background-color: #28292a;
Expand Down Expand Up @@ -141,6 +142,7 @@
padding: 1px;
cursor: pointer;
border: 2px solid #28292a;
transform: rotate(var(--thumb-rotate));
}

.bb-view-content {
Expand Down
69 changes: 40 additions & 29 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 @@ -127,35 +127,7 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {

eventBus.on("pagesloaded", async e => {
if (options.enableThumbnails) {
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
pdfViewer.getPagesOverview().map(async (p, i) => {
const item = document.createElement("div");
item.classList.add("bb-view-thumbnail-item");
if (pdfViewer.currentPageNumber === i + 1) {
item.classList.add("active");
}
item.setAttribute("data-bb-page", `${i + 1}`);
thumbnailsContainer.appendChild(item);

const page = await pdfViewer.pdfDocument.getPage(i + 1);
const canvas = await makeThumb(page);
const img = document.createElement("img");
img.src = canvas.toDataURL();
item.appendChild(img);
});

EventHandler.on(thumbnailsContainer, "click", ".bb-view-thumbnail-item", e => {
const active = thumbnailsContainer.querySelector('.active');
if (active) {
active.classList.remove('active');
}

const item = e.delegateTarget;
item.classList.add("active");

const index = parseInt(item.getAttribute("data-bb-page")) || 1;
pdfViewer.currentPageNumber = index;
})
resetThumbnailsView(el, pdfViewer);
}

if (options.triggerPagesLoaded === true) {
Expand Down Expand Up @@ -232,6 +204,45 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
thumbnailsEl.classList.toggle("show");
});
}

eventBus.on("rotationchanging", evt => {
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
if (thumbnailsContainer) {
thumbnailsContainer.style.setProperty('--thumb-rotate', `${evt.pagesRotation}deg`);
Comment on lines +209 to +211
Copy link

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

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

The rotation event handler only updates the CSS variable when thumbnails exist, but it should also check if options.enableThumbnails is true, similar to how other thumbnail-related code does in lines 129-131 and 145-155. Without this check, the handler will attempt to query for thumbnails even when the thumbnails feature is disabled, which is unnecessary overhead.

Consider adding: if (options.enableThumbnails) { ... } around the entire handler body.

Suggested change
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
if (thumbnailsContainer) {
thumbnailsContainer.style.setProperty('--thumb-rotate', `${evt.pagesRotation}deg`);
if (options.enableThumbnails) {
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
if (thumbnailsContainer) {
thumbnailsContainer.style.setProperty('--thumb-rotate', `${evt.pagesRotation}deg`);
}

Copilot uses AI. Check for mistakes.
}
})
}

const resetThumbnailsView = (el, pdfViewer) => {
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
Copy link

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

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

The resetThumbnailsView function doesn't clear existing thumbnails before recreating them. If this function is called multiple times (e.g., when rotation changes or PDF is reloaded), it will keep appending new thumbnails to the container, leading to duplicates.

Add thumbnailsContainer.innerHTML = ''; at the beginning of the function to clear existing content before regenerating thumbnails.

Suggested change
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
thumbnailsContainer.innerHTML = '';

Copilot uses AI. Check for mistakes.
pdfViewer.getPagesOverview().map(async (p, i) => {
const item = document.createElement("div");
item.classList.add("bb-view-thumbnail-item");
if (pdfViewer.currentPageNumber === i + 1) {
item.classList.add("active");
}
item.setAttribute("data-bb-page", `${i + 1}`);
thumbnailsContainer.appendChild(item);

const page = await pdfViewer.pdfDocument.getPage(i + 1);
const canvas = await makeThumb(page);
const img = document.createElement("img");
img.src = canvas.toDataURL();
item.appendChild(img);
});

EventHandler.on(thumbnailsContainer, "click", ".bb-view-thumbnail-item", e => {
const active = thumbnailsContainer.querySelector('.active');
if (active) {
active.classList.remove('active');
}

const item = e.delegateTarget;
item.classList.add("active");

const index = parseInt(item.getAttribute("data-bb-page")) || 1;
pdfViewer.currentPageNumber = index;
});
Comment on lines +234 to +245
Copy link

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

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

The event handler is registered each time resetThumbnailsView is called, but it's never removed before re-registration. This will create duplicate event handlers if resetThumbnailsView is called multiple times (e.g., if the PDF is reloaded or thumbnails are regenerated).

Consider either:

  1. Removing the existing handler before registering a new one: EventHandler.off(thumbnailsContainer, "click") before EventHandler.on(...)
  2. Moving this event handler registration outside of resetThumbnailsView to ensure it's only registered once

Copilot uses AI. Check for mistakes.
}

const updateScale = (pdfViewer, button, rate) => {
Expand Down