@antv/infographic 0.2.7 → 0.2.9

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

@@ -1,4 +1,4 @@
 import { type ResourceConfig } from '../../resource';
 import type { IllusElement, ItemDatum } from '../../types';
-export declare function renderIllus(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, datum?: ItemDatum): IllusElement | null;
+export declare function renderIllus(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, datum?: ItemDatum, attrs?: Record<string, any>): IllusElement | null;
 export declare function renderItemIllus(svg: SVGSVGElement, node: SVGElement, datum: ItemDatum): SVGGElement | null;

package/lib/renderer/composites/illus.js

@@ -4,25 +4,30 @@ exports.renderIllus = renderIllus;
 exports.renderItemIllus = renderItemIllus;
 const resource_1 = require("../../resource");
 const utils_1 = require("../../utils");
-function renderIllus(svg, node, value, datum) {
+function renderIllus(svg, node, value, datum, attrs = {}) {
     if (!value)
         return null;
     const config = (0, resource_1.parseResourceConfig)(value);
     if (!config)
         return null;
     const id = (0, resource_1.getResourceId)(config);
+    if (attrs && Object.keys(attrs).length > 0) {
+        (0, utils_1.setAttributes)(node, attrs);
+    }
     const clipPathId = createClipPath(svg, node, id);
     (0, resource_1.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);
 }
 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}-${(0, utils_1.uuid)()}`;

package/lib/renderer/composites/text.js

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

package/lib/renderer/fonts/loader.js

@@ -118,6 +118,8 @@ function loadFont(svg, font) {
     }
 }
 function loadFonts(svg) {
+    if (utils_1.isNode)
+        return;
     const fonts = (0, registry_1.getFonts)();
     fonts.forEach((font) => loadFont(svg, font.fontFamily));
 }

package/lib/renderer/fonts/registry.js

@@ -6,13 +6,13 @@ exports.getFonts = getFonts;
 exports.setDefaultFont = setDefaultFont;
 exports.registerFont = registerFont;
 exports.unregisterFont = unregisterFont;
-const utils_1 = require("../../utils");
+const font_1 = require("../../utils/font");
 const FONT_REGISTRY = new Map();
 exports.DEFAULT_FONT = 'Alibaba PuHuiTi';
 function getFont(font) {
-    const families = (0, utils_1.splitFontFamily)(font);
+    const families = (0, font_1.splitFontFamily)(font);
     for (const family of families) {
-        const fontObj = FONT_REGISTRY.get((0, utils_1.decodeFontFamily)(family));
+        const fontObj = FONT_REGISTRY.get((0, font_1.decodeFontFamily)(family));
         if (fontObj)
             return fontObj;
     }
@@ -22,7 +22,7 @@ function getFonts() {
     return Array.from(FONT_REGISTRY.values());
 }
 function setDefaultFont(font) {
-    exports.DEFAULT_FONT = (0, utils_1.encodeFontFamily)(font);
+    exports.DEFAULT_FONT = (0, font_1.encodeFontFamily)(font);
 }
 /**
  * 注册自定义字体
@@ -44,13 +44,13 @@ function setDefaultFont(font) {
 function registerFont(font) {
     const f = { ...font };
     FONT_REGISTRY.set(f.fontFamily, f);
-    f.fontFamily = (0, utils_1.encodeFontFamily)(f.fontFamily);
+    f.fontFamily = (0, font_1.encodeFontFamily)(f.fontFamily);
     return f;
 }
 function unregisterFont(font) {
     const fontObj = getFont(font);
     if (!fontObj)
         return null;
-    FONT_REGISTRY.delete((0, utils_1.decodeFontFamily)(fontObj.fontFamily));
+    FONT_REGISTRY.delete((0, font_1.decodeFontFamily)(fontObj.fontFamily));
     return fontObj;
 }

package/lib/renderer/renderer.js

@@ -33,30 +33,33 @@ class Renderer {
         const postRender = () => {
             setView(this.template, this.options);
             (0, fonts_1.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 (utils_1.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;
@@ -75,15 +78,15 @@ function fill(svg, options) {
     elements.forEach((element) => {
         const id = element.id || '';
         if ((0, utils_1.isTitle)(element)) {
-            const modified = (0, composites_1.renderText)(element, data.title || '', Object.assign({}, themeConfig.base?.text, themeConfig.title));
+            const modified = (0, composites_1.renderText)(element, data.title || '', Object.assign({}, themeConfig.base?.text, themeConfig.title, data.attributes?.title));
             return upsert(element, modified);
         }
         if ((0, utils_1.isDesc)(element)) {
-            const modified = (0, composites_1.renderText)(element, data.desc || '', Object.assign({}, themeConfig.base?.text, themeConfig.desc));
+            const modified = (0, composites_1.renderText)(element, data.desc || '', Object.assign({}, themeConfig.base?.text, themeConfig.desc, data.attributes?.desc));
             return upsert(element, modified);
         }
         if ((0, utils_1.isIllus)(element)) {
-            const modified = (0, composites_1.renderIllus)(svg, element, data.illus?.[id]);
+            const modified = (0, composites_1.renderIllus)(svg, element, data.illus?.[id], undefined, data.attributes?.illus);
             return upsert(element, modified);
         }
         if ((0, utils_1.isShapesGroup)(element)) {

package/lib/resource/loader.js

@@ -94,7 +94,9 @@ Object.defineProperty(exports, "getSvgLoadPromises", { enumerable: true, get: fu
 Object.defineProperty(exports, "waitForSvgLoads", { enumerable: true, get: function () { return load_tracker_2.waitForSvgLoads; } });
 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/lib/runtime/Infographic.js

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

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

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

package/lib/ssr/dom-shim.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupDOM = setupDOM;
+const linkedom_1 = require("linkedom");
+function setupDOM() {
+    const { document, window } = (0, linkedom_1.parseHTML)('<!DOCTYPE html><html><body><div id="container"></div></body></html>');
+    Object.assign(globalThis, {
+        window,
+        document,
+        DOMParser: linkedom_1.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/lib/ssr/index.d.ts

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

package/lib/ssr/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToString = void 0;
+var renderer_1 = require("./renderer");
+Object.defineProperty(exports, "renderToString", { enumerable: true, get: function () { return renderer_1.renderToString; } });

package/lib/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/lib/ssr/renderer.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToString = renderToString;
+const exporter_1 = require("../exporter");
+const renderer_1 = require("../renderer");
+const runtime_1 = require("../runtime");
+const utils_1 = require("../utils");
+const dom_shim_1 = require("./dom-shim");
+async function renderToString(options, init) {
+    const { document } = (0, dom_shim_1.setupDOM)();
+    const container = document.getElementById('container');
+    let infographic;
+    let timeoutId;
+    try {
+        infographic = new runtime_1.Infographic({
+            ...init,
+            container,
+            editable: false,
+        });
+        const renderPromise = new Promise((resolve, reject) => {
+            infographic.on('loaded', async ({ node }) => {
+                try {
+                    const svg = await (0, exporter_1.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 = (0, utils_1.decodeFontFamily)(font);
+        decoded.split(',').forEach((f) => set.add(f.trim()));
+    });
+    const urls = Array.from(set)
+        .map((font) => (0, renderer_1.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/lib/syntax/index.js

@@ -3,7 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseSyntax = parseSyntax;
 const mapper_1 = require("./mapper");
 const parser_1 = require("./parser");
+const relations_1 = require("./relations");
 const schema_1 = require("./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;
@@ -67,9 +87,45 @@ function parseSyntax(input) {
     }
     const dataNode = mergedEntries.data;
     if (dataNode) {
-        const data = (0, mapper_1.mapWithSchema)(dataNode, schema_1.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 = (0, mapper_1.mapWithSchema)(dataNodeForMapping, schema_1.DataSchema, 'data', errors);
         if (data)
             options.data = data;
+        if (relationsNode) {
+            const parsed = (0, relations_1.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/lib/syntax/parser.js

@@ -27,6 +27,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)
@@ -109,6 +112,47 @@ 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/lib/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[];
+};