@antv/infographic 0.2.15 → 0.2.17

package/src/designs/structures/sequence-interaction.tsx

@@ -100,6 +100,7 @@ const DEFAULT_ITEM_HEIGHT = 50;
 const FONT_SIZE = 14;
 const ARROW_SIZE = 14;
 const CORNER_RADIUS_NODE = 6;
+const LIFELINE_MASK_GAP = 2;
 const LANE_PADDING = 60;
 
 const BTN_HALF_SIZE = 12;
@@ -419,39 +420,6 @@ export const SequenceInteractionFlow: ComponentType<
   const defsElements: JSXElement[] = [];
   const btnElements: JSXElement[] = [];
 
-  // 绘制生命线
-  if (showLifeline) {
-    lanes.forEach((_lane, laneIndex) => {
-      const centerX = getLaneCenterX(laneIndex);
-      const startY = padding + headerOffset;
-      const endY = totalHeight - padding;
-
-      decorElements.push(
-        <Path
-          d={`M ${centerX} ${startY} L ${centerX} ${endY}`}
-          stroke={colorBorder}
-          strokeWidth={lifelineWidth}
-          strokeDasharray="5,5"
-          fill="none"
-          data-element-type="shape"
-        />,
-      );
-
-      // 绘制生命线末端箭头（实心）
-      decorElements.push(
-        ...createArrowElements(
-          centerX,
-          endY,
-          Math.PI / 2,
-          'triangle',
-          colorBorder,
-          1,
-          10,
-        ),
-      );
-    });
-  }
-
   // 绘制泳道标题
   if (showLaneHeader) {
     lanes.forEach((lane, laneIndex) => {
@@ -523,19 +491,6 @@ export const SequenceInteractionFlow: ComponentType<
         options,
       );
 
-      // 添加节点背景遮挡层，防止生命线虚线透过半透明节点显示
-      // 只在节点中心放置窄条遮挡生命线，避免圆角处露出白色背景
-      const maskStripWidth = lifelineWidth + 6;
-      decorElements.push(
-        <Rect
-          x={centerX - maskStripWidth / 2}
-          y={y}
-          width={maskStripWidth}
-          height={itemHeight}
-          fill={colorBg}
-        />,
-      );
-
       // 构造类似 hierarchy-tree 的 _originalIndex
       const originalIndex = [laneIndex, rowIndex];
       // 附加到数据上，确保 Item 组件能正确识别
@@ -631,6 +586,97 @@ export const SequenceInteractionFlow: ComponentType<
     );
   });
 
+  // 绘制生命线（使用 mask 挖空节点区域，避免虚线穿透半透明节点）
+  if (showLifeline) {
+    // 预先按泳道分组节点，避免每条泳道都遍历全部节点
+    const nodeRectsByLane = new Map<
+      number,
+      { x: number; y: number; width: number; height: number }[]
+    >();
+    nodeLayoutById.forEach((layout) => {
+      let list = nodeRectsByLane.get(layout.laneIndex);
+      if (!list) {
+        list = [];
+        nodeRectsByLane.set(layout.laneIndex, list);
+      }
+      list.push({
+        x: layout.x,
+        y: layout.y,
+        width: layout.width,
+        height: layout.height,
+      });
+    });
+
+    lanes.forEach((_lane, laneIndex) => {
+      const centerX = getLaneCenterX(laneIndex);
+      const startY = padding + headerOffset;
+      const endY = totalHeight - padding;
+
+      const laneNodeRects = nodeRectsByLane.get(laneIndex) ?? [];
+
+      // 如果该泳道有节点，创建 mask 来挖空节点区域
+      let lifelineMaskAttr: string | undefined;
+      if (laneNodeRects.length > 0) {
+        const maskId = `lifeline-mask-${instanceId}-${laneIndex}`;
+        defsElements.push(
+          <mask
+            id={maskId}
+            maskUnits="userSpaceOnUse"
+            x={0}
+            y={0}
+            width={totalWidth}
+            height={totalHeight}
+          >
+            {/* 白色底：显示所有线条 */}
+            <Rect
+              x={0}
+              y={0}
+              width={totalWidth}
+              height={totalHeight}
+              fill="white"
+            />
+            {/* 黑色块：在节点位置挖空生命线，上下各留 LIFELINE_MASK_GAP 间距 */}
+            {laneNodeRects.map((rect) => (
+              <Rect
+                x={rect.x}
+                y={rect.y - LIFELINE_MASK_GAP}
+                width={rect.width}
+                height={rect.height + LIFELINE_MASK_GAP * 2}
+                fill="black"
+              />
+            ))}
+          </mask>,
+        );
+        lifelineMaskAttr = `url(#${maskId})`;
+      }
+
+      decorElements.push(
+        <Path
+          d={`M ${centerX} ${startY} L ${centerX} ${endY}`}
+          stroke={colorBorder}
+          strokeWidth={lifelineWidth}
+          strokeDasharray="5,5"
+          fill="none"
+          data-element-type="shape"
+          mask={lifelineMaskAttr}
+        />,
+      );
+
+      // 绘制生命线末端箭头（实心）
+      decorElements.push(
+        ...createArrowElements(
+          centerX,
+          endY,
+          Math.PI / 2,
+          'triangle',
+          colorBorder,
+          1,
+          10,
+        ),
+      );
+    });
+  }
+
   // 添加新泳道按钮 (最右侧)
   const lastLaneRightX = getLaneCenterX(lanes.length - 1) + laneWidth / 2;
   const newLaneX =

package/src/designs/structures/sequence-timeline.tsx

@@ -15,12 +15,13 @@ import type { BaseStructureProps } from './types';
 export interface SequenceTimelineProps extends BaseStructureProps {
   gap?: number;
   lineOffset?: number;
+  showStepLabels?: boolean;
 }
 
 export const SequenceTimeline: ComponentType<SequenceTimelineProps> = (
   props,
 ) => {
-  const { Title, Item, data, gap = 10, options } = props;
+  const { Title, Item, data, gap = 10, showStepLabels = true, options } = props;
   const { title, desc, items = [] } = data;
 
   const titleContent = Title ? <Title title={title} desc={desc} /> : null;
@@ -90,20 +91,22 @@ export const SequenceTimeline: ComponentType<SequenceTimelineProps> = (
     const nodeY = itemY + itemBounds.height / 2;
     const indexes = [index];
 
-    decorElements.push(
-      <Text
-        x={stepLabelX}
-        y={nodeY}
-        width={70}
-        fontSize={18}
-        fontWeight="bold"
-        alignHorizontal="left"
-        alignVertical="middle"
-        fill={palette[index % palette.length]}
-      >
-        {`STEP ${index + 1}`}
-      </Text>,
-    );
+    if (showStepLabels) {
+      decorElements.push(
+        <Text
+          x={stepLabelX}
+          y={nodeY}
+          width={70}
+          fontSize={18}
+          fontWeight="bold"
+          alignHorizontal="left"
+          alignVertical="middle"
+          fill={palette[index % palette.length]}
+        >
+          {`STEP ${index + 1}`}
+        </Text>,
+      );
+    }
 
     itemElements.push(
       <Item

package/src/exporter/png.ts

@@ -6,8 +6,9 @@ export async function exportToPNGString(
   svg: SVGSVGElement,
   options: Omit<PNGExportOptions, 'type'> = {},
 ): Promise<string> {
-  const { dpr = globalThis.devicePixelRatio ?? 2 } = options;
-  const node = await exportToSVG(svg);
+  const { dpr = globalThis.devicePixelRatio ?? 2, removeBackground = false } =
+    options;
+  const node = await exportToSVG(svg, { removeBackground });
 
   const { width, height } = getViewBox(node);
 

package/src/exporter/svg.ts

@@ -10,6 +10,8 @@ import {
 import { embedFonts } from './font';
 import type { SVGExportOptions } from './types';
 
+const VIEWBOX_CHANGE_TOLERANCE = 0.5;
+
 export async function exportToSVGString(
   svg: SVGSVGElement,
   options: Omit<SVGExportOptions, 'type'> = {},
@@ -19,13 +21,209 @@ export async function exportToSVGString(
   return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
 }
 
+function getExportViewBox(svg: SVGSVGElement) {
+  if (svg.hasAttribute('viewBox')) return getViewBox(svg);
+
+  const width = parseAbsoluteLength(svg.getAttribute('width'));
+  const height = parseAbsoluteLength(svg.getAttribute('height'));
+  if (width > 0 && 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: string | null): number {
+  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: HTMLElement): number {
+  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: HTMLElement): number {
+  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: SVGForeignObjectElement,
+  content: HTMLElement,
+  toSVGCoord: (x: number, y: number) => SVGPoint,
+): [number, number, number, number] {
+  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: number, bottom: number;
+  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: number, right: number;
+  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: SVGSVGElement): string | null {
+  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: number, clientY: number) => {
+    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<SVGForeignObjectElement>('foreignObject')
+    .forEach((fo) => {
+      const content = fo.firstElementChild as HTMLElement;
+      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}`;
+}
+
 export async function exportToSVG(
   svg: SVGSVGElement,
   options: Omit<SVGExportOptions, 'type'> = {},
 ) {
-  const { embedResources = true, removeIds = false } = options;
+  const {
+    removeBackground = false,
+    embedResources = true,
+    removeIds = false,
+  } = options;
   const clonedSVG = svg.cloneNode(true) as SVGSVGElement;
-  const { width, height } = getViewBox(svg);
+
+  if (typeof document !== 'undefined') {
+    const fullViewBox = computeFullViewBox(svg);
+    if (fullViewBox) {
+      clonedSVG.setAttribute('viewBox', fullViewBox);
+    }
+  }
+
+  const { width, height } = getViewBox(clonedSVG);
   setAttributes(clonedSVG, { width, height });
 
   if (removeIds) {
@@ -36,6 +234,9 @@ export async function exportToSVG(
   }
   await embedFonts(clonedSVG, embedResources);
 
+  if (removeBackground) {
+    removeSVGBackground(clonedSVG);
+  }
   cleanSVG(clonedSVG);
 
   return clonedSVG;
@@ -322,6 +523,12 @@ function cleanSVG(svg: SVGSVGElement) {
   clearDataset(svg);
 }
 
+function removeSVGBackground(svg: SVGSVGElement) {
+  svg.style.removeProperty('background-color');
+  const background = getElementByRole(svg, ElementTypeEnum.Background);
+  background?.remove();
+}
+
 function removeBtnGroup(svg: SVGSVGElement) {
   const btnGroup = getElementByRole(svg, ElementTypeEnum.BtnsGroup);
   btnGroup?.remove();

package/src/exporter/types.ts

@@ -1,5 +1,10 @@
 export interface SVGExportOptions {
   type: 'svg';
+  /**
+   * 是否移除背景（SVG 背景样式 + 背景矩形）
+   * @default false
+   */
+  removeBackground?: boolean;
   /**
    * 是否将远程资源嵌入到 SVG 中
    * @default true
@@ -14,6 +19,11 @@ export interface SVGExportOptions {
 
 export interface PNGExportOptions {
   type: 'png';
+  /**
+   * 是否移除背景（SVG 背景样式 + 背景矩形）
+   * @default false
+   */
+  removeBackground?: boolean;
   /**
    * 设备像素比，默认为浏览器的 devicePixelRatio
    * @default globalThis.devicePixelRatio || 2

package/src/options/parser.ts

@@ -3,13 +3,13 @@ import {
   DesignOptions,
   getItem,
   getStructure,
-  getTemplate,
   NullableParsedDesignsOptions,
   ParsedDesignsOptions,
   Title,
 } from '../designs';
 import { getPaletteColor } from '../renderer';
 import type { TemplateOptions } from '../templates';
+import { getTemplate, resolveTemplateKey } from '../templates/registry';
 import { generateThemeColors, getTheme, type ThemeConfig } from '../themes';
 import type { Data, ItemDatum, ParsedData } from '../types';
 import {
@@ -32,14 +32,15 @@ export function parseOptions(
     data,
     ...restOptions
   } = options;
+  const resolvedTemplate = template ? resolveTemplateKey(template) : undefined;
 
   const parsedContainer =
     typeof container === 'string'
       ? document.querySelector(container) || document.createElement('div')
       : container;
 
-  const templateOptions: TemplateOptions | undefined = template
-    ? getTemplate(template)
+  const templateOptions: TemplateOptions | undefined = resolvedTemplate
+    ? getTemplate(resolvedTemplate)
     : undefined;
   const mergedThemeConfig = merge(
     {},
@@ -52,7 +53,7 @@ export function parseOptions(
       : undefined;
 
   const parsed: Partial<ParsedInfographicOptions> = {
-    container: parsedContainer as HTMLElement,
+    container: parsedContainer as Element | ShadowRoot,
     padding: parsePadding(padding),
   };
 
@@ -63,10 +64,10 @@ export function parseOptions(
 
   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?.design || design) {
     const designOptions = {
       ...(resolvedThemeConfig

package/src/options/types.ts

@@ -5,8 +5,8 @@ import type { Data, Padding, ParsedData } from '../types';
 import type { Path } from '../utils';
 
 export interface InfographicOptions {
-  /** 容器，可以是选择器或者 HTMLElement */
-  container?: string | HTMLElement;
+  /** 容器，可以是选择器、Element 或 ShadowRoot */
+  container?: string | Element | ShadowRoot;
   /** 宽度 */
   width?: number | string;
   /** 高度 */
@@ -37,7 +37,7 @@ export interface InfographicOptions {
 }
 
 export interface ParsedInfographicOptions {
-  container: HTMLElement;
+  container: Element | ShadowRoot;
   width?: number | string;
   height?: number | string;
   padding?: Padding;

package/src/renderer/renderer.ts

@@ -86,7 +86,7 @@ export class Renderer implements IRenderer {
       });
 
       try {
-        observer.observe(document, {
+        observer.observe(this.options.container, {
           childList: true,
           subtree: true,
         });

package/src/resource/loaders/search.ts

@@ -11,8 +11,8 @@ const queryIcon = async (query: string): Promise<string | null> => {
     const response = await fetchWithCache(url);
     if (!response.ok) return null;
     const result = await response.json();
-    if (!result?.status || !Array.isArray(result.data?.data)) return null;
-    return (result.data.data[0] as string) || null;
+    if (!result?.success || !Array.isArray(result.data)) return null;
+    return (result.data[0] as string) || null;
   } catch (error) {
     console.error(`Failed to query icon for "${query}":`, error);
     return null;

package/src/runtime/options.ts

@@ -31,7 +31,7 @@ const createDefaultInteractions = () => [
 
 export const DEFAULT_OPTIONS: Partial<InfographicOptions> = {
   padding: 20,
-  theme: 'light',
+  theme: 'default',
   themeConfig: {
     palette: 'antv',
   },