feat(EmbedPDF): update embed-pdf-viewer to v3.0.0 (#1279)

* chore(EmbedPDF): update embed-pdf-viewer to v3.0.0 (#1278)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* chore: 更新脚本

* refactor: 更新升级到 v3 版本

* chore: bump version 11.0.0-rc.3

---------

Co-authored-by: Tony-ST0754 <244411587+Tony-ST0754@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Argo Zhang <argo@live.ca>

Author: 3 people

src/components/BootstrapBlazor.EmbedPDF/BootstrapBlazor.EmbedPDF.csproj

@@ -1,5 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
+  <PropertyGroup>
+    <Version>11.0.0-rc.3</Version>
+  </PropertyGroup>
 
   <PropertyGroup>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Pdf Viewer</PackageTags>

src/components/BootstrapBlazor.EmbedPDF/EmbedPDF.razor.cs

@@ -10,6 +10,8 @@ namespace BootstrapBlazor.Components;
 [JSModuleAutoLoader("./_content/BootstrapBlazor.EmbedPDF/EmbedPDF.razor.js", JSObjectReference = true)]
 public partial class EmbedPDF
 {
+    private const string AssetsBaseUrl = "./_content/BootstrapBlazor.EmbedPDF/";
+
     /// <summary>
     /// <para lang="zh">获得/设置 PDF 文档路径</para>
     /// <para lang="en">Gets or sets the PDF document URL</para>
@@ -152,6 +154,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         Theme = Theme.ToDescriptionString(),
         Src = Url,
         Lang = Language,
+        AssetsUrl = AssetsBaseUrl,
         CurrentPage,
         ScrollStrategy = ScrollStrategy.ToDescriptionString(),
         PageGap

src/components/BootstrapBlazor.EmbedPDF/EmbedPDF.razor.js

@@ -9,115 +9,124 @@ export async function init(id, invoke, options) {
         return null;
     }
 
-    const target = el.querySelector('.pdf-viewer');
-    const { src, tabBar, theme, lang, currentPage, scrollStrategy, pageGap } = options;
-    const wasmUrl = `${location.origin}/_content/BootstrapBlazor.EmbedPDF/pdfium.wasm`;
-
-    let preference = theme;
-    if (preference === 'system') {
-        preference = getTheme();
-    }
-
-    let currentPageGap = pageGap;
-    if (currentPageGap === 0) {
-        currentPageGap = 20;
-    }
+    const { src, tabBar, theme, lang, assetsUrl, currentPage, scrollStrategy, pageGap } = options;
+    const preference = getViewerTheme(theme);
+    const currentPageGap = pageGap === 0 ? 20 : pageGap;
+    const pdf = {
+        element: null,
+        viewer: null,
+        scrollStrategy,
+        resolveReady: null
+    };
+    pdf.ready = new Promise(resolve => {
+        pdf.resolveReady = resolve;
+    });
 
-    const viewer = EmbedPDF.init({
-        type: 'container',
+    const element = EmbedPDF.init({
         target: el,
         src,
-        worker: true,
-        tabBar,
-        theme: {
-            preference: preference
+        locale: lang || 'auto',
+        theme: preference,
+        layout: layout => layout.tabs(tabBar),
+        plugins: {
+            stage: {
+                layout: scrollStrategy,
+                gap: currentPageGap
+            },
+            i18n: {
+                fallbackLocale: 'en'
+            }
         },
-        wasmUrl,
-        i18n: {
-            defaultLocale: lang,
-            fallbackLocale: 'en'
+        engine: {
+            assetsUrl
         },
-        scroll: {
-            defaultStrategy: scrollStrategy,
-            defaultPageGap: currentPageGap
+        onReady: viewer => {
+            pdf.viewer = viewer;
+            viewer.documents.onOpened(({ documentId }) => {
+                const stage = viewer.forDocument(documentId).get('stage');
+                stage.updateSettings({ layout: pdf.scrollStrategy });
+                if (currentPage > 0) {
+                    stage.goToPage(currentPage - 1);
+                }
+            });
+
+            viewer.documents.onActiveChanged(() => {
+                viewer.tryGet('stage')?.updateSettings({ layout: pdf.scrollStrategy });
+            });
+            pdf.resolveReady(viewer);
         }
     });
 
+    pdf.element = element;
+    Data.set(id, pdf);
+
     registerBootstrapBlazorModule('EmbedPDF', id, () => {
         EventHandler.on(document, 'changed.bb.theme', updateTheme);
     });
-
-    Data.set(id, { el, invoke, options, viewer });
-
-    const registry = await viewer.registry;
-    const scroll = registry.getPlugin('scroll').provides();
-
-    if (currentPage !== 0) {
-        scroll.onLayoutReady((event) => {
-            scroll.scrollToPage({
-                pageNumber: currentPage,
-                behavior: 'instant'
-            });
-        });
-    }
+    await pdf.ready;
 }
 
 export async function setUrl(id, url, keepCurrentDoc) {
     const pdf = Data.get(id);
-    const { viewer } = pdf;
-
-    if (viewer) {
-        const registry = await viewer.registry;
-        const docManager = registry.getPlugin('document-manager').provides();
-        if (!keepCurrentDoc) {
-            const doc = docManager.getActiveDocument();
-            if (doc) {
-                docManager.closeDocument(doc.id).toPromise();
-            }
+    if (!pdf) {
+        return;
+    }
+
+    const viewer = await pdf.ready;
+    if (!viewer || Data.get(id) !== pdf) {
+        return;
+    }
+
+    if (!keepCurrentDoc) {
+        const activeDocumentId = viewer.documents.getActiveId();
+        if (activeDocumentId) {
+            await viewer.documents.close(activeDocumentId);
         }
-        const name = getFileName(url);
-        docManager.openDocumentUrl({
-            url,
-            name,
-            autoActivate: true
-        }).toPromise();
     }
+
+    if (!url || Data.get(id) !== pdf) {
+        return;
+    }
+
+    await viewer.documents.open(
+        { kind: 'url', url },
+        { name: getFileName(url) }
+    );
 }
 
 export function setTheme(id, theme) {
     const pdf = Data.get(id);
-    const { viewer } = pdf;
-
-    if (viewer) {
-        viewer.setTheme(theme);
+    if (pdf?.element) {
+        pdf.element.theme = getViewerTheme(theme);
     }
 }
 
-export async function setLocale(id, locale) {
+export function setLocale(id, locale) {
     const pdf = Data.get(id);
-    const { viewer } = pdf;
-
-    if (viewer) {
-        const registry = await viewer.registry;
-        const i18n = registry.getPlugin('i18n').provides();
-        i18n.setLocale(locale);
+    if (pdf?.element) {
+        pdf.element.locale = locale;
     }
 }
 
-export async function setScrollStrategy(id, strategy) {
+export function setScrollStrategy(id, strategy) {
     const pdf = Data.get(id);
-    const { viewer } = pdf;
-
-    if (viewer) {
-        const registry = await viewer.registry;
-        const scroll = registry.getPlugin('scroll').provides();
-        scroll.setScrollStrategy(strategy);
+    if (pdf) {
+        pdf.scrollStrategy = strategy;
+        const stage = pdf.viewer?.tryGet('stage');
+        if (stage) {
+            stage.updateSettings({ layout: strategy });
+        }
     }
 }
 
 export function dispose(id) {
     const pdf = Data.get(id);
     Data.remove(id);
+    pdf?.resolveReady(null);
+
+    if (pdf?.element) {
+        pdf.element.remove();
+    }
 
     const { EmbedPDF } = window.BootstrapBlazor;
     if (EmbedPDF) {
@@ -134,11 +143,8 @@ const updateTheme = e => {
         const id = s.getAttribute('id');
         if (id) {
             const pdf = Data.get(id);
-            if (pdf) {
-                const { viewer } = pdf;
-                if (viewer) {
-                    viewer.setTheme(theme);
-                }
+            if (pdf?.element) {
+                pdf.element.theme = getViewerTheme(theme);
             }
         }
     });
@@ -151,3 +157,8 @@ function getFileName(filePath) {
     );
     return filePath.substring(lastSeparatorIndex + 1);
 }
+
+function getViewerTheme(theme) {
+    const preference = theme === 'system' ? getTheme() : theme;
+    return preference === 'auto' ? 'system' : preference;
+}