@antv/infographic 0.2.5 → 0.2.7

package/esm/resource/load-tracker.js

@@ -0,0 +1,36 @@
+const SVG_LOAD_PROMISE_MAP = new WeakMap();
+export function getSvgLoadPromises(svg) {
+    const map = SVG_LOAD_PROMISE_MAP.get(svg);
+    return map ? Array.from(map.values()) : [];
+}
+export function getSvgLoadPromise(svg, key) {
+    return SVG_LOAD_PROMISE_MAP.get(svg)?.get(key);
+}
+export function trackSvgLoadPromise(svg, key, promise) {
+    let map = SVG_LOAD_PROMISE_MAP.get(svg);
+    if (!map) {
+        map = new Map();
+        SVG_LOAD_PROMISE_MAP.set(svg, map);
+    }
+    map.set(key, promise);
+    promise.finally(() => {
+        const map = SVG_LOAD_PROMISE_MAP.get(svg);
+        if (!map)
+            return;
+        if (map.get(key) === promise)
+            map.delete(key);
+        if (map.size === 0)
+            SVG_LOAD_PROMISE_MAP.delete(svg);
+    });
+    return promise;
+}
+export async function waitForSvgLoads(svg) {
+    await Promise.resolve();
+    while (true) {
+        const promises = getSvgLoadPromises(svg);
+        if (!promises.length)
+            break;
+        await Promise.allSettled(promises);
+        await Promise.resolve();
+    }
+}

package/esm/resource/loader.d.ts

@@ -5,3 +5,4 @@ import type { ResourceConfig, ResourceScene } from './types';
  * @returns resource ref id
  */
 export declare function loadResource(svg: SVGSVGElement | null, scene: ResourceScene, config: string | ResourceConfig, datum?: ItemDatum): Promise<string | null>;
+export { getSvgLoadPromises, waitForSvgLoads } from './load-tracker';

package/esm/resource/loader.js

@@ -1,4 +1,5 @@
 import { getOrCreateDefs } from '../utils';
+import { getSvgLoadPromise, trackSvgLoadPromise } from './load-tracker';
 import { loadImageBase64Resource, loadRemoteResource, loadSearchResource, loadSVGResource, } from './loaders';
 import { getCustomResourceLoader } from './registry';
 import { getResourceId, parseResourceConfig } from './utils';
@@ -57,22 +58,34 @@ export async function loadResource(svg, scene, config, datum) {
     if (!cfg)
         return null;
     const id = getResourceId(cfg);
-    const resource = RESOURCE_MAP.has(id)
-        ? RESOURCE_MAP.get(id) || null
-        : await getResource(scene, cfg, datum);
-    if (!resource)
-        return null;
-    if (!RESOURCE_LOAD_MAP.has(svg))
-        RESOURCE_LOAD_MAP.set(svg, new Map());
-    const map = RESOURCE_LOAD_MAP.get(svg);
-    if (map.has(id))
+    const promiseKey = `resource:${id}`;
+    const loadedMap = RESOURCE_LOAD_MAP.get(svg);
+    if (loadedMap?.has(id))
+        return id;
+    const existingPromise = getSvgLoadPromise(svg, promiseKey);
+    if (existingPromise)
+        return await existingPromise;
+    const loadPromise = (async () => {
+        const resource = RESOURCE_MAP.has(id)
+            ? RESOURCE_MAP.get(id) || null
+            : await getResource(scene, cfg, datum);
+        if (!resource)
+            return null;
+        if (!RESOURCE_LOAD_MAP.has(svg))
+            RESOURCE_LOAD_MAP.set(svg, new Map());
+        const map = RESOURCE_LOAD_MAP.get(svg);
+        if (map.has(id))
+            return id;
+        const defs = getOrCreateDefs(svg);
+        resource.id = id;
+        defs.appendChild(resource);
+        map.set(id, resource);
         return id;
-    const defs = getOrCreateDefs(svg);
-    resource.id = id;
-    defs.appendChild(resource);
-    map.set(id, resource);
-    return id;
+    })();
+    trackSvgLoadPromise(svg, promiseKey, loadPromise);
+    return await loadPromise;
 }
+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);

package/esm/resource/loaders/svg.js

@@ -1,12 +1,14 @@
 import { parseSVG } from '../../utils';
 function isSVGResource(resource) {
-    return resource.startsWith('<svg') || resource.startsWith('<symbol');
+    const trimmedResource = resource.trim();
+    return (/^(?:<\?xml[^>]*>\s*)?<svg[\s>]/i.test(trimmedResource) ||
+        trimmedResource.startsWith('<symbol'));
 }
 export function loadSVGResource(data) {
     if (!data || !isSVGResource(data))
         return null;
-    const str = data.startsWith('<svg')
-        ? data.replace(/<svg/, '<symbol').replace(/svg>/, 'symbol>')
-        : data;
+    const str = data
+        .replace(/<svg(?=[\s/>])/i, '<symbol')
+        .replace(/<\/svg>/i, '</symbol>');
     return parseSVG(str);
 }

package/esm/runtime/Infographic.js

@@ -5,6 +5,7 @@ import { exportToPNGString, exportToSVGString, } from '../exporter';
 import { renderSVG } from '../jsx';
 import { parseOptions, } from '../options';
 import { Renderer } from '../renderer';
+import { waitForSvgLoads } from '../resource';
 import { parseSyntax } from '../syntax';
 import { getTypes, parseSVG } from '../utils';
 import { DEFAULT_OPTIONS } from './options';
@@ -71,6 +72,18 @@ export class Infographic {
         }
         this.rendered = true;
         this.emitter.emit('rendered', { node: this.node, options: this.options });
+        const currentNode = this.node;
+        if (currentNode) {
+            void waitForSvgLoads(currentNode).then(() => {
+                if (this.node !== currentNode)
+                    return;
+                this.emitter.emit('loaded', {
+                    node: currentNode,
+                    options: this.options,
+                });
+            });
+        }
+        return true;
     }
     /**
      * Compose the SVG template

package/esm/templates/built-in.js

@@ -308,6 +308,16 @@ const BUILT_IN_TEMPLATES = {
             colorPrimary: '#1677ff',
         },
     },
+    'sequence-funnel-simple': {
+        design: {
+            title: 'default',
+            structure: { type: 'sequence-funnel' },
+            items: [{ type: 'simple', showIcon: false, usePaletteColor: true }],
+        },
+        themeConfig: {
+            palette: '#1677ff',
+        },
+    },
     'list-row-horizontal-icon-line': {
         design: {
             title: 'default',

package/esm/utils/padding.js

@@ -30,22 +30,27 @@ export function setSVGPadding(svg, padding) {
             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();
-                        }
+            try {
+                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,
-            });
+                observer.observe(document, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+            catch {
+                setSVGPaddingInNode(svg, padding);
+            }
         }
     }
 }

package/lib/designs/items/HorizontalIconArrow.js

@@ -35,7 +35,7 @@ const HorizontalIconArrow = (props) => {
         dotLineGap +
         labelBounds.height +
         descBounds.height;
-    return ((0, jsx_runtime_1.jsx)(jsx_1.Group, { width: width, height: totalHeight, ...restProps, children: (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [desc, label, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: dotLineGap }), dotLine] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: fixedGap }), icon, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: iconGap })] })), (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { x: width / 2, y: arrowHeight / 2, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
+    return ((0, jsx_runtime_1.jsx)(jsx_1.Group, { width: width, height: totalHeight, ...restProps, children: (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [desc, label, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: dotLineGap }), dotLine] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: fixedGap }), icon, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: iconGap })] })), (0, jsx_runtime_1.jsxs)(layouts_1.AlignLayout, { horizontal: "center", vertical: "middle", width: width, height: arrowHeight, children: [(0, jsx_runtime_1.jsx)(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { width: width, height: arrowHeight, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
                                 ? datum.time
                                 : String(indexes[0] + 1)
                                     .padStart(2, '0')

package/lib/designs/structures/index.d.ts

@@ -28,6 +28,7 @@ export * from './sequence-circular';
 export * from './sequence-color-snake-steps';
 export * from './sequence-cylinders-3d';
 export * from './sequence-filter-mesh';
+export * from './sequence-funnel';
 export * from './sequence-horizontal-zigzag';
 export * from './sequence-mountain';
 export * from './sequence-pyramid';

package/lib/designs/structures/index.js

@@ -48,6 +48,7 @@ __exportStar(require("./sequence-circular"), exports);
 __exportStar(require("./sequence-color-snake-steps"), exports);
 __exportStar(require("./sequence-cylinders-3d"), exports);
 __exportStar(require("./sequence-filter-mesh"), exports);
+__exportStar(require("./sequence-funnel"), exports);
 __exportStar(require("./sequence-horizontal-zigzag"), exports);
 __exportStar(require("./sequence-mountain"), exports);
 __exportStar(require("./sequence-pyramid"), exports);

package/lib/designs/structures/sequence-funnel.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentType } from '../../jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceFunnelProps extends BaseStructureProps {
+    gap?: number;
+    width?: number;
+    funnelWidth?: number;
+    itemHeight?: number;
+    minBottomRatio?: number;
+}
+export declare const SequenceFunnel: ComponentType<SequenceFunnelProps>;

package/lib/designs/structures/sequence-funnel.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceFunnel = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+/**
+ * 序列漏斗结构（SequenceFunnel）
+ * 用途：
+ * - 在左侧渲染分层漏斗形状（倒置梯形堆叠），右侧渲染对应的 item 卡片与图标
+ * - 形状上宽下窄，底部平滑（梯形），卡片背景插入漏斗下方
+ */
+const round_polygon_1 = __importStar(require("round-polygon"));
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const jsx_1 = require("../../jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+// Constants
+const FUNNEL_CORNER_RADIUS = 6;
+const ICON_SIZE = 32;
+const FUNNEL_LAYER_HEIGHT_RATIO = 1.25;
+const OVERLAP_DIST = 25;
+const TEXT_GAP = 15;
+const SequenceFunnel = (props) => {
+    const { Title, Item, data, gap = 10, width = 700, funnelWidth, itemHeight = 60, minBottomRatio = 0.25, // 默认底部保留 25% 的宽度，形成梯形
+    options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
+    }
+    const themeColors = (0, utils_1.getThemeColors)(options.themeConfig);
+    // 计算各区域尺寸
+    const actualFunnelWidth = funnelWidth ?? width * 0.55; // 稍微调窄一点漏斗，给右侧留更多空间
+    const itemAreaWidth = width - actualFunnelWidth;
+    // 漏斗层高度
+    const funnelLayerHeight = itemHeight * FUNNEL_LAYER_HEIGHT_RATIO;
+    const totalHeight = items.length * funnelLayerHeight + (items.length - 1) * gap;
+    // 计算底部的最小像素宽度
+    const minFunnelPixelWidth = actualFunnelWidth * minBottomRatio;
+    const elements = items.map((item, index) => {
+        const indexes = [index];
+        // 获取颜色
+        const color = (0, utils_1.getPaletteColor)(options, [index]) || themeColors.colorPrimary;
+        // 1. 计算当前层的梯形形状
+        // 使用线性插值，从 actualFunnelWidth 收缩到 minFunnelPixelWidth
+        const { points, topWidth } = calculateTrapezoidSegment(actualFunnelWidth, minFunnelPixelWidth, funnelLayerHeight, gap, totalHeight, index);
+        // 圆角处理
+        const rounded = (0, round_polygon_1.default)(points, FUNNEL_CORNER_RADIUS);
+        const segments = (0, round_polygon_1.getSegments)(rounded, 'AMOUNT', 10);
+        // 坐标计算
+        const funnelCenterX = actualFunnelWidth / 2;
+        const funnelY = index * (funnelLayerHeight + gap);
+        // 2. 背景与 Item 的位置计算
+        // 在漏斗（倒梯形）中，顶边（topWidth）总是比底边（bottomWidth）宽
+        // 所以右侧边缘的最外点是 topWidth 的一半
+        const rightTopX = funnelCenterX + topWidth / 2;
+        // 背景卡片：
+        // X 轴起点：从漏斗最宽处向左回缩 overlapDist，形成“插入”效果
+        const backgroundX = rightTopX - OVERLAP_DIST;
+        // 宽度：填满剩余空间，但要补上左侧回缩的距离
+        const backgroundWidth = itemAreaWidth + OVERLAP_DIST - 10; // -10 用于右侧留白
+        const backgroundYOffset = (funnelLayerHeight - itemHeight) / 2;
+        const backgroundY = funnelY + backgroundYOffset;
+        // 文本内容 (Item)：
+        // X 轴起点：不应该跟着背景向左缩，而应该在漏斗边缘右侧，避免被漏斗遮挡
+        const itemX = rightTopX + TEXT_GAP;
+        const itemWidth = backgroundWidth - OVERLAP_DIST - TEXT_GAP;
+        const itemY = backgroundY;
+        // 图标位置
+        const iconX = funnelCenterX - ICON_SIZE / 2;
+        const iconY = funnelY + funnelLayerHeight / 2 - ICON_SIZE / 2;
+        const funnelColorId = `${color.replace('#', '')}-funnel-${index}`;
+        return {
+            background: ((0, jsx_runtime_1.jsx)(jsx_1.Rect, { x: backgroundX, y: backgroundY, width: backgroundWidth, height: itemHeight, ry: "8" // 背景圆角稍微大一点，显得柔和
+                , fill: (0, tinycolor2_1.default)(color).setAlpha(0.1).toRgbString(), "data-element-type": "shape" })),
+            funnel: [
+                (0, jsx_runtime_1.jsx)(jsx_1.Defs, { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: funnelColorId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: (0, tinycolor2_1.default)(color).lighten(10).toString() }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: color })] }) }),
+                (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: segments, fill: `url(#${funnelColorId})`, y: funnelY, "data-element-type": "shape", 
+                    // 添加轻微阴影效果增加层次感（可选，依赖环境支持 filter）
+                    style: { filter: 'drop-shadow(0px 2px 3px rgba(0,0,0,0.15))' } }),
+            ],
+            icon: ((0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: ICON_SIZE, fill: "#fff" })),
+            item: ((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, width: itemWidth, height: itemHeight, positionV: "middle" })),
+            btnRemove: ((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: backgroundX + backgroundWidth, y: backgroundY })),
+        };
+    });
+    const btnAdd = ((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [items.length], x: width / 2, y: totalHeight + 10 }));
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { width: width, height: totalHeight + 40, children: [(0, jsx_runtime_1.jsx)(jsx_1.Group, { children: elements.map((element) => element.background) }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: elements.flatMap((element) => element.funnel) }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: elements.map((element) => element.icon) }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: elements.map((element) => element.item) }), (0, jsx_runtime_1.jsxs)(components_1.BtnsGroup, { children: [elements.map((element) => element.btnRemove), btnAdd] })] })] }));
+};
+exports.SequenceFunnel = SequenceFunnel;
+// 计算梯形分段逻辑
+function calculateTrapezoidSegment(maxWidth, minWidth, layerHeight, gap, totalHeight, index) {
+    const centerX = maxWidth / 2;
+    // 当前层顶部和底部的 Y 坐标（相对于总高度）
+    const currentTopY = index * (layerHeight + gap);
+    const currentBottomY = currentTopY + layerHeight;
+    // 线性插值计算宽度
+    // Width = MaxWidth - (MaxWidth - MinWidth) * (Y / TotalHeight)
+    const widthDiff = maxWidth - minWidth;
+    const topWidth = maxWidth - widthDiff * (currentTopY / totalHeight);
+    const bottomWidth = maxWidth - widthDiff * (currentBottomY / totalHeight);
+    // 生成四个顶点 (梯形)
+    const p1 = { x: centerX - topWidth / 2, y: 0 }; // 左上
+    const p2 = { x: centerX + topWidth / 2, y: 0 }; // 右上
+    const p3 = { x: centerX + bottomWidth / 2, y: layerHeight }; // 右下
+    const p4 = { x: centerX - bottomWidth / 2, y: layerHeight }; // 左下
+    return { points: [p1, p2, p3, p4], topWidth, bottomWidth };
+}
+// 注册
+(0, registry_1.registerStructure)('sequence-funnel', {
+    component: exports.SequenceFunnel,
+    composites: ['title', 'item'],
+});

package/lib/exporter/index.d.ts

@@ -1,3 +1,3 @@
 export { exportToPNGString } from './png';
-export { exportToSVGString } from './svg';
+export { exportToSVG, exportToSVGString } from './svg';
 export type { ExportOptions, PNGExportOptions, SVGExportOptions, } from './types';

package/lib/exporter/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.exportToSVGString = exports.exportToPNGString = void 0;
+exports.exportToSVGString = exports.exportToSVG = exports.exportToPNGString = void 0;
 var png_1 = require("./png");
 Object.defineProperty(exports, "exportToPNGString", { enumerable: true, get: function () { return png_1.exportToPNGString; } });
 var svg_1 = require("./svg");
+Object.defineProperty(exports, "exportToSVG", { enumerable: true, get: function () { return svg_1.exportToSVG; } });
 Object.defineProperty(exports, "exportToSVGString", { enumerable: true, get: function () { return svg_1.exportToSVGString; } });

package/lib/exporter/svg.js

@@ -10,11 +10,17 @@ async function exportToSVGString(svg, options = {}) {
     return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
 }
 async function exportToSVG(svg, options = {}) {
-    const { embedResources = true } = options;
+    const { embedResources = true, removeIds = false } = options;
     const clonedSVG = svg.cloneNode(true);
     const { width, height } = (0, utils_1.getViewBox)(svg);
     (0, utils_1.setAttributes)(clonedSVG, { width, height });
-    await embedIcons(clonedSVG);
+    if (removeIds) {
+        inlineUseElements(clonedSVG);
+        inlineDefsReferences(clonedSVG);
+    }
+    else {
+        await embedIcons(clonedSVG);
+    }
     await (0, font_1.embedFonts)(clonedSVG, embedResources);
     cleanSVG(clonedSVG);
     return clonedSVG;
@@ -44,6 +50,221 @@ function getDefs(svg) {
     svg.prepend(_defs);
     return _defs;
 }
+function inlineUseElements(svg) {
+    const uses = Array.from(svg.querySelectorAll('use'));
+    if (!uses.length)
+        return;
+    uses.forEach((use) => {
+        const href = getUseHref(use);
+        if (!href || !href.startsWith('#'))
+            return;
+        const target = resolveUseTarget(svg, href);
+        if (!target || target === use)
+            return;
+        const replacement = createInlineElement(use, target);
+        if (!replacement)
+            return;
+        use.replaceWith(replacement);
+    });
+}
+function getUseHref(use) {
+    return use.getAttribute('href') ?? use.getAttribute('xlink:href');
+}
+function resolveUseTarget(svg, href) {
+    const localTarget = svg.querySelector(href);
+    if (localTarget)
+        return localTarget;
+    const docTarget = document.querySelector(href);
+    return docTarget;
+}
+function createInlineElement(use, target) {
+    const tag = target.tagName.toLowerCase();
+    if (tag === 'symbol') {
+        return materializeSymbol(use, target);
+    }
+    if (tag === 'svg') {
+        return materializeSVG(use, target);
+    }
+    return materializeElement(use, target);
+}
+function materializeSymbol(use, symbol) {
+    const symbolClone = symbol.cloneNode(true);
+    const svg = (0, utils_1.createElement)('svg');
+    applyAttributes(svg, symbolClone, new Set(['id']));
+    applyAttributes(svg, use, new Set(['href', 'xlink:href']));
+    while (symbolClone.firstChild) {
+        svg.appendChild(symbolClone.firstChild);
+    }
+    return svg;
+}
+function materializeSVG(use, source) {
+    const clone = source.cloneNode(true);
+    clone.removeAttribute('id');
+    applyAttributes(clone, use, new Set(['href', 'xlink:href']));
+    return clone;
+}
+function materializeElement(use, source) {
+    const clone = source.cloneNode(true);
+    clone.removeAttribute('id');
+    const wrapper = (0, utils_1.createElement)('g');
+    applyAttributes(wrapper, use, new Set(['href', 'xlink:href', 'x', 'y', 'width', 'height', 'transform']));
+    const transform = buildUseTransform(use);
+    if (transform) {
+        wrapper.setAttribute('transform', transform);
+    }
+    wrapper.appendChild(clone);
+    return wrapper;
+}
+function buildUseTransform(use) {
+    const x = use.getAttribute('x');
+    const y = use.getAttribute('y');
+    const translate = x || y ? `translate(${x ?? 0} ${y ?? 0})` : '';
+    const transform = use.getAttribute('transform') ?? '';
+    if (translate && transform)
+        return `${translate} ${transform}`;
+    return translate || transform || null;
+}
+function applyAttributes(target, source, exclude = new Set()) {
+    Array.from(source.attributes).forEach((attr) => {
+        if (exclude.has(attr.name))
+            return;
+        if (attr.name === 'style') {
+            mergeStyleAttribute(target, attr.value);
+            return;
+        }
+        if (attr.name === 'class') {
+            mergeClassAttribute(target, attr.value);
+            return;
+        }
+        target.setAttribute(attr.name, attr.value);
+    });
+}
+function mergeStyleAttribute(target, value) {
+    const current = target.getAttribute('style');
+    if (!current) {
+        target.setAttribute('style', value);
+        return;
+    }
+    const separator = current.trim().endsWith(';') ? '' : ';';
+    target.setAttribute('style', `${current}${separator}${value}`);
+}
+function mergeClassAttribute(target, value) {
+    const current = target.getAttribute('class');
+    if (!current) {
+        target.setAttribute('class', value);
+        return;
+    }
+    target.setAttribute('class', `${current} ${value}`.trim());
+}
+const urlRefRegex = /url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/g;
+function inlineDefsReferences(svg) {
+    const referencedIds = collectReferencedIds(svg);
+    if (referencedIds.size === 0) {
+        removeDefs(svg);
+        return;
+    }
+    const defsDataUrl = createDefsDataUrl(svg, referencedIds);
+    if (!defsDataUrl)
+        return;
+    (0, utils_1.traverse)(svg, (node) => {
+        if (node.tagName.toLowerCase() === 'defs')
+            return false;
+        const attrs = Array.from(node.attributes);
+        attrs.forEach((attr) => {
+            const value = attr.value;
+            if (!value.includes('url('))
+                return;
+            const updated = value.replace(urlRefRegex, (_match, id) => {
+                const encodedId = encodeURIComponent(id);
+                return `url("${defsDataUrl}#${encodedId}")`;
+            });
+            if (updated !== value)
+                node.setAttribute(attr.name, updated);
+        });
+    });
+    removeDefs(svg);
+}
+function collectReferencedIds(svg) {
+    const ids = new Set();
+    (0, utils_1.traverse)(svg, (node) => {
+        if (node.tagName.toLowerCase() === 'defs')
+            return false;
+        collectIdsFromAttributes(node, (id) => ids.add(id));
+    });
+    return ids;
+}
+function collectIdsFromAttributes(node, addId) {
+    for (const attr of Array.from(node.attributes)) {
+        const value = attr.value;
+        if (value.includes('url(')) {
+            for (const match of value.matchAll(urlRefRegex)) {
+                if (match[1])
+                    addId(match[1]);
+            }
+        }
+        if ((attr.name === 'href' || attr.name === 'xlink:href') &&
+            value[0] === '#') {
+            addId(value.slice(1));
+        }
+    }
+}
+function createDefsDataUrl(svg, ids) {
+    if (ids.size === 0)
+        return null;
+    const collected = collectDefElements(svg, ids);
+    if (collected.size === 0)
+        return null;
+    const defsSvg = (0, utils_1.createElement)('svg', {
+        xmlns: 'http://www.w3.org/2000/svg',
+        'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    });
+    const defs = (0, utils_1.createElement)('defs');
+    collected.forEach((node) => {
+        defs.appendChild(node.cloneNode(true));
+    });
+    if (!defs.children.length)
+        return null;
+    defsSvg.appendChild(defs);
+    const serialized = new XMLSerializer().serializeToString(defsSvg);
+    return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized);
+}
+function collectDefElements(svg, ids) {
+    const collected = new Map();
+    const queue = Array.from(ids);
+    const queued = new Set(queue);
+    const visited = new Set();
+    const enqueue = (id) => {
+        if (visited.has(id) || queued.has(id))
+            return;
+        queue.push(id);
+        queued.add(id);
+    };
+    while (queue.length) {
+        const id = queue.shift();
+        if (visited.has(id))
+            continue;
+        visited.add(id);
+        const selector = `#${escapeCssId(id)}`;
+        const target = svg.querySelector(selector);
+        if (!target)
+            continue;
+        collected.set(id, target);
+        (0, utils_1.traverse)(target, (node) => {
+            collectIdsFromAttributes(node, enqueue);
+        });
+    }
+    return collected;
+}
+function escapeCssId(id) {
+    if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
+        return globalThis.CSS.escape(id);
+    }
+    return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+}
+function removeDefs(svg) {
+    const defsList = Array.from(svg.querySelectorAll('defs'));
+    defsList.forEach((defs) => defs.remove());
+}
 function cleanSVG(svg) {
     removeBtnGroup(svg);
     removeTransientContainer(svg);