@antv/infographic 0.2.6 → 0.2.7

package/lib/renderer/renderer.js

@@ -30,24 +30,34 @@ class Renderer {
             return svg;
         renderTemplate(svg, this.options);
         svg.style.visibility = 'hidden';
+        const postRender = () => {
+            setView(this.template, this.options);
+            (0, fonts_1.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);
-                        (0, fonts_1.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;
     }
@@ -56,8 +66,7 @@ exports.Renderer = Renderer;
 function renderTemplate(svg, options) {
     fill(svg, options);
     setSVG(svg, options);
-    const { themeConfig } = options;
-    (0, composites_1.renderBackground)(svg, themeConfig?.colorBg);
+    (0, composites_1.renderBackground)(svg, options);
 }
 function fill(svg, options) {
     const { themeConfig, data } = options;

package/lib/resource/loaders/svg.js

@@ -3,13 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadSVGResource = loadSVGResource;
 const utils_1 = require("../../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'));
 }
 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 (0, utils_1.parseSVG)(str);
 }

package/lib/templates/built-in.js

@@ -310,6 +310,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/lib/utils/padding.js

@@ -34,22 +34,27 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",
@@ -91,6 +91,7 @@
     "css": "^3.0.0",
     "culori": "^4.0.2",
     "d3": "^7.9.0",
+    "eventemitter3": "^5.0.1",
     "flru": "^1.0.2",
     "lodash-es": "^4.17.21",
     "measury": "^0.1.3",
@@ -116,7 +117,6 @@
     "any-skills": "^0.1.1",
     "csstype": "^3.2.2",
     "eslint": "^9.35.0",
-    "eventemitter3": "^5.0.1",
     "globals": "^16.4.0",
     "gzip-size": "^7.0.0",
     "husky": "^9.1.7",

package/src/designs/items/HorizontalIconArrow.tsx

@@ -15,7 +15,7 @@ import {
   ItemLabel,
   ShapesGroup,
 } from '../components';
-import { FlexLayout } from '../layouts';
+import { AlignLayout, FlexLayout } from '../layouts';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
 import type { BaseItemProps } from './types';
@@ -114,15 +114,20 @@ export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
             <Gap height={iconGap} />
           </>
         )}
-        <Group>
+        <AlignLayout
+          horizontal="center"
+          vertical="middle"
+          width={width}
+          height={arrowHeight}
+        >
           <HorizontalArrow
             width={width}
             height={arrowHeight}
             fill={themeColors.colorPrimary}
           />
           <Text
-            x={width / 2}
-            y={arrowHeight / 2}
+            width={width}
+            height={arrowHeight}
             alignHorizontal="center"
             alignVertical="middle"
             fill={themeColors.colorWhite}
@@ -135,7 +140,7 @@ export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
                   .padStart(2, '0')
                   .slice(-2)}
           </Text>
-        </Group>
+        </AlignLayout>
         {!isVNormal ? (
           <>
             {dotLine}

package/src/designs/structures/index.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/src/designs/structures/sequence-funnel.tsx

@@ -0,0 +1,260 @@
+/**
+ * 序列漏斗结构（SequenceFunnel）
+ * 用途：
+ * - 在左侧渲染分层漏斗形状（倒置梯形堆叠），右侧渲染对应的 item 卡片与图标
+ * - 形状上宽下窄，底部平滑（梯形），卡片背景插入漏斗下方
+ */
+import roundPolygon, { getSegments } from 'round-polygon';
+import tinycolor from 'tinycolor2';
+import type { ComponentType } from '../../jsx';
+import { Defs, Group, Point, 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';
+import type { BaseStructureProps } from './types';
+
+// 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;
+
+// SequenceFunnel 的可配置属性
+export interface SequenceFunnelProps extends BaseStructureProps {
+  gap?: number;
+  width?: number;
+  funnelWidth?: number;
+  itemHeight?: number;
+  // 新增：底部宽度比例（0~1），控制漏斗底部的收窄程度，避免变成尖角
+  // 默认为 0.25 (即底部宽度是顶部的 25%)
+  minBottomRatio?: number;
+}
+
+export const SequenceFunnel: ComponentType<SequenceFunnelProps> = (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 ? <Title title={title} desc={desc} /> : null;
+
+  if (items.length === 0) {
+    return (
+      <FlexLayout
+        id="infographic-container"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        {titleContent}
+      </FlexLayout>
+    );
+  }
+
+  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: (
+        <Rect
+          x={backgroundX}
+          y={backgroundY}
+          width={backgroundWidth}
+          height={itemHeight}
+          ry="8" // 背景圆角稍微大一点，显得柔和
+          fill={tinycolor(color).setAlpha(0.1).toRgbString()} // 使用当前主题色的浅色背景
+          data-element-type="shape"
+        />
+      ),
+      funnel: [
+        <Defs>
+          <linearGradient id={funnelColorId} x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop
+              offset="0%"
+              stopColor={tinycolor(color).lighten(10).toString()}
+            />
+            <stop offset="100%" stopColor={color} />
+          </linearGradient>
+        </Defs>,
+        <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: (
+        <ItemIcon
+          indexes={indexes}
+          x={iconX}
+          y={iconY}
+          size={ICON_SIZE}
+          fill="#fff"
+        />
+      ),
+      item: (
+        <Item
+          indexes={indexes}
+          datum={item}
+          data={data}
+          x={itemX}
+          y={itemY}
+          width={itemWidth}
+          height={itemHeight}
+          positionV="middle"
+        />
+      ),
+      btnRemove: (
+        <BtnRemove
+          indexes={indexes}
+          x={backgroundX + backgroundWidth}
+          y={backgroundY}
+        />
+      ),
+    };
+  });
+
+  const btnAdd = (
+    <BtnAdd indexes={[items.length]} x={width / 2} y={totalHeight + 10} />
+  );
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group width={width} height={totalHeight + 40}>
+        {/* 背景最先渲染，位于底部 */}
+        <Group>{elements.map((element) => element.background)}</Group>
+        {/* 漏斗覆盖在背景之上 */}
+        <Group>{elements.flatMap((element) => element.funnel)}</Group>
+        {/* 图标和文字在最上层 */}
+        <Group>{elements.map((element) => element.icon)}</Group>
+        <ItemsGroup>{elements.map((element) => element.item)}</ItemsGroup>
+        <BtnsGroup>
+          {elements.map((element) => element.btnRemove)}
+          {btnAdd}
+        </BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+// 计算梯形分段逻辑
+function calculateTrapezoidSegment(
+  maxWidth: number,
+  minWidth: number,
+  layerHeight: number,
+  gap: number,
+  totalHeight: number,
+  index: number,
+) {
+  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: Point = { x: centerX - topWidth / 2, y: 0 }; // 左上
+  const p2: Point = { x: centerX + topWidth / 2, y: 0 }; // 右上
+  const p3: Point = { x: centerX + bottomWidth / 2, y: layerHeight }; // 右下
+  const p4: Point = { x: centerX - bottomWidth / 2, y: layerHeight }; // 左下
+
+  return { points: [p1, p2, p3, p4], topWidth, bottomWidth };
+}
+
+// 注册
+registerStructure('sequence-funnel', {
+  component: SequenceFunnel,
+  composites: ['title', 'item'],
+});

package/src/options/types.ts

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

package/src/renderer/composites/background.ts

@@ -1,18 +1,21 @@
+import type { ParsedInfographicOptions } from '../../options';
 import { createElement, getElementByRole } from '../../utils';
 import { ElementTypeEnum } from '../constants';
 
 export function renderBackground(
   svg: SVGSVGElement,
-  background?: string,
+  options: ParsedInfographicOptions,
 ): void {
+  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, ElementTypeEnum.Background);
 
-  if (!background) {
-    return element?.remove();
-  }
-
   svg.style.backgroundColor = background;
 
   if (element) {

package/src/renderer/fonts/loader.ts

@@ -69,7 +69,7 @@ function trackFontPromise(
 }
 
 function isLinkLoaded(link: HTMLLinkElement): boolean {
-  if (link.dataset.infographicFontLoaded === 'true') return true;
+  if (link.getAttribute('data-infographic-font-loaded') === 'true') return true;
   try {
     return !!link.sheet;
   } catch {
@@ -91,7 +91,7 @@ function getFontLoadPromise(
 
   const promise = new Promise<void>((resolve) => {
     const done = () => {
-      link.dataset.infographicFontLoaded = 'true';
+      link.setAttribute('data-infographic-font-loaded', 'true');
       resolve();
     };
     link.addEventListener('load', done, { once: true });

package/src/renderer/renderer.ts

@@ -64,26 +64,36 @@ export class Renderer implements IRenderer {
 
     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;
@@ -95,8 +105,7 @@ function renderTemplate(svg: SVGSVGElement, options: ParsedInfographicOptions) {
 
   setSVG(svg, options);
 
-  const { themeConfig } = options;
-  renderBackground(svg, themeConfig?.colorBg);
+  renderBackground(svg, options);
 }
 
 function fill(svg: SVGSVGElement, options: ParsedInfographicOptions) {

package/src/resource/loaders/svg.ts

@@ -1,13 +1,17 @@
 import { parseSVG } from '../../utils';
 
 function isSVGResource(resource: string): boolean {
-  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: string) {
   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/src/templates/built-in.ts

@@ -310,6 +310,16 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
       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/src/utils/padding.ts

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