@file-viewer/pptx 3.3.0 → 3.3.3

package/README.en.md

@@ -10,6 +10,7 @@ Native PPTX rendering engine extracted from Flyfish File Viewer. It is maintaine
 - 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.
+- Charts retain authored sizes and text styles through slideshow zoom. CJK labels use independent logical measurements; legends support bottom, right, top, top-right and left positions. Fonts must be installed or supplied by the host; unavailable fonts use browser fallbacks.
 
 `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.
 

package/README.md

@@ -10,6 +10,7 @@ Native PPTX rendering engine extracted from Flyfish File Viewer. It is maintaine
 - 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.
+- Charts retain authored sizes and text styles through slideshow zoom. CJK labels use independent logical measurements; legends support bottom, right, top, top-right and left positions. Fonts must be installed or supplied by the host; unavailable fonts use browser fallbacks.
 
 `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.
 

package/README.zh-CN.md

@@ -10,6 +10,7 @@ Flyfish File Viewer 的原生 PPTX 渲染引擎包，从历史稳定实现中独
 - 使用 Web Worker 解析 PPTX，按页渐进输出，避免阻塞主线程。
 - 保留历史原生解析链路中的主题、图片、形状、表格、文本和基础图表处理。
 - 支持 `fitMode`、`zoomPercent`、自定义 Worker URL / Worker factory，方便内网、离线和 CSP 场景。
+- 图表在放映缩放时保留原始尺寸和文字样式，中文标签按独立的逻辑尺寸测量，支持底部、右侧、顶部、右上和左侧图例。字体由宿主安装或提供；缺少字体时使用浏览器回退字体。
 
 `resolvePptxPackageWorkerUrl()` 可供集成层识别打包器已输出或包目录直接提供的 Worker URL。未识别时返回 `undefined`，不代表文件不存在；集成层仍可使用自己的资产复制策略或显式 Worker 配置。
 

package/dist/chart-config.d.ts

@@ -1,5 +1,10 @@
-import type { PptxChartModel } from "./chart-types.js";
+import type { PptxChartAxis, PptxChartModel } from "./chart-types.js";
 export declare const formatPptxChartNumber: (value: number, format?: string) => string;
+export declare const resolvePptxChartAxes: (model: PptxChartModel) => {
+    category: PptxChartAxis | undefined;
+    primary: PptxChartAxis | undefined;
+    secondary: PptxChartAxis | undefined;
+};
 export declare const createPptxCartesianChart: (model: PptxChartModel, library: Record<string, any>) => {
     interaction: {
         enabled: boolean;
@@ -44,6 +49,14 @@ export declare const createPptxCartesianChart: (model: PptxChartModel, library:
             categories: string[];
             tick: {
                 multiline: boolean;
+                culling?: undefined;
+                rotate?: undefined;
+                autorotate?: undefined;
+            } | {
+                multiline: boolean;
+                culling: boolean;
+                rotate: number;
+                autorotate: boolean;
             };
         };
         y: {};

package/dist/chart-config.js

@@ -28,8 +28,16 @@ const axisOptions = (axis) => {
     };
 };
 const defined = (labels) => Object.fromEntries(Object.entries(labels || {}).filter(([, value]) => value !== undefined));
+export const resolvePptxChartAxes = (model) => {
+    var _a, _b;
+    const axesFor = (group) => model.axes.filter(axis => group === null || group === void 0 ? void 0 : group.axisIds.includes(axis.id));
+    const primary = (_a = axesFor(model.groups[0]).find(axis => axis.kind === 'value')) !== null && _a !== void 0 ? _a : model.axes.find(axis => axis.kind === 'value');
+    const secondary = model.groups.filter(group => group.series.length > 0).flatMap(axesFor).find(axis => axis.kind === 'value' && axis.id !== (primary === null || primary === void 0 ? void 0 : primary.id));
+    const category = (_b = axesFor(model.groups[0]).find(axis => axis.kind === 'category' || axis.kind === 'date')) !== null && _b !== void 0 ? _b : model.axes.find(axis => axis.kind === 'category' || axis.kind === 'date');
+    return { category, primary, secondary };
+};
 export const createPptxCartesianChart = (model, library) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     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) => ({
@@ -50,10 +58,7 @@ export const createPptxCartesianChart = (model, library) => {
         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 { primary, secondary, category } = resolvePptxChartAxes(model);
     const factory = { barChart: library.bar, lineChart: library.line, areaChart: library.area };
     if (rows.some(row => typeof factory[row.group.chartType] !== 'function'))
         return null;
@@ -91,7 +96,7 @@ export const createPptxCartesianChart = (model, library) => {
         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 gap = (_b = model.groups.find(group => group.chartType === 'barChart')) === null || _b === void 0 ? void 0 : _b.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) => {
@@ -116,7 +121,7 @@ export const createPptxCartesianChart = (model, library) => {
     };
     return {
         data: {
-            columns, types, type: types[(_e = rows[0]) === null || _e === void 0 ? void 0 : _e.id], axes: dataAxes,
+            columns, types, type: types[(_c = rows[0]) === null || _c === void 0 ? void 0 : _c.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 } : {}),
@@ -125,7 +130,9 @@ export const createPptxCartesianChart = (model, library) => {
         },
         axis: {
             rotated: model.groups.some(group => group.barDirection === 'bar'),
-            x: { ...axisOptions(category), type: 'category', categories, tick: { multiline: true } },
+            x: { ...axisOptions(category), type: 'category', categories, tick: model.groups.some(group => group.barDirection === 'bar')
+                    ? { multiline: true }
+                    : { multiline: false, culling: false, rotate: (_d = category === null || category === void 0 ? void 0 : category.labelRotation) !== null && _d !== void 0 ? _d : 60, autorotate: (category === null || category === void 0 ? void 0 : category.labelRotation) === undefined } },
             y: axisOptions(primary),
             ...(secondary ? { y2: axisOptions(secondary) } : {}),
         },

package/dist/chart-legend.d.ts

@@ -0,0 +1,9 @@
+import type { PptxChartFont, PptxChartOptions } from "./chart-types.js";
+export declare const createPptxChartLegend: (surface: HTMLElement, chart: any, legend?: PptxChartOptions["legend"], font?: PptxChartFont) => {
+    size(): {
+        width: number;
+        height: number;
+    };
+    bind(api: any): void;
+    destroy(): void;
+} | undefined;

package/dist/chart-legend.js

@@ -0,0 +1,99 @@
+import { applyPptxChartFont } from "./chart-text.js";
+export const createPptxChartLegend = (surface, chart, legend, font) => {
+    var _a, _b;
+    const document = surface.ownerDocument;
+    const view = document === null || document === void 0 ? void 0 : document.defaultView;
+    if (!view || (legend === null || legend === void 0 ? void 0 : legend.show) === false || !((legend === null || legend === void 0 ? void 0 : legend.overlay) || ['t', 'tr', 'l'].includes((legend === null || legend === void 0 ? void 0 : legend.position) || '')))
+        return;
+    const left = (legend === null || legend === void 0 ? void 0 : legend.position) === 'l' || (legend === null || legend === void 0 ? void 0 : legend.position) === 'r';
+    const layout = document.createElement('div');
+    layout.className = 'pptx-chart-layout';
+    layout.style.cssText = `display:flex;flex-direction:${left ? 'row' : 'column'};width:100%;height:100%;min-width:0;min-height:0;position:relative`;
+    surface.replaceWith(layout);
+    const list = document.createElement('div');
+    list.className = 'pptx-chart-legend';
+    list.setAttribute('role', 'group');
+    list.setAttribute('aria-label', 'Chart legend');
+    list.style.cssText = `display:flex;flex:${left ? '0 1 auto' : '0 0 auto'};flex-direction:${left ? 'column' : 'row'};flex-wrap:${left ? 'nowrap' : 'wrap'};gap:4px 12px;align-items:${left ? 'stretch' : 'center'};justify-content:${(legend === null || legend === void 0 ? void 0 : legend.position) === 'tr' ? 'flex-end' : 'center'};box-sizing:border-box;padding:4px;overflow:auto;${left ? 'max-width:50%' : 'max-height:50%'};font:12px sans-serif`;
+    applyPptxChartFont(list.style, font);
+    if (legend === null || legend === void 0 ? void 0 : legend.overlay) {
+        list.style.position = 'absolute';
+        list.style.zIndex = '1';
+        list.style[legend.position === 'b' ? 'bottom' : 'top'] = '0';
+        list.style[legend.position === 'tr' || legend.position === 'r' ? 'right' : 'left'] = '0';
+        if (left)
+            list.style.height = '100%';
+        else
+            list.style.width = '100%';
+    }
+    surface.style.width = left ? '0' : '100%';
+    surface.style.height = left ? '100%' : '0';
+    surface.style.alignSelf = 'stretch';
+    if (legend === null || legend === void 0 ? void 0 : legend.overlay)
+        surface.style.width = surface.style.height = '100%';
+    layout.append(list, surface);
+    const xs = new Set(Object.values(((_a = chart.data) === null || _a === void 0 ? void 0 : _a.xs) || {}).map(String));
+    const entries = (((_b = chart.data) === null || _b === void 0 ? void 0 : _b.columns) || []).filter((column) => !xs.has(String(column[0])))
+        .map((column) => {
+        var _a, _b, _c;
+        const id = String(column[0]);
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.setAttribute('aria-pressed', 'true');
+        button.style.cssText = 'display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;min-width:0;max-width:100%;border:0;padding:2px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer';
+        const swatch = document.createElement('span');
+        swatch.setAttribute('aria-hidden', 'true');
+        swatch.style.cssText = 'display:inline-block;flex:0 0 10px;width:10px;height:10px';
+        const text = document.createElement('span');
+        text.className = 'pptx-chart-legend-label';
+        text.style.cssText = 'min-width:0;overflow-wrap:anywhere';
+        text.textContent = String((_c = (_b = (_a = chart.data) === null || _a === void 0 ? void 0 : _a.names) === null || _b === void 0 ? void 0 : _b[id]) !== null && _c !== void 0 ? _c : id) || '\u200b';
+        button.append(swatch, text);
+        list.append(button);
+        return { id, button, swatch };
+    });
+    chart.legend = { ...chart.legend, show: false };
+    let observer;
+    let instance;
+    let width = 0, height = 0;
+    return {
+        size() {
+            return { width: surface.clientWidth, height: surface.clientHeight };
+        },
+        bind(api) {
+            var _a;
+            instance = api;
+            for (const { id, button, swatch } of entries) {
+                swatch.style.backgroundColor = ((_a = api.color) === null || _a === void 0 ? void 0 : _a.call(api, id)) || 'currentColor';
+                button.onclick = () => {
+                    var _a;
+                    (_a = api.toggle) === null || _a === void 0 ? void 0 : _a.call(api, id);
+                    const visible = button.getAttribute('aria-pressed') !== 'true';
+                    button.setAttribute('aria-pressed', String(visible));
+                    button.style.opacity = visible ? '1' : '.45';
+                };
+                button.onmouseenter = () => { var _a; return (_a = api.focus) === null || _a === void 0 ? void 0 : _a.call(api, id); };
+                button.onmouseleave = () => { var _a; return (_a = api.revert) === null || _a === void 0 ? void 0 : _a.call(api); };
+            }
+            if (view.ResizeObserver) {
+                observer = new view.ResizeObserver(([entry]) => {
+                    var _a;
+                    const { width: nextWidth, height: nextHeight } = entry.contentRect;
+                    if (nextWidth > 0 && nextHeight > 0 && (Math.abs(nextWidth - width) > .5 || Math.abs(nextHeight - height) > .5)) {
+                        width = nextWidth;
+                        height = nextHeight;
+                        (_a = instance === null || instance === void 0 ? void 0 : instance.resize) === null || _a === void 0 ? void 0 : _a.call(instance, { width, height });
+                    }
+                });
+                observer.observe(surface);
+            }
+        },
+        destroy() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            instance = undefined;
+            for (const { button } of entries)
+                button.onclick = button.onmouseenter = button.onmouseleave = null;
+            layout.remove();
+        },
+    };
+};

package/dist/chart-text.d.ts

@@ -0,0 +1,12 @@
+import type { PptxChartFont, PptxChartModel } from "./chart-types.js";
+export declare const mergePptxChartFonts: (...fonts: Array<PptxChartFont | undefined>) => PptxChartFont;
+export declare const applyPptxChartFont: (style: CSSStyleDeclaration, font?: PptxChartFont) => void;
+export declare const stylePptxChartText: (surface: HTMLElement, model?: PptxChartModel, chart?: any, legendFont?: PptxChartFont) => HTMLStyleElement | undefined;
+export declare const createPptxChartTextPlugin: (surface: HTMLElement) => {
+    $$: any;
+    $beforeInit(): void;
+    $init(): void;
+    $afterInit(): void;
+    $redraw(): void;
+    $willDestroy(): void;
+} | undefined;

package/dist/chart-text.js

@@ -0,0 +1,154 @@
+import { resolvePptxChartAxes } from "./chart-config.js";
+export const mergePptxChartFonts = (...fonts) => Object.assign({}, ...fonts.map(font => Object.fromEntries(Object.entries(font || {}).filter(([, value]) => value !== undefined))));
+export const applyPptxChartFont = (style, font) => {
+    if (!font)
+        return;
+    const families = [...new Set([font.family, font.eastAsianFamily, font.complexScriptFamily]
+            .filter((value) => typeof value === 'string' && !!value.trim())
+            .filter(value => !/^\+(?:mj|mn)-(?:lt|ea|cs)$/.test(value))
+            .map(value => /^(?:serif|sans-serif|monospace|cursive|fantasy|system-ui|ui-serif|ui-sans-serif|ui-monospace|ui-rounded|emoji|math|fangsong)$/i.test(value.trim())
+            ? value.trim().toLowerCase() : JSON.stringify(value.slice(0, 512))))];
+    if (families.length)
+        style.fontFamily = [...families, 'sans-serif'].join(',');
+    if (typeof font.sizePt === 'number' && Number.isFinite(font.sizePt) && font.sizePt > 0 && font.sizePt <= 4000) {
+        style.fontSize = `${font.sizePt * 96 / 72}px`;
+    }
+    if (font.bold !== undefined)
+        style.fontWeight = font.bold ? 'bold' : 'normal';
+    if (font.italic !== undefined)
+        style.fontStyle = font.italic ? 'italic' : 'normal';
+    if (typeof font.color === 'string' && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(font.color)) {
+        style.color = font.color;
+        style.fill = font.color;
+    }
+};
+export const stylePptxChartText = (surface, model, chart, legendFont) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const view = (_a = surface.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+    if (!view || typeof surface.appendChild !== 'function')
+        return;
+    const scope = `chart-${Math.random().toString(36).slice(2)}`;
+    surface.dataset.pptxChartText = scope;
+    surface.classList.add('pptx-chart-typed');
+    const selector = `.pptx-chart-surface.pptx-chart-typed[data-pptx-chart-text="${scope}"]`;
+    const element = surface.ownerDocument.createElement('style');
+    element.dataset.pptxChartFonts = '';
+    (_b = surface.parentNode) === null || _b === void 0 ? void 0 : _b.appendChild(element);
+    const sheet = element.sheet;
+    if (!sheet)
+        return element;
+    const rule = (suffix, font) => {
+        if (!font || !Object.values(font).some(value => value !== undefined))
+            return;
+        const index = sheet.insertRule(suffix.split(',').map(value => `${selector} ${value.trim()}`).join(',') + '{}', sheet.cssRules.length);
+        applyPptxChartFont(sheet.cssRules[index].style, font);
+    };
+    rule('svg', model === null || model === void 0 ? void 0 : model.font);
+    rule('.bb-legend-item,.bb-legend-item text', mergePptxChartFonts(model === null || model === void 0 ? void 0 : model.font, legendFont));
+    if (!model)
+        return element;
+    const { category, primary, secondary } = resolvePptxChartAxes(model);
+    for (const [axis, font] of [['x', category === null || category === void 0 ? void 0 : category.font], ['y', primary === null || primary === void 0 ? void 0 : primary.font], ['y2', secondary === null || secondary === void 0 ? void 0 : secondary.font]]) {
+        rule(`.bb-axis-${axis},.bb-axis-${axis} text`, mergePptxChartFonts(model.font, font));
+    }
+    let column = 0;
+    const escape = (_c = view.CSS) === null || _c === void 0 ? void 0 : _c.escape;
+    if (!escape)
+        return element;
+    for (const group of model.groups)
+        for (let index = 0; index < group.series.length; index++, column++) {
+            const id = String((_g = (_f = (_e = (_d = chart === null || chart === void 0 ? void 0 : chart.data) === null || _d === void 0 ? void 0 : _d.columns) === null || _e === void 0 ? void 0 : _e[column]) === null || _f === void 0 ? void 0 : _f[0]) !== null && _g !== void 0 ? _g : '');
+            if (!id)
+                continue;
+            const labels = (_j = (_h = group.options.series) === null || _h === void 0 ? void 0 : _h[index]) === null || _j === void 0 ? void 0 : _j.labels;
+            const font = mergePptxChartFonts(model.font, (_k = group.options.labels) === null || _k === void 0 ? void 0 : _k.font, labels === null || labels === void 0 ? void 0 : labels.font);
+            const texts = `.bb-texts-${escape(id)}`;
+            rule(`${texts},${texts} text`, font);
+            const points = { ...(_l = group.options.labels) === null || _l === void 0 ? void 0 : _l.points, ...labels === null || labels === void 0 ? void 0 : labels.points };
+            for (const [position, point] of Object.entries(points)) {
+                if (!/^\d+$/.test(position) || !point.font)
+                    continue;
+                rule(`${texts} .bb-text-${escape(position)}`, mergePptxChartFonts(font, point.font));
+            }
+        }
+    return element;
+};
+export const createPptxChartTextPlugin = (surface) => {
+    const document = surface.ownerDocument;
+    const view = document === null || document === void 0 ? void 0 : document.defaultView;
+    if (!view || typeof surface.appendChild !== 'function')
+        return undefined;
+    let original;
+    let wrapped;
+    let stopped = false;
+    let context;
+    const plugin = {
+        $$: undefined,
+        $beforeInit() {
+            const internal = this.$$;
+            if (typeof (internal === null || internal === void 0 ? void 0 : internal.getTextRect) !== 'function')
+                return;
+            original = internal.getTextRect;
+            wrapped = (source, className) => {
+                var _a, _b, _c, _d, _e;
+                const svg = ((_c = (_b = (_a = internal.$el) === null || _a === void 0 ? void 0 : _a.svg) === null || _b === void 0 ? void 0 : _b.node) === null || _c === void 0 ? void 0 : _c.call(_b)) || surface.querySelector('svg');
+                if (!svg)
+                    return original.call(internal, source, className);
+                let base = ((_d = source === null || source === void 0 ? void 0 : source.node) === null || _d === void 0 ? void 0 : _d.call(source)) || source;
+                if (!Array.isArray(source) && !/text/i.test((base === null || base === void 0 ? void 0 : base.tagName) || ''))
+                    base = (_e = base === null || base === void 0 ? void 0 : base.querySelector) === null || _e === void 0 ? void 0 : _e.call(base, 'text');
+                if (!Array.isArray(source) && !base)
+                    return original.call(internal, source, className);
+                const values = Array.isArray(source) ? source : [base.textContent || ''];
+                const rectangles = values.map((value) => {
+                    var _a;
+                    const text = String(value !== null && value !== void 0 ? value : '');
+                    const node = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                    if (className)
+                        node.setAttribute('class', className);
+                    node.style.visibility = 'hidden';
+                    if (base && !Array.isArray(source))
+                        node.style.font = view.getComputedStyle(base).font;
+                    node.textContent = text;
+                    svg.appendChild(node);
+                    try {
+                        const box = node.getBBox();
+                        if (box.height > 0 && (box.width > 0 || !text)) {
+                            return { x: box.x, y: box.y, left: box.x, top: box.y, right: box.x + box.width,
+                                bottom: box.y + box.height, width: box.width, height: box.height };
+                        }
+                        const style = view.getComputedStyle(node);
+                        context !== null && context !== void 0 ? context : (context = document.createElement('canvas').getContext('2d'));
+                        const size = Number.parseFloat(style.fontSize) || 10;
+                        if (context)
+                            context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+                        const metrics = context === null || context === void 0 ? void 0 : context.measureText(text);
+                        const width = (_a = metrics === null || metrics === void 0 ? void 0 : metrics.width) !== null && _a !== void 0 ? _a : 0;
+                        const height = ((metrics === null || metrics === void 0 ? void 0 : metrics.fontBoundingBoxAscent) || 0) + ((metrics === null || metrics === void 0 ? void 0 : metrics.fontBoundingBoxDescent) || 0) || size * 1.2;
+                        return { x: 0, y: 0, left: 0, top: 0, right: width, bottom: height, width, height };
+                    }
+                    finally {
+                        node.remove();
+                    }
+                });
+                return rectangles.length > 1 ? rectangles : rectangles[0];
+            };
+            internal.getTextRect = wrapped;
+        },
+        $init() { },
+        $afterInit() { var _a; (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.addEventListener('loadingdone', refresh); },
+        $redraw() { },
+        $willDestroy() {
+            var _a, _b;
+            stopped = true;
+            (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadingdone', refresh);
+            if (((_b = this.$$) === null || _b === void 0 ? void 0 : _b.getTextRect) === wrapped)
+                this.$$.getTextRect = original;
+            original = wrapped = context = undefined;
+            this.$$ = undefined;
+        },
+    };
+    const refresh = () => { var _a, _b, _c; if (!stopped)
+        (_c = (_b = (_a = plugin.$$) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.flush) === null || _c === void 0 ? void 0 : _c.call(_b); };
+    return plugin;
+};

package/dist/chart-types.d.ts

@@ -1,5 +1,15 @@
 export type PptxChartType = 'lineChart' | 'barChart' | 'areaChart' | 'scatterChart' | 'pieChart' | 'pie3DChart' | 'doughnutChart';
+export interface PptxChartFont {
+    family?: string;
+    eastAsianFamily?: string;
+    complexScriptFamily?: string;
+    sizePt?: number;
+    bold?: boolean;
+    italic?: boolean;
+    color?: string;
+}
 export interface PptxChartLabels {
+    font?: PptxChartFont;
     showValue?: boolean;
     showCategory?: boolean;
     showSeries?: boolean;
@@ -19,6 +29,8 @@ export interface PptxChartOptions {
     legend?: {
         show?: boolean;
         position?: string;
+        overlay?: boolean;
+        font?: PptxChartFont;
     };
     labels?: PptxChartLabels;
     series?: Array<{
@@ -54,10 +66,8 @@ export interface PptxChartAxis {
     };
     title?: string;
     majorGridlines: boolean;
-    font?: {
-        family?: string;
-        sizePt?: number;
-    };
+    labelRotation?: number;
+    font?: PptxChartFont;
 }
 export interface PptxChartGroup {
     chartType: PptxChartType;
@@ -71,10 +81,7 @@ export interface PptxChartModel {
     groups: PptxChartGroup[];
     axes: PptxChartAxis[];
     title?: string;
-    font?: {
-        family?: string;
-        sizePt?: number;
-    };
+    font?: PptxChartFont;
 }
 export interface PptxChartMessage {
     type?: string;

package/dist/chart.js

@@ -1,4 +1,6 @@
 import { createPptxCartesianChart } from "./chart-config.js";
+import { createPptxChartTextPlugin, mergePptxChartFonts, stylePptxChartText } from "./chart-text.js";
+import { createPptxChartLegend } from "./chart-legend.js";
 let chartLibraryLoader = null;
 let chartRenderer = null;
 export const registerPptxChartRenderer = (renderer) => {
@@ -217,7 +219,7 @@ const fitOverflowingTextBlocks = (root) => {
         .forEach(block => fitOverflowingTextBlock(block, false));
 };
 const renderChart = async (message, root) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const payload = message.data;
     if (!(payload === null || payload === void 0 ? void 0 : payload.chartID) || !payload.chartType || !payload.chartData) {
         return;
@@ -442,22 +444,39 @@ const renderChart = async (message, root) => {
         surface.style.cssText = 'width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto';
         chartTarget.replaceChildren(surface);
         chart.bindto = surface;
+        const legend = createPptxChartLegend(surface, chart, options === null || options === void 0 ? void 0 : options.legend, mergePptxChartFonts((_q = payload.chartModel) === null || _q === void 0 ? void 0 : _q.font, (_r = options === null || options === void 0 ? void 0 : options.legend) === null || _r === void 0 ? void 0 : _r.font));
+        const fontStyle = stylePptxChartText(surface, payload.chartModel, chart, (_t = (_s = payload.chartOptions) === null || _s === void 0 ? void 0 : _s.legend) === null || _t === void 0 ? void 0 : _t.font);
+        const textPlugin = createPptxChartTextPlugin(surface);
+        if (textPlugin)
+            chart.plugins = [...(chart.plugins || []), textPlugin];
+        const logicalSize = [((_u = chartTarget.style) === null || _u === void 0 ? void 0 : _u.width) || '', ((_v = chartTarget.style) === null || _v === void 0 ? void 0 : _v.height) || '']
+            .map(value => /^\d+(?:\.\d+)?px$/.test(value) ? Number.parseFloat(value) : NaN);
+        if (logicalSize.every(value => Number.isFinite(value) && value > 0)) {
+            const plotSize = legend === null || legend === void 0 ? void 0 : legend.size();
+            chart.size = plotSize && plotSize.width > 0 && plotSize.height > 0 ? plotSize : { width: logicalSize[0], height: logicalSize[1] };
+            chart.resize = { auto: false };
+        }
         try {
             const instance = bb.generate(chart);
+            legend === null || legend === void 0 ? void 0 : legend.bind(instance);
             return {
                 destroy() {
                     var _a;
                     try {
+                        legend === null || legend === void 0 ? void 0 : legend.destroy();
                         (_a = instance.destroy) === null || _a === void 0 ? void 0 : _a.call(instance);
                     }
                     finally {
                         surface.remove();
+                        fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.remove();
                     }
                 },
             };
         }
         catch (error) {
             surface.remove();
+            fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.remove();
+            legend === null || legend === void 0 ? void 0 : legend.destroy();
             throw error;
         }
     }

package/dist/index.d.ts

@@ -4,6 +4,6 @@ export type { PptxPresentationLabels, PptxPresentationState } from "./presentati
 export { createPptxWorker, resolvePptxPackageWorkerUrl } from "./worker.js";
 export { registerPptxChartLibraryLoader, registerPptxChartRenderer } from "./chart.js";
 export type { PptxChartLibraries, PptxChartLibraryLoader } from "./chart.js";
-export type { PptxChartType, PptxChartLabels, PptxChartOptions, PptxChartSeries, PptxChartAxis, PptxChartGroup, PptxChartModel, PptxChartMessage, PptxChartCollection, PptxChartRenderer, } from "./chart-types.js";
+export type { PptxChartType, PptxChartFont, PptxChartLabels, PptxChartOptions, PptxChartSeries, PptxChartAxis, PptxChartGroup, PptxChartModel, PptxChartMessage, PptxChartCollection, PptxChartRenderer, } from "./chart-types.js";
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from "./options.js";
 export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from "./types.js";