@file-viewer/pptx 2.2.3 → 2.2.5

package/dist/chart.d.ts

@@ -1 +1,5 @@
-export declare const renderPptxPostProcessing: (charts: unknown, root: ParentNode) => Promise<void>;
+export type PptxPostProcessingHandle = {
+    destroy: () => void;
+};
+export declare const findPptxChartTarget: (root: ParentNode, chartID: string) => HTMLElement | null;
+export declare const renderPptxPostProcessing: (charts: unknown, root: ParentNode) => Promise<PptxPostProcessingHandle>;

package/dist/chart.js

@@ -1,6 +1,14 @@
 const asChartQueue = (charts) => {
     return Array.isArray(charts === null || charts === void 0 ? void 0 : charts.MsgQueue) ? charts.MsgQueue : [];
 };
+export const findPptxChartTarget = (root, chartID) => {
+    const rootElement = root;
+    if (rootElement.id === chartID) {
+        return rootElement;
+    }
+    return Array.from(root.querySelectorAll('[id]'))
+        .find(element => element.id === chartID) || null;
+};
 const getNumericBulletText = (type, index) => {
     switch (type) {
         case 'arabicPeriod':
@@ -141,18 +149,24 @@ const fitOverflowingTextBlocks = (root) => {
         .querySelectorAll('.slide div.content, .slide div.content-rtl')
         .forEach(fitOverflowingTextBlock);
 };
-const renderChart = async (message) => {
+const renderChart = async (message, root) => {
     var _a;
     const payload = message.data;
     if (!(payload === null || payload === void 0 ? void 0 : payload.chartID) || !payload.chartType || !payload.chartData) {
         return;
     }
+    const chartTarget = findPptxChartTarget(root, payload.chartID);
+    if (!chartTarget) {
+        return;
+    }
     const billboard = await import('billboard.js');
     const d3Format = await import('d3-format');
     const bb = billboard.default || billboard;
     const { area, bar, line, pie, scatter } = billboard;
     const chart = {
-        bindto: `#${payload.chartID}`,
+        // A selector makes Billboard query the main document. That misses chart
+        // placeholders inside the viewer Shadow DOM and makes it fall back to body.
+        bindto: chartTarget,
     };
     const chartData = payload.chartData;
     const axis = {
@@ -249,20 +263,44 @@ const renderChart = async (message) => {
             return;
     }
     if (chart.data) {
-        bb.generate(chart);
+        return bb.generate(chart);
     }
 };
 export const renderPptxPostProcessing = async (charts, root) => {
     restoreNumericBullets(root);
     fitOverflowingTextBlocks(root);
     const queue = asChartQueue(charts);
-    if (!queue.length) {
-        return;
-    }
-    try {
-        await Promise.all(queue.map(renderChart));
-    }
-    catch (error) {
-        console.warn('PPTX chart rendering skipped:', error);
+    const chartInstances = [];
+    if (queue.length) {
+        const results = await Promise.allSettled(queue.map(message => renderChart(message, root)));
+        for (const result of results) {
+            if (result.status === 'fulfilled') {
+                if (result.value) {
+                    chartInstances.push(result.value);
+                }
+            }
+            else {
+                console.warn('PPTX chart rendering skipped:', result.reason);
+            }
+        }
     }
+    let destroyed = false;
+    return {
+        destroy() {
+            var _a;
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            for (const chart of chartInstances) {
+                try {
+                    (_a = chart.destroy) === null || _a === void 0 ? void 0 : _a.call(chart);
+                }
+                catch {
+                    // The DOM may already be detached during framework unmount.
+                }
+            }
+            chartInstances.length = 0;
+        },
+    };
 };

package/dist/viewer.d.ts

@@ -20,6 +20,8 @@ export declare class PptxViewer {
     private slideWindowListeners;
     private slideWindowFrame;
     private charts;
+    private readonly chartHandles;
+    private readonly mediaRecords;
     private disposed;
     private completed;
     private readonly handleSlideWindowChange;
@@ -59,6 +61,12 @@ export declare class PptxViewer {
     cloneForExport(): Promise<HTMLElement>;
     private complete;
     private fail;
+    private trackChartHandle;
+    private releaseChartHandle;
+    private releaseCharts;
+    private storeMedia;
+    private hydrateMedia;
+    private releaseMedia;
     private attachResizeObserver;
     private scheduleResize;
     private resize;

package/dist/viewer.js

@@ -100,6 +100,8 @@ export class PptxViewer {
         this.slideWindowListeners = [];
         this.slideWindowFrame = 0;
         this.charts = null;
+        this.chartHandles = new Set();
+        this.mediaRecords = new Map();
         this.disposed = false;
         this.completed = false;
         this.handleSlideWindowChange = () => this.scheduleSlideWindowUpdate();
@@ -139,6 +141,8 @@ export class PptxViewer {
         var _a, _b, _c, _d;
         this.disposed = true;
         this.previewThumbnailDataUrl = null;
+        this.releaseCharts();
+        this.releaseMedia();
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.worker = null;
         (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
@@ -155,6 +159,8 @@ export class PptxViewer {
     startWorker() {
         var _a;
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.releaseCharts();
+        this.releaseMedia();
         this.completed = false;
         this.charts = null;
         this.previewThumbnailDataUrl = null;
@@ -195,11 +201,15 @@ export class PptxViewer {
                 }
                 else {
                     const element = appendHtml(this.content, String(message.data || ''));
+                    this.hydrateMedia(element);
                     this.scheduleResize();
                     (_b = (_a = this.options).onSlideRendered) === null || _b === void 0 ? void 0 : _b.call(_a, Number(message.slide_num || 0), element);
                 }
                 break;
             }
+            case 'media':
+                this.storeMedia(message.data);
+                break;
             case 'slide-error': {
                 const slideNumber = Number(message.slide_num || 0);
                 const error = message.data;
@@ -320,6 +330,8 @@ export class PptxViewer {
             notified: false,
             postProcessed: false,
             postProcessPromise: null,
+            postProcessVersion: 0,
+            chartHandle: null,
         };
     }
     getDesignerCanvases(record) {
@@ -333,9 +345,11 @@ export class PptxViewer {
         const designerCanvases = this.getDesignerCanvases(record);
         record.slot.replaceChildren();
         record.element = appendHtml(record.slot, record.html);
+        this.hydrateMedia(record.element);
         record.slot.append(...designerCanvases);
         record.rendered = true;
         record.postProcessed = false;
+        record.postProcessVersion += 1;
         this.updateMeasuredSlideHeight(record);
         if (!record.notified) {
             record.notified = true;
@@ -351,6 +365,9 @@ export class PptxViewer {
             return;
         }
         this.updateMeasuredSlideHeight(record);
+        this.releaseChartHandle(record.chartHandle);
+        record.chartHandle = null;
+        record.postProcessVersion += 1;
         record.slot.replaceChildren();
         record.element = null;
         record.rendered = false;
@@ -530,7 +547,8 @@ export class PptxViewer {
     }
     async postProcessRenderedContent(charts) {
         if (!this.shouldWindowSlides()) {
-            await renderPptxPostProcessing(charts, this.content);
+            const handle = await renderPptxPostProcessing(charts, this.content);
+            this.trackChartHandle(handle);
             return;
         }
         await Promise.all(this.slideRecords
@@ -542,16 +560,24 @@ export class PptxViewer {
             return;
         }
         if (!record.postProcessPromise) {
-            record.postProcessPromise = (async () => {
-                await renderPptxPostProcessing(this.charts, record.slot);
-                if (this.disposed) {
+            const version = record.postProcessVersion;
+            const postProcessPromise = (async () => {
+                const handle = await renderPptxPostProcessing(this.charts, record.slot);
+                if (this.disposed || !record.rendered || record.postProcessVersion !== version) {
+                    handle === null || handle === void 0 ? void 0 : handle.destroy();
                     return;
                 }
+                this.releaseChartHandle(record.chartHandle);
+                record.chartHandle = handle;
+                this.trackChartHandle(handle);
                 record.postProcessed = true;
                 this.updateMeasuredSlideHeight(record);
             })().finally(() => {
-                record.postProcessPromise = null;
+                if (record.postProcessPromise === postProcessPromise) {
+                    record.postProcessPromise = null;
+                }
             });
+            record.postProcessPromise = postProcessPromise;
         }
         await record.postProcessPromise;
     }
@@ -603,9 +629,103 @@ export class PptxViewer {
         this.completed = true;
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.worker = null;
+        this.releaseCharts();
+        this.releaseMedia();
         this.content.dataset.renderState = 'error';
         (_c = (_b = this.options).onError) === null || _c === void 0 ? void 0 : _c.call(_b, error);
     }
+    trackChartHandle(handle) {
+        if (!handle) {
+            return;
+        }
+        if (this.disposed) {
+            handle.destroy();
+            return;
+        }
+        this.chartHandles.add(handle);
+    }
+    releaseChartHandle(handle) {
+        if (!handle) {
+            return;
+        }
+        this.chartHandles.delete(handle);
+        handle.destroy();
+    }
+    releaseCharts() {
+        for (const handle of this.chartHandles) {
+            handle.destroy();
+        }
+        this.chartHandles.clear();
+        for (const record of this.slideRecords) {
+            record.chartHandle = null;
+        }
+    }
+    storeMedia(data) {
+        if (!data || typeof data !== 'object') {
+            return;
+        }
+        const media = data;
+        if (typeof media.id !== 'string' ||
+            !media.id ||
+            typeof media.mimeType !== 'string' ||
+            !(media.buffer instanceof ArrayBuffer)) {
+            return;
+        }
+        this.releaseMedia(media.id);
+        this.mediaRecords.set(media.id, {
+            buffer: media.buffer,
+            mimeType: media.mimeType,
+            objectUrl: null,
+            revokeObjectUrl: null,
+        });
+        this.hydrateMedia(this.content);
+    }
+    hydrateMedia(root) {
+        var _a;
+        if (!root) {
+            return;
+        }
+        const elements = Array.from(root.querySelectorAll('[data-pptx-media-id]'));
+        if (root.matches('[data-pptx-media-id]')) {
+            elements.unshift(root);
+        }
+        for (const element of elements) {
+            const mediaId = element.dataset.pptxMediaId;
+            const record = mediaId ? this.mediaRecords.get(mediaId) : undefined;
+            if (!record) {
+                continue;
+            }
+            if (!record.objectUrl) {
+                const view = this.target.ownerDocument.defaultView;
+                const BlobCtor = (view === null || view === void 0 ? void 0 : view.Blob) || globalThis.Blob;
+                const UrlApi = (view === null || view === void 0 ? void 0 : view.URL) || globalThis.URL;
+                if (typeof BlobCtor !== 'function' ||
+                    typeof (UrlApi === null || UrlApi === void 0 ? void 0 : UrlApi.createObjectURL) !== 'function') {
+                    continue;
+                }
+                const objectUrl = UrlApi.createObjectURL(new BlobCtor([record.buffer], { type: record.mimeType }));
+                record.objectUrl = objectUrl;
+                record.revokeObjectUrl = () => UrlApi.revokeObjectURL(objectUrl);
+            }
+            if (element.src !== record.objectUrl) {
+                element.src = record.objectUrl;
+                (_a = element.load) === null || _a === void 0 ? void 0 : _a.call(element);
+            }
+        }
+    }
+    releaseMedia(mediaId) {
+        var _a, _b;
+        if (mediaId) {
+            const record = this.mediaRecords.get(mediaId);
+            (_a = record === null || record === void 0 ? void 0 : record.revokeObjectUrl) === null || _a === void 0 ? void 0 : _a.call(record);
+            this.mediaRecords.delete(mediaId);
+            return;
+        }
+        for (const record of this.mediaRecords.values()) {
+            (_b = record.revokeObjectUrl) === null || _b === void 0 ? void 0 : _b.call(record);
+        }
+        this.mediaRecords.clear();
+    }
     attachResizeObserver() {
         if (typeof ResizeObserver === 'undefined') {
             return;