@antv/infographic 0.2.6 → 0.2.7

package/esm/designs/items/HorizontalIconArrow.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
 import { Ellipse, getElementBounds, Group, Path, Polygon, Text, } from '../../jsx';
 import { Gap, ItemDesc, ItemIconCircle, ItemLabel, ShapesGroup, } from '../components';
-import { FlexLayout } from '../layouts';
+import { AlignLayout, FlexLayout } from '../layouts';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
 export const HorizontalIconArrow = (props) => {
@@ -32,7 +32,7 @@ export const HorizontalIconArrow = (props) => {
         dotLineGap +
         labelBounds.height +
         descBounds.height;
-    return (_jsx(Group, { width: width, height: totalHeight, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: fixedGap }), icon, _jsx(Gap, { height: iconGap })] })), _jsxs(Group, { children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(Text, { x: width / 2, y: arrowHeight / 2, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
+    return (_jsx(Group, { width: width, height: totalHeight, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: fixedGap }), icon, _jsx(Gap, { height: iconGap })] })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", width: width, height: arrowHeight, children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(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/esm/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/esm/designs/structures/index.js

@@ -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/esm/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/esm/designs/structures/sequence-funnel.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+/**
+ * 序列漏斗结构（SequenceFunnel）
+ * 用途：
+ * - 在左侧渲染分层漏斗形状（倒置梯形堆叠），右侧渲染对应的 item 卡片与图标
+ * - 形状上宽下窄，底部平滑（梯形），卡片背景插入漏斗下方
+ */
+import roundPolygon, { getSegments } from 'round-polygon';
+import tinycolor from 'tinycolor2';
+import { Defs, Group, Polygon, Rect } from '../../jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemIcon, ItemsGroup, } from '../components';
+import { FlexLayout } from '../layouts';
+import { getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './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;
+export 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 ? _jsx(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return (_jsx(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
+    }
+    const themeColors = 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 = getPaletteColor(options, [index]) || themeColors.colorPrimary;
+        // 1. 计算当前层的梯形形状
+        // 使用线性插值，从 actualFunnelWidth 收缩到 minFunnelPixelWidth
+        const { points, topWidth } = calculateTrapezoidSegment(actualFunnelWidth, minFunnelPixelWidth, funnelLayerHeight, gap, totalHeight, index);
+        // 圆角处理
+        const rounded = roundPolygon(points, FUNNEL_CORNER_RADIUS);
+        const segments = 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: (_jsx(Rect, { x: backgroundX, y: backgroundY, width: backgroundWidth, height: itemHeight, ry: "8" // 背景圆角稍微大一点，显得柔和
+                , fill: tinycolor(color).setAlpha(0.1).toRgbString(), "data-element-type": "shape" })),
+            funnel: [
+                _jsx(Defs, { children: _jsxs("linearGradient", { id: funnelColorId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: tinycolor(color).lighten(10).toString() }), _jsx("stop", { offset: "100%", stopColor: color })] }) }),
+                _jsx(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: (_jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: ICON_SIZE, fill: "#fff" })),
+            item: (_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, width: itemWidth, height: itemHeight, positionV: "middle" })),
+            btnRemove: (_jsx(BtnRemove, { indexes: indexes, x: backgroundX + backgroundWidth, y: backgroundY })),
+        };
+    });
+    const btnAdd = (_jsx(BtnAdd, { indexes: [items.length], x: width / 2, y: totalHeight + 10 }));
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { width: width, height: totalHeight + 40, children: [_jsx(Group, { children: elements.map((element) => element.background) }), _jsx(Group, { children: elements.flatMap((element) => element.funnel) }), _jsx(Group, { children: elements.map((element) => element.icon) }), _jsx(ItemsGroup, { children: elements.map((element) => element.item) }), _jsxs(BtnsGroup, { children: [elements.map((element) => element.btnRemove), btnAdd] })] })] }));
+};
+// 计算梯形分段逻辑
+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 };
+}
+// 注册
+registerStructure('sequence-funnel', {
+    component: SequenceFunnel,
+    composites: ['title', 'item'],
+});

package/esm/options/types.d.ts

@@ -54,5 +54,7 @@ interface SVGOptions {
     attributes?: Record<string, string | number | boolean>;
     id?: string;
     className?: string;
+    /** 是否启用背景 */
+    background?: boolean;
 }
 export {};

package/esm/renderer/composites/background.d.ts

@@ -1 +1,2 @@
-export declare function renderBackground(svg: SVGSVGElement, background?: string): void;
+import type { ParsedInfographicOptions } from '../../options';
+export declare function renderBackground(svg: SVGSVGElement, options: ParsedInfographicOptions): void;

package/esm/renderer/composites/background.js

@@ -1,12 +1,14 @@
 import { createElement, getElementByRole } from '../../utils';
-export function renderBackground(svg, background) {
+export function renderBackground(svg, options) {
+    if (options.svg?.background === false)
+        return;
+    const { themeConfig: { colorBg: background }, } = options;
+    if (!background)
+        return;
     const container = svg.parentElement;
     if (container)
         container.style.backgroundColor = background || 'none';
     const element = getElementByRole(svg, "background" /* ElementTypeEnum.Background */);
-    if (!background) {
-        return element?.remove();
-    }
     svg.style.backgroundColor = background;
     if (element) {
         element.setAttribute('fill', background);

package/esm/renderer/fonts/loader.js

@@ -50,7 +50,7 @@ function trackFontPromise(target, id, promise) {
     return promise;
 }
 function isLinkLoaded(link) {
-    if (link.dataset.infographicFontLoaded === 'true')
+    if (link.getAttribute('data-infographic-font-loaded') === 'true')
         return true;
     try {
         return !!link.sheet;
@@ -68,7 +68,7 @@ function getFontLoadPromise(target, id, link) {
     }
     const promise = new Promise((resolve) => {
         const done = () => {
-            link.dataset.infographicFontLoaded = 'true';
+            link.setAttribute('data-infographic-font-loaded', 'true');
             resolve();
         };
         link.addEventListener('load', done, { once: true });

package/esm/renderer/renderer.js

@@ -27,24 +27,34 @@ export class Renderer {
             return svg;
         renderTemplate(svg, this.options);
         svg.style.visibility = 'hidden';
+        const postRender = () => {
+            setView(this.template, this.options);
+            loadFonts(this.template);
+            svg.style.visibility = '';
+        };
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 mutation.addedNodes.forEach((node) => {
                     if (node === svg || node.contains(svg)) {
                         // post render
-                        setView(this.template, this.options);
-                        loadFonts(this.template);
+                        postRender();
                         // disconnect observer
                         observer.disconnect();
-                        svg.style.visibility = '';
                     }
                 });
             });
         });
-        observer.observe(document, {
-            childList: true,
-            subtree: true,
-        });
+        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;
     }
@@ -52,8 +62,7 @@ export class Renderer {
 function renderTemplate(svg, options) {
     fill(svg, options);
     setSVG(svg, options);
-    const { themeConfig } = options;
-    renderBackground(svg, themeConfig?.colorBg);
+    renderBackground(svg, options);
 }
 function fill(svg, options) {
     const { themeConfig, data } = options;

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/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/options/types.d.ts

@@ -54,5 +54,7 @@ interface SVGOptions {
     attributes?: Record<string, string | number | boolean>;
     id?: string;
     className?: string;
+    /** 是否启用背景 */
+    background?: boolean;
 }
 export {};

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

@@ -1 +1,2 @@
-export declare function renderBackground(svg: SVGSVGElement, background?: string): void;
+import type { ParsedInfographicOptions } from '../../options';
+export declare function renderBackground(svg: SVGSVGElement, options: ParsedInfographicOptions): void;

package/lib/renderer/composites/background.js

@@ -2,14 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderBackground = renderBackground;
 const utils_1 = require("../../utils");
-function renderBackground(svg, background) {
+function renderBackground(svg, options) {
+    if (options.svg?.background === false)
+        return;
+    const { themeConfig: { colorBg: background }, } = options;
+    if (!background)
+        return;
     const container = svg.parentElement;
     if (container)
         container.style.backgroundColor = background || 'none';
     const element = (0, utils_1.getElementByRole)(svg, "background" /* ElementTypeEnum.Background */);
-    if (!background) {
-        return element?.remove();
-    }
     svg.style.backgroundColor = background;
     if (element) {
         element.setAttribute('fill', background);

package/lib/renderer/fonts/loader.js

@@ -56,7 +56,7 @@ function trackFontPromise(target, id, promise) {
     return promise;
 }
 function isLinkLoaded(link) {
-    if (link.dataset.infographicFontLoaded === 'true')
+    if (link.getAttribute('data-infographic-font-loaded') === 'true')
         return true;
     try {
         return !!link.sheet;
@@ -74,7 +74,7 @@ function getFontLoadPromise(target, id, link) {
     }
     const promise = new Promise((resolve) => {
         const done = () => {
-            link.dataset.infographicFontLoaded = 'true';
+            link.setAttribute('data-infographic-font-loaded', 'true');
             resolve();
         };
         link.addEventListener('load', done, { once: true });