@file-viewer/pptx 2.2.4 → 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,7 @@ export declare class PptxViewer {
     private slideWindowListeners;
     private slideWindowFrame;
     private charts;
+    private readonly chartHandles;
     private readonly mediaRecords;
     private disposed;
     private completed;
@@ -60,6 +61,9 @@ export declare class PptxViewer {
     cloneForExport(): Promise<HTMLElement>;
     private complete;
     private fail;
+    private trackChartHandle;
+    private releaseChartHandle;
+    private releaseCharts;
     private storeMedia;
     private hydrateMedia;
     private releaseMedia;

package/dist/viewer.js

@@ -100,6 +100,7 @@ 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;
@@ -140,6 +141,7 @@ 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;
@@ -157,6 +159,7 @@ 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;
@@ -327,6 +330,8 @@ export class PptxViewer {
             notified: false,
             postProcessed: false,
             postProcessPromise: null,
+            postProcessVersion: 0,
+            chartHandle: null,
         };
     }
     getDesignerCanvases(record) {
@@ -344,6 +349,7 @@ export class PptxViewer {
         record.slot.append(...designerCanvases);
         record.rendered = true;
         record.postProcessed = false;
+        record.postProcessVersion += 1;
         this.updateMeasuredSlideHeight(record);
         if (!record.notified) {
             record.notified = true;
@@ -359,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;
@@ -538,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
@@ -550,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;
     }
@@ -611,10 +629,37 @@ 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;