@antv/infographic 0.2.15 → 0.2.16

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

@@ -23,7 +23,11 @@ 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);
   setAttributes(clonedSVG, { width, height });
@@ -36,6 +40,9 @@ export async function exportToSVG(
   }
   await embedFonts(clonedSVG, embedResources);
 
+  if (removeBackground) {
+    removeSVGBackground(clonedSVG);
+  }
   cleanSVG(clonedSVG);
 
   return clonedSVG;
@@ -322,6 +329,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/syntax/parser.ts

@@ -58,6 +58,97 @@ function parseKeyValue(raw: string) {
   return { key: text, value: undefined };
 }
 
+interface AssignEntryResult {
+  parent: ObjectNode;
+  key: string;
+}
+
+function isUnsafeObjectKey(key: string) {
+  return key === '__proto__' || key === 'constructor' || key === 'prototype';
+}
+
+function assignObjectEntry(
+  parent: ObjectNode,
+  rawKey: string,
+  node: ObjectNode,
+  line: number,
+  errors: SyntaxError[],
+): AssignEntryResult | null {
+  if (!rawKey.includes('.')) {
+    if (isUnsafeObjectKey(rawKey)) {
+      errors.push({
+        path: rawKey,
+        line,
+        code: 'bad_syntax',
+        message: `Invalid key part: ${rawKey}`,
+        raw: rawKey,
+      });
+      return null;
+    }
+    parent.entries[rawKey] = node;
+    return { parent, key: rawKey };
+  }
+
+  const parts = rawKey.split('.');
+  if (parts.some((part) => !part)) {
+    errors.push({
+      path: rawKey,
+      line,
+      code: 'bad_syntax',
+      message: 'Invalid dotted key path.',
+      raw: rawKey,
+    });
+    return null;
+  }
+
+  let current = parent;
+  for (let index = 0; index < parts.length - 1; index += 1) {
+    const part = parts[index];
+    if (isUnsafeObjectKey(part)) {
+      errors.push({
+        path: rawKey,
+        line,
+        code: 'bad_syntax',
+        message: `Invalid key part in dotted path: ${part}`,
+        raw: rawKey,
+      });
+      return null;
+    }
+    const existing = current.entries[part];
+    if (!existing) {
+      const container = createObjectNode(line);
+      current.entries[part] = container;
+      current = container;
+      continue;
+    }
+    if (existing.kind !== 'object') {
+      errors.push({
+        path: parts.slice(0, index + 1).join('.'),
+        line,
+        code: 'bad_syntax',
+        message: 'Cannot assign dotted key under a list value.',
+        raw: rawKey,
+      });
+      return null;
+    }
+    current = existing;
+  }
+
+  const finalKey = parts[parts.length - 1];
+  if (isUnsafeObjectKey(finalKey)) {
+    errors.push({
+      path: rawKey,
+      line,
+      code: 'bad_syntax',
+      message: `Invalid key part in dotted path: ${finalKey}`,
+      raw: rawKey,
+    });
+    return null;
+  }
+  current.entries[finalKey] = node;
+  return { parent: current, key: finalKey };
+}
+
 function createObjectNode(line: number, value?: string): ObjectNode {
   return { kind: 'object', line, value, entries: {} };
 }
@@ -203,12 +294,19 @@ export function parseSyntaxToAst(input: string): ParseResult {
     }
 
     const node = createObjectNode(lineNumber, parsed.value);
-    parentNode.entries[parsed.key] = node;
+    const assigned = assignObjectEntry(
+      parentNode,
+      parsed.key,
+      node,
+      lineNumber,
+      errors,
+    );
+    if (!assigned) return;
     stack.push({
       indent,
       node,
-      parent: parentNode,
-      key: parsed.key,
+      parent: assigned.parent,
+      key: assigned.key,
     });
   });
 

package/src/templates/built-in.ts

@@ -210,7 +210,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'sequence-timeline-plain-text': {
     design: {
       title: 'default',
-      structure: { type: 'sequence-timeline' },
+      structure: { type: 'sequence-timeline', showStepLabels: false },
       items: [{ type: 'plain-text' }],
     },
   },
@@ -231,7 +231,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'sequence-timeline-simple': {
     design: {
       title: 'default',
-      structure: { type: 'sequence-timeline', gap: 20 },
+      structure: { type: 'sequence-timeline', gap: 20, showStepLabels: false },
       items: [{ type: 'simple', positionV: 'middle' }],
     },
   },

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '0.2.15';
+export const VERSION = '0.2.16';