@antv/infographic 0.2.7 → 0.2.9

package/esm/renderer/composites/illus.js

@@ -1,24 +1,29 @@
 import { getResourceHref, getResourceId, loadResource, parseResourceConfig, } from '../../resource';
-import { createElement, getAttributes, getOrCreateDefs, removeAttributes, uuid, } from '../../utils';
-export function renderIllus(svg, node, value, datum) {
+import { createElement, getAttributes, getOrCreateDefs, removeAttributes, setAttributes, uuid, } from '../../utils';
+export function renderIllus(svg, node, value, datum, attrs = {}) {
     if (!value)
         return null;
     const config = parseResourceConfig(value);
     if (!config)
         return null;
     const id = getResourceId(config);
+    if (attrs && Object.keys(attrs).length > 0) {
+        setAttributes(node, attrs);
+    }
     const clipPathId = createClipPath(svg, node, id);
     loadResource(svg, 'illus', config, datum);
     const { data, color } = config;
     return createIllusElement(id, {
         ...parseIllusBounds(node),
-        'clip-path': `url(#${clipPathId})`,
         ...(color ? { color } : {}),
+        ...attrs,
+        'clip-path': `url(#${clipPathId})`,
     }, data);
 }
 export function renderItemIllus(svg, node, datum) {
     const value = datum.illus;
-    return renderIllus(svg, node, value, datum);
+    const attrs = datum.attributes?.illus;
+    return renderIllus(svg, node, value, datum, attrs);
 }
 function createClipPath(svg, node, id) {
     const clipPathId = `clip-${id}-${uuid()}`;

package/esm/renderer/composites/text.js

@@ -19,8 +19,10 @@ export function renderItemText(type, node, options) {
         return null;
     const { data, themeConfig } = options;
     const indexes = getItemIndexes(node.dataset.indexes || '0');
-    const text = String(get(getDatumByIndexes(data, indexes), type, ''));
-    const attrs = Object.assign({}, themeConfig.base?.text, themeConfig.item?.[type]);
+    const datum = getDatumByIndexes(data, indexes);
+    const text = String(get(datum, type, ''));
+    const dataAttrs = datum?.attributes?.[type];
+    const attrs = Object.assign({}, themeConfig.base?.text, themeConfig.item?.[type], dataAttrs);
     const staticAttrs = parseDynamicAttributes(textShape, attrs);
     return renderText(node, node.textContent || text, staticAttrs);
 }

package/esm/renderer/fonts/loader.js

@@ -1,5 +1,5 @@
 import { getSvgLoadPromise, trackSvgLoadPromise, } from '../../resource/load-tracker';
-import { join, normalizeFontWeightName, splitFontFamily } from '../../utils';
+import { isNode, join, normalizeFontWeightName, splitFontFamily, } from '../../utils';
 import { getFont, getFonts } from './registry';
 export function getFontURLs(font) {
     const urls = splitFontFamily(font).flatMap((family) => {
@@ -112,6 +112,8 @@ export function loadFont(svg, font) {
     }
 }
 export function loadFonts(svg) {
+    if (isNode)
+        return;
     const fonts = getFonts();
     fonts.forEach((font) => loadFont(svg, font.fontFamily));
 }

package/esm/renderer/fonts/registry.js

@@ -1,4 +1,4 @@
-import { decodeFontFamily, encodeFontFamily, splitFontFamily, } from '../../utils';
+import { decodeFontFamily, encodeFontFamily, splitFontFamily, } from '../../utils/font';
 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, isBtnsGroup, isDesc, isGroup, isIllus, isItemDesc, isItemIcon, isItemIllus, isItemLabel, isItemValue, isShape, isShapesGroup, isText, isTitle, parsePadding, setAttributes, setSVGPadding, } from '../utils';
+import { getDatumByIndexes, getItemIndexes, isBtnsGroup, isDesc, isGroup, isIllus, isItemDesc, isItemIcon, isItemIllus, isItemLabel, isItemValue, isNode, isShape, isShapesGroup, isText, isTitle, parsePadding, setAttributes, setSVGPadding, } from '../utils';
 import { renderBackground, renderBaseElement, renderButtonsGroup, renderIllus, renderItemIcon, renderItemIllus, renderItemText, renderShape, renderStaticShape, renderStaticText, renderSVG, renderText, } from './composites';
 import { loadFonts } from './fonts';
 const upsert = (original, modified) => {
@@ -30,30 +30,33 @@ export class Renderer {
         const postRender = () => {
             setView(this.template, this.options);
             loadFonts(this.template);
-            svg.style.visibility = '';
+            svg.style.removeProperty('visibility');
         };
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                mutation.addedNodes.forEach((node) => {
-                    if (node === svg || node.contains(svg)) {
-                        // post render
-                        postRender();
-                        // disconnect observer
-                        observer.disconnect();
-                    }
+        if (isNode) {
+            postRender();
+        }
+        else {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node === svg || node.contains(svg)) {
+                            postRender();
+                            observer.disconnect();
+                        }
+                    });
                 });
             });
-        });
-        try {
-            observer.observe(document, {
-                childList: true,
-                subtree: true,
-            });
-        }
-        catch (error) {
-            // Fallback for micro-app environments that proxy document.
-            postRender();
-            console.error(error);
+            try {
+                observer.observe(document, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+            catch (error) {
+                // Fallback for micro-app environments that proxy document.
+                postRender();
+                console.error(error);
+            }
         }
         this.rendered = true;
         return svg;
@@ -71,15 +74,15 @@ function fill(svg, options) {
     elements.forEach((element) => {
         const id = element.id || '';
         if (isTitle(element)) {
-            const modified = renderText(element, data.title || '', Object.assign({}, themeConfig.base?.text, themeConfig.title));
+            const modified = renderText(element, data.title || '', Object.assign({}, themeConfig.base?.text, themeConfig.title, data.attributes?.title));
             return upsert(element, modified);
         }
         if (isDesc(element)) {
-            const modified = renderText(element, data.desc || '', Object.assign({}, themeConfig.base?.text, themeConfig.desc));
+            const modified = renderText(element, data.desc || '', Object.assign({}, themeConfig.base?.text, themeConfig.desc, data.attributes?.desc));
             return upsert(element, modified);
         }
         if (isIllus(element)) {
-            const modified = renderIllus(svg, element, data.illus?.[id]);
+            const modified = renderIllus(svg, element, data.illus?.[id], undefined, data.attributes?.illus);
             return upsert(element, modified);
         }
         if (isShapesGroup(element)) {

package/esm/resource/loader.js

@@ -88,7 +88,9 @@ export async function loadResource(svg, scene, config, datum) {
 export { getSvgLoadPromises, waitForSvgLoads } from './load-tracker';
 function getFallbackQuery(cfg, scene, datum) {
     const defaultQuery = scene === 'illus' ? 'illustration' : 'icon';
-    const datumQuery = normalizeQuery(datum?.label) || normalizeQuery(datum?.desc);
+    const datumQuery = normalizeQuery(cfg.data) ||
+        normalizeQuery(datum?.label) ||
+        normalizeQuery(datum?.desc);
     if (datumQuery)
         return datumQuery;
     const data = normalizeQuery(cfg.data);

package/esm/runtime/Infographic.js

@@ -24,7 +24,7 @@ export class Infographic {
     setOptions(options, mode = 'replace', isInitial = false) {
         const { options: parsedOptions, errors, warnings, } = parseSyntaxOptions(options);
         if (isInitial) {
-            this.initialOptions = cloneOptions(parsedOptions);
+            this.initialOptions = parsedOptions;
         }
         const base = mode === 'replace'
             ? mergeOptions(cloneOptions(this.initialOptions || {}), parsedOptions)

package/esm/ssr/dom-shim.d.ts

@@ -0,0 +1,4 @@
+export declare function setupDOM(): {
+    window: Window;
+    document: Document;
+};

package/esm/ssr/dom-shim.js

@@ -0,0 +1,107 @@
+import { DOMParser, parseHTML } from 'linkedom';
+export function setupDOM() {
+    const { document, window } = parseHTML('<!DOCTYPE html><html><body><div id="container"></div></body></html>');
+    Object.assign(globalThis, {
+        window,
+        document,
+        DOMParser,
+    });
+    const classes = [
+        'HTMLElement',
+        'HTMLDivElement',
+        'HTMLSpanElement',
+        'HTMLImageElement',
+        'HTMLCanvasElement',
+        'HTMLInputElement',
+        'HTMLButtonElement',
+        'Element',
+        'Node',
+        'Text',
+        'Comment',
+        'DocumentFragment',
+        'Document',
+        'XMLSerializer',
+        'MutationObserver',
+        // SVG
+        'SVGElement',
+        'SVGSVGElement',
+        'SVGGraphicsElement',
+        'SVGGElement',
+        'SVGPathElement',
+        'SVGRectElement',
+        'SVGCircleElement',
+        'SVGTextElement',
+        'SVGLineElement',
+        'SVGPolygonElement',
+        'SVGPolylineElement',
+        'SVGEllipseElement',
+        'SVGImageElement',
+        'SVGDefsElement',
+        'SVGUseElement',
+        'SVGClipPathElement',
+        'SVGLinearGradientElement',
+        'SVGRadialGradientElement',
+        'SVGStopElement',
+        'SVGPatternElement',
+        'SVGMaskElement',
+        'SVGForeignObjectElement',
+        'Image',
+    ];
+    classes.forEach((name) => {
+        if (window[name])
+            globalThis[name] = window[name];
+    });
+    if (!document.fonts) {
+        const fontSet = new Set();
+        Object.defineProperty(document, 'fonts', {
+            value: {
+                add: (font) => fontSet.add(font),
+                delete: (font) => fontSet.delete(font),
+                has: (font) => fontSet.has(font),
+                clear: () => fontSet.clear(),
+                forEach: (callback) => fontSet.forEach(callback),
+                entries: () => fontSet.entries(),
+                keys: () => fontSet.keys(),
+                values: () => fontSet.values(),
+                [Symbol.iterator]: () => fontSet[Symbol.iterator](),
+                get size() {
+                    return fontSet.size;
+                },
+                get ready() {
+                    return Promise.resolve(this);
+                },
+                check: () => true,
+                load: () => Promise.resolve([]),
+                get status() {
+                    return 'loaded';
+                },
+                onloading: null,
+                onloadingdone: null,
+                onloadingerror: null,
+                addEventListener: () => { },
+                removeEventListener: () => { },
+                dispatchEvent: () => true,
+            },
+            configurable: true,
+        });
+    }
+    const rafIds = new Map();
+    let nextRafId = 0;
+    globalThis.requestAnimationFrame = (cb) => {
+        const id = ++nextRafId;
+        const immediate = setImmediate(() => {
+            rafIds.delete(id);
+            cb(performance.now());
+        });
+        rafIds.set(id, immediate);
+        return id;
+    };
+    globalThis.cancelAnimationFrame = (id) => {
+        const immediate = rafIds.get(id);
+        if (immediate) {
+            clearImmediate(immediate);
+            rafIds.delete(id);
+        }
+    };
+    return { window, document };
+}

package/esm/ssr/index.d.ts

@@ -0,0 +1 @@
+export { renderToString } from './renderer';

package/esm/ssr/index.js

@@ -0,0 +1 @@
+export { renderToString } from './renderer';

package/esm/ssr/renderer.d.ts

@@ -0,0 +1,2 @@
+import type { InfographicOptions } from '../options';
+export declare function renderToString(options: string | Partial<InfographicOptions>, init?: Partial<InfographicOptions>): Promise<string>;

package/esm/ssr/renderer.js

@@ -0,0 +1,60 @@
+import { exportToSVG } from '../exporter';
+import { getFontURLs } from '../renderer';
+import { Infographic } from '../runtime';
+import { decodeFontFamily } from '../utils';
+import { setupDOM } from './dom-shim';
+export async function renderToString(options, init) {
+    const { document } = setupDOM();
+    const container = document.getElementById('container');
+    let infographic;
+    let timeoutId;
+    try {
+        infographic = new Infographic({
+            ...init,
+            container,
+            editable: false,
+        });
+        const renderPromise = new Promise((resolve, reject) => {
+            infographic.on('loaded', async ({ node }) => {
+                try {
+                    const svg = await exportToSVG(node, { embedResources: true });
+                    resolve(svg.outerHTML);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            });
+        });
+        const timeoutPromise = new Promise((_, reject) => {
+            timeoutId = setTimeout(() => {
+                reject(new Error('SSR render timeout'));
+            }, 10000);
+        });
+        infographic.render(options);
+        const svg = await Promise.race([renderPromise, timeoutPromise]);
+        return injectXMLStylesheet(svg);
+    }
+    finally {
+        clearTimeout(timeoutId);
+        if (infographic) {
+            infographic.destroy();
+        }
+    }
+}
+function injectXMLStylesheet(svg) {
+    const matched = svg.matchAll(/font-family="([\S ]+?)"/g);
+    const fonts = Array.from(matched, (match) => match[1]);
+    const set = new Set();
+    fonts.forEach((font) => {
+        const decoded = decodeFontFamily(font);
+        decoded.split(',').forEach((f) => set.add(f.trim()));
+    });
+    const urls = Array.from(set)
+        .map((font) => getFontURLs(font))
+        .flat();
+    if (urls.length === 0)
+        return svg;
+    return `<?xml version="1.0" encoding="UTF-8"?>
+${urls.map((url) => `<?xml-stylesheet href="${url}" type="text/css"?>`).join('\n')}
+${svg}`;
+}

package/esm/syntax/index.js

@@ -1,6 +1,26 @@
 import { mapWithSchema } from './mapper';
 import { parseSyntaxToAst } from './parser';
+import { parseRelationsNode } from './relations';
 import { DataSchema, DesignSchema, RootSchema, TemplateSchema, ThemeSchema, } from './schema';
+function normalizeItems(items) {
+    const seen = new Set();
+    const normalized = [];
+    for (let index = items.length - 1; index >= 0; index -= 1) {
+        const item = items[index];
+        const id = item.id ?? item.label;
+        if (!id) {
+            normalized.push(item);
+            continue;
+        }
+        if (seen.has(id))
+            continue;
+        seen.add(id);
+        if (!item.id)
+            item.id = id;
+        normalized.push(item);
+    }
+    return normalized.reverse();
+}
 function resolveTemplate(node, errors) {
     if (!node)
         return undefined;
@@ -64,9 +84,45 @@ export function parseSyntax(input) {
     }
     const dataNode = mergedEntries.data;
     if (dataNode) {
-        const data = mapWithSchema(dataNode, DataSchema, 'data', errors);
+        let relationsNode;
+        let dataNodeForMapping = dataNode;
+        if (dataNode.kind === 'object') {
+            const { relations, ...rest } = dataNode.entries;
+            relationsNode = relations;
+            dataNodeForMapping = { ...dataNode, entries: rest };
+        }
+        const data = mapWithSchema(dataNodeForMapping, DataSchema, 'data', errors);
         if (data)
             options.data = data;
+        if (relationsNode) {
+            const parsed = parseRelationsNode(relationsNode, errors, 'data.relations');
+            if (parsed.relations.length > 0 || parsed.items.length > 0) {
+                const current = (options.data ?? {});
+                const existingItems = Array.isArray(current.items)
+                    ? current.items
+                    : [];
+                const normalizedItems = normalizeItems(existingItems);
+                const itemMap = new Map();
+                normalizedItems.forEach((item) => {
+                    if (item.id)
+                        itemMap.set(item.id, item);
+                });
+                parsed.items.forEach((item) => {
+                    const existing = itemMap.get(item.id);
+                    if (existing) {
+                        if (!existing.label && item.label)
+                            existing.label = item.label;
+                    }
+                    else {
+                        normalizedItems.push(item);
+                        itemMap.set(item.id, item);
+                    }
+                });
+                current.items = normalizedItems;
+                current.relations = parsed.relations;
+                options.data = current;
+            }
+        }
     }
     const themeNode = mergedEntries.theme;
     if (themeNode) {

package/esm/syntax/parser.js

@@ -23,6 +23,9 @@ function getIndentInfo(line) {
 function stripComments(content) {
     return content.trimEnd();
 }
+function looksLikeRelationExpression(text) {
+    return /[<>=o.x-]{2,}/.test(text);
+}
 function parseKeyValue(raw) {
     const text = raw.trim();
     if (!text)
@@ -105,6 +108,47 @@ export function parseSyntaxToAst(input) {
             });
             return;
         }
+        if (parentFrame.key === 'relations' &&
+            !trimmed.startsWith('-') &&
+            looksLikeRelationExpression(trimmed)) {
+            if (parentNode.kind !== 'array') {
+                if (parentNode.kind === 'object' &&
+                    Object.keys(parentNode.entries).length === 0 &&
+                    parentNode.value === undefined &&
+                    parentFrame.parent &&
+                    parentFrame.key) {
+                    const arrayNode = createArrayNode(parentNode.line);
+                    if (parentFrame.parent.kind === 'object') {
+                        parentFrame.parent.entries[parentFrame.key] = arrayNode;
+                    }
+                    else if (parentFrame.parent.kind === 'array') {
+                        const indexInParent = parentFrame.parent.items.indexOf(parentNode);
+                        if (indexInParent >= 0)
+                            parentFrame.parent.items[indexInParent] = arrayNode;
+                    }
+                    parentFrame.node = arrayNode;
+                    parentNode = arrayNode;
+                }
+                else {
+                    errors.push({
+                        path: '',
+                        line: lineNumber,
+                        code: 'bad_list',
+                        message: 'List item is not under an array container.',
+                        raw: trimmed,
+                    });
+                    return;
+                }
+            }
+            const itemNode = createObjectNode(lineNumber, trimmed);
+            parentNode.items.push(itemNode);
+            stack.push({
+                indent,
+                node: itemNode,
+                parent: parentNode,
+            });
+            return;
+        }
         const parsed = parseKeyValue(trimmed);
         if (!parsed) {
             errors.push({

package/esm/syntax/relations.d.ts

@@ -0,0 +1,6 @@
+import type { ItemDatum, RelationDatum } from '../types';
+import type { SyntaxError, SyntaxNode } from './types';
+export declare function parseRelationsNode(node: SyntaxNode, errors: SyntaxError[], path: string): {
+    relations: RelationDatum[];
+    items: ItemDatum[];
+};