@file-viewer/pptx 3.2.0 → 3.2.2

package/README.en.md

@@ -1,7 +1,34 @@
 # @file-viewer/pptx
 
-Runtime package version 3.2.0.
+Native PPTX rendering engine extracted from Flyfish File Viewer. It is maintained as a standalone package so presentation rendering can evolve independently from framework adapters.
 
-Usage and API documentation: https://doc.file-viewer.app/
+## Highlights
 
-The package's own license is Apache-2.0. Included third-party notices apply to their respective components.
+- Pure TypeScript/DOM API with no Vue, React, or iframe dependency.
+- Web Worker based PPTX parsing with progressive slide output.
+- Preserves the latest native Flyfish rendering path for themes, images, shapes, tables, text, and basic charts.
+- Supports `fitMode`, `zoomPercent`, custom Worker URLs, and Worker factories for private deployment and strict CSP environments.
+
+`resolvePptxPackageWorkerUrl()` lets integrations identify an emitted or directly served package Worker URL. It returns `undefined` when the location is not recognized, not as proof that a file is missing; integrations can then use their asset-copy strategy or explicit Worker configuration.
+
+When `PptxViewer` is used directly, Vite or Webpack can serve a recognized package Worker; an unrecognized build never guesses an application-relative path. Angular, IIFE, offline static directories, and strict CSP deployments should use `file-viewer-copy-assets` or an explicit `workerUrl` so the final static origin serves the Worker reliably.
+
+## Usage
+
+```ts
+import { PptxViewer } from '@file-viewer/pptx'
+
+const buffer = await file.arrayBuffer()
+const viewer = await PptxViewer.open(buffer, document.querySelector('#app')!, {
+  fitMode: 'contain',
+  zoomPercent: 100,
+  onSlideRendered(index) {
+    console.log('slide rendered', index)
+  },
+})
+
+await viewer.setZoom(125)
+viewer.destroy()
+```
+
+Most users should consume PPTX through `@file-viewer/core` or a standard framework package. The core package lazy-loads this renderer only when a presentation is opened.

package/README.md

@@ -1,7 +1,34 @@
 # @file-viewer/pptx
 
-Runtime package version 3.2.0.
+Flyfish File Viewer 的原生 PPTX 渲染引擎包，从历史稳定实现中独立拆分，便于持续维护和单独发布。
 
-Usage and API documentation: https://doc.file-viewer.app/
+## 特性
 
-The package's own license is Apache-2.0. Included third-party notices apply to their respective components.
+- 纯 TypeScript/DOM 入口，不依赖 Vue、React 或 iframe。
+- 使用 Web Worker 解析 PPTX，按页渐进输出，避免阻塞主线程。
+- 保留历史原生解析链路中的主题、图片、形状、表格、文本和基础图表处理。
+- 支持 `fitMode`、`zoomPercent`、自定义 Worker URL / Worker factory，方便内网、离线和 CSP 场景。
+
+`resolvePptxPackageWorkerUrl()` 可供集成层识别打包器已输出或包目录直接提供的 Worker URL。未识别时返回 `undefined`，不代表文件不存在；集成层仍可使用自己的资产复制策略或显式 Worker 配置。
+
+直接使用 `PptxViewer` 时，Vite 或 Webpack 可直接提供已识别的包内 Worker；无法识别的构建不会猜测应用相对路径。Angular、IIFE、离线静态目录或严格 CSP 部署应使用 `file-viewer-copy-assets` 或显式 `workerUrl`，让 Worker 由最终静态域名稳定提供。
+
+## 使用
+
+```ts
+import { PptxViewer } from '@file-viewer/pptx'
+
+const buffer = await file.arrayBuffer()
+const viewer = await PptxViewer.open(buffer, document.querySelector('#app')!, {
+  fitMode: 'contain',
+  zoomPercent: 100,
+  onSlideRendered(index) {
+    console.log('slide rendered', index)
+  },
+})
+
+await viewer.setZoom(125)
+viewer.destroy()
+```
+
+在 Flyfish File Viewer 中通常无需直接使用本包，`@file-viewer/core` 会按 PPTX 类型自动按需加载。

package/dist/chart-config.d.ts

@@ -0,0 +1,59 @@
+import type { PptxChartModel } from "./chart-types.js";
+export declare const formatPptxChartNumber: (value: number, format?: string) => string;
+export declare const createPptxCartesianChart: (model: PptxChartModel, library: Record<string, any>) => {
+    interaction: {
+        enabled: boolean;
+    };
+    title?: {
+        text: string;
+    } | undefined;
+    bar?: {
+        width: {
+            ratio: number;
+        };
+    } | undefined;
+    data: {
+        labels?: {
+            format: (value: number, id: string, position: number) => string;
+        } | undefined;
+        stack?: {
+            normalize: boolean;
+        } | undefined;
+        groups?: string[][] | undefined;
+        order?: null | undefined;
+        colors?: {
+            [k: string]: string;
+        } | undefined;
+        columns: (string | number | null)[][];
+        types: {
+            [k: string]: any;
+        };
+        type: any;
+        axes: {
+            [k: string]: string;
+        };
+        names: {
+            [k: string]: string;
+        };
+    };
+    axis: {
+        y2?: {} | undefined;
+        rotated: boolean;
+        x: {
+            type: string;
+            categories: string[];
+            tick: {
+                multiline: boolean;
+            };
+        };
+        y: {};
+    };
+    grid: {
+        x: {
+            show: boolean;
+        };
+        y: {
+            show: boolean;
+        };
+    };
+} | null;

package/dist/chart-config.js

@@ -0,0 +1,137 @@
+export const formatPptxChartNumber = (value, format = 'General') => {
+    if (!Number.isFinite(value))
+        return '';
+    const match = /^([$€£]?)[#0,]+(?:\.([0#]+))?(%)?$/.exec(format);
+    if (!match)
+        return String(value);
+    const decimal = (match[2] || '').slice(0, 20);
+    return match[1] + new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: (decimal.match(/0/g) || []).length,
+        maximumFractionDigits: decimal.length,
+        useGrouping: format.includes(','),
+        style: match[3] ? 'percent' : 'decimal',
+    }).format(value);
+};
+const axisOptions = (axis) => {
+    if (!axis)
+        return {};
+    const bounds = axis.min === undefined || axis.max === undefined || axis.min < axis.max
+        ? { min: axis.min, max: axis.max } : {};
+    return {
+        ...bounds,
+        ...(axis.min !== undefined || axis.max !== undefined ? { padding: { top: 0, bottom: 0 } } : {}),
+        show: !axis.deleted,
+        inverted: axis.reversed,
+        ...(axis.logBase ? { type: 'log' } : {}),
+        ...(axis.title ? { label: { text: axis.title, position: 'outer-middle' } } : {}),
+        ...(axis.numberFormat ? { tick: { format: (value) => formatPptxChartNumber(value, axis.numberFormat.code) } } : {}),
+    };
+};
+const defined = (labels) => Object.fromEntries(Object.entries(labels || {}).filter(([, value]) => value !== undefined));
+export const createPptxCartesianChart = (model, library) => {
+    var _a, _b, _c, _d, _e;
+    if (!model.groups.length || model.groups.some(group => !['lineChart', 'barChart', 'areaChart'].includes(group.chartType)))
+        return null;
+    const rows = model.groups.flatMap((group, groupIndex) => group.series.map((series, index) => ({
+        group, groupIndex, series, index, id: `pptx-series-${groupIndex}-${index}`,
+    })));
+    const coordinates = new Set();
+    const labels = new Map();
+    for (const { series } of rows)
+        for (const [position, point] of series.values.entries()) {
+            const coordinate = String(point.x);
+            coordinates.add(coordinate);
+            if (!labels.has(coordinate))
+                labels.set(coordinate, String((_a = series.xlabels[position]) !== null && _a !== void 0 ? _a : coordinate));
+        }
+    const indices = [...coordinates].sort((a, b) => Number(a) - Number(b));
+    const categories = indices.map(index => labels.get(index));
+    const valueFor = (series) => {
+        const points = new Map(series.values.map(point => [String(point.x), point.y]));
+        return indices.map(index => { var _a; return (_a = points.get(index)) !== null && _a !== void 0 ? _a : null; });
+    };
+    const axesFor = (group) => model.axes.filter(axis => group.axisIds.includes(axis.id));
+    const primary = (_b = axesFor(model.groups[0]).find(axis => axis.kind === 'value')) !== null && _b !== void 0 ? _b : model.axes.find(axis => axis.kind === 'value');
+    const secondary = rows.flatMap(row => axesFor(row.group)).find(axis => axis.kind === 'value' && axis.id !== (primary === null || primary === void 0 ? void 0 : primary.id));
+    const category = (_c = axesFor(model.groups[0]).find(axis => axis.kind === 'category' || axis.kind === 'date')) !== null && _c !== void 0 ? _c : model.axes.find(axis => axis.kind === 'category' || axis.kind === 'date');
+    const factory = { barChart: library.bar, lineChart: library.line, areaChart: library.area };
+    if (rows.some(row => typeof factory[row.group.chartType] !== 'function'))
+        return null;
+    const originalValues = rows.map(row => valueFor(row.series));
+    const columns = rows.map(({ id }, index) => [id, ...originalValues[index]]);
+    const types = Object.fromEntries(rows.map(row => [row.id, factory[row.group.chartType]()]));
+    const dataAxes = Object.fromEntries(rows.map(row => [row.id,
+        secondary && row.group.axisIds.includes(secondary.id) ? 'y2' : 'y',
+    ]));
+    const groups = model.groups.flatMap((group, groupIndex) => group.options.grouping === 'stacked' || group.options.grouping === 'percentStacked'
+        ? [rows.filter(row => row.groupIndex === groupIndex).map(row => row.id)] : []);
+    const normalizeAll = model.groups.length === 1 && model.groups[0].options.grouping === 'percentStacked';
+    const totals = new Map();
+    rows.forEach((row, rowIndex) => {
+        if (normalizeAll || row.group.options.grouping !== 'percentStacked')
+            return;
+        let total = totals.get(row.groupIndex);
+        if (!total) {
+            total = indices.map(() => 0);
+            totals.set(row.groupIndex, total);
+        }
+        originalValues[rowIndex].forEach((value, index) => { total[index] += Math.abs(value || 0); });
+    });
+    rows.forEach((row, rowIndex) => {
+        if (normalizeAll || row.group.options.grouping !== 'percentStacked')
+            return;
+        for (let i = 1; i < columns[rowIndex].length; i++) {
+            const total = totals.get(row.groupIndex)[i - 1];
+            if (typeof columns[rowIndex][i] === 'number' && total)
+                columns[rowIndex][i] = Number(columns[rowIndex][i]) / total * 100;
+        }
+    });
+    const colors = Object.fromEntries(rows.flatMap(row => {
+        var _a, _b;
+        const color = (_b = (_a = row.group.options.series) === null || _a === void 0 ? void 0 : _a[row.index]) === null || _b === void 0 ? void 0 : _b.color;
+        return color && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(color) ? [[row.id, color]] : [];
+    }));
+    const gap = (_d = model.groups.find(group => group.chartType === 'barChart')) === null || _d === void 0 ? void 0 : _d.options.gapWidth;
+    const hasLabels = rows.some(row => { var _a, _b; return row.group.options.labels || ((_b = (_a = row.group.options.series) === null || _a === void 0 ? void 0 : _a[row.index]) === null || _b === void 0 ? void 0 : _b.labels); });
+    const byId = new Map(rows.map(row => [row.id, row]));
+    const labelFormat = (value, id, position) => {
+        var _a, _b, _c;
+        const row = byId.get(id);
+        if (!row)
+            return '';
+        const properties = { ...defined(row.group.options.labels), ...defined((_b = (_a = row.group.options.series) === null || _a === void 0 ? void 0 : _a[row.index]) === null || _b === void 0 ? void 0 : _b.labels) };
+        const originalIndex = indices[position];
+        const point = (_c = properties.points) === null || _c === void 0 ? void 0 : _c[originalIndex];
+        Object.assign(properties, defined(point));
+        if (properties.deleted)
+            return '';
+        const result = [];
+        if (properties.showSeries)
+            result.push(String(row.series.key));
+        if (properties.showCategory)
+            result.push(categories[position] || '');
+        if (properties.showValue)
+            result.push(formatPptxChartNumber(value, properties.formatCode));
+        return result.join(' ');
+    };
+    return {
+        data: {
+            columns, types, type: types[(_e = rows[0]) === null || _e === void 0 ? void 0 : _e.id], axes: dataAxes,
+            names: Object.fromEntries(rows.map(row => [row.id, String(row.series.key)])),
+            ...(Object.keys(colors).length ? { colors } : {}),
+            ...(groups.length ? { groups, order: null } : {}),
+            ...(normalizeAll ? { stack: { normalize: true } } : {}),
+            ...(hasLabels ? { labels: { format: labelFormat } } : {}),
+        },
+        axis: {
+            rotated: model.groups.some(group => group.barDirection === 'bar'),
+            x: { ...axisOptions(category), type: 'category', categories, tick: { multiline: true } },
+            y: axisOptions(primary),
+            ...(secondary ? { y2: axisOptions(secondary) } : {}),
+        },
+        grid: { x: { show: (category === null || category === void 0 ? void 0 : category.majorGridlines) === true }, y: { show: (primary === null || primary === void 0 ? void 0 : primary.majorGridlines) === true } },
+        ...(gap !== undefined ? { bar: { width: { ratio: 100 / (100 + gap) } } } : {}),
+        ...(model.title ? { title: { text: model.title } } : {}),
+        interaction: { enabled: true },
+    };
+};

package/dist/chart-types.d.ts

@@ -0,0 +1,98 @@
+export type PptxChartType = 'lineChart' | 'barChart' | 'areaChart' | 'scatterChart' | 'pieChart' | 'pie3DChart' | 'doughnutChart';
+export interface PptxChartLabels {
+    showValue?: boolean;
+    showCategory?: boolean;
+    showSeries?: boolean;
+    showPercent?: boolean;
+    deleted?: boolean;
+    position?: string;
+    formatCode?: string;
+    sourceLinked?: boolean;
+    points?: Record<string, PptxChartLabels>;
+}
+export interface PptxChartOptions {
+    grouping?: 'standard' | 'clustered' | 'stacked' | 'percentStacked';
+    holeSize?: number;
+    firstSliceAngle?: number;
+    gapWidth?: number;
+    overlap?: number;
+    legend?: {
+        show?: boolean;
+        position?: string;
+    };
+    labels?: PptxChartLabels;
+    series?: Array<{
+        color?: string;
+        points?: Record<string, string>;
+        labels?: PptxChartLabels;
+    }>;
+}
+export interface PptxChartSeries {
+    key: string | number;
+    values: Array<{
+        x: string | number | null;
+        y: number | null;
+    }>;
+    xlabels: Record<string, string | number>;
+    categoryLevels?: Array<Record<string, string>>;
+}
+export interface PptxChartAxis {
+    id: string;
+    kind: 'category' | 'value' | 'date' | 'series';
+    position?: 'l' | 'r' | 't' | 'b';
+    deleted: boolean;
+    reversed: boolean;
+    min?: number;
+    max?: number;
+    logBase?: number;
+    crossAxisId?: string;
+    crosses?: 'autoZero' | 'min' | 'max';
+    crossesAt?: number;
+    numberFormat?: {
+        code: string;
+        sourceLinked?: boolean;
+    };
+    title?: string;
+    majorGridlines: boolean;
+    font?: {
+        family?: string;
+        sizePt?: number;
+    };
+}
+export interface PptxChartGroup {
+    chartType: PptxChartType;
+    barDirection?: 'bar' | 'col';
+    axisIds: string[];
+    series: PptxChartSeries[];
+    options: PptxChartOptions;
+}
+export interface PptxChartModel {
+    schemaVersion: 1;
+    groups: PptxChartGroup[];
+    axes: PptxChartAxis[];
+    title?: string;
+    font?: {
+        family?: string;
+        sizePt?: number;
+    };
+}
+export interface PptxChartMessage {
+    type?: string;
+    data?: {
+        chartID?: string;
+        chartType?: PptxChartType | 'comboChart';
+        barDirection?: string;
+        chartData?: any;
+        chartOptions?: PptxChartOptions;
+        chartModel?: PptxChartModel;
+    };
+}
+export interface PptxChartCollection {
+    MsgQueue: PptxChartMessage[];
+    isDone?: boolean;
+}
+export type PptxChartRenderer = (model: PptxChartModel, target: HTMLElement) => {
+    destroy?: () => void;
+} | void | Promise<{
+    destroy?: () => void;
+} | void>;

package/dist/chart-types.js

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

package/dist/chart.d.ts

@@ -1,8 +1,10 @@
+import type { PptxChartRenderer } from "./chart-types.js";
 export type PptxChartLibraries = {
     billboard: any;
     d3Format: typeof import('d3-format');
 };
 export type PptxChartLibraryLoader = () => Promise<PptxChartLibraries>;
+export declare const registerPptxChartRenderer: (renderer: PptxChartRenderer | null) => void;
 export declare const registerPptxChartLibraryLoader: (loader: PptxChartLibraryLoader | null) => void;
 export type PptxPostProcessingHandle = {
     destroy: () => void;