@antv/infographic 0.2.15 → 0.2.16

package/esm/designs/structures/sequence-interaction.js

@@ -15,6 +15,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;
 const BTN_MARGIN = 10;
@@ -229,17 +230,6 @@ export const SequenceInteractionFlow = (props) => {
     const decorElements = [];
     const defsElements = [];
     const btnElements = [];
-    // 绘制生命线
-    if (showLifeline) {
-        lanes.forEach((_lane, laneIndex) => {
-            const centerX = getLaneCenterX(laneIndex);
-            const startY = padding + headerOffset;
-            const endY = totalHeight - padding;
-            decorElements.push(_jsx(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) => {
@@ -282,10 +272,6 @@ export const SequenceInteractionFlow = (props) => {
             });
             const nodeColor = getPaletteColor(options, [laneIndex]);
             const nodeThemeColors = getThemeColors({ colorPrimary: nodeColor }, options);
-            // 添加节点背景遮挡层，防止生命线虚线透过半透明节点显示
-            // 只在节点中心放置窄条遮挡生命线，避免圆角处露出白色背景
-            const maskStripWidth = lifelineWidth + 6;
-            decorElements.push(_jsx(Rect, { x: centerX - maskStripWidth / 2, y: y, width: maskStripWidth, height: itemHeight, fill: colorBg }));
             // 构造类似 hierarchy-tree 的 _originalIndex
             const originalIndex = [laneIndex, rowIndex];
             // 附加到数据上，确保 Item 组件能正确识别
@@ -322,6 +308,41 @@ export const SequenceInteractionFlow = (props) => {
         const centerX = getLaneCenterX(laneIndex);
         btnElements.push(_jsx(BtnAdd, { indexes: [laneIndex, childCount], x: centerX - BTN_HALF_SIZE, y: addNodeY }));
     });
+    // 绘制生命线（使用 mask 挖空节点区域，避免虚线穿透半透明节点）
+    if (showLifeline) {
+        // 预先按泳道分组节点，避免每条泳道都遍历全部节点
+        const nodeRectsByLane = new Map();
+        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) => {
+            var _a;
+            const centerX = getLaneCenterX(laneIndex);
+            const startY = padding + headerOffset;
+            const endY = totalHeight - padding;
+            const laneNodeRects = (_a = nodeRectsByLane.get(laneIndex)) !== null && _a !== void 0 ? _a : [];
+            // 如果该泳道有节点，创建 mask 来挖空节点区域
+            let lifelineMaskAttr;
+            if (laneNodeRects.length > 0) {
+                const maskId = `lifeline-mask-${instanceId}-${laneIndex}`;
+                defsElements.push(_jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: totalWidth, height: totalHeight, children: [_jsx(Rect, { x: 0, y: 0, width: totalWidth, height: totalHeight, fill: "white" }), laneNodeRects.map((rect) => (_jsx(Rect, { x: rect.x, y: rect.y - LIFELINE_MASK_GAP, width: rect.width, height: rect.height + LIFELINE_MASK_GAP * 2, fill: "black" })))] }));
+                lifelineMaskAttr = `url(#${maskId})`;
+            }
+            decorElements.push(_jsx(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 = lanes.length > 0 ? lastLaneRightX + BTN_LANE_ADD_Gap : padding;

package/esm/designs/structures/sequence-timeline.d.ts

@@ -3,5 +3,6 @@ import type { BaseStructureProps } from './types';
 export interface SequenceTimelineProps extends BaseStructureProps {
     gap?: number;
     lineOffset?: number;
+    showStepLabels?: boolean;
 }
 export declare const SequenceTimeline: ComponentType<SequenceTimelineProps>;

package/esm/designs/structures/sequence-timeline.js

@@ -5,7 +5,7 @@ import { FlexLayout } from '../layouts/index.js';
 import { getColorPrimary, getPaletteColor, getPaletteColors } from '../utils/index.js';
 import { registerStructure } from './registry.js';
 export const SequenceTimeline = (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 ? _jsx(Title, { title: title, desc: desc }) : null;
     const colorPrimary = getColorPrimary(options);
@@ -41,7 +41,9 @@ export const SequenceTimeline = (props) => {
         const itemY = index * (itemBounds.height + gap);
         const nodeY = itemY + itemBounds.height / 2;
         const indexes = [index];
-        decorElements.push(_jsx(Text, { x: stepLabelX, y: nodeY, width: 70, fontSize: 18, fontWeight: "bold", alignHorizontal: "left", alignVertical: "middle", fill: palette[index % palette.length], children: `STEP ${index + 1}` }));
+        if (showStepLabels) {
+            decorElements.push(_jsx(Text, { x: stepLabelX, y: nodeY, width: 70, fontSize: 18, fontWeight: "bold", alignHorizontal: "left", alignVertical: "middle", fill: palette[index % palette.length], children: `STEP ${index + 1}` }));
+        }
         itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "normal" }));
         decorElements.push(_jsx(Ellipse, { x: timelineX - nodeRadius, y: nodeY - nodeRadius, width: nodeRadius * 2, height: nodeRadius * 2, fill: palette[index % palette.length] }));
         btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: itemX - btnBounds.width - 10, y: itemY + (itemBounds.height - btnBounds.height) / 2 }));

package/esm/exporter/png.js

@@ -12,8 +12,8 @@ import { exportToSVG } from './svg.js';
 export function exportToPNGString(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         var _a;
-        const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2 } = options;
-        const node = yield exportToSVG(svg);
+        const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2, removeBackground = false } = options;
+        const node = yield exportToSVG(svg, { removeBackground });
         const { width, height } = getViewBox(node);
         return new Promise((resolve, reject) => {
             try {

package/esm/exporter/svg.js

@@ -18,7 +18,7 @@ export function exportToSVGString(svg_1) {
 }
 export function exportToSVG(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
-        const { embedResources = true, removeIds = false } = options;
+        const { removeBackground = false, embedResources = true, removeIds = false, } = options;
         const clonedSVG = svg.cloneNode(true);
         const { width, height } = getViewBox(svg);
         setAttributes(clonedSVG, { width, height });
@@ -30,6 +30,9 @@ export function exportToSVG(svg_1) {
             yield embedIcons(clonedSVG);
         }
         yield embedFonts(clonedSVG, embedResources);
+        if (removeBackground) {
+            removeSVGBackground(clonedSVG);
+        }
         cleanSVG(clonedSVG);
         return clonedSVG;
     });
@@ -284,6 +287,11 @@ function cleanSVG(svg) {
     removeUselessAttrs(svg);
     clearDataset(svg);
 }
+function removeSVGBackground(svg) {
+    svg.style.removeProperty('background-color');
+    const background = getElementByRole(svg, "background" /* ElementTypeEnum.Background */);
+    background === null || background === void 0 ? void 0 : background.remove();
+}
 function removeBtnGroup(svg) {
     const btnGroup = getElementByRole(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
     btnGroup === null || btnGroup === void 0 ? void 0 : btnGroup.remove();

package/esm/exporter/types.d.ts

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

package/esm/syntax/parser.js

@@ -40,6 +40,81 @@ function parseKeyValue(raw) {
     }
     return { key: text, value: undefined };
 }
+function isUnsafeObjectKey(key) {
+    return key === '__proto__' || key === 'constructor' || key === 'prototype';
+}
+function assignObjectEntry(parent, rawKey, node, line, errors) {
+    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, value) {
     return { kind: 'object', line, value, entries: {} };
 }
@@ -171,12 +246,14 @@ export function parseSyntaxToAst(input) {
             return;
         }
         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,
         });
     });
     return { ast: root, errors };

package/esm/templates/built-in.js

@@ -181,7 +181,7 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
     }, 'sequence-timeline-plain-text': {
         design: {
             title: 'default',
-            structure: { type: 'sequence-timeline' },
+            structure: { type: 'sequence-timeline', showStepLabels: false },
             items: [{ type: 'plain-text' }],
         },
     }, 'sequence-timeline-rounded-rect-node': {
@@ -199,7 +199,7 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
     }, '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' }],
         },
     }, 'sequence-cylinders-3d-simple': {

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.15";
+export declare const VERSION = "0.2.16";

package/esm/version.js

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

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

@@ -18,6 +18,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;
 const BTN_MARGIN = 10;
@@ -232,17 +233,6 @@ const SequenceInteractionFlow = (props) => {
     const decorElements = [];
     const defsElements = [];
     const btnElements = [];
-    // 绘制生命线
-    if (showLifeline) {
-        lanes.forEach((_lane, laneIndex) => {
-            const centerX = getLaneCenterX(laneIndex);
-            const startY = padding + headerOffset;
-            const endY = totalHeight - padding;
-            decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${centerX} ${startY} L ${centerX} ${endY}`, stroke: colorBorder, strokeWidth: lifelineWidth, strokeDasharray: "5,5", fill: "none", "data-element-type": "shape" }));
-            // 绘制生命线末端箭头（实心）
-            decorElements.push(...(0, utils_1.createArrowElements)(centerX, endY, Math.PI / 2, 'triangle', colorBorder, 1, 10));
-        });
-    }
     // 绘制泳道标题
     if (showLaneHeader) {
         lanes.forEach((lane, laneIndex) => {
@@ -285,10 +275,6 @@ const SequenceInteractionFlow = (props) => {
             });
             const nodeColor = (0, utils_1.getPaletteColor)(options, [laneIndex]);
             const nodeThemeColors = (0, utils_1.getThemeColors)({ colorPrimary: nodeColor }, options);
-            // 添加节点背景遮挡层，防止生命线虚线透过半透明节点显示
-            // 只在节点中心放置窄条遮挡生命线，避免圆角处露出白色背景
-            const maskStripWidth = lifelineWidth + 6;
-            decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Rect, { x: centerX - maskStripWidth / 2, y: y, width: maskStripWidth, height: itemHeight, fill: colorBg }));
             // 构造类似 hierarchy-tree 的 _originalIndex
             const originalIndex = [laneIndex, rowIndex];
             // 附加到数据上，确保 Item 组件能正确识别
@@ -325,6 +311,41 @@ const SequenceInteractionFlow = (props) => {
         const centerX = getLaneCenterX(laneIndex);
         btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [laneIndex, childCount], x: centerX - BTN_HALF_SIZE, y: addNodeY }));
     });
+    // 绘制生命线（使用 mask 挖空节点区域，避免虚线穿透半透明节点）
+    if (showLifeline) {
+        // 预先按泳道分组节点，避免每条泳道都遍历全部节点
+        const nodeRectsByLane = new Map();
+        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) => {
+            var _a;
+            const centerX = getLaneCenterX(laneIndex);
+            const startY = padding + headerOffset;
+            const endY = totalHeight - padding;
+            const laneNodeRects = (_a = nodeRectsByLane.get(laneIndex)) !== null && _a !== void 0 ? _a : [];
+            // 如果该泳道有节点，创建 mask 来挖空节点区域
+            let lifelineMaskAttr;
+            if (laneNodeRects.length > 0) {
+                const maskId = `lifeline-mask-${instanceId}-${laneIndex}`;
+                defsElements.push((0, jsx_runtime_1.jsxs)("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: totalWidth, height: totalHeight, children: [(0, jsx_runtime_1.jsx)(jsx_1.Rect, { x: 0, y: 0, width: totalWidth, height: totalHeight, fill: "white" }), laneNodeRects.map((rect) => ((0, jsx_runtime_1.jsx)(jsx_1.Rect, { x: rect.x, y: rect.y - LIFELINE_MASK_GAP, width: rect.width, height: rect.height + LIFELINE_MASK_GAP * 2, fill: "black" })))] }));
+                lifelineMaskAttr = `url(#${maskId})`;
+            }
+            decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.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(...(0, utils_1.createArrowElements)(centerX, endY, Math.PI / 2, 'triangle', colorBorder, 1, 10));
+        });
+    }
     // 添加新泳道按钮 (最右侧)
     const lastLaneRightX = getLaneCenterX(lanes.length - 1) + laneWidth / 2;
     const newLaneX = lanes.length > 0 ? lastLaneRightX + BTN_LANE_ADD_Gap : padding;

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

@@ -3,5 +3,6 @@ import type { BaseStructureProps } from './types';
 export interface SequenceTimelineProps extends BaseStructureProps {
     gap?: number;
     lineOffset?: number;
+    showStepLabels?: boolean;
 }
 export declare const SequenceTimeline: ComponentType<SequenceTimelineProps>;

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

@@ -8,7 +8,7 @@ const layouts_1 = require("../layouts");
 const utils_1 = require("../utils");
 const registry_1 = require("./registry");
 const SequenceTimeline = (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 ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
     const colorPrimary = (0, utils_1.getColorPrimary)(options);
@@ -44,7 +44,9 @@ const SequenceTimeline = (props) => {
         const itemY = index * (itemBounds.height + gap);
         const nodeY = itemY + itemBounds.height / 2;
         const indexes = [index];
-        decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: stepLabelX, y: nodeY, width: 70, fontSize: 18, fontWeight: "bold", alignHorizontal: "left", alignVertical: "middle", fill: palette[index % palette.length], children: `STEP ${index + 1}` }));
+        if (showStepLabels) {
+            decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: stepLabelX, y: nodeY, width: 70, fontSize: 18, fontWeight: "bold", alignHorizontal: "left", alignVertical: "middle", fill: palette[index % palette.length], children: `STEP ${index + 1}` }));
+        }
         itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "normal" }));
         decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: timelineX - nodeRadius, y: nodeY - nodeRadius, width: nodeRadius * 2, height: nodeRadius * 2, fill: palette[index % palette.length] }));
         btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: itemX - btnBounds.width - 10, y: itemY + (itemBounds.height - btnBounds.height) / 2 }));

package/lib/exporter/png.js

@@ -15,8 +15,8 @@ const svg_1 = require("./svg");
 function exportToPNGString(svg_2) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         var _a;
-        const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2 } = options;
-        const node = yield (0, svg_1.exportToSVG)(svg);
+        const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2, removeBackground = false } = options;
+        const node = yield (0, svg_1.exportToSVG)(svg, { removeBackground });
         const { width, height } = (0, utils_1.getViewBox)(node);
         return new Promise((resolve, reject) => {
             try {

package/lib/exporter/svg.js

@@ -22,7 +22,7 @@ function exportToSVGString(svg_1) {
 }
 function exportToSVG(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
-        const { embedResources = true, removeIds = false } = options;
+        const { removeBackground = false, 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 });
@@ -34,6 +34,9 @@ function exportToSVG(svg_1) {
             yield embedIcons(clonedSVG);
         }
         yield (0, font_1.embedFonts)(clonedSVG, embedResources);
+        if (removeBackground) {
+            removeSVGBackground(clonedSVG);
+        }
         cleanSVG(clonedSVG);
         return clonedSVG;
     });
@@ -288,6 +291,11 @@ function cleanSVG(svg) {
     removeUselessAttrs(svg);
     clearDataset(svg);
 }
+function removeSVGBackground(svg) {
+    svg.style.removeProperty('background-color');
+    const background = (0, utils_1.getElementByRole)(svg, "background" /* ElementTypeEnum.Background */);
+    background === null || background === void 0 ? void 0 : background.remove();
+}
 function removeBtnGroup(svg) {
     const btnGroup = (0, utils_1.getElementByRole)(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
     btnGroup === null || btnGroup === void 0 ? void 0 : btnGroup.remove();

package/lib/exporter/types.d.ts

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

package/lib/syntax/parser.js

@@ -44,6 +44,81 @@ function parseKeyValue(raw) {
     }
     return { key: text, value: undefined };
 }
+function isUnsafeObjectKey(key) {
+    return key === '__proto__' || key === 'constructor' || key === 'prototype';
+}
+function assignObjectEntry(parent, rawKey, node, line, errors) {
+    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, value) {
     return { kind: 'object', line, value, entries: {} };
 }
@@ -175,12 +250,14 @@ function parseSyntaxToAst(input) {
             return;
         }
         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,
         });
     });
     return { ast: root, errors };

package/lib/templates/built-in.js

@@ -183,7 +183,7 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
     }, 'sequence-timeline-plain-text': {
         design: {
             title: 'default',
-            structure: { type: 'sequence-timeline' },
+            structure: { type: 'sequence-timeline', showStepLabels: false },
             items: [{ type: 'plain-text' }],
         },
     }, 'sequence-timeline-rounded-rect-node': {
@@ -201,7 +201,7 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
     }, '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' }],
         },
     }, 'sequence-cylinders-3d-simple': {

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.15";
+export declare const VERSION = "0.2.16";

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.2.15';
+exports.VERSION = '0.2.16';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",