@antv/infographic 0.1.0 → 0.1.1

package/esm/designs/structures/hierarchy-tree.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
 import * as d3 from 'd3';
 import { Defs, Ellipse, getElementBounds, Group, Path, Polygon, } from '../../jsx';
-import { getDatumByIndexes } from '../../utils';
 import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup, ShapesGroup, } from '../components';
 import { FlexLayout } from '../layouts';
 import { getColorPrimary, getHierarchyColorIndexes, getItemComponent, getPaletteColor, getThemeColors, } from '../utils';
@@ -72,13 +71,21 @@ export const HierarchyTree = (props) => {
             };
     };
     // 内置工具方法：计算各层节点边界
-    const computeLevelBounds = (maxLevels) => {
+    const computeLevelBounds = (rootNode) => {
         let maxWidth = 0, maxHeight = 0;
         const levelBounds = new Map();
-        for (let level = 0; level < maxLevels; level++) {
+        const sampleDatumByLevel = new Map();
+        // 记录每个深度遇到的首个节点，用于计算该层的尺寸
+        rootNode.each((node) => {
+            if (!sampleDatumByLevel.has(node.depth)) {
+                sampleDatumByLevel.set(node.depth, node.data);
+            }
+        });
+        for (let level = 0; level < rootNode.height + 1; level++) {
             const ItemComponent = getItemComponent(Items, level);
-            const indexes = Array(level + 1).fill(0);
-            const bounds = getElementBounds(_jsx(ItemComponent, { indexes: indexes, data: data, datum: getDatumByIndexes(items, indexes), positionH: "center" }));
+            const sampleDatum = sampleDatumByLevel.get(level) ?? {};
+            const indexes = sampleDatum._originalIndex ?? Array(level + 1).fill(0);
+            const bounds = getElementBounds(_jsx(ItemComponent, { indexes: indexes, data: data, datum: sampleDatum, positionH: "center" }));
             levelBounds.set(level, bounds);
             maxWidth = Math.max(maxWidth, bounds.width);
             maxHeight = Math.max(maxHeight, bounds.height);
@@ -258,7 +265,7 @@ export const HierarchyTree = (props) => {
     // 构建和布局
     const hierarchyData = buildHierarchyData(items);
     const root = d3.hierarchy(hierarchyData);
-    const { levelBounds, maxWidth, maxHeight } = computeLevelBounds(root.height + 1);
+    const { levelBounds, maxWidth, maxHeight } = computeLevelBounds(root);
     const treeLayout = d3
         .tree()
         .nodeSize([maxWidth + nodeGap, maxHeight + levelGap])

package/esm/exporter/font.d.ts

@@ -0,0 +1,18 @@
+interface FontFaceAttributes {
+    'font-family': string;
+    src: string;
+    'font-style': string;
+    'font-display': string;
+    'font-weight': string;
+    'unicode-range': string;
+}
+export declare function embedFonts(svg: SVGSVGElement, embedResources?: boolean): Promise<void>;
+/**
+ * 解析给定 font-family 对应的 CSS @font-face
+ */
+export declare function parseFontFamily(fontFamily: string): Promise<Partial<FontFaceAttributes>[]>;
+/**
+ * 从 document.fonts 中获取给定 family 且已加载的 FontFace
+ */
+export declare function getActualLoadedFontFace(fontFamily: string): FontFace[];
+export {};

package/esm/exporter/font.js

@@ -0,0 +1,202 @@
+// @ts-expect-error ignore
+import parse from 'css/lib/parse';
+import { getFontURLs, getWoff2BaseURL } from '../renderer';
+import { createElement, decodeFontFamily, join, normalizeFontWeightName, } from '../utils';
+const fontDataUrlCache = new Map();
+export async function embedFonts(svg, embedResources = true) {
+    // 1. 收集使用到的 font-family
+    const usedFonts = collectUsedFonts(svg);
+    if (usedFonts.size === 0)
+        return;
+    const parsedFontsFaces = [];
+    // 2. 对每个使用到的字体，解析 CSS + 结合 document.fonts 的实际加载子集
+    await Promise.all(Array.from(usedFonts).map(async (fontFamily) => {
+        const loadedFonts = getActualLoadedFontFace(fontFamily);
+        if (!loadedFonts.length)
+            return;
+        const cssFontFaces = await parseFontFamily(fontFamily);
+        if (!cssFontFaces.length)
+            return;
+        const processed = await Promise.all(cssFontFaces.map(async (rawFace) => {
+            const fontFace = normalizeFontFace(rawFace);
+            const unicodeRange = fontFace['unicode-range'].replace(/\s/g, '');
+            const subset = loadedFonts.find((font) => font.unicodeRange &&
+                font.unicodeRange.replace(/\s/g, '') === unicodeRange);
+            // 如果找不到对应子集，就不处理这个 font-face
+            if (!subset)
+                return null;
+            const baseURL = getWoff2BaseURL(fontFace['font-family'], normalizeFontWeightName(fontFace['font-weight']));
+            if (!baseURL)
+                return null;
+            // 更宽松地从 src 中提取 .woff2 URL 片段
+            const urlMatch = fontFace.src.match(/url\(["']?(.*?\.woff2)[^"']*["']?\)/);
+            if (!urlMatch?.[1])
+                return null;
+            const woff2URL = join(baseURL, urlMatch[1]);
+            if (embedResources) {
+                const woff2DataUrl = await loadWoff2(woff2URL);
+                fontFace.src = `url(${woff2DataUrl}) format('woff2')`;
+            }
+            else {
+                fontFace.src = `url(${woff2URL}) format('woff2')`;
+            }
+            return fontFace;
+        }));
+        parsedFontsFaces.push(...(processed.filter(Boolean) || []));
+    }));
+    // 3. 创建 <style>@font-face...</style> 并插入 SVG
+    if (parsedFontsFaces.length > 0) {
+        insertFontStyle(svg, parsedFontsFaces);
+    }
+}
+/**
+ * 收集 SVG 中用到的 font-family
+ */
+function collectUsedFonts(svg) {
+    const usedFonts = new Set();
+    const svgFontFamily = svg.getAttribute('font-family');
+    if (svgFontFamily) {
+        const decodedFontFamily = decodeFontFamily(svgFontFamily);
+        if (decodedFontFamily) {
+            usedFonts.add(decodedFontFamily);
+        }
+    }
+    const textElements = svg.querySelectorAll('foreignObject span');
+    for (const span of textElements) {
+        const fontFamily = decodeFontFamily(span.style.fontFamily);
+        if (fontFamily)
+            usedFonts.add(fontFamily);
+    }
+    return usedFonts;
+}
+/**
+ * 解析给定 font-family 对应的 CSS @font-face
+ */
+export async function parseFontFamily(fontFamily) {
+    const urls = getFontURLs(fontFamily);
+    const fontFaces = [];
+    await Promise.allSettled(urls.map(async (url) => {
+        const css = await fetch(url)
+            .then((res) => res.text())
+            .then((text) => parse(text))
+            .catch(() => {
+            console.error(`Failed to fetch or parse font CSS: ${url}`);
+            return null;
+        });
+        css?.stylesheet?.rules.forEach((rule) => {
+            if (rule.type === 'font-face') {
+                const fontFace = parseFontFace(rule);
+                fontFaces.push(fontFace);
+            }
+        });
+    }));
+    return fontFaces;
+}
+/**
+ * 从 document.fonts 中获取给定 family 且已加载的 FontFace
+ */
+export function getActualLoadedFontFace(fontFamily) {
+    const fonts = [];
+    document.fonts.forEach((font) => {
+        if (decodeFontFamily(font.family) === decodeFontFamily(fontFamily) &&
+            font.status === 'loaded') {
+            fonts.push(font);
+        }
+    });
+    return fonts;
+}
+/**
+ * 从 css 的 FontFace 规则中提取声明
+ */
+function parseFontFace(rule) {
+    const declarations = (rule.declarations || []);
+    const attrs = {};
+    declarations.forEach((declaration) => {
+        const { property, value } = declaration;
+        if (property && value) {
+            attrs[property] = value;
+        }
+    });
+    // 这里返回 Partial，后面统一 normalize
+    return attrs;
+}
+/**
+ * 将不完整的 FontFaceAttributes 补全为完整结构，给后续逻辑使用
+ */
+function normalizeFontFace(face) {
+    return {
+        'font-family': face['font-family'] ?? '',
+        src: face.src ?? '',
+        'font-style': face['font-style'] ?? 'normal',
+        'font-display': face['font-display'] ?? 'swap',
+        'font-weight': face['font-weight'] ?? '400',
+        'unicode-range': face['unicode-range'] ?? 'U+0-FFFF',
+    };
+}
+/**
+ * 将 @font-face 写入 <style>，插入到 SVG 中合适的位置
+ */
+function insertFontStyle(svg, fontFaces) {
+    // 简单去重：相同 family + weight + style + unicode-range + src 只保留一条
+    const unique = [];
+    const seen = new Set();
+    for (const f of fontFaces) {
+        const key = [
+            f['font-family'],
+            f['font-weight'],
+            f['font-style'],
+            f['unicode-range'],
+            f.src,
+        ].join('|');
+        if (!seen.has(key)) {
+            seen.add(key);
+            unique.push(f);
+        }
+    }
+    if (unique.length === 0)
+        return;
+    const style = createElement('style', { type: 'text/css' });
+    style.innerHTML = unique
+        .map((f) => `
+@font-face {
+  font-family: ${f['font-family']};
+  src: ${f.src};
+  font-style: ${f['font-style']};
+  font-weight: ${f['font-weight']};
+  font-display: ${f['font-display']};
+  unicode-range: ${f['unicode-range']};
+}
+`.trim())
+        .join('\n');
+    // 尽量插在 <defs> 后面，否则插在第一个子节点前
+    const defs = svg.querySelector('defs');
+    if (defs && defs.parentNode) {
+        defs.parentNode.insertBefore(style, defs.nextSibling);
+    }
+    else {
+        svg.insertBefore(style, svg.firstChild);
+    }
+}
+/**
+ * 加载 woff2 并转为 DataURL，带缓存
+ */
+async function loadWoff2(url) {
+    const cached = fontDataUrlCache.get(url);
+    if (cached)
+        return cached;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to load font: ${url}`);
+    }
+    const blob = await response.blob();
+    const dataUrl = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+    fontDataUrlCache.set(url, dataUrl);
+    return dataUrl;
+}

package/esm/exporter/index.d.ts

@@ -0,0 +1,3 @@
+export { exportToPNGString } from './png';
+export { exportToSVGString } from './svg';
+export type { ExportOptions, PNGExportOptions, SVGExportOptions, } from './types';

package/esm/exporter/index.js

@@ -0,0 +1,2 @@
+export { exportToPNGString } from './png';
+export { exportToSVGString } from './svg';

package/esm/exporter/png.d.ts

@@ -0,0 +1,2 @@
+import { PNGExportOptions } from './types';
+export declare function exportToPNGString(svg: SVGSVGElement, options?: Omit<PNGExportOptions, 'type'>): Promise<string>;

package/esm/exporter/png.js

@@ -0,0 +1,42 @@
+import { getViewBox } from '../utils';
+import { exportToSVG } from './svg';
+export async function exportToPNGString(svg, options = {}) {
+    const { dpr = globalThis.devicePixelRatio ?? 2 } = options;
+    const node = await exportToSVG(svg);
+    const { width, height } = getViewBox(node);
+    return new Promise((resolve, reject) => {
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                reject(new Error('Failed to get canvas context'));
+                return;
+            }
+            // 应用 DPR 缩放
+            ctx.scale(dpr, dpr);
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            node.setAttribute('width', String(width));
+            node.setAttribute('height', String(height));
+            const updatedSvgData = new XMLSerializer().serializeToString(node);
+            const svgURL = 'data:image/svg+xml;charset=utf-8,' +
+                encodeURIComponent(updatedSvgData);
+            const img = new Image();
+            img.onload = function () {
+                ctx.clearRect(0, 0, width, height);
+                ctx.drawImage(img, 0, 0, width, height);
+                const pngURL = canvas.toDataURL('image/png');
+                resolve(pngURL);
+            };
+            img.onerror = function (error) {
+                reject(new Error('Image load failed: ' + error));
+            };
+            img.src = svgURL;
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+}

package/esm/exporter/svg.d.ts

@@ -0,0 +1,3 @@
+import type { SVGExportOptions } from './types';
+export declare function exportToSVGString(svg: SVGSVGElement, options?: Omit<SVGExportOptions, 'type'>): Promise<string>;
+export declare function exportToSVG(svg: SVGSVGElement, options?: Omit<SVGExportOptions, 'type'>): Promise<SVGSVGElement>;

package/esm/exporter/svg.js

@@ -0,0 +1,72 @@
+import { createElement, getViewBox, setAttributes, traverse } from '../utils';
+import { embedFonts } from './font';
+export async function exportToSVGString(svg, options = {}) {
+    const node = await exportToSVG(svg, options);
+    const str = new XMLSerializer().serializeToString(node);
+    return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
+}
+export async function exportToSVG(svg, options = {}) {
+    const { embedResources = true } = options;
+    const clonedSVG = svg.cloneNode(true);
+    const { width, height } = getViewBox(svg);
+    setAttributes(clonedSVG, { width, height });
+    await embedIcons(clonedSVG);
+    await embedFonts(clonedSVG, embedResources);
+    cleanSVG(clonedSVG);
+    return clonedSVG;
+}
+async function embedIcons(svg) {
+    const icons = svg.querySelectorAll('use');
+    const defs = getDefs(svg);
+    icons.forEach((icon) => {
+        const href = icon.getAttribute('href');
+        if (!href)
+            return;
+        const existsSymbol = svg.querySelector(href);
+        if (!existsSymbol) {
+            const symbolElement = document.querySelector(href);
+            if (symbolElement)
+                defs.appendChild(symbolElement.cloneNode(true));
+        }
+    });
+}
+function getDefs(svg) {
+    const defs = svg.querySelector('defs[id="icon-defs"]');
+    if (defs)
+        return defs;
+    const _defs = createElement('defs', { id: 'icon-defs' });
+    svg.prepend(_defs);
+    return _defs;
+}
+function cleanSVG(svg) {
+    removeBtnGroup(svg);
+    removeTransientContainer(svg);
+    removeUselessAttrs(svg);
+    clearDataset(svg);
+}
+function removeBtnGroup(svg) {
+    const btnGroup = svg.querySelector('[data-element-type=btns-group]');
+    btnGroup?.remove();
+    const btnIconDefs = svg.querySelector('#btn-icon-defs');
+    btnIconDefs?.remove();
+}
+function removeTransientContainer(svg) {
+    const transientContainer = svg.querySelector('[data-element-type=transient-container]');
+    transientContainer?.remove();
+}
+function removeUselessAttrs(svg) {
+    const groups = svg.querySelectorAll('g');
+    groups.forEach((group) => {
+        group.removeAttribute('x');
+        group.removeAttribute('y');
+        group.removeAttribute('width');
+        group.removeAttribute('height');
+    });
+}
+function clearDataset(svg) {
+    traverse(svg, (node) => {
+        for (const key in node.dataset) {
+            delete node.dataset[key];
+        }
+    });
+}

package/esm/exporter/types.d.ts

@@ -0,0 +1,17 @@
+export interface SVGExportOptions {
+    type: 'svg';
+    /**
+     * 是否将远程资源嵌入到 SVG 中
+     * @default true
+     */
+    embedResources?: boolean;
+}
+export interface PNGExportOptions {
+    type: 'png';
+    /**
+     * 设备像素比，默认为浏览器的 devicePixelRatio
+     * @default globalThis.devicePixelRatio || 2
+     */
+    dpr?: number;
+}
+export type ExportOptions = SVGExportOptions | PNGExportOptions;

package/esm/index.d.ts

@@ -10,7 +10,7 @@ export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG } from './utils';
 export type { Bounds, ComponentType, DefsProps, EllipseProps, FragmentProps, GroupProps, JSXElement, JSXElementConstructor, JSXNode, PathProps, Point, PolygonProps, RectProps, RenderableNode, SVGAttributes, SVGProps, TextProps, WithChildren, } from './jsx';
 export type { InfographicOptions, ParsedInfographicOptions } from './options';
-export type { Font, FontWeightName, GradientConfig, IRenderer, LinearGradient, Palette, PatternConfig, PatternGenerator, PatternStyle, RadialGradient, RoughConfig, StylizeConfig, TextAlignment, TextHorizontalAlign, TextVerticalAlign, } from './renderer';
+export type { GradientConfig, IRenderer, LinearGradient, Palette, PatternConfig, PatternGenerator, PatternStyle, RadialGradient, RoughConfig, StylizeConfig, TextAlignment, TextHorizontalAlign, TextVerticalAlign, } from './renderer';
 export type { ParsedTemplateOptions, TemplateOptions } from './templates';
 export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
-export type { Data, ImageResource, ItemDatum } from './types';
+export type { Data, Font, FontWeightName, ImageResource, ItemDatum, } from './types';

package/esm/renderer/composites/text.js

@@ -1,6 +1,5 @@
 import { get, kebabCase } from 'lodash-es';
-import { createTextElement, getAttributes, getDatumByIndexes, getItemIndexes, setAttributes, } from '../../utils';
-import { encodeFontFamily } from '../fonts';
+import { createTextElement, encodeFontFamily, getAttributes, getDatumByIndexes, getItemIndexes, setAttributes, } from '../../utils';
 import { parseDynamicAttributes } from '../utils';
 export function renderText(node, text, attrs = {}) {
     if (!text)
@@ -12,7 +11,6 @@ export function renderText(node, text, attrs = {}) {
     for (const key in textElement.dataset) {
         renderedText.setAttribute(`data-${kebabCase(key)}`, textElement.dataset[key]);
     }
-    renderedText.setAttribute('id', node.getAttribute('id'));
     return renderedText;
 }
 export function renderItemText(type, node, options) {

package/esm/renderer/fonts/built-in.d.ts

@@ -1,2 +1,2 @@
-import { Font } from './types';
+import type { Font } from '../../types';
 export declare const BUILT_IN_FONTS: Font[];

package/esm/renderer/fonts/index.d.ts

@@ -1,4 +1,2 @@
 export { getFontURLs, getWoff2BaseURL, loadFont, loadFonts } from './loader';
 export { DEFAULT_FONT, getFont, getFonts, registerFont, setDefaultFont, } from './registry';
-export type * from './types';
-export { decodeFontFamily, encodeFontFamily } from './utils';

package/esm/renderer/fonts/index.js

@@ -1,6 +1,5 @@
 export { getFontURLs, getWoff2BaseURL, loadFont, loadFonts } from './loader';
 export { DEFAULT_FONT, getFont, getFonts, registerFont, setDefaultFont, } from './registry';
-export { decodeFontFamily, encodeFontFamily } from './utils';
 import { BUILT_IN_FONTS } from './built-in';
 import { registerFont } from './registry';
 BUILT_IN_FONTS.forEach(registerFont);

package/esm/renderer/fonts/loader.js

@@ -1,6 +1,5 @@
-import { join } from '../../utils';
+import { join, normalizeFontWeightName } from '../../utils';
 import { getFont, getFonts } from './registry';
-import { normalizeFontWeightName } from './utils';
 export function getFontURLs(font) {
     const config = getFont(font);
     if (!config)

package/esm/renderer/fonts/registry.d.ts

@@ -1,4 +1,4 @@
-import type { Font } from './types';
+import type { Font } from '../../types';
 export declare let DEFAULT_FONT: string;
 export declare function getFont(font: string): Font | null;
 export declare function getFonts(): Font[];

package/esm/renderer/fonts/registry.js

@@ -1,4 +1,4 @@
-import { decodeFontFamily, encodeFontFamily } from './utils';
+import { decodeFontFamily, encodeFontFamily } from '../../utils';
 const FONT_REGISTRY = new Map();
 export let DEFAULT_FONT = 'Alibaba PuHuiTi';
 export function getFont(font) {

package/esm/renderer/renderer.js

@@ -1,4 +1,4 @@
-import { getDatumByIndexes, getItemIndexes, getSizeBaseVal, isBtnsGroup, isDesc, isGroup, isIllus, isItemDesc, isItemIcon, isItemIllus, isItemLabel, isItemValue, isShape, isShapesGroup, isText, isTitle, parsePadding, setAttributes, } from '../utils';
+import { getDatumByIndexes, getItemIndexes, isBtnsGroup, isDesc, isGroup, isIllus, isItemDesc, isItemIcon, isItemIllus, isItemLabel, isItemValue, isShape, isShapesGroup, isText, isTitle, parsePadding, setAttributes, setSVGPadding, } from '../utils';
 import { renderBackground, renderBaseElement, renderButtonsGroup, renderIllus, renderItemIcon, renderItemText, renderShape, renderStaticShape, renderStaticText, renderText, } from './composites';
 import { loadFonts } from './fonts';
 const upsert = (original, modified) => {
@@ -134,52 +134,3 @@ function setView(svg, options) {
         setSVGPadding(svg, parsePadding(padding));
     }
 }
-function setSVGPadding(svg, padding, options = {}) {
-    const { preserveAspectRatio = false } = options;
-    if (!svg.isConnected)
-        return false;
-    try {
-        const bbox = svg.getBBox();
-        // 检查包围盒是否有效
-        if (bbox.width === 0 || bbox.height === 0) {
-            return false;
-        }
-        const [widthBaseVal, heightBaseVal] = getSizeBaseVal(svg);
-        const svgWidth = widthBaseVal || svg.clientWidth || 0;
-        const svgHeight = heightBaseVal || svg.clientHeight || 0;
-        const parentElement = svg.parentElement;
-        const effectiveWidth = svgWidth || (parentElement ? parentElement.clientWidth : 300);
-        const effectiveHeight = svgHeight || (parentElement ? parentElement.clientHeight : 150);
-        let viewBoxPadding;
-        if (effectiveWidth > 0 && effectiveHeight > 0) {
-            const scaleX = bbox.width / effectiveWidth;
-            const scaleY = bbox.height / effectiveHeight;
-            if (preserveAspectRatio) {
-                const scale = Math.max(scaleX, scaleY);
-                viewBoxPadding = padding.map((p) => p * scale);
-            }
-            else {
-                viewBoxPadding = [
-                    padding[0] * scaleY,
-                    padding[1] * scaleX,
-                    padding[2] * scaleY,
-                    padding[3] * scaleX,
-                ];
-            }
-        }
-        else {
-            viewBoxPadding = [...padding];
-        }
-        const newViewBox = [
-            bbox.x - viewBoxPadding[3],
-            bbox.y - viewBoxPadding[0],
-            bbox.width + viewBoxPadding[1] + viewBoxPadding[3],
-            bbox.height + viewBoxPadding[0] + viewBoxPadding[2],
-        ].join(' ');
-        svg.setAttribute('viewBox', newViewBox);
-        return true;
-    }
-    catch {
-        return false;
-    }
-}

package/esm/resource/utils/ref.js

@@ -4,7 +4,7 @@ export function getResourceId(config) {
     const cfg = typeof config === 'string' ? parseDataURI(config) : config;
     if (!cfg)
         return null;
-    return getSimpleHash(JSON.stringify(cfg));
+    return 'rsc-' + getSimpleHash(JSON.stringify(cfg));
 }
 export function getResourceHref(config) {
     const id = getResourceId(config);

package/esm/runtime/Infographic.d.ts

@@ -1,6 +1,8 @@
+import { ExportOptions } from '../exporter';
 import { InfographicOptions } from '../options';
 export declare class Infographic {
     private options;
+    private node;
     private parsedOptions;
     constructor(options: InfographicOptions);
     /**
@@ -12,4 +14,12 @@ export declare class Infographic {
      */
     compose(): SVGSVGElement;
     getTypes(): string;
+    /**
+     * Export the infographic to data URL
+     * @param options Export option
+     * @returns Data URL string of the exported infographic
+     * @description This method need to be called after `render()` and in a browser environment.
+     */
+    toDataURL(options?: ExportOptions): Promise<string>;
+    destroy(): void;
 }

package/esm/runtime/Infographic.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@antv/infographic/jsx-runtime";
+import { exportToPNGString, exportToSVGString, } from '../exporter';
 import { renderSVG } from '../jsx';
 import { parseOptions, } from '../options';
 import { Renderer } from '../renderer';
@@ -6,6 +7,7 @@ import { getTypes, parseSVG } from '../utils';
 export class Infographic {
     constructor(options) {
         this.options = options;
+        this.node = null;
         this.parsedOptions = parseOptions(this.options);
     }
     /**
@@ -15,8 +17,8 @@ export class Infographic {
         const { container } = this.parsedOptions;
         const template = this.compose();
         const renderer = new Renderer(this.parsedOptions, template);
-        const infographic = renderer.render();
-        container.replaceChildren(infographic);
+        this.node = renderer.render();
+        container.replaceChildren(this.node);
     }
     /**
      * Compose the SVG template
@@ -41,4 +43,23 @@ export class Infographic {
         const items = design.items.map((it) => it.composites || []);
         return getTypes({ structure, items });
     }
+    /**
+     * Export the infographic to data URL
+     * @param options Export option
+     * @returns Data URL string of the exported infographic
+     * @description This method need to be called after `render()` and in a browser environment.
+     */
+    async toDataURL(options) {
+        if (!this.node) {
+            throw new Error('Infographic is not rendered yet.');
+        }
+        if (options?.type === 'svg') {
+            return await exportToSVGString(this.node, options);
+        }
+        return await exportToPNGString(this.node, options);
+    }
+    destroy() {
+        this.node?.remove();
+        this.node = null;
+    }
 }

package/esm/types/font.js

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

package/esm/types/index.d.ts

@@ -1,5 +1,6 @@
 export type * from './attrs';
 export type * from './data';
 export type * from './element';
+export type * from './font';
 export type * from './padding';
 export type * from './resource';

package/{lib/renderer/fonts/utils.d.ts → esm/utils/font.d.ts}

@@ -1,4 +1,4 @@
-import type { FontWeightName } from './types';
+import type { FontWeightName } from '../types';
 export declare function decodeFontFamily(font: string): string;
 export declare function encodeFontFamily(font: string): string;
 export declare function normalizeFontWeightName(fontWeight: string | number): FontWeightName;

package/esm/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './color';
 export * from './data';
+export * from './font';
 export * from './get-types';
 export * from './icon';
 export * from './item';
@@ -9,3 +10,4 @@ export * from './recognizer';
 export * from './svg';
 export * from './text';
 export * from './uuid';
+export * from './viewbox';