@antv/infographic 0.1.0 → 0.1.2

package/lib/exporter/svg.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportToSVGString = exportToSVGString;
+exports.exportToSVG = exportToSVG;
+const utils_1 = require("../utils");
+const font_1 = require("./font");
+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);
+}
+async function exportToSVG(svg, options = {}) {
+    const { embedResources = true } = options;
+    const clonedSVG = svg.cloneNode(true);
+    const { width, height } = (0, utils_1.getViewBox)(svg);
+    (0, utils_1.setAttributes)(clonedSVG, { width, height });
+    await embedIcons(clonedSVG);
+    await (0, font_1.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 = (0, utils_1.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) {
+    (0, utils_1.traverse)(svg, (node) => {
+        for (const key in node.dataset) {
+            delete node.dataset[key];
+        }
+    });
+}

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

@@ -5,7 +5,6 @@ exports.renderItemText = renderItemText;
 exports.renderStaticText = renderStaticText;
 const lodash_es_1 = require("lodash-es");
 const utils_1 = require("../../utils");
-const fonts_1 = require("../fonts");
 const utils_2 = require("../utils");
 function renderText(node, text, attrs = {}) {
     if (!text)
@@ -17,7 +16,6 @@ function renderText(node, text, attrs = {}) {
     for (const key in textElement.dataset) {
         renderedText.setAttribute(`data-${(0, lodash_es_1.kebabCase)(key)}`, textElement.dataset[key]);
     }
-    renderedText.setAttribute('id', node.getAttribute('id'));
     return renderedText;
 }
 function renderItemText(type, node, options) {
@@ -35,7 +33,7 @@ function renderStaticText(text, options) {
     const attrs = options.themeConfig.base?.text || {};
     (0, utils_1.setAttributes)(text, attrs);
     if (attrs['font-family']) {
-        text.setAttribute('font-family', (0, fonts_1.encodeFontFamily)(attrs['font-family']));
+        text.setAttribute('font-family', (0, utils_1.encodeFontFamily)(attrs['font-family']));
     }
     text.style.userSelect = 'none';
     text.style.pointerEvents = 'none';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.encodeFontFamily = exports.decodeFontFamily = exports.setDefaultFont = exports.registerFont = exports.getFonts = exports.getFont = exports.DEFAULT_FONT = exports.loadFonts = exports.loadFont = exports.getWoff2BaseURL = exports.getFontURLs = void 0;
+exports.setDefaultFont = exports.registerFont = exports.getFonts = exports.getFont = exports.DEFAULT_FONT = exports.loadFonts = exports.loadFont = exports.getWoff2BaseURL = exports.getFontURLs = void 0;
 var loader_1 = require("./loader");
 Object.defineProperty(exports, "getFontURLs", { enumerable: true, get: function () { return loader_1.getFontURLs; } });
 Object.defineProperty(exports, "getWoff2BaseURL", { enumerable: true, get: function () { return loader_1.getWoff2BaseURL; } });
@@ -12,9 +12,6 @@ Object.defineProperty(exports, "getFont", { enumerable: true, get: function () {
 Object.defineProperty(exports, "getFonts", { enumerable: true, get: function () { return registry_1.getFonts; } });
 Object.defineProperty(exports, "registerFont", { enumerable: true, get: function () { return registry_1.registerFont; } });
 Object.defineProperty(exports, "setDefaultFont", { enumerable: true, get: function () { return registry_1.setDefaultFont; } });
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "decodeFontFamily", { enumerable: true, get: function () { return utils_1.decodeFontFamily; } });
-Object.defineProperty(exports, "encodeFontFamily", { enumerable: true, get: function () { return utils_1.encodeFontFamily; } });
 const built_in_1 = require("./built-in");
 const registry_2 = require("./registry");
 built_in_1.BUILT_IN_FONTS.forEach(registry_2.registerFont);

package/lib/renderer/fonts/loader.js

@@ -6,7 +6,6 @@ exports.loadFont = loadFont;
 exports.loadFonts = loadFonts;
 const utils_1 = require("../../utils");
 const registry_1 = require("./registry");
-const utils_2 = require("./utils");
 function getFontURLs(font) {
     const config = (0, registry_1.getFont)(font);
     if (!config)
@@ -20,7 +19,7 @@ function getWoff2BaseURL(font, fontWeightName) {
     const config = (0, registry_1.getFont)(font);
     if (!config)
         return null;
-    const name = (0, utils_2.normalizeFontWeightName)(fontWeightName);
+    const name = (0, utils_1.normalizeFontWeightName)(fontWeightName);
     const path = config.fontWeight[name];
     if (!path)
         return null;

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

@@ -6,7 +6,7 @@ exports.getFonts = getFonts;
 exports.setDefaultFont = setDefaultFont;
 exports.registerFont = registerFont;
 exports.unregisterFont = unregisterFont;
-const utils_1 = require("./utils");
+const utils_1 = require("../../utils");
 const FONT_REGISTRY = new Map();
 exports.DEFAULT_FONT = 'Alibaba PuHuiTi';
 function getFont(font) {

package/lib/renderer/renderer.js

@@ -135,55 +135,6 @@ function setView(svg, options) {
         svg.setAttribute('viewBox', viewBox);
     }
     else if (padding !== undefined) {
-        setSVGPadding(svg, (0, utils_1.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] = (0, utils_1.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;
+        (0, utils_1.setSVGPadding)(svg, (0, utils_1.parsePadding)(padding));
     }
 }

package/lib/resource/utils/ref.js

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

package/lib/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/lib/runtime/Infographic.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Infographic = void 0;
 const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const exporter_1 = require("../exporter");
 const jsx_1 = require("../jsx");
 const options_1 = require("../options");
 const renderer_1 = require("../renderer");
@@ -9,6 +10,7 @@ const utils_1 = require("../utils");
 class Infographic {
     constructor(options) {
         this.options = options;
+        this.node = null;
         this.parsedOptions = (0, options_1.parseOptions)(this.options);
     }
     /**
@@ -18,8 +20,8 @@ class Infographic {
         const { container } = this.parsedOptions;
         const template = this.compose();
         const renderer = new renderer_1.Renderer(this.parsedOptions, template);
-        const infographic = renderer.render();
-        container.replaceChildren(infographic);
+        this.node = renderer.render();
+        container.replaceChildren(this.node);
     }
     /**
      * Compose the SVG template
@@ -44,5 +46,24 @@ class Infographic {
         const items = design.items.map((it) => it.composites || []);
         return (0, utils_1.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 (0, exporter_1.exportToSVGString)(this.node, options);
+        }
+        return await (0, exporter_1.exportToPNGString)(this.node, options);
+    }
+    destroy() {
+        this.node?.remove();
+        this.node = null;
+    }
 }
 exports.Infographic = Infographic;

package/lib/types/font.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/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/{esm/renderer/fonts/utils.d.ts → lib/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/lib/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';

package/lib/utils/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color"), exports);
 __exportStar(require("./data"), exports);
+__exportStar(require("./font"), exports);
 __exportStar(require("./get-types"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./item"), exports);
@@ -25,3 +26,4 @@ __exportStar(require("./recognizer"), exports);
 __exportStar(require("./svg"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./uuid"), exports);
+__exportStar(require("./viewbox"), exports);

package/lib/utils/is-node.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @see https://github.com/MatthewSH/npm-packages/blob/main/packages/is-node/src/index.ts
+ */
+export declare const isNode: boolean;

package/lib/utils/is-node.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNode = void 0;
+/**
+ * @see https://github.com/MatthewSH/npm-packages/blob/main/packages/is-node/src/index.ts
+ */
+exports.isNode = !!(typeof process !== 'undefined' &&
+    process.versions &&
+    process.versions.node);

package/lib/utils/padding.d.ts

@@ -1,2 +1,3 @@
 import type { Padding, ParsedPadding } from '../types';
 export declare function parsePadding(padding: Padding | undefined): ParsedPadding;
+export declare function setSVGPadding(svg: SVGSVGElement, padding: ParsedPadding): void;

package/lib/utils/padding.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePadding = parsePadding;
+exports.setSVGPadding = setSVGPadding;
+const is_node_1 = require("./is-node");
+const svg_1 = require("./svg");
+const viewbox_1 = require("./viewbox");
 function parsePadding(padding) {
     if (!padding)
         return [0, 0, 0, 0];
@@ -21,3 +25,70 @@ function parsePadding(padding) {
     }
     return [0, 0, 0, 0];
 }
+function setSVGPadding(svg, padding) {
+    if (is_node_1.isNode) {
+        setSVGPaddingInNode(svg, padding);
+    }
+    else {
+        if (document.contains(svg)) {
+            setSVGPaddingInBrowser(svg, padding);
+        }
+        else {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node === svg || node.contains(svg)) {
+                            waitForLayout(svg, () => {
+                                setSVGPaddingInBrowser(svg, padding);
+                            });
+                            observer.disconnect();
+                        }
+                    });
+                });
+            });
+            observer.observe(document, {
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+}
+function setSVGPaddingInNode(svg, padding) {
+    const viewBox = (0, viewbox_1.getViewBox)(svg);
+    const [top, right, bottom, left] = padding;
+    (0, svg_1.setAttributes)(svg, {
+        viewBox: `${viewBox.x - left} ${viewBox.y - top} ${viewBox.width + left + right} ${viewBox.height + top + bottom}`,
+    });
+}
+function setSVGPaddingInBrowser(svg, padding) {
+    const bbox = svg.getBBox();
+    const clientRect = svg.getBoundingClientRect();
+    const scaleX = clientRect.width > 0 ? bbox.width / clientRect.width : 1;
+    const scaleY = clientRect.height > 0 ? bbox.height / clientRect.height : 1;
+    const [topPx, rightPx, bottomPx, leftPx] = padding;
+    const topSvg = topPx * scaleY;
+    const rightSvg = rightPx * scaleX;
+    const bottomSvg = bottomPx * scaleY;
+    const leftSvg = leftPx * scaleX;
+    const newX = bbox.x - leftSvg;
+    const newY = bbox.y - topSvg;
+    const newWidth = bbox.width + leftSvg + rightSvg;
+    const newHeight = bbox.height + topSvg + bottomSvg;
+    (0, svg_1.setAttributes)(svg, {
+        viewBox: `${newX} ${newY} ${newWidth} ${newHeight}`,
+    });
+}
+function waitForLayout(element, callback) {
+    requestAnimationFrame(() => {
+        const check = () => {
+            const rect = element.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                callback();
+            }
+            else {
+                requestAnimationFrame(check);
+            }
+        };
+        check();
+    });
+}

package/lib/utils/svg.d.ts

@@ -5,4 +5,3 @@ export declare function getAttributes(element: SVGElement, attrs: readonly strin
 export declare function removeAttributes(element: SVGElement, attrs: string[]): void;
 export declare function traverse(node: SVGElement, callback: <T extends SVGElement = SVGElement>(child: T) => boolean | void): void;
 export declare function getOrCreateDefs(svg: SVGSVGElement, defsId?: string): SVGDefsElement;
-export declare function getSizeBaseVal(svg: SVGSVGElement): [number, number];

package/lib/utils/svg.js

@@ -7,7 +7,6 @@ exports.getAttributes = getAttributes;
 exports.removeAttributes = removeAttributes;
 exports.traverse = traverse;
 exports.getOrCreateDefs = getOrCreateDefs;
-exports.getSizeBaseVal = getSizeBaseVal;
 function createElement(tagName, attributes = {}) {
     const element = document.createElementNS('http://www.w3.org/2000/svg', tagName);
     setAttributes(element, attributes);
@@ -24,7 +23,7 @@ function parseSVG(svg) {
 }
 function setAttributes(element, attrs) {
     Object.entries(attrs).forEach(([key, value]) => {
-        if (value === null) {
+        if (value === null || value === undefined) {
             element.removeAttribute(key);
         }
         else {
@@ -35,7 +34,8 @@ function setAttributes(element, attrs) {
 function getAttributes(element, attrs, ignoreEmpty = true) {
     return attrs.reduce((acc, attr) => {
         const value = element.getAttribute(attr);
-        if (!ignoreEmpty || (value !== null && value !== '')) {
+        if (!ignoreEmpty ||
+            (value !== null && value !== '' && value !== undefined)) {
             acc[attr] = value;
         }
         return acc;
@@ -65,19 +65,3 @@ function getOrCreateDefs(svg, defsId = 'infographic-defs') {
     svg.prepend(newDefs);
     return newDefs;
 }
-function getSizeBaseVal(svg) {
-    try {
-        const width = svg.width.baseVal.value || 0;
-        const height = svg.height.baseVal.value || 0;
-        return [width, height];
-    }
-    catch (error) {
-        const viewBox = svg.getAttribute('viewBox');
-        if (viewBox) {
-            const [x, y, width, height] = viewBox.split(' ').map(Number);
-            return [width - x, height - y];
-        }
-        console.error('Error getting size baseVal from SVG:', error);
-        return [0, 0];
-    }
-}

package/lib/utils/text.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTextElement = createTextElement;
 const camelCase_1 = __importDefault(require("lodash-es/camelCase"));
-const renderer_1 = require("../renderer");
+const font_1 = require("./font");
 const svg_1 = require("./svg");
 function createTextElement(textContent, attributes) {
     const span = document.createElement('span');
@@ -97,7 +97,7 @@ function getTextStyle(attributes) {
     if (strokeWidth)
         style.strokeWidth = `${strokeWidth}px`;
     if (fontFamily)
-        style.fontFamily = (0, renderer_1.encodeFontFamily)(fontFamily);
+        style.fontFamily = (0, font_1.encodeFontFamily)(fontFamily);
     return style;
 }
 function measureTextSpan(span) {

package/lib/utils/viewbox.d.ts

@@ -0,0 +1,6 @@
+export declare function getViewBox(svg: SVGSVGElement): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/lib/utils/viewbox.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getViewBox = getViewBox;
+function getViewBox(svg) {
+    const viewBox = svg.getAttribute('viewBox');
+    if (viewBox) {
+        const [x, y, width, height] = viewBox.split(' ').map(Number);
+        return { x, y, width, height };
+    }
+    const widthStr = svg.getAttribute('width');
+    const heightStr = svg.getAttribute('height');
+    const width = Number(widthStr) || 0;
+    const height = Number(heightStr) || 0;
+    return { x: 0, y: 0, width, height };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",
@@ -74,6 +74,7 @@
     "singleQuote": true
   },
   "dependencies": {
+    "css": "^3.0.0",
     "culori": "^4.0.2",
     "d3": "^7.9.0",
     "lodash-es": "^4.17.21",
@@ -89,6 +90,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "@size-limit/file": "^11.2.0",
+    "@types/css": "^0.0.38",
     "@types/culori": "^4.0.1",
     "@types/d3": "^7.4.3",
     "@types/lodash-es": "^4.17.12",
@@ -133,5 +135,6 @@
       "limit": "500 Kb",
       "path": "dist/infographic.min.js"
     }
-  ]
+  ],
+  "repository": "git@github.com:antvis/Infographic.git"
 }

package/src/designs/components/BtnsGroup.tsx

@@ -5,6 +5,12 @@ export interface BtnsGroupProps extends GroupProps {}
 
 export const BtnsGroup = (props: BtnsGroupProps) => {
   return (
-    <Group data-element-type="btns-group" width={0} height={0} {...props} />
+    <Group
+      data-element-type="btns-group"
+      width={0}
+      height={0}
+      {...props}
+      display="none"
+    />
   );
 };