@antv/infographic 0.0.1-beta.1

package/esm/options/types.d.ts

@@ -0,0 +1,45 @@
+import { DesignOptions, ParsedDesignsOptions } from '../designs';
+import { ThemeConfig } from '../themes';
+import type { Data, Padding } from '../types';
+export interface InfographicOptions {
+    /** 容器，可以是选择器或者 HTMLElement */
+    container?: string | HTMLElement;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 容器内边距 */
+    padding?: Padding;
+    /** 模板 */
+    template?: string;
+    /** 设计 */
+    design?: DesignOptions;
+    /** 数据 */
+    data: Data;
+    /** 主题 */
+    theme?: string;
+    /** 额外主题配置 */
+    themeConfig?: ThemeConfig;
+    /** svg 容器上的配置 */
+    svg?: SVGOptions;
+}
+export interface ParsedInfographicOptions {
+    container: HTMLElement;
+    width?: number;
+    height?: number;
+    padding?: Padding;
+    viewBox?: string;
+    template?: string;
+    design: ParsedDesignsOptions;
+    data: Data;
+    theme?: string;
+    themeConfig: ThemeConfig;
+    svg?: SVGOptions;
+}
+interface SVGOptions {
+    style?: Record<string, string | number>;
+    attributes?: Record<string, string | number | boolean>;
+    id?: string;
+    className?: string;
+}
+export {};

package/esm/options/types.js

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

package/esm/renderer/composites/background.d.ts

@@ -0,0 +1 @@
+export declare function renderBackground(svg: SVGSVGElement, background?: string): void;

package/esm/renderer/composites/background.js

@@ -0,0 +1,26 @@
+import { createElement } from '../../utils';
+export function renderBackground(svg, background) {
+    const container = svg.parentElement;
+    if (container)
+        container.style.backgroundColor = background || 'none';
+    const element = svg.querySelector('#background');
+    if (!background) {
+        return element?.remove();
+    }
+    svg.style.backgroundColor = background;
+    if (element) {
+        element.setAttribute('fill', background);
+    }
+    else if (svg.viewBox?.baseVal) {
+        const { x, y, width, height } = svg.viewBox.baseVal;
+        const rect = createElement('rect', {
+            x,
+            y,
+            width,
+            height,
+            fill: background,
+            'data-element-type': "background" /* ElementTypeEnum.Background */,
+        });
+        svg.prepend(rect);
+    }
+}

package/esm/renderer/composites/button.d.ts

@@ -0,0 +1 @@
+export declare function renderButtonsGroup(svg: SVGSVGElement, group: SVGGElement): void;

package/esm/renderer/composites/button.js

@@ -0,0 +1,68 @@
+import { createElement, getAttributes, parseSVG, setAttributes, } from '../../utils';
+const ADD_ICON_ID = 'btn-add-icon';
+const REMOVE_ICON_ID = 'btn-remove-icon';
+export function renderButtonsGroup(svg, group) {
+    setAttributes(group, { display: 'none' });
+    const addBtns = group.querySelectorAll('[id^="btn-add-"]');
+    const removeBtns = group.querySelectorAll('[id^="btn-remove-"]');
+    defineButtonIcon(svg);
+    addBtns.forEach(renderAddButton);
+    removeBtns.forEach(renderRemoveButton);
+}
+function defineButtonIcon(svg) {
+    const defs = createElement('defs', { id: 'btn-icon-defs' });
+    const addIconSymbol = parseSVG(`<symbol class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path
+    d="M512 1024C229.216 1024 0 794.784 0 512S229.216 0 512 0s512 229.216 512 512-229.216 512-512 512z m0-960C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m192 480h-160v160a32 32 0 0 1-64 0v-160h-160a32 32 0 0 1 0-64h160v-160a32 32 0 0 1 64 0v160h160a32 32 0 0 1 0 64z"
+    fill="#339900"></path>
+</symbol>`);
+    if (addIconSymbol) {
+        addIconSymbol.setAttribute('id', ADD_ICON_ID);
+        defs.appendChild(addIconSymbol);
+    }
+    const removeIconSymbol = parseSVG(`<symbol viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M874.971429 149.942857C776.228571 54.857143 648.228571 0 512.914286 0S245.942857 54.857143 150.857143 149.942857c-201.142857 201.142857-201.142857 522.971429 0 724.114286C245.942857 969.142857 377.6 1024 512.914286 1024s266.971429-54.857143 362.057143-149.942857c201.142857-201.142857 201.142857-522.971429 0-724.114286m-51.2 672.914286C739.657143 906.971429 629.942857 950.857143 512.914286 950.857143s-226.742857-43.885714-310.857143-128c-171.885714-171.885714-171.885714-449.828571 0-621.714286C286.171429 117.028571 395.885714 73.142857 512.914286 73.142857s226.742857 43.885714 310.857143 128c171.885714 171.885714 171.885714 449.828571 0 621.714286" fill="#E63C33"></path>
+  <path d="M772.571429 475.428571H253.257143c-21.942857 0-36.571429 14.628571-36.571429 36.571429 0 10.971429 3.657143 18.285714 10.971429 25.6s14.628571 10.971429 25.6 10.971429H768.914286c21.942857 0 36.571429-14.628571 36.571428-36.571429s-14.628571-36.571429-32.914285-36.571429" fill="#E63C33"></path>
+</symbol>`);
+    if (removeIconSymbol) {
+        removeIconSymbol.setAttribute('id', REMOVE_ICON_ID);
+        defs.appendChild(removeIconSymbol);
+    }
+    svg.prepend(defs);
+}
+function renderButtonIcon(node, name) {
+    const { id, x = 0, y = 0, width = 0, height = 0, } = getAttributes(node, ['id', 'x', 'y', 'width', 'height']);
+    const group = createElement('g', {
+        id,
+        class: 'btn-group',
+        transform: `translate(${x}, ${y})`,
+        'data-element-type': "button" /* ElementTypeEnum.Button */,
+    });
+    const dataItems = node.getAttribute('data-items');
+    if (dataItems) {
+        group.setAttribute('data-items', dataItems);
+    }
+    const r = Math.max(+width, +height) / 2;
+    const bkg = createElement('circle', {
+        cx: r,
+        cy: r,
+        r,
+        fill: '#fff',
+        stroke: 'transparent',
+    });
+    group.appendChild(bkg);
+    const icon = createElement('use', {
+        href: `#${name}`,
+        width,
+        height,
+    });
+    group.appendChild(icon);
+    group.style.cursor = 'pointer';
+    node.replaceWith(group);
+}
+function renderAddButton(node) {
+    renderButtonIcon(node, ADD_ICON_ID);
+}
+function renderRemoveButton(node) {
+    renderButtonIcon(node, REMOVE_ICON_ID);
+}

package/esm/renderer/composites/icon.d.ts

@@ -0,0 +1,6 @@
+import { ParsedInfographicOptions } from '../../options';
+import { ResourceConfig } from '../../resource';
+import type { DynamicAttributes } from '../../themes';
+import type { IconAttributes, IconElement } from '../../types';
+export declare function renderIcon(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, attrs?: DynamicAttributes<IconAttributes>): IconElement | null;
+export declare function renderItemIcon(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, options: ParsedInfographicOptions, color?: string): SVGUseElement | null;

package/esm/renderer/composites/icon.js

@@ -0,0 +1,37 @@
+import { loadResource } from '../../resource';
+import { createIconElement, getAttributes } from '../../utils';
+import { parseDynamicAttributes } from '../utils';
+export function renderIcon(svg, node, value, attrs = {}) {
+    if (!value)
+        return null;
+    const parsedAttrs = parseDynamicAttributes(node, attrs);
+    return createIcon(svg, node, value, parsedAttrs);
+}
+export function renderItemIcon(svg, node, value, options, color) {
+    if (!value)
+        return null;
+    const { themeConfig } = options;
+    const attrs = {
+        ...themeConfig.item?.icon,
+    };
+    const coloredArea = options.design.item?.options?.coloredArea || [];
+    const primaryColor = coloredArea.includes('icon') ? color : undefined;
+    const parsedAttrs = parseDynamicAttributes(node, attrs, primaryColor);
+    return createIcon(svg, node, value, parsedAttrs);
+}
+function createIcon(svg, node, value, attrs) {
+    // load async
+    loadResource(svg, value);
+    return createIconElement(value, {
+        ...getAttributes(node, [
+            'id',
+            'x',
+            'y',
+            'width',
+            'height',
+            'fill',
+            'stroke',
+        ]),
+        ...attrs,
+    });
+}

package/esm/renderer/composites/illus.d.ts

@@ -0,0 +1,3 @@
+import { type ResourceConfig } from '../../resource';
+import type { IllusElement } from '../../types';
+export declare function renderIllus(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined): IllusElement | null;

package/esm/renderer/composites/illus.js

@@ -0,0 +1,79 @@
+import { getResourceHref, getResourceId, loadResource, parseResourceConfig, } from '../../resource';
+import { createElement, getAttributes, getOrCreateDefs, removeAttributes, uuid, } from '../../utils';
+export function renderIllus(svg, node, value) {
+    if (!value)
+        return null;
+    const config = parseResourceConfig(value);
+    if (!config)
+        return null;
+    const id = getResourceId(config);
+    const clipPathId = createClipPath(svg, node, id);
+    loadResource(svg, config);
+    const { data, color } = config;
+    return createIllusElement(id, {
+        ...parseIllusBounds(node),
+        'clip-path': `url(#${clipPathId})`,
+        ...(color ? { color } : {}),
+    }, data);
+}
+function createClipPath(svg, node, id) {
+    const clipPathId = `clip-${id}-${uuid()}`;
+    if (svg.querySelector(`#${clipPathId}`)) {
+        return clipPathId;
+    }
+    const defs = getOrCreateDefs(svg);
+    const clipPath = createElement('clipPath', {
+        id: clipPathId,
+    });
+    const clonedNode = node.cloneNode();
+    removeAttributes(clonedNode, [
+        'id',
+        'data-illus-bounds',
+        'data-element-type',
+    ]);
+    clipPath.appendChild(clonedNode);
+    defs.appendChild(clipPath);
+    return clipPathId;
+}
+function createIllusElement(id, attrs, value) {
+    const { 'clip-path': clipPath, ...restAttrs } = attrs;
+    const { x = '0', y = '0', width = '0', height = '0' } = restAttrs;
+    const bounds = createElement('rect', {
+        id: `${id}-volume`,
+        'data-element-type': "illus-volume" /* ElementTypeEnum.IllusVolume */,
+        x,
+        y,
+        width,
+        height,
+        fill: 'transparent',
+    });
+    const g = createElement('g', {
+        'data-element-type': "illus-group" /* ElementTypeEnum.IllusGroup */,
+        'clip-path': clipPath,
+        id: `${id}-group`,
+    });
+    g.appendChild(bounds);
+    const use = createElement('use', {
+        id,
+        fill: 'lightgray',
+        ...restAttrs,
+        href: getResourceHref(value),
+        'data-element-type': "illus" /* ElementTypeEnum.Illus */,
+    });
+    g.appendChild(use);
+    return g;
+}
+function parseIllusBounds(node) {
+    const dataIllusBounds = node.getAttribute('data-illus-bounds');
+    if (!dataIllusBounds) {
+        return {
+            x: '0',
+            y: '0',
+            width: '0',
+            height: '0',
+            ...getAttributes(node, ['x', 'y', 'width', 'height']),
+        };
+    }
+    const [x, y, width, height] = dataIllusBounds.split(' ');
+    return { x, y, width, height };
+}

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

@@ -0,0 +1,7 @@
+export { renderBackground } from './background';
+export { renderButtonsGroup } from './button';
+export { renderIcon, renderItemIcon } from './icon';
+export { renderIllus } from './illus';
+export { renderItemShape, renderShape, renderStaticShape } from './shape';
+export { renderSVG } from './svg';
+export { renderItemText, renderStaticText, renderText } from './text';

package/esm/renderer/composites/index.js

@@ -0,0 +1,7 @@
+export { renderBackground } from './background';
+export { renderButtonsGroup } from './button';
+export { renderIcon, renderItemIcon } from './icon';
+export { renderIllus } from './illus';
+export { renderItemShape, renderShape, renderStaticShape } from './shape';
+export { renderSVG } from './svg';
+export { renderItemText, renderStaticText, renderText } from './text';

package/esm/renderer/composites/shape.d.ts

@@ -0,0 +1,4 @@
+import type { ParsedInfographicOptions } from '../../options';
+export declare function renderShape(svg: SVGSVGElement, node: SVGElement, options: ParsedInfographicOptions): SVGElement | null;
+export declare function renderItemShape(svg: SVGSVGElement, node: SVGElement, options: ParsedInfographicOptions, color?: string): SVGElement;
+export declare function renderStaticShape(node: SVGElement, options: ParsedInfographicOptions): void;

package/esm/renderer/composites/shape.js

@@ -0,0 +1,45 @@
+import { getAttributes, hasColor, setAttributes } from '../../utils';
+import { applyGradientStyle, applyPatternStyle, applyRoughStyle, } from '../stylize';
+import { parseDynamicAttributes } from '../utils';
+export function renderShape(svg, node, options) {
+    const { themeConfig } = options;
+    const attrs = Object.assign({}, themeConfig.base?.shape, themeConfig.shape);
+    const parsedAttrs = parseDynamicAttributes(node, attrs);
+    setAttributes(node, parsedAttrs);
+    stylizeShape(node, svg, themeConfig.stylize);
+    return node;
+}
+export function renderItemShape(svg, node, options, color) {
+    const { themeConfig } = options;
+    const attrs = Object.assign({}, themeConfig.base?.shape, themeConfig.item?.shape);
+    const parsedAttrs = parseDynamicAttributes(node, attrs, color);
+    setAttributes(node, parsedAttrs);
+    stylizeShape(node, svg, themeConfig.stylize);
+    return node;
+}
+export function renderStaticShape(node, options) {
+    setAttributes(node, options.themeConfig.base?.shape || {});
+}
+function stylizeShape(node, svg, config) {
+    if (!config)
+        return node;
+    const { type } = config;
+    if (!type)
+        return node;
+    if (type === 'rough') {
+        return applyRoughStyle(node, svg, config);
+    }
+    if (type === 'pattern') {
+        return applyPatternStyle(node, svg, config);
+    }
+    if (type === 'linear-gradient' || type === 'radial-gradient') {
+        const { fill, stroke } = getAttributes(node, ['fill', 'stroke']);
+        if (hasColor(fill)) {
+            applyGradientStyle(node, svg, config, 'fill');
+        }
+        if (hasColor(stroke)) {
+            applyGradientStyle(node, svg, config, 'stroke');
+        }
+        return;
+    }
+}

package/esm/renderer/composites/svg.d.ts

@@ -0,0 +1,2 @@
+import type { ParsedInfographicOptions } from '../../options';
+export declare function renderSVG(svg: SVGSVGElement, options: ParsedInfographicOptions): void;

package/esm/renderer/composites/svg.js

@@ -0,0 +1,6 @@
+import { DEFAULT_FONT } from '../fonts';
+export function renderSVG(svg, options) {
+    const { themeConfig } = options;
+    const { 'font-family': fontFamily = DEFAULT_FONT } = themeConfig.base?.text || {};
+    svg.setAttribute('font-family', fontFamily);
+}

package/esm/renderer/composites/text.d.ts

@@ -0,0 +1,6 @@
+import { ParsedInfographicOptions } from '../../options';
+import type { DynamicAttributes } from '../../themes';
+import type { TextAttributes } from '../../types';
+export declare function renderText(node: SVGElement, text: string, attrs?: DynamicAttributes<TextAttributes>): SVGElement | null;
+export declare function renderItemText(type: 'label' | 'desc' | 'value', node: SVGElement, options: ParsedInfographicOptions, color?: string): SVGElement | null;
+export declare function renderStaticText(text: SVGTextElement, options: ParsedInfographicOptions): void;

package/esm/renderer/composites/text.js

@@ -0,0 +1,102 @@
+import { get, kebabCase } from 'lodash-es';
+import { createTextElement, getAttributes, getDatumByIndexes, getItemIndexes, setAttributes, } from '../../utils';
+import { parseDynamicAttributes } from '../utils';
+export function renderText(node, text, attrs = {}) {
+    if (!text)
+        return null;
+    let x = 0;
+    let y = 0;
+    let width = 0;
+    let height = 0;
+    let textContent = '';
+    let textElement = null;
+    const normalizer = (defaultValue = 0) => (value) => value ? parseFloat(value) : defaultValue;
+    const normalizePos = normalizer();
+    const normalizeWidth = normalizer(800);
+    const normalizeHeight = normalizer(50);
+    if (node.nodeName === 'text') {
+        x = normalizePos(node.getAttribute('x'));
+        y = normalizePos(node.getAttribute('y'));
+        width = normalizeWidth(node.getAttribute('width'));
+        height = normalizeHeight(node.getAttribute('height'));
+        textContent = text;
+        textElement = node;
+    }
+    else {
+        const bounds = node.querySelector(`#${node.id}-bounds`);
+        const character = node.querySelector(`#${node.id}-text`);
+        if (character)
+            textElement = character;
+        const target = bounds || character || node;
+        x = normalizePos(target.getAttribute('x'));
+        y = normalizePos(target.getAttribute('y'));
+        width = normalizeWidth(target.getAttribute('width'));
+        height = normalizeHeight(target.getAttribute('height'));
+        textContent = text;
+    }
+    if (!textElement)
+        return null;
+    const staticAttrs = parseDynamicAttributes(textElement, attrs);
+    setAttributes(textElement, staticAttrs);
+    const renderedText = layoutText(textContent, textElement, {
+        x,
+        y,
+        width,
+        height,
+    });
+    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, color) {
+    const textShape = node.nodeName === 'text'
+        ? node
+        : node.querySelector(`#${node.id}-text`);
+    if (!textShape)
+        return null;
+    const { data, themeConfig, design } = options;
+    const coloredArea = design.item?.options?.coloredArea || [];
+    const indexes = getItemIndexes(node.id);
+    const text = String(get(getDatumByIndexes(data, indexes), type, ''));
+    const attrs = Object.assign({}, themeConfig.base?.text, themeConfig.item?.[type]);
+    const assignPaletteColor = coloredArea.includes(type) ? color : undefined;
+    const staticAttrs = parseDynamicAttributes(textShape, attrs, assignPaletteColor);
+    return renderText(node, node.textContent || text, staticAttrs);
+}
+export function renderStaticText(text, options) {
+    setAttributes(text, options.themeConfig.base?.text || {});
+    text.style.userSelect = 'none';
+    text.style.pointerEvents = 'none';
+}
+function layoutText(textContent, text, bounds) {
+    const { x, y, width, height } = bounds;
+    const attributes = getTextAttributes(text);
+    Object.assign(attributes, {
+        x,
+        y,
+        width,
+        height,
+        'text-alignment': get(text, 'dataset.textAlignment', 'CENTER CENTER'),
+    });
+    const element = createTextElement(textContent, attributes);
+    return element;
+}
+function getTextAttributes(textElement) {
+    const attrs = getAttributes(textElement, [
+        'font-family',
+        'font-size',
+        'font-weight',
+        'font-style',
+        'font-variant',
+        'letter-spacing',
+        'line-height',
+        'fill',
+        'stroke',
+        'stroke-width',
+        'text-anchor',
+        'dominant-baseline',
+    ]);
+    return attrs;
+}

package/esm/renderer/constants/data-url.d.ts

@@ -0,0 +1,5 @@
+export declare const enum DataURITypeEnum {
+    Image = "image",
+    SVG = "svg",
+    Remote = "remote"
+}

package/esm/renderer/constants/data-url.js

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

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

@@ -0,0 +1,2 @@
+export * from './data-url';
+export * from '../../constants/element';

package/esm/renderer/constants/index.js

@@ -0,0 +1,2 @@
+export * from './data-url';
+export * from '../../constants/element';

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

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

package/esm/renderer/fonts/built-in.js

@@ -0,0 +1,37 @@
+const BASE_FONT_URL = 'https://assets.antv.antgroup.com';
+const getUrl = (name) => `${name}/result.css`;
+export const BUILT_IN_FONTS = [
+    {
+        fontFamily: 'Alibaba PuHuiTi',
+        name: '阿里巴巴普惠体',
+        baseUrl: BASE_FONT_URL,
+        fontWeight: {
+            regular: getUrl('AlibabaPuHuiTi-Regular'),
+            bold: getUrl('AlibabaPuHuiTi-Bold'),
+        },
+    },
+    {
+        fontFamily: 'Source Han Sans',
+        name: '黑体',
+        baseUrl: BASE_FONT_URL,
+        fontWeight: { regular: getUrl('SourceHanSansCN-Regular') },
+    },
+    {
+        fontFamily: 'Source Han Serif',
+        name: '宋体',
+        baseUrl: BASE_FONT_URL,
+        fontWeight: { regular: getUrl('SourceHanSerifCN-Regular') },
+    },
+    {
+        fontFamily: 'LXGW WenKai',
+        name: '楷体',
+        baseUrl: BASE_FONT_URL,
+        fontWeight: { regular: getUrl('LXGWWenKai-Regular') },
+    },
+    {
+        fontFamily: '851tegakizatsu',
+        name: '手写体',
+        baseUrl: BASE_FONT_URL,
+        fontWeight: { regular: getUrl('851tegakizatsu-Regular') },
+    },
+];

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,6 @@
+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.d.ts

@@ -0,0 +1,4 @@
+export declare function getFontURLs(font: string): string[];
+export declare function getWoff2BaseURL(font: string, fontWeightName: string): string | null;
+export declare function loadFont(svg: SVGSVGElement, font: string): void;
+export declare function loadFonts(svg: SVGSVGElement): void;

package/esm/renderer/fonts/loader.js

@@ -0,0 +1,54 @@
+import { join } from '../../utils';
+import { getFont, getFonts } from './registry';
+import { normalizeFontWeightName } from './utils';
+export function getFontURLs(font) {
+    const config = getFont(font);
+    if (!config)
+        return [];
+    const { baseUrl, fontWeight } = config;
+    return Object.values(fontWeight)
+        .filter(Boolean)
+        .map((url) => join(baseUrl, url));
+}
+export function getWoff2BaseURL(font, fontWeightName) {
+    const config = getFont(font);
+    if (!config)
+        return null;
+    const name = normalizeFontWeightName(fontWeightName);
+    const path = config.fontWeight[name];
+    if (!path)
+        return null;
+    return join(config.baseUrl, path.replace(/\/result.css$/, ''));
+}
+const FONT_LOAD_MAP = new WeakMap();
+export function loadFont(svg, font) {
+    const doc = svg.ownerDocument;
+    const target = doc?.head || document.head;
+    if (!target)
+        return;
+    if (!FONT_LOAD_MAP.has(target))
+        FONT_LOAD_MAP.set(target, new Map());
+    const map = FONT_LOAD_MAP.get(target);
+    const links = [];
+    const urls = getFontURLs(font);
+    urls.forEach((url) => {
+        const id = `${font}-${url}`;
+        if (map.has(id))
+            return;
+        const link = doc.createElement('link');
+        link.id = id;
+        link.rel = 'stylesheet';
+        link.href = url;
+        links.push(link);
+        map.set(id, link);
+    });
+    if (!links.length)
+        return;
+    if (target.tagName === 'HEAD') {
+        links.forEach((link) => target.appendChild(link));
+    }
+}
+export function loadFonts(svg) {
+    const fonts = getFonts();
+    fonts.forEach((font) => loadFont(svg, font.fontFamily));
+}

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

@@ -0,0 +1,24 @@
+import type { Font } from './types';
+export declare let DEFAULT_FONT: string;
+export declare function getFont(font: string): Font | null;
+export declare function getFonts(): Font[];
+export declare function setDefaultFont(font: string): void;
+/**
+ * 注册自定义字体
+ * @param font - 字体配置
+ * @returns 注册后的字体配置
+ * @example
+ * ```js
+ * registerFont({
+ *  font: 'Alibaba PuHuiTi',
+ *  name: '阿里巴巴普惠体',
+ *  url: {
+ *    regular: 'https://assets.antv.antgroup.com/AlibabaPuHuiTi-Regular/result.css'
+ *  }
+ *})
+ * ```
+ * @description
+ * 字体准备说明：https://chinese-font.netlify.app/zh-cn/post/simple_tutorial
+ */
+export declare function registerFont(font: Font): Font;
+export declare function unregisterFont(font: string): Font | null;