@antv/infographic 0.2.16 → 0.2.18

package/lib/editor/plugins/edit-bar/edit-items/font-align.js

@@ -25,13 +25,14 @@ const GRID_STYLES = `
   gap: 2px;
 }
 `;
-const FontAlign = (selection, attrs, commander) => {
-    (0, utils_1.injectStyleOnce)(GRID_STYLE_ID, GRID_STYLES);
+const FontAlign = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    (0, utils_1.injectStyleOnce)(GRID_STYLE_ID, GRID_STYLES, root);
     const state = {
         horizontal: attrs['data-horizontal-align'],
         vertical: attrs['data-vertical-align'],
     };
-    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.align });
+    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.align, root });
     const content = createAlignContent(state, (align) => {
         const attributes = {};
         if (align.horizontal)
@@ -43,16 +44,17 @@ const FontAlign = (selection, attrs, commander) => {
         commander.executeBatch(selection.map((text) => new commands_1.UpdateElementCommand(text, {
             attributes,
         })));
-    });
+    }, root);
     return (0, components_1.Popover)({
         target: button,
         content,
+        getContainer: root,
         placement: 'top',
         offset: 12,
     });
 };
 exports.FontAlign = FontAlign;
-function createAlignContent(state, onAlignChange) {
+function createAlignContent(state, onAlignChange, root) {
     const content = document.createElement('div');
     content.classList.add(GRID_CLASS);
     const buttons = {};
@@ -65,6 +67,7 @@ function createAlignContent(state, onAlignChange) {
     const createButtons = (options, stateKey) => {
         options.forEach(({ icon, align }) => {
             const button = (0, components_1.IconButton)({
+                root,
                 icon,
                 onClick: () => {
                     if (state[stateKey] === align)

package/lib/editor/plugins/edit-bar/edit-items/font-color.js

@@ -7,8 +7,9 @@ const components_1 = require("../../components");
 const FONT_COLOR_BUTTON_CLASS = 'infographic-font-color-btn';
 const FONT_COLOR_STYLE_ID = 'infographic-font-color-style';
 const DEFAULT_COLOR = '#1f1f1f';
-const FontColor = (selection, attrs, commander) => {
-    ensureFontColorStyles();
+const FontColor = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    ensureFontColorStyles(root);
     const color = normalizeColor(attrs.fill);
     const isMixed = attrs.fill === undefined && selection.length > 1;
     const button = document.createElement('button');
@@ -16,6 +17,7 @@ const FontColor = (selection, attrs, commander) => {
     button.classList.add(FONT_COLOR_BUTTON_CLASS);
     setButtonColor(button, color !== null && color !== void 0 ? color : DEFAULT_COLOR, isMixed);
     const picker = (0, components_1.ColorPicker)({
+        root,
         value: color !== null && color !== void 0 ? color : DEFAULT_COLOR,
         onChange: (nextColor) => {
             setButtonColor(button, nextColor, false);
@@ -27,6 +29,7 @@ const FontColor = (selection, attrs, commander) => {
     return (0, components_1.Popover)({
         target: button,
         content: picker,
+        getContainer: root,
         placement: ['top', 'bottom'],
         offset: 12,
         trigger: 'hover',
@@ -48,7 +51,7 @@ function setButtonColor(button, color, mixed) {
     else
         button.removeAttribute('data-mixed');
 }
-function ensureFontColorStyles() {
+function ensureFontColorStyles(target) {
     (0, utils_1.injectStyleOnce)(FONT_COLOR_STYLE_ID, `
 .${FONT_COLOR_BUTTON_CLASS} {
   position: relative;
@@ -77,5 +80,5 @@ function ensureFontColorStyles() {
     #f5f5f5 12px
   );
 }
-`);
+`, target);
 }

package/lib/editor/plugins/edit-bar/edit-items/font-family.js

@@ -9,22 +9,23 @@ const FONT_LIST_CLASS = 'infographic-font-family-list';
 const FONT_OPTION_CLASS = `${FONT_LIST_CLASS}__option`;
 const FONT_LIST_STYLE_ID = 'infographic-font-family-list-style';
 const DEFAULT_FONT_LABEL = '默认';
-const FontFamily = (selection, attrs, commander) => {
-    ensureFontFamilyListStyle();
+const FontFamily = (selection, attrs, commander, editItemOptions) => {
+    const root = editItemOptions === null || editItemOptions === void 0 ? void 0 : editItemOptions.root;
+    ensureFontFamilyListStyle(root);
     const fonts = (0, renderer_1.getFonts)();
     const current = normalizeFontFamily(attrs['font-family']);
-    const options = fonts.map((font) => ({
+    const fontOptions = fonts.map((font) => ({
         label: font.name || font.fontFamily,
         value: font.fontFamily,
     }));
-    if (!options.some((option) => normalizeFontFamily(option.value) === current)) {
-        options.unshift({
+    if (!fontOptions.some((option) => normalizeFontFamily(option.value) === current)) {
+        fontOptions.unshift({
             label: DEFAULT_FONT_LABEL,
             value: current,
         });
     }
     let selected = current;
-    const content = createFontList(options, selected, (value) => {
+    const content = createFontList(fontOptions, selected, (value) => {
         if (selected === value)
             return;
         selected = value;
@@ -32,10 +33,11 @@ const FontFamily = (selection, attrs, commander) => {
             attributes: { 'font-family': (0, utils_1.decodeFontFamily)(value) },
         })));
     });
-    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.fontFamily });
+    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.fontFamily, root });
     const popover = (0, components_1.Popover)({
         target: button,
         content,
+        getContainer: root,
         placement: ['top', 'bottom'],
         offset: 12,
         trigger: 'hover',
@@ -85,7 +87,7 @@ function normalizeFontFamily(font) {
         return (0, utils_1.encodeFontFamily)(font.join(', '));
     return (0, utils_1.encodeFontFamily)(String(font));
 }
-function ensureFontFamilyListStyle() {
+function ensureFontFamilyListStyle(target) {
     (0, utils_1.injectStyleOnce)(FONT_LIST_STYLE_ID, `
 .${FONT_LIST_CLASS} {
   display: flex;
@@ -115,5 +117,5 @@ function ensureFontFamilyListStyle() {
   background: #e6f4ff;
   color: #0958d9;
 }
-`);
+`, target);
 }

package/lib/editor/plugins/edit-bar/edit-items/font-size.js

@@ -21,24 +21,26 @@ const FONT_SIZE_STYLES = `
   gap: 2px;
 }
 `;
-const FontSize = (selection, attrs, commander) => {
-    (0, utils_1.injectStyleOnce)(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES);
-    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.fontSize });
+const FontSize = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    (0, utils_1.injectStyleOnce)(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES, root);
+    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.fontSize, root });
     const currentSize = normalizeFontSize(attrs['font-size']);
     const content = createFontSizeContent(currentSize, (size) => {
         commander.executeBatch(selection.map((text) => new commands_1.UpdateElementCommand(text, {
             attributes: { 'font-size': size },
         })));
-    });
+    }, root);
     return (0, components_1.Popover)({
         target: button,
         content,
+        getContainer: root,
         placement: 'top',
         offset: 12,
     });
 };
 exports.FontSize = FontSize;
-function createFontSizeContent(defaultSize, onSizeChange) {
+function createFontSizeContent(defaultSize, onSizeChange, root) {
     const content = document.createElement('div');
     content.classList.add(FONT_SIZE_CLASS);
     let selected = defaultSize;
@@ -51,6 +53,7 @@ function createFontSizeContent(defaultSize, onSizeChange) {
     };
     FONT_SIZE_OPTIONS.forEach(({ label, value }) => {
         const button = (0, components_1.IconButton)({
+            root,
             icon: createLabelIcon(label),
             onClick: () => {
                 if (selected === value)

package/lib/editor/plugins/edit-bar/edit-items/icon-color.js

@@ -7,8 +7,9 @@ const components_1 = require("../../components");
 const ICON_COLOR_BUTTON_CLASS = 'infographic-icon-color-btn';
 const ICON_COLOR_STYLE_ID = 'infographic-icon-color-style';
 const DEFAULT_COLOR = '#1f1f1f';
-const IconColor = (selection, attrs, commander) => {
-    ensureIconColorStyles();
+const IconColor = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    ensureIconColorStyles(root);
     const color = normalizeColor(attrs.fill);
     const isMixed = attrs.fill === undefined && selection.length > 1;
     const button = document.createElement('button');
@@ -16,6 +17,7 @@ const IconColor = (selection, attrs, commander) => {
     button.classList.add(ICON_COLOR_BUTTON_CLASS);
     setButtonColor(button, color !== null && color !== void 0 ? color : DEFAULT_COLOR, isMixed);
     const picker = (0, components_1.ColorPicker)({
+        root,
         value: color !== null && color !== void 0 ? color : DEFAULT_COLOR,
         onChange: (nextColor) => {
             setButtonColor(button, nextColor, false);
@@ -27,6 +29,7 @@ const IconColor = (selection, attrs, commander) => {
     return (0, components_1.Popover)({
         target: button,
         content: picker,
+        getContainer: root,
         placement: ['top', 'bottom'],
         offset: 12,
         trigger: 'hover',
@@ -48,7 +51,7 @@ function setButtonColor(button, color, mixed) {
     else
         button.removeAttribute('data-mixed');
 }
-function ensureIconColorStyles() {
+function ensureIconColorStyles(target) {
     (0, utils_1.injectStyleOnce)(ICON_COLOR_STYLE_ID, `
 .${ICON_COLOR_BUTTON_CLASS} {
   position: relative;
@@ -77,5 +80,5 @@ function ensureIconColorStyles() {
     #f5f5f5 12px
   );
 }
-`);
+`, target);
 }

package/lib/editor/plugins/edit-bar/edit-items/types.d.ts

@@ -1,3 +1,7 @@
 import type { BaseAttributes } from '../../../../types';
 import type { ICommandManager, Selection } from '../../../types';
-export type EditItem<T extends BaseAttributes = BaseAttributes> = (selection: Selection, attrs: T, commander: ICommandManager, options?: Record<string, any>) => HTMLElement;
+export type EditItemOptions = {
+    root?: HTMLElement | ShadowRoot;
+    [key: string]: any;
+};
+export type EditItem<T extends BaseAttributes = BaseAttributes> = (selection: Selection, attrs: T, commander: ICommandManager, options?: EditItemOptions) => HTMLElement;

package/lib/editor/plugins/reset-viewbox.d.ts

@@ -3,8 +3,9 @@ import { Plugin } from './base';
 export interface ResetViewBoxOptions {
     style?: Partial<CSSStyleDeclaration>;
     className?: string;
-    getContainer?: HTMLElement | (() => HTMLElement);
+    getContainer?: OverlayRoot | (() => OverlayRoot);
 }
+type OverlayRoot = HTMLElement | ShadowRoot;
 export declare class ResetViewBox extends Plugin implements IPlugin {
     private options?;
     name: string;
@@ -29,5 +30,7 @@ export declare class ResetViewBox extends Plugin implements IPlugin {
     private showButton;
     private hideButton;
     private removeButton;
+    private resolveOverlayRoot;
     private ensureButtonStyle;
 }
+export {};

package/lib/editor/plugins/reset-viewbox.js

@@ -4,6 +4,7 @@ exports.ResetViewBox = void 0;
 const constants_1 = require("../../constants");
 const utils_1 = require("../../utils");
 const commands_1 = require("../commands");
+const utils_2 = require("../utils");
 const base_1 = require("./base");
 const components_1 = require("./components");
 const icons_1 = require("./components/icons");
@@ -36,9 +37,12 @@ class ResetViewBox extends base_1.Plugin {
             if (this.resetButton)
                 return this.resetButton;
             const { style, className } = this.options || {};
+            const containerParent = this.resolveOverlayRoot();
+            this.ensureButtonStyle(containerParent);
             const button = (0, components_1.IconButton)({
                 icon: icons_1.RESET_ICON,
                 onClick: this.resetViewBox,
+                root: containerParent,
             });
             button.classList.add(RESET_BUTTON_CLASS);
             if (className) {
@@ -49,9 +53,6 @@ class ResetViewBox extends base_1.Plugin {
             }
             (0, utils_1.setElementRole)(button, constants_1.COMPONENT_ROLE);
             this.resetButton = button;
-            const { getContainer } = this.options || {};
-            const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
-            const containerParent = resolvedContainer !== null && resolvedContainer !== void 0 ? resolvedContainer : document.body;
             containerParent === null || containerParent === void 0 ? void 0 : containerParent.appendChild(button);
             return button;
         };
@@ -142,7 +143,7 @@ class ResetViewBox extends base_1.Plugin {
     init(options) {
         super.init(options);
         // Initialize originViewBox
-        this.ensureButtonStyle();
+        this.ensureButtonStyle(this.resolveOverlayRoot());
         this.updateOriginViewBox();
         this.unregisterSync = this.editor.registerSync('viewBox', this.handleViewBoxChange);
         window.addEventListener('resize', this.handleResize);
@@ -164,7 +165,12 @@ class ResetViewBox extends base_1.Plugin {
         const { padding } = this.state.getOptions();
         this.originViewBox = (0, utils_1.getBoundViewBox)(svg, (0, utils_1.parsePadding)(padding));
     }
-    ensureButtonStyle() {
+    resolveOverlayRoot() {
+        const { getContainer } = this.options || {};
+        const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
+        return resolvedContainer !== null && resolvedContainer !== void 0 ? resolvedContainer : (0, utils_2.getOverlayContainer)(this.editor.getDocument());
+    }
+    ensureButtonStyle(target) {
         (0, utils_1.injectStyleOnce)(RESET_BUTTON_STYLE_ID, `
       button.${RESET_BUTTON_CLASS} {
         visibility: hidden;
@@ -182,7 +188,7 @@ class ResetViewBox extends base_1.Plugin {
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
         cursor: pointer;
       }
-      `);
+      `, target);
     }
 }
 exports.ResetViewBox = ResetViewBox;

package/lib/editor/utils/index.d.ts

@@ -6,3 +6,4 @@ export * from './event';
 export * from './extension';
 export * from './hotkey';
 export * from './object';
+export * from './root';

package/lib/editor/utils/index.js

@@ -22,3 +22,4 @@ __exportStar(require("./event"), exports);
 __exportStar(require("./extension"), exports);
 __exportStar(require("./hotkey"), exports);
 __exportStar(require("./object"), exports);
+__exportStar(require("./root"), exports);

package/lib/editor/utils/root.d.ts

@@ -0,0 +1,3 @@
+export type OverlayContainer = HTMLElement | ShadowRoot;
+export declare function getOverlayContainer(node?: Node | null): OverlayContainer;
+export declare function eventPathContains(event: Event, node: Node): boolean;

package/lib/editor/utils/root.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOverlayContainer = getOverlayContainer;
+exports.eventPathContains = eventPathContains;
+function getConnectedRoot(node) {
+    if (!(node === null || node === void 0 ? void 0 : node.isConnected))
+        return document;
+    const root = node.getRootNode();
+    return root instanceof ShadowRoot ? root : document;
+}
+function getOverlayContainer(node) {
+    const root = getConnectedRoot(node);
+    return root instanceof ShadowRoot ? root : document.body;
+}
+function eventPathContains(event, node) {
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+    if (path.length > 0) {
+        return path.some((current) => current === node || (current instanceof Node && node.contains(current)));
+    }
+    const target = event.target;
+    return target instanceof Node && (target === node || node.contains(target));
+}

package/lib/exporter/svg.js

@@ -13,6 +13,7 @@ exports.exportToSVGString = exportToSVGString;
 exports.exportToSVG = exportToSVG;
 const utils_1 = require("../utils");
 const font_1 = require("./font");
+const VIEWBOX_CHANGE_TOLERANCE = 0.5;
 function exportToSVGString(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         const node = yield exportToSVG(svg, options);
@@ -20,11 +21,179 @@ function exportToSVGString(svg_1) {
         return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
     });
 }
+function getExportViewBox(svg) {
+    if (svg.hasAttribute('viewBox'))
+        return (0, utils_1.getViewBox)(svg);
+    const width = parseAbsoluteLength(svg.getAttribute('width'));
+    const height = parseAbsoluteLength(svg.getAttribute('height'));
+    if (!Number.isNaN(width) &&
+        width > 0 &&
+        !Number.isNaN(height) &&
+        height > 0) {
+        return { x: 0, y: 0, width, height };
+    }
+    const rect = svg.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+        return { x: 0, y: 0, width: rect.width, height: rect.height };
+    }
+    return null;
+}
+function parseAbsoluteLength(value) {
+    if (!value)
+        return Number.NaN;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return Number.NaN;
+    if (!/^[-+]?(?:\d+\.?\d*|\.\d+)(?:px)?$/.test(trimmed))
+        return Number.NaN;
+    return Number.parseFloat(trimmed);
+}
+function measureSpanContentHeight(span) {
+    const prevHeight = span.style.height;
+    const prevOverflow = span.style.overflow;
+    try {
+        span.style.height = 'max-content';
+        span.style.overflow = 'hidden';
+        void span.offsetHeight; // force reflow
+        return span.scrollHeight;
+    }
+    finally {
+        span.style.height = prevHeight;
+        span.style.overflow = prevOverflow;
+    }
+}
+function measureSpanContentWidth(span) {
+    const prevWidth = span.style.width;
+    const prevOverflow = span.style.overflow;
+    try {
+        span.style.width = 'max-content';
+        span.style.overflow = 'hidden';
+        void span.offsetWidth; // force reflow
+        return span.scrollWidth;
+    }
+    finally {
+        span.style.width = prevWidth;
+        span.style.overflow = prevOverflow;
+    }
+}
+// Returns [left, top, right, bottom] in SVG coordinates for a foreignObject,
+// accounting for flex alignment: bottom/center-aligned content can overflow,
+// and horizontally aligned content can overflow as well.
+function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
+    const foRect = fo.getBoundingClientRect();
+    const foTopLeft = toSVGCoord(foRect.left, foRect.top);
+    const foBottomRight = toSVGCoord(foRect.right, foRect.bottom);
+    const foLeftSVG = foTopLeft.x;
+    const foTopSVG = foTopLeft.y;
+    const foRightSVG = foBottomRight.x;
+    const foBottomSVG = foBottomRight.y;
+    const foWidthSVG = foRightSVG - foLeftSVG;
+    const foHeightSVG = foBottomSVG - foTopSVG;
+    const svgUnitsPerClientPxY = foRect.height > 0 ? foHeightSVG / foRect.height : 1;
+    const svgUnitsPerClientPxX = foRect.width > 0 ? foWidthSVG / foRect.width : 1;
+    // Measure actual content dimensions
+    const realScrollHeight = measureSpanContentHeight(content);
+    const contentHeightSVG = realScrollHeight > 0
+        ? realScrollHeight * svgUnitsPerClientPxY
+        : foHeightSVG;
+    const realScrollWidth = measureSpanContentWidth(content);
+    const contentWidthSVG = realScrollWidth > 0 ? realScrollWidth * svgUnitsPerClientPxX : foWidthSVG;
+    const computedStyle = window.getComputedStyle(content);
+    const alignItems = computedStyle.alignItems;
+    const justifyContent = computedStyle.justifyContent;
+    // Calculate vertical bounds
+    let top, bottom;
+    if (alignItems === 'flex-end' || alignItems === 'end') {
+        top = foBottomSVG - contentHeightSVG;
+        bottom = foBottomSVG;
+    }
+    else if (alignItems === 'center') {
+        const overflowY = contentHeightSVG - foHeightSVG;
+        top = foTopSVG - overflowY / 2;
+        bottom = foBottomSVG + overflowY / 2;
+    }
+    else {
+        top = foTopSVG;
+        bottom = foTopSVG + contentHeightSVG;
+    }
+    // Calculate horizontal bounds
+    let left, right;
+    if (justifyContent === 'flex-end' ||
+        justifyContent === 'end' ||
+        justifyContent === 'right') {
+        left = foRightSVG - contentWidthSVG;
+        right = foRightSVG;
+    }
+    else if (justifyContent === 'center') {
+        const overflowX = contentWidthSVG - foWidthSVG;
+        left = foLeftSVG - overflowX / 2;
+        right = foRightSVG + overflowX / 2;
+    }
+    else {
+        left = foLeftSVG;
+        right = foLeftSVG + contentWidthSVG;
+    }
+    return [left, top, right, bottom];
+}
+/**
+ * Computes a viewBox that fully covers all foreignObject text content,
+ * accounting for overflow caused by flex alignment (bottom/center align
+ * can push content outside the foreignObject bounds).
+ */
+function computeFullViewBox(svg) {
+    const viewBox = getExportViewBox(svg);
+    if (!viewBox)
+        return null;
+    if (typeof svg.getScreenCTM !== 'function')
+        return null;
+    const screenCTM = svg.getScreenCTM();
+    if (!screenCTM)
+        return null;
+    const inverseCTM = screenCTM.inverse();
+    const toSVGCoord = (clientX, clientY) => {
+        const pt = svg.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        return pt.matrixTransform(inverseCTM);
+    };
+    let minX = viewBox.x;
+    let minY = viewBox.y;
+    let maxX = viewBox.x + viewBox.width;
+    let maxY = viewBox.y + viewBox.height;
+    svg
+        .querySelectorAll('foreignObject')
+        .forEach((fo) => {
+        const content = fo.firstElementChild;
+        if (!content)
+            return;
+        const [left, top, right, bottom] = getFOContentBoundsInSVG(fo, content, toSVGCoord);
+        minX = Math.min(minX, left);
+        minY = Math.min(minY, top);
+        maxX = Math.max(maxX, right);
+        maxY = Math.max(maxY, bottom);
+    });
+    const newX = minX;
+    const newY = minY;
+    const newWidth = maxX - newX;
+    const newHeight = maxY - newY;
+    if (newWidth <= viewBox.width + VIEWBOX_CHANGE_TOLERANCE &&
+        newHeight <= viewBox.height + VIEWBOX_CHANGE_TOLERANCE &&
+        newX >= viewBox.x - VIEWBOX_CHANGE_TOLERANCE &&
+        newY >= viewBox.y - VIEWBOX_CHANGE_TOLERANCE)
+        return null;
+    return `${newX} ${newY} ${newWidth} ${newHeight}`;
+}
 function exportToSVG(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         const { removeBackground = false, embedResources = true, removeIds = false, } = options;
         const clonedSVG = svg.cloneNode(true);
-        const { width, height } = (0, utils_1.getViewBox)(svg);
+        if (typeof document !== 'undefined') {
+            const fullViewBox = computeFullViewBox(svg);
+            if (fullViewBox) {
+                clonedSVG.setAttribute('viewBox', fullViewBox);
+            }
+        }
+        const { width, height } = (0, utils_1.getViewBox)(clonedSVG);
         (0, utils_1.setAttributes)(clonedSVG, { width, height });
         if (removeIds) {
             inlineUseElements(clonedSVG);
@@ -52,8 +221,9 @@ function embedIcons(svg) {
             const existsSymbol = svg.querySelector(href);
             if (!existsSymbol) {
                 const symbolElement = document.querySelector(href);
-                if (symbolElement)
+                if (symbolElement) {
                     defs.appendChild(symbolElement.cloneNode(true));
+                }
             }
         });
     });
@@ -261,6 +431,8 @@ function collectDefElements(svg, ids) {
     };
     while (queue.length) {
         const id = queue.shift();
+        if (!id)
+            continue;
         if (visited.has(id))
             continue;
         visited.add(id);
@@ -275,11 +447,65 @@ function collectDefElements(svg, ids) {
     }
     return collected;
 }
+// Fallback implementation based on the CSS.escape algorithm
+function cssEscape(value) {
+    const string = String(value);
+    const length = string.length;
+    let result = '';
+    if (length === 0) {
+        return '';
+    }
+    for (let i = 0; i < length; i++) {
+        const codeUnit = string.charCodeAt(i);
+        // Null character
+        if (codeUnit === 0x0000) {
+            result += '\uFFFD';
+            continue;
+        }
+        // Control characters or DEL
+        if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) || codeUnit === 0x007f) {
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // Escape if first character is a digit
+        if (i === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) {
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // Escape if second character is a digit and first is a hyphen
+        if (i === 1 &&
+            codeUnit >= 0x0030 &&
+            codeUnit <= 0x0039 &&
+            string.charCodeAt(0) === 0x002d) {
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // If the character is the first and is a hyphen followed by end of string, escape it
+        if (i === 0 && length === 1 && codeUnit === 0x002d) {
+            result += '\\' + string.charAt(i);
+            continue;
+        }
+        // Characters that are safe to use unescaped
+        if (codeUnit >= 0x0080 ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) || // 0-9
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) || // A-Z
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a) || // a-z
+            codeUnit === 0x002d || // -
+            codeUnit === 0x005f // _
+        ) {
+            result += string.charAt(i);
+            continue;
+        }
+        // All other characters
+        result += '\\' + string.charAt(i);
+    }
+    return result;
+}
 function escapeCssId(id) {
     if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
         return globalThis.CSS.escape(id);
     }
-    return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+    return cssEscape(id);
 }
 function removeDefs(svg) {
     const defsList = Array.from(svg.querySelectorAll('defs'));

package/lib/options/parser.js

@@ -16,15 +16,17 @@ exports.parseData = parseData;
 const lodash_es_1 = require("lodash-es");
 const designs_1 = require("../designs");
 const renderer_1 = require("../renderer");
+const registry_1 = require("../templates/registry");
 const themes_1 = require("../themes");
 const utils_1 = require("../utils");
 function parseOptions(options) {
     const { container = '#container', padding = 0, template, design, theme, themeConfig, data } = options, restOptions = __rest(options, ["container", "padding", "template", "design", "theme", "themeConfig", "data"]);
+    const resolvedTemplate = template ? (0, registry_1.resolveTemplateKey)(template) : undefined;
     const parsedContainer = typeof container === 'string'
         ? document.querySelector(container) || document.createElement('div')
         : container;
-    const templateOptions = template
-        ? (0, designs_1.getTemplate)(template)
+    const templateOptions = resolvedTemplate
+        ? (0, registry_1.getTemplate)(resolvedTemplate)
         : undefined;
     const mergedThemeConfig = (0, lodash_es_1.merge)({}, templateOptions === null || templateOptions === void 0 ? void 0 : templateOptions.themeConfig, themeConfig);
     const resolvedThemeConfig = theme || themeConfig || (templateOptions === null || templateOptions === void 0 ? void 0 : templateOptions.themeConfig)
@@ -39,11 +41,11 @@ function parseOptions(options) {
         Object.assign(parsed, restTemplateOptions);
     }
     Object.assign(parsed, restOptions);
-    const parsedData = parseData(data, options.template);
+    const parsedData = parseData(data, resolvedTemplate);
     if (parsedData)
         parsed.data = parsedData;
-    if (template)
-        parsed.template = template;
+    if (resolvedTemplate)
+        parsed.template = resolvedTemplate;
     if ((templateOptions === null || templateOptions === void 0 ? void 0 : templateOptions.design) || design) {
         const designOptions = Object.assign(Object.assign({}, (resolvedThemeConfig
             ? Object.assign(Object.assign({}, options), { themeConfig: resolvedThemeConfig }) : options)), { data: parsedData || data });