@file-viewer/pptx 2.1.28 → 2.1.29

package/dist/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const pptxViewerCss = "\n.flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}\n.flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}\n.flyfish-pptx-content[data-render-state=\"loading\"]{opacity:.82}\n.flyfish-pptx-slide-slot{display:flow-root;box-sizing:border-box;width:100%;min-width:0}\n.flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}\n.flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}\n\n.slide{position:relative;border:0;border-radius:0;overflow:hidden;margin-bottom:50px;margin-left:auto;margin-right:auto;z-index:100}\n.slide div.block{position:absolute;top:0;left:0;width:100%;line-height:1}\n.slide div.content{display:flex;flex-direction:column}\n.slide div.diagram-content{display:flex;flex-direction:column}\n.slide div.content-rtl{display:flex;flex-direction:column;direction:rtl}\n.slide .pregraph-rtl{direction:rtl}\n.slide .pregraph-ltr{direction:ltr}\n.slide .pregraph-inherit{direction:inherit}\n.slide .slide-prgrph{width:100%}\n.slide .line-break-br::before{content:\"\\A\";white-space:pre}\n.slide div.v-up{justify-content:flex-start}\n.slide div.v-mid{justify-content:center}\n.slide div.v-down{justify-content:flex-end}\n.slide div.h-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.h-left-rtl{justify-content:flex-end;align-items:flex-end;text-align:left}\n.slide div.h-mid{justify-content:center;align-items:center;text-align:center}\n.slide div.h-right{justify-content:flex-end;align-items:flex-end;text-align:right}\n.slide div.h-right-rtl{justify-content:flex-start;align-items:flex-start;text-align:right}\n.slide div.h-just,.slide div.h-dist{text-align:justify}\n.slide div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.up-center{justify-content:flex-start;align-items:center}\n.slide div.up-right{justify-content:flex-start;align-items:flex-end}\n.slide div.center-left{justify-content:center;align-items:flex-start;text-align:left}\n.slide div.center-center{justify-content:center;align-items:center}\n.slide div.center-right{justify-content:center;align-items:flex-end}\n.slide div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}\n.slide div.down-center{justify-content:flex-end;align-items:center}\n.slide div.down-right{justify-content:flex-end;align-items:flex-end}\n.slide li.slide{margin:10px 0;font-size:18px}\n.slide table{position:absolute}\n.slide svg.drawing{position:absolute;overflow:visible}\n\n.flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}\n.flyfish-pptx-slide-slot:last-of-type > .slide{margin-bottom:0}\n";
+export declare const pptxViewerCss = "\n.flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}\n.flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}\n.flyfish-pptx-content[data-render-state=\"loading\"]{opacity:.82}\n.flyfish-pptx-slide-slot{display:flow-root;box-sizing:border-box;width:100%;min-width:0}\n.flyfish-pptx-slide-error{display:flex;align-items:center;justify-content:center;background:#fff7ed!important;color:#9a3412}\n.flyfish-pptx-slide-error-card{display:grid;gap:10px;max-width:70%;padding:24px;border:1px solid #fdba74;border-radius:12px;background:#fff;text-align:center;font:14px/1.5 system-ui,sans-serif}\n.flyfish-pptx-slide-error-card strong{font-size:18px}\n.flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}\n.flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}\n\n.slide{position:relative;border:0;border-radius:0;overflow:hidden;margin-bottom:50px;margin-left:auto;margin-right:auto;z-index:100}\n.slide div.block{position:absolute;top:0;left:0;width:100%;line-height:1}\n.slide div.content{display:flex;flex-direction:column}\n.slide div.diagram-content{display:flex;flex-direction:column}\n.slide div.content-rtl{display:flex;flex-direction:column;direction:rtl}\n.slide .pregraph-rtl{direction:rtl}\n.slide .pregraph-ltr{direction:ltr}\n.slide .pregraph-inherit{direction:inherit}\n.slide .slide-prgrph{width:100%}\n.slide .line-break-br::before{content:\"\\A\";white-space:pre}\n.slide div.v-up{justify-content:flex-start}\n.slide div.v-mid{justify-content:center}\n.slide div.v-down{justify-content:flex-end}\n.slide div.h-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.h-left-rtl{justify-content:flex-end;align-items:flex-end;text-align:left}\n.slide div.h-mid{justify-content:center;align-items:center;text-align:center}\n.slide div.h-right{justify-content:flex-end;align-items:flex-end;text-align:right}\n.slide div.h-right-rtl{justify-content:flex-start;align-items:flex-start;text-align:right}\n.slide div.h-just,.slide div.h-dist{text-align:justify}\n.slide div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.up-center{justify-content:flex-start;align-items:center}\n.slide div.up-right{justify-content:flex-start;align-items:flex-end}\n.slide div.center-left{justify-content:center;align-items:flex-start;text-align:left}\n.slide div.center-center{justify-content:center;align-items:center}\n.slide div.center-right{justify-content:center;align-items:flex-end}\n.slide div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}\n.slide div.down-center{justify-content:flex-end;align-items:center}\n.slide div.down-right{justify-content:flex-end;align-items:flex-end}\n.slide li.slide{margin:10px 0;font-size:18px}\n.slide table{position:absolute}\n.slide svg.drawing{position:absolute;overflow:visible}\n\n.flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}\n.flyfish-pptx-slide-slot:last-of-type > .slide{margin-bottom:0}\n";
 export declare const ensurePptxViewerStyles: (documentRef: Document, root?: Document | ShadowRoot) => void;

package/dist/styles.js

@@ -36,6 +36,9 @@ export const pptxViewerCss = `
 .flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}
 .flyfish-pptx-content[data-render-state="loading"]{opacity:.82}
 .flyfish-pptx-slide-slot{display:flow-root;box-sizing:border-box;width:100%;min-width:0}
+.flyfish-pptx-slide-error{display:flex;align-items:center;justify-content:center;background:#fff7ed!important;color:#9a3412}
+.flyfish-pptx-slide-error-card{display:grid;gap:10px;max-width:70%;padding:24px;border:1px solid #fdba74;border-radius:12px;background:#fff;text-align:center;font:14px/1.5 system-ui,sans-serif}
+.flyfish-pptx-slide-error-card strong{font-size:18px}
 .flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}
 .flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}
 ${legacyPptxCss}

package/dist/types.d.ts

@@ -34,7 +34,7 @@ export interface PptxSlideSize {
     height?: number;
     [key: string]: unknown;
 }
-export type PptxDiagnosticErrorCode = 'PPTX_FILE_EMPTY' | 'PPTX_FILE_TOO_LARGE' | 'PPTX_INVALID_ZIP' | 'PPTX_MISSING_CONTENT_TYPES' | 'PPTX_MISSING_PRESENTATION' | 'PPTX_NO_SLIDES' | 'PPTX_MISSING_SLIDE' | 'PPTX_SLIDE_RENDER_FAILED' | 'PPTX_WORKER_FAILED' | 'PPTX_PARSE_FAILED' | (string & {});
+export type PptxDiagnosticErrorCode = 'PPTX_FILE_EMPTY' | 'PPTX_FILE_TOO_LARGE' | 'PPTX_INVALID_ZIP' | 'PPTX_MISSING_CONTENT_TYPES' | 'PPTX_MISSING_PRESENTATION' | 'PPTX_NO_SLIDES' | 'PPTX_MISSING_SLIDE' | 'PPTX_SLIDE_RENDER_FAILED' | 'PPTX_NO_RENDERABLE_SLIDES' | 'PPTX_WORKER_FAILED' | 'PPTX_PARSE_FAILED' | (string & {});
 export interface PptxDiagnosticError {
     name: 'PptxDiagnosticError';
     code: PptxDiagnosticErrorCode;

package/dist/viewer.d.ts

@@ -39,6 +39,7 @@ export declare class PptxViewer {
     private getEstimatedSlideHeight;
     private appendWindowedSlide;
     private createWindowedSlideRecord;
+    private getDesignerCanvases;
     private renderSlideRecord;
     private unmountSlideRecord;
     private updateMeasuredSlideHeight;
@@ -54,6 +55,8 @@ export declare class PptxViewer {
     private findSlideWindowTarget;
     private postProcessRenderedContent;
     private postProcessSlideRecord;
+    /** Materializes every lazy slide only for the duration of an export snapshot. */
+    cloneForExport(): Promise<HTMLElement>;
     private complete;
     private fail;
     private attachResizeObserver;

package/dist/viewer.js

@@ -51,6 +51,19 @@ const appendHtml = (container, html) => {
     container.append(template.content);
     return nodes[0] || null;
 };
+const escapeHtml = (value) => String(value !== null && value !== void 0 ? value : '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+const buildSlideErrorHtml = (slideNumber, error) => {
+    const diagnostic = error && typeof error === 'object'
+        ? error
+        : null;
+    const message = (diagnostic === null || diagnostic === void 0 ? void 0 : diagnostic.message) || stringifyErrorDetail(error) || 'This slide could not be rendered.';
+    return `<section class="slide flyfish-pptx-slide-error" data-slide-index="${slideNumber}"><div class="flyfish-pptx-slide-error-card" role="status"><strong>Slide ${slideNumber}</strong><span>${escapeHtml(message)}</span></div></section>`;
+};
 const DEFAULT_INITIAL_SLIDES = 3;
 const DEFAULT_BATCH_SIZE = 4;
 const DEFAULT_OVERSCAN_VIEWPORTS = 1.5;
@@ -170,7 +183,7 @@ export class PptxViewer {
         }
     }
     processMessage(message) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         if (this.disposed || this.completed) {
             return;
         }
@@ -187,27 +200,44 @@ export class PptxViewer {
                 }
                 break;
             }
+            case 'slide-error': {
+                const slideNumber = Number(message.slide_num || 0);
+                const error = message.data;
+                const html = buildSlideErrorHtml(slideNumber, error);
+                this.clearThumbnail();
+                if (this.shouldWindowSlides()) {
+                    this.appendWindowedSlide(html, slideNumber);
+                }
+                else {
+                    const element = appendHtml(this.content, html);
+                    this.scheduleResize();
+                    (_d = (_c = this.options).onSlideRendered) === null || _d === void 0 ? void 0 : _d.call(_c, slideNumber, element);
+                }
+                (_f = (_e = this.options).onSlideError) === null || _f === void 0 ? void 0 : _f.call(_e, slideNumber, error);
+                (_h = (_g = this.options).onWarning) === null || _h === void 0 ? void 0 : _h.call(_g, error);
+                break;
+            }
             case 'pptx-thumb':
                 this.showThumbnail(String(message.data || ''));
-                (_d = (_c = this.options).onThumbnail) === null || _d === void 0 ? void 0 : _d.call(_c, String(message.data || ''));
+                (_k = (_j = this.options).onThumbnail) === null || _k === void 0 ? void 0 : _k.call(_j, String(message.data || ''));
                 break;
             case 'slideSize':
                 this.slideSize = (message.data || {});
                 this.syncWindowedPlaceholderHeights();
-                (_f = (_e = this.options).onSlideSize) === null || _f === void 0 ? void 0 : _f.call(_e, (message.data || {}));
+                (_m = (_l = this.options).onSlideSize) === null || _m === void 0 ? void 0 : _m.call(_l, (message.data || {}));
                 break;
             case 'globalCSS':
                 this.appendGlobalCss(String(message.data || ''));
                 break;
             case 'progress-update':
-                (_h = (_g = this.options).onProgress) === null || _h === void 0 ? void 0 : _h.call(_g, Number(message.data || 0), message);
+                (_p = (_o = this.options).onProgress) === null || _p === void 0 ? void 0 : _p.call(_o, Number(message.data || 0), message);
                 break;
             case 'ExecutionTime':
             case 'Done':
-                void this.complete(message.charts);
+                void this.complete(message.charts).catch(error => this.fail(createPptxDiagnosticError('PPTX_PARSE_FAILED', 'post-process', 'PPTX 渲染后处理失败。', error)));
                 break;
             case 'WARN':
-                (_k = (_j = this.options).onWarning) === null || _k === void 0 ? void 0 : _k.call(_j, message.data);
+                (_r = (_q = this.options).onWarning) === null || _r === void 0 ? void 0 : _r.call(_q, message.data);
                 break;
             case 'ERROR':
                 this.fail(message.data);
@@ -289,15 +319,21 @@ export class PptxViewer {
             rendered: false,
             notified: false,
             postProcessed: false,
+            postProcessPromise: null,
         };
     }
+    getDesignerCanvases(record) {
+        return Array.from(record.slot.children).filter(element => (element.classList.contains('fv-print-mask-canvas')));
+    }
     renderSlideRecord(record) {
         var _a, _b;
         if (record.rendered || this.disposed) {
             return;
         }
+        const designerCanvases = this.getDesignerCanvases(record);
         record.slot.replaceChildren();
         record.element = appendHtml(record.slot, record.html);
+        record.slot.append(...designerCanvases);
         record.rendered = true;
         record.postProcessed = false;
         this.updateMeasuredSlideHeight(record);
@@ -311,7 +347,7 @@ export class PptxViewer {
         this.scheduleResize();
     }
     unmountSlideRecord(record) {
-        if (!record.rendered) {
+        if (!record.rendered || this.getDesignerCanvases(record).length > 0) {
             return;
         }
         this.updateMeasuredSlideHeight(record);
@@ -319,6 +355,7 @@ export class PptxViewer {
         record.element = null;
         record.rendered = false;
         record.postProcessed = false;
+        record.postProcessPromise = null;
     }
     updateMeasuredSlideHeight(record) {
         var _a;
@@ -504,9 +541,40 @@ export class PptxViewer {
         if (!record.rendered || record.postProcessed || this.disposed) {
             return;
         }
-        await renderPptxPostProcessing(this.charts, record.slot);
-        record.postProcessed = true;
-        this.updateMeasuredSlideHeight(record);
+        if (!record.postProcessPromise) {
+            record.postProcessPromise = (async () => {
+                await renderPptxPostProcessing(this.charts, record.slot);
+                if (this.disposed) {
+                    return;
+                }
+                record.postProcessed = true;
+                this.updateMeasuredSlideHeight(record);
+            })().finally(() => {
+                record.postProcessPromise = null;
+            });
+        }
+        await record.postProcessPromise;
+    }
+    /** Materializes every lazy slide only for the duration of an export snapshot. */
+    async cloneForExport() {
+        if (!this.shouldWindowSlides()) {
+            return this.target.cloneNode(true);
+        }
+        const previouslyRendered = new Set(this.slideRecords.filter(record => record.rendered));
+        try {
+            this.slideRecords.forEach(record => this.renderSlideRecord(record));
+            await Promise.all(this.slideRecords.map(record => this.postProcessSlideRecord(record)));
+            return this.target.cloneNode(true);
+        }
+        finally {
+            this.slideRecords.forEach(record => {
+                if (!previouslyRendered.has(record)) {
+                    this.unmountSlideRecord(record);
+                }
+            });
+            this.scheduleSlideWindowUpdate();
+            this.scheduleResize();
+        }
     }
     async complete(charts) {
         var _a, _b, _c;
@@ -521,6 +589,9 @@ export class PptxViewer {
         this.scheduleSlideWindowUpdate();
         this.scheduleResize();
         await this.postProcessRenderedContent(charts);
+        if (this.disposed) {
+            return;
+        }
         this.scheduleResize();
         (_c = (_b = this.options).onRenderComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
     }