feat(PdfReader): add thumbnails rotate function (#725)

* refactor: 增加旋转样式

* feat: 增加 rotationchanging 事件

* chore: bump version 10.0.1-beta06

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj

@@ -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>

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

@@ -112,6 +112,7 @@
 }
 
 .bb-view-thumbnails {
+    --thumb-rotate: 0;
     flex-basis: 0;
     overflow: auto;
     background-color: #28292a;
@@ -141,6 +142,7 @@
         padding: 1px;
         cursor: pointer;
         border: 2px solid #28292a;
+        transform: rotate(var(--thumb-rotate));
     }
 
 .bb-view-content {

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

@@ -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) {
@@ -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`);
+        }
+    })
+}
+
+const resetThumbnailsView = (el, pdfViewer) => {
+    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;
+    });
 }
 
 const updateScale = (pdfViewer, button, rate) => {