@file-viewer/pptx 2.1.16 → 2.1.17

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-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";
+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 ensurePptxViewerStyles: (documentRef: Document) => void;

package/dist/styles.js

@@ -35,10 +35,12 @@ export const pptxViewerCss = `
 .flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}
 .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-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}
 .flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}
+.flyfish-pptx-slide-slot:last-of-type > .slide{margin-bottom:0}
 `;
 const PPTX_STYLE_ID = 'flyfish-pptx-native-style';
 export const ensurePptxViewerStyles = (documentRef) => {

package/dist/viewer.d.ts

@@ -13,8 +13,15 @@ export declare class PptxViewer {
     private userZoomPercent;
     private currentZoomPercent;
     private thumbnailElement;
+    private slideSize;
+    private slideRecords;
+    private slideWindowTarget;
+    private slideWindowListeners;
+    private slideWindowFrame;
+    private charts;
     private disposed;
     private completed;
+    private readonly handleSlideWindowChange;
     private constructor();
     get zoomPercent(): number;
     open(): Promise<void>;
@@ -25,9 +32,31 @@ export declare class PptxViewer {
     private appendGlobalCss;
     private showThumbnail;
     private clearThumbnail;
+    private shouldWindowSlides;
+    private getSlideWindowOptions;
+    private getEstimatedSlideHeight;
+    private appendWindowedSlide;
+    private createWindowedSlideRecord;
+    private renderSlideRecord;
+    private unmountSlideRecord;
+    private updateMeasuredSlideHeight;
+    private syncWindowedPlaceholderHeights;
+    private scheduleSlideWindowUpdate;
+    private updateSlideWindow;
+    private getWindowedSlideIndexes;
+    private getDistanceFromViewport;
+    private getSlideViewport;
+    private attachSlideWindowListeners;
+    private addSlideWindowListener;
+    private detachSlideWindowListeners;
+    private findSlideWindowTarget;
+    private postProcessRenderedContent;
+    private postProcessSlideRecord;
     private complete;
     private fail;
     private attachResizeObserver;
     private scheduleResize;
     private resize;
+    private getMountedSlideElements;
+    private isSlideElement;
 }

package/dist/viewer.js

@@ -25,6 +25,21 @@ const appendHtml = (container, html) => {
     container.append(template.content);
     return nodes[0] || null;
 };
+const DEFAULT_INITIAL_SLIDES = 3;
+const DEFAULT_BATCH_SIZE = 4;
+const DEFAULT_OVERSCAN_VIEWPORTS = 1.5;
+const DEFAULT_SLIDE_HEIGHT = 540;
+const DEFAULT_SLIDE_GAP = 50;
+const toPositiveInteger = (value, fallback, min = 1, max = Number.MAX_SAFE_INTEGER) => {
+    const numeric = typeof value === 'number' && Number.isFinite(value)
+        ? Math.floor(value)
+        : fallback;
+    return clamp(numeric, min, max);
+};
+const toPositiveNumber = (value, fallback, min = 0, max = Number.MAX_SAFE_INTEGER) => {
+    const numeric = typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+    return clamp(numeric, min, max);
+};
 export class PptxViewer {
     static async open(buffer, target, options = {}) {
         const viewer = new PptxViewer(buffer, target, options);
@@ -39,8 +54,15 @@ export class PptxViewer {
         this.userZoomPercent = 100;
         this.currentZoomPercent = 100;
         this.thumbnailElement = null;
+        this.slideSize = null;
+        this.slideRecords = [];
+        this.slideWindowTarget = null;
+        this.slideWindowListeners = [];
+        this.slideWindowFrame = 0;
+        this.charts = null;
         this.disposed = false;
         this.completed = false;
+        this.handleSlideWindowChange = () => this.scheduleSlideWindowUpdate();
         this.buffer = buffer;
         this.target = target;
         this.options = options;
@@ -62,6 +84,7 @@ export class PptxViewer {
         ensurePptxViewerStyles(this.target.ownerDocument || document);
         this.target.replaceChildren(this.scaleBox);
         this.attachResizeObserver();
+        this.attachSlideWindowListeners();
         this.startWorker();
     }
     async setZoom(percent) {
@@ -70,7 +93,7 @@ export class PptxViewer {
         this.scheduleResize();
     }
     destroy() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.disposed = true;
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.worker = null;
@@ -79,12 +102,20 @@ export class PptxViewer {
         if (this.resizeFrame) {
             (_c = this.target.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.cancelAnimationFrame(this.resizeFrame);
         }
+        if (this.slideWindowFrame) {
+            (_d = this.target.ownerDocument.defaultView) === null || _d === void 0 ? void 0 : _d.cancelAnimationFrame(this.slideWindowFrame);
+        }
+        this.detachSlideWindowListeners();
         this.target.replaceChildren();
     }
     startWorker() {
         var _a;
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.completed = false;
+        this.charts = null;
+        this.slideSize = null;
+        this.slideRecords = [];
+        this.content.replaceChildren();
         this.content.dataset.renderState = 'loading';
         this.worker = createPptxWorker(this.options);
         this.worker.addEventListener('message', event => this.processMessage(event.data));
@@ -104,9 +135,14 @@ export class PptxViewer {
         switch (message.type) {
             case 'slide': {
                 this.clearThumbnail();
-                const element = appendHtml(this.content, String(message.data || ''));
-                this.scheduleResize();
-                (_b = (_a = this.options).onSlideRendered) === null || _b === void 0 ? void 0 : _b.call(_a, Number(message.slide_num || 0), element);
+                if (this.shouldWindowSlides()) {
+                    this.appendWindowedSlide(String(message.data || ''), Number(message.slide_num || 0));
+                }
+                else {
+                    const element = appendHtml(this.content, String(message.data || ''));
+                    this.scheduleResize();
+                    (_b = (_a = this.options).onSlideRendered) === null || _b === void 0 ? void 0 : _b.call(_a, Number(message.slide_num || 0), element);
+                }
                 break;
             }
             case 'pptx-thumb':
@@ -114,6 +150,8 @@ export class PptxViewer {
                 (_d = (_c = this.options).onThumbnail) === null || _d === void 0 ? void 0 : _d.call(_c, 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 || {}));
                 break;
             case 'globalCSS':
@@ -160,17 +198,283 @@ export class PptxViewer {
         (_a = this.thumbnailElement) === null || _a === void 0 ? void 0 : _a.remove();
         this.thumbnailElement = null;
     }
+    shouldWindowSlides() {
+        var _a;
+        return Boolean(this.options.lazySlides || ((_a = this.options.listOptions) === null || _a === void 0 ? void 0 : _a.windowed));
+    }
+    getSlideWindowOptions() {
+        const listOptions = this.options.listOptions || {};
+        return {
+            initialSlides: toPositiveInteger(listOptions.initialSlides, DEFAULT_INITIAL_SLIDES, 1, 20),
+            batchSize: toPositiveInteger(listOptions.batchSize, DEFAULT_BATCH_SIZE, 1, 20),
+            overscanViewport: toPositiveNumber(listOptions.overscanViewport, DEFAULT_OVERSCAN_VIEWPORTS, 0.25, 6),
+        };
+    }
+    getEstimatedSlideHeight() {
+        var _a, _b;
+        const sizeHeight = Number((_a = this.slideSize) === null || _a === void 0 ? void 0 : _a.height);
+        const measuredHeight = (_b = this.slideRecords.find(record => record.estimatedHeight > 0)) === null || _b === void 0 ? void 0 : _b.estimatedHeight;
+        return Math.ceil((Number.isFinite(sizeHeight) && sizeHeight > 0
+            ? sizeHeight + DEFAULT_SLIDE_GAP
+            : measuredHeight || DEFAULT_SLIDE_HEIGHT + DEFAULT_SLIDE_GAP));
+    }
+    appendWindowedSlide(html, slideNumber) {
+        const record = this.createWindowedSlideRecord(html, slideNumber || this.slideRecords.length + 1);
+        this.slideRecords.push(record);
+        this.content.append(record.slot);
+        if (this.slideRecords.length <= this.getSlideWindowOptions().initialSlides) {
+            this.renderSlideRecord(record);
+        }
+        this.scheduleResize();
+        this.scheduleSlideWindowUpdate();
+    }
+    createWindowedSlideRecord(html, slideNumber) {
+        const slot = this.target.ownerDocument.createElement('div');
+        const estimatedHeight = this.getEstimatedSlideHeight();
+        slot.className = 'flyfish-pptx-slide-slot';
+        slot.dataset.slideNumber = String(slideNumber);
+        slot.style.minHeight = `${estimatedHeight}px`;
+        return {
+            slideNumber,
+            html,
+            slot,
+            element: null,
+            estimatedHeight,
+            rendered: false,
+            notified: false,
+            postProcessed: false,
+        };
+    }
+    renderSlideRecord(record) {
+        var _a, _b;
+        if (record.rendered || this.disposed) {
+            return;
+        }
+        record.slot.replaceChildren();
+        record.element = appendHtml(record.slot, record.html);
+        record.rendered = true;
+        record.postProcessed = false;
+        this.updateMeasuredSlideHeight(record);
+        if (!record.notified) {
+            record.notified = true;
+            (_b = (_a = this.options).onSlideRendered) === null || _b === void 0 ? void 0 : _b.call(_a, record.slideNumber, record.element);
+        }
+        if (this.completed) {
+            void this.postProcessSlideRecord(record).finally(() => this.scheduleResize());
+        }
+        this.scheduleResize();
+    }
+    unmountSlideRecord(record) {
+        if (!record.rendered) {
+            return;
+        }
+        this.updateMeasuredSlideHeight(record);
+        record.slot.replaceChildren();
+        record.element = null;
+        record.rendered = false;
+        record.postProcessed = false;
+    }
+    updateMeasuredSlideHeight(record) {
+        var _a;
+        const HTMLElementCtor = ((_a = this.target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.HTMLElement) || HTMLElement;
+        if (!(record.element instanceof HTMLElementCtor)) {
+            return;
+        }
+        const view = this.target.ownerDocument.defaultView || window;
+        const computed = view.getComputedStyle(record.element);
+        const marginTop = parseFloat(computed.marginTop) || 0;
+        const marginBottom = parseFloat(computed.marginBottom) || 0;
+        const measuredHeight = Math.ceil(record.element.offsetHeight + marginTop + marginBottom);
+        const nextHeight = Math.max(measuredHeight, record.estimatedHeight, 1);
+        record.estimatedHeight = nextHeight;
+        record.slot.style.minHeight = `${nextHeight}px`;
+    }
+    syncWindowedPlaceholderHeights() {
+        if (!this.shouldWindowSlides() || !this.slideRecords.length) {
+            return;
+        }
+        const estimatedHeight = this.getEstimatedSlideHeight();
+        for (const record of this.slideRecords) {
+            if (!record.rendered && record.estimatedHeight < estimatedHeight) {
+                record.estimatedHeight = estimatedHeight;
+                record.slot.style.minHeight = `${estimatedHeight}px`;
+            }
+        }
+        this.scheduleResize();
+    }
+    scheduleSlideWindowUpdate() {
+        if (!this.shouldWindowSlides() || this.disposed) {
+            return;
+        }
+        const view = this.target.ownerDocument.defaultView || window;
+        if (this.slideWindowFrame) {
+            view.cancelAnimationFrame(this.slideWindowFrame);
+        }
+        this.slideWindowFrame = view.requestAnimationFrame(() => this.updateSlideWindow());
+    }
+    updateSlideWindow() {
+        this.slideWindowFrame = 0;
+        if (!this.shouldWindowSlides() || !this.slideRecords.length || this.disposed) {
+            return;
+        }
+        const windowOptions = this.getSlideWindowOptions();
+        const indexesToRender = this.getWindowedSlideIndexes(windowOptions);
+        let changed = false;
+        this.slideRecords.forEach((record, index) => {
+            if (indexesToRender.has(index)) {
+                const wasRendered = record.rendered;
+                this.renderSlideRecord(record);
+                changed || (changed = !wasRendered);
+            }
+            else if (record.rendered) {
+                this.unmountSlideRecord(record);
+                changed = true;
+            }
+        });
+        if (changed) {
+            this.scheduleResize();
+        }
+    }
+    getWindowedSlideIndexes(windowOptions) {
+        const viewport = this.getSlideViewport();
+        const maxMountedSlides = Math.max(windowOptions.initialSlides, windowOptions.initialSlides + windowOptions.batchSize * 4, 12);
+        const selected = new Set();
+        for (let index = 0; index < Math.min(windowOptions.initialSlides, this.slideRecords.length); index += 1) {
+            selected.add(index);
+        }
+        const candidates = this.slideRecords
+            .map((record, index) => ({
+            index,
+            distance: this.getDistanceFromViewport(record, viewport, windowOptions.overscanViewport),
+        }))
+            .filter(candidate => candidate.distance !== Number.POSITIVE_INFINITY)
+            .sort((a, b) => a.distance - b.distance || a.index - b.index);
+        const closestFallback = candidates[0];
+        for (const candidate of candidates) {
+            if (candidate.distance > 0 && selected.size >= windowOptions.initialSlides) {
+                continue;
+            }
+            selected.add(candidate.index);
+        }
+        if (closestFallback) {
+            selected.add(closestFallback.index);
+        }
+        if (selected.size <= maxMountedSlides) {
+            return selected;
+        }
+        const capped = new Set();
+        for (let index = 0; index < Math.min(windowOptions.initialSlides, this.slideRecords.length); index += 1) {
+            capped.add(index);
+        }
+        for (const candidate of candidates) {
+            if (capped.size >= maxMountedSlides) {
+                break;
+            }
+            capped.add(candidate.index);
+        }
+        return capped;
+    }
+    getDistanceFromViewport(record, viewport, overscanViewport) {
+        const rect = record.slot.getBoundingClientRect();
+        const overscan = viewport.height * overscanViewport;
+        const top = viewport.top - overscan;
+        const bottom = viewport.bottom + overscan;
+        if (rect.bottom >= top && rect.top <= bottom) {
+            return 0;
+        }
+        if (rect.bottom < top) {
+            return top - rect.bottom;
+        }
+        if (rect.top > bottom) {
+            return rect.top - bottom;
+        }
+        return Number.POSITIVE_INFINITY;
+    }
+    getSlideViewport() {
+        const view = this.target.ownerDocument.defaultView || window;
+        const HTMLElementCtor = view.HTMLElement;
+        if (this.slideWindowTarget instanceof HTMLElementCtor) {
+            const rect = this.slideWindowTarget.getBoundingClientRect();
+            const height = Math.max(1, rect.height || this.slideWindowTarget.clientHeight || view.innerHeight || 1);
+            return {
+                top: rect.top,
+                bottom: rect.top + height,
+                height,
+            };
+        }
+        const height = Math.max(1, view.innerHeight || this.target.ownerDocument.documentElement.clientHeight || DEFAULT_SLIDE_HEIGHT);
+        return {
+            top: 0,
+            bottom: height,
+            height,
+        };
+    }
+    attachSlideWindowListeners() {
+        if (!this.shouldWindowSlides()) {
+            return;
+        }
+        this.detachSlideWindowListeners();
+        const view = this.target.ownerDocument.defaultView || window;
+        this.slideWindowTarget = this.findSlideWindowTarget();
+        this.addSlideWindowListener(view, 'scroll');
+        this.addSlideWindowListener(view, 'resize');
+        if (this.slideWindowTarget && this.slideWindowTarget !== view) {
+            this.addSlideWindowListener(this.slideWindowTarget, 'scroll');
+        }
+    }
+    addSlideWindowListener(target, type) {
+        target.addEventListener(type, this.handleSlideWindowChange, { passive: true });
+        this.slideWindowListeners.push({ target, type, listener: this.handleSlideWindowChange });
+    }
+    detachSlideWindowListeners() {
+        for (const { target, type, listener } of this.slideWindowListeners) {
+            target.removeEventListener(type, listener);
+        }
+        this.slideWindowListeners = [];
+        this.slideWindowTarget = null;
+    }
+    findSlideWindowTarget() {
+        const view = this.target.ownerDocument.defaultView || window;
+        let element = this.target.parentElement;
+        while (element && element !== this.target.ownerDocument.body && element !== this.target.ownerDocument.documentElement) {
+            const style = view.getComputedStyle(element);
+            if (/(auto|scroll|overlay)/.test(`${style.overflowY} ${style.overflow}`)) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        return view;
+    }
+    async postProcessRenderedContent(charts) {
+        if (!this.shouldWindowSlides()) {
+            await renderPptxPostProcessing(charts, this.content);
+            return;
+        }
+        await Promise.all(this.slideRecords
+            .filter(record => record.rendered)
+            .map(record => this.postProcessSlideRecord(record)));
+    }
+    async postProcessSlideRecord(record) {
+        if (!record.rendered || record.postProcessed || this.disposed) {
+            return;
+        }
+        await renderPptxPostProcessing(this.charts, record.slot);
+        record.postProcessed = true;
+        this.updateMeasuredSlideHeight(record);
+    }
     async complete(charts) {
         var _a, _b, _c;
         if (this.disposed || this.completed) {
             return;
         }
         this.completed = true;
+        this.charts = charts;
         this.content.dataset.renderState = 'ready';
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.worker = null;
+        this.scheduleSlideWindowUpdate();
         this.scheduleResize();
-        await renderPptxPostProcessing(charts, this.content);
+        await this.postProcessRenderedContent(charts);
         this.scheduleResize();
         (_c = (_b = this.options).onRenderComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
     }
@@ -189,7 +493,10 @@ export class PptxViewer {
         if (typeof ResizeObserver === 'undefined') {
             return;
         }
-        this.resizeObserver = new ResizeObserver(() => this.scheduleResize());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleResize();
+            this.scheduleSlideWindowUpdate();
+        });
         this.resizeObserver.observe(this.target);
         if (this.target.parentElement) {
             this.resizeObserver.observe(this.target.parentElement);
@@ -204,14 +511,10 @@ export class PptxViewer {
     }
     resize() {
         var _a, _b;
-        const HTMLElementCtor = ((_a = this.target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.HTMLElement) || HTMLElement;
-        const slides = Array.from(this.content.children).filter((child) => {
-            return child instanceof HTMLElementCtor && (child.classList.contains('slide') || child.tagName === 'SECTION');
-        });
-        if (!slides.length) {
-            return;
-        }
-        const slideWidth = Math.max(...slides.map(slide => slide.offsetWidth), 0);
+        const slides = this.getMountedSlideElements();
+        const sizeWidth = Number((_a = this.slideSize) === null || _a === void 0 ? void 0 : _a.width);
+        const fallbackWidth = Number.isFinite(sizeWidth) && sizeWidth > 0 ? sizeWidth : 0;
+        const slideWidth = Math.max(...slides.map(slide => slide.offsetWidth), fallbackWidth);
         if (!slideWidth) {
             return;
         }
@@ -227,4 +530,29 @@ export class PptxViewer {
         this.scaleBox.style.height = `${Math.ceil(this.content.scrollHeight * effectiveScale)}px`;
         this.scaleBox.style.minHeight = '';
     }
+    getMountedSlideElements() {
+        var _a;
+        const HTMLElementCtor = ((_a = this.target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.HTMLElement) || HTMLElement;
+        const slides = [];
+        for (const child of Array.from(this.content.children)) {
+            if (!(child instanceof HTMLElementCtor)) {
+                continue;
+            }
+            if (this.isSlideElement(child)) {
+                slides.push(child);
+                continue;
+            }
+            if (!child.classList.contains('flyfish-pptx-slide-slot')) {
+                continue;
+            }
+            const firstChild = child.firstElementChild;
+            if (firstChild instanceof HTMLElementCtor && this.isSlideElement(firstChild)) {
+                slides.push(firstChild);
+            }
+        }
+        return slides;
+    }
+    isSlideElement(element) {
+        return element.classList.contains('slide') || element.tagName === 'SECTION';
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/pptx",
-  "version": "2.1.16",
+  "version": "2.1.17",
   "private": false,
   "type": "module",
   "description": "Native PPTX renderer extracted from Flyfish File Viewer",
@@ -33,7 +33,7 @@
   },
   "funding": {
     "type": "individual",
-    "url": "https://dev.flyfish.group/shop"
+    "url": "https://dev.flyfish.group/donate?source=npm"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",