@file-viewer/pptx 2.0.2

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+export type PptxFitMode = 'contain' | 'none';
+export interface PptxZipLimits {
+    maxFileBytes?: number;
+}
+export interface PptxListOptions {
+    windowed?: boolean;
+    initialSlides?: number;
+    batchSize?: number;
+    overscanViewport?: number;
+}
+export interface PptxWorkerFactoryOptions {
+    workerFactory?: () => Worker;
+    workerUrl?: string | URL;
+    workerType?: WorkerType;
+}
+export interface NativePptxEngineOptions {
+    slidesScale?: string;
+    slideMode?: boolean;
+    slideType?: string;
+    revealjsPath?: string;
+    keyBoardShortCut?: boolean;
+    mediaProcess?: boolean;
+    jsZipV2?: boolean;
+    themeProcess?: boolean | 'colorsAndImageOnly';
+    incSlide?: {
+        width: number;
+        height: number;
+    };
+    slideModeConfig?: Record<string, unknown>;
+    revealjsConfig?: Record<string, unknown>;
+}
+export interface PptxSlideSize {
+    width?: number;
+    height?: number;
+    [key: string]: unknown;
+}
+export interface PptxViewerOptions extends PptxWorkerFactoryOptions {
+    fitMode?: PptxFitMode;
+    zoomPercent?: number;
+    zipLimits?: PptxZipLimits;
+    engineOptions?: Partial<NativePptxEngineOptions>;
+    lazySlides?: boolean;
+    lazyMedia?: boolean;
+    listOptions?: PptxListOptions;
+    onProgress?: (progress: number, message: unknown) => void;
+    onThumbnail?: (base64Jpeg: string) => void;
+    onSlideSize?: (size: PptxSlideSize) => void;
+    onSlideRendered?: (slideIndex: number, element: Element | null) => void;
+    onSlideError?: (slideIndex: number, error: unknown) => void;
+    onRenderComplete?: () => void;
+    onWarning?: (warning: unknown) => void;
+    onError?: (error: unknown) => void;
+}
+export interface PptxWorkerMessage {
+    type: string;
+    data?: unknown;
+    slide_num?: number;
+    file_name?: string;
+    charts?: unknown;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/viewer.d.ts

@@ -0,0 +1,33 @@
+import type { PptxViewerOptions } from './types';
+export declare class PptxViewer {
+    static open(buffer: ArrayBuffer, target: HTMLElement, options?: PptxViewerOptions): Promise<PptxViewer>;
+    readonly target: HTMLElement;
+    readonly content: HTMLDivElement;
+    readonly scaleBox: HTMLDivElement;
+    private readonly buffer;
+    private readonly options;
+    private worker;
+    private resizeObserver;
+    private resizeFrame;
+    private fitScale;
+    private userZoomPercent;
+    private currentZoomPercent;
+    private thumbnailElement;
+    private disposed;
+    private completed;
+    private constructor();
+    get zoomPercent(): number;
+    open(): Promise<void>;
+    setZoom(percent: number): Promise<void>;
+    destroy(): void;
+    private startWorker;
+    private processMessage;
+    private appendGlobalCss;
+    private showThumbnail;
+    private clearThumbnail;
+    private complete;
+    private fail;
+    private attachResizeObserver;
+    private scheduleResize;
+    private resize;
+}

package/dist/viewer.js

@@ -0,0 +1,229 @@
+import { renderPptxPostProcessing } from './chart';
+import { resolvePptxEngineOptions, RECOMMENDED_ZIP_LIMITS } from './options';
+import { ensurePptxViewerStyles } from './styles';
+import { createPptxWorker } from './worker';
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+const toPercent = (value) => {
+    const numeric = typeof value === 'number' && Number.isFinite(value) ? value : 100;
+    return clamp(numeric, 25, 300);
+};
+const ensureZipWithinLimits = (buffer, options) => {
+    const limits = {
+        ...RECOMMENDED_ZIP_LIMITS,
+        ...options.zipLimits,
+    };
+    if (limits.maxFileBytes && buffer.byteLength > limits.maxFileBytes) {
+        throw new Error(`PPTX file is too large to preview safely (${buffer.byteLength} bytes).`);
+    }
+};
+const appendHtml = (container, html) => {
+    const template = container.ownerDocument.createElement('template');
+    template.innerHTML = html;
+    const nodes = Array.from(template.content.children);
+    container.append(template.content);
+    return nodes[0] || null;
+};
+export class PptxViewer {
+    static async open(buffer, target, options = {}) {
+        const viewer = new PptxViewer(buffer, target, options);
+        await viewer.open();
+        return viewer;
+    }
+    constructor(buffer, target, options) {
+        this.worker = null;
+        this.resizeObserver = null;
+        this.resizeFrame = 0;
+        this.fitScale = 1;
+        this.userZoomPercent = 100;
+        this.currentZoomPercent = 100;
+        this.thumbnailElement = null;
+        this.disposed = false;
+        this.completed = false;
+        this.buffer = buffer;
+        this.target = target;
+        this.options = options;
+        this.userZoomPercent = toPercent(options.zoomPercent);
+        this.currentZoomPercent = this.userZoomPercent;
+        const documentRef = target.ownerDocument || document;
+        this.scaleBox = documentRef.createElement('div');
+        this.scaleBox.className = 'flyfish-pptx-scale-box';
+        this.content = documentRef.createElement('div');
+        this.content.className = 'flyfish-pptx-content';
+        this.content.dataset.renderState = 'loading';
+        this.scaleBox.append(this.content);
+    }
+    get zoomPercent() {
+        return Math.round(this.currentZoomPercent);
+    }
+    async open() {
+        ensureZipWithinLimits(this.buffer, this.options);
+        ensurePptxViewerStyles(this.target.ownerDocument || document);
+        this.target.replaceChildren(this.scaleBox);
+        this.attachResizeObserver();
+        this.startWorker();
+    }
+    async setZoom(percent) {
+        const desiredEffectivePercent = toPercent(percent);
+        this.userZoomPercent = clamp(desiredEffectivePercent / Math.max(this.fitScale, 0.01), 25, 600);
+        this.scheduleResize();
+    }
+    destroy() {
+        var _a, _b, _c;
+        this.disposed = true;
+        (_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();
+        this.resizeObserver = null;
+        if (this.resizeFrame) {
+            (_c = this.target.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.cancelAnimationFrame(this.resizeFrame);
+        }
+        this.target.replaceChildren();
+    }
+    startWorker() {
+        var _a;
+        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.completed = false;
+        this.content.dataset.renderState = 'loading';
+        this.worker = createPptxWorker(this.options);
+        this.worker.addEventListener('message', event => this.processMessage(event.data));
+        this.worker.addEventListener('error', event => this.fail(event.error || event.message));
+        this.worker.postMessage({
+            type: 'processPPTX',
+            data: this.buffer,
+            IE11: false,
+            options: resolvePptxEngineOptions(this.options.engineOptions),
+        });
+    }
+    processMessage(message) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (this.disposed || this.completed) {
+            return;
+        }
+        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);
+                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 || ''));
+                break;
+            case 'slideSize':
+                (_f = (_e = this.options).onSlideSize) === null || _f === void 0 ? void 0 : _f.call(_e, (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);
+                break;
+            case 'ExecutionTime':
+            case 'Done':
+                void this.complete(message.charts);
+                break;
+            case 'WARN':
+                (_k = (_j = this.options).onWarning) === null || _k === void 0 ? void 0 : _k.call(_j, message.data);
+                break;
+            case 'ERROR':
+                this.fail(message.data);
+                break;
+            default:
+                break;
+        }
+    }
+    appendGlobalCss(css) {
+        if (!css) {
+            return;
+        }
+        const style = this.target.ownerDocument.createElement('style');
+        style.textContent = css;
+        this.content.append(style);
+    }
+    showThumbnail(base64Jpeg) {
+        if (!base64Jpeg || this.content.children.length > 0) {
+            return;
+        }
+        const image = this.target.ownerDocument.createElement('img');
+        image.className = 'flyfish-pptx-thumbnail';
+        image.alt = 'PPTX preview thumbnail';
+        image.src = `data:image/jpeg;base64,${base64Jpeg}`;
+        this.thumbnailElement = image;
+        this.scaleBox.insertBefore(image, this.content);
+    }
+    clearThumbnail() {
+        var _a;
+        (_a = this.thumbnailElement) === null || _a === void 0 ? void 0 : _a.remove();
+        this.thumbnailElement = null;
+    }
+    async complete(charts) {
+        var _a, _b, _c;
+        if (this.disposed || this.completed) {
+            return;
+        }
+        this.completed = true;
+        this.content.dataset.renderState = 'ready';
+        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.worker = null;
+        this.scheduleResize();
+        await renderPptxPostProcessing(charts, this.content);
+        this.scheduleResize();
+        (_c = (_b = this.options).onRenderComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+    fail(error) {
+        var _a, _b, _c;
+        if (this.disposed) {
+            return;
+        }
+        this.completed = true;
+        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.worker = null;
+        this.content.dataset.renderState = 'error';
+        (_c = (_b = this.options).onError) === null || _c === void 0 ? void 0 : _c.call(_b, error);
+    }
+    attachResizeObserver() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.scheduleResize());
+        this.resizeObserver.observe(this.target);
+        if (this.target.parentElement) {
+            this.resizeObserver.observe(this.target.parentElement);
+        }
+    }
+    scheduleResize() {
+        const view = this.target.ownerDocument.defaultView || window;
+        if (this.resizeFrame) {
+            view.cancelAnimationFrame(this.resizeFrame);
+        }
+        this.resizeFrame = view.requestAnimationFrame(() => this.resize());
+    }
+    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);
+        if (!slideWidth) {
+            return;
+        }
+        const viewportWidth = this.target.clientWidth || ((_b = this.target.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || slideWidth;
+        this.fitScale = this.options.fitMode === 'none'
+            ? 1
+            : Math.min(1, viewportWidth / slideWidth);
+        const effectiveScale = clamp(this.fitScale * (this.userZoomPercent / 100), 0.25, 3);
+        this.currentZoomPercent = effectiveScale * 100;
+        this.content.style.width = `${slideWidth}px`;
+        this.content.style.transform = `scale(${effectiveScale})`;
+        this.scaleBox.style.width = `${Math.ceil(slideWidth * effectiveScale)}px`;
+        this.scaleBox.style.minHeight = `${Math.ceil(this.content.scrollHeight * effectiveScale)}px`;
+    }
+}