@antv/infographic 0.2.15 → 0.2.17

package/esm/syntax/parser.js

@@ -23,6 +23,13 @@ function getIndentInfo(line) {
 function stripComments(content) {
     return content.trimEnd();
 }
+function isCommentLine(content) {
+    const trimmed = content.trimStart();
+    return trimmed.startsWith('#') || trimmed.startsWith('//');
+}
+function isCodeFenceLine(content) {
+    return /^```[\w-]*\s*$/.test(content.trim());
+}
 function looksLikeRelationExpression(text) {
     return /[<>=o.x-]{2,}/.test(text);
 }
@@ -40,6 +47,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: {} };
 }
@@ -58,6 +140,8 @@ export function parseSyntaxToAst(input) {
         if (!line.trim())
             return;
         const { indent, content } = getIndentInfo(line);
+        if (isCommentLine(content) || isCodeFenceLine(content))
+            return;
         const stripped = stripComments(content);
         if (!stripped.trim())
             return;
@@ -171,12 +255,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/syntax/types.d.ts

@@ -16,7 +16,7 @@ export interface ArrayNode {
     line: number;
     items: SyntaxNode[];
 }
-export type SyntaxErrorCode = 'unknown_key' | 'schema_mismatch' | 'invalid_value' | 'bad_indent' | 'bad_list' | 'bad_syntax';
+export type SyntaxErrorCode = 'implicit_template' | 'unknown_key' | 'schema_mismatch' | 'invalid_value' | 'bad_indent' | 'bad_list' | 'bad_syntax';
 export interface SyntaxError {
     path: string;
     line: number;

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/templates/registry.d.ts

@@ -1,4 +1,5 @@
 import type { TemplateOptions } from './types';
 export declare function registerTemplate(type: string, template: TemplateOptions): void;
+export declare function resolveTemplateKey(type: string): string | undefined;
 export declare function getTemplate(type: string): TemplateOptions | undefined;
 export declare function getTemplates(): string[];

package/esm/templates/registry.js

@@ -1,7 +1,13 @@
+import { findClosestTemplateKey } from './utils.js';
 const TEMPLATE_REGISTRY = new Map();
 export function registerTemplate(type, template) {
     TEMPLATE_REGISTRY.set(type, template);
 }
+export function resolveTemplateKey(type) {
+    if (TEMPLATE_REGISTRY.has(type))
+        return type;
+    return findClosestTemplateKey(type, TEMPLATE_REGISTRY.keys());
+}
 export function getTemplate(type) {
     return TEMPLATE_REGISTRY.get(type);
 }

package/esm/templates/utils.d.ts

@@ -0,0 +1 @@
+export declare function findClosestTemplateKey(type: string, keys: Iterable<string>): string | undefined;

package/esm/templates/utils.js

@@ -0,0 +1,63 @@
+function normalizeTemplateKey(type) {
+    return type
+        .trim()
+        .toLowerCase()
+        .replace(/[_\s]+/g, '-')
+        .replace(/-+/g, '-');
+}
+function getLevenshteinDistance(source, target) {
+    if (source === target)
+        return 0;
+    if (!source.length)
+        return target.length;
+    if (!target.length)
+        return source.length;
+    const previous = Array.from({ length: target.length + 1 }, (_, index) => index);
+    const current = new Array(target.length + 1);
+    for (let sourceIndex = 1; sourceIndex <= source.length; sourceIndex += 1) {
+        current[0] = sourceIndex;
+        const sourceCode = source.charCodeAt(sourceIndex - 1);
+        for (let targetIndex = 1; targetIndex <= target.length; targetIndex += 1) {
+            const replaceCost = sourceCode === target.charCodeAt(targetIndex - 1) ? 0 : 1;
+            current[targetIndex] = Math.min(previous[targetIndex] + 1, current[targetIndex - 1] + 1, previous[targetIndex - 1] + replaceCost);
+        }
+        for (let index = 0; index < current.length; index += 1) {
+            previous[index] = current[index];
+        }
+    }
+    return previous[target.length];
+}
+function getCommonPrefixLength(source, target) {
+    const limit = Math.min(source.length, target.length);
+    let index = 0;
+    while (index < limit && source[index] === target[index]) {
+        index += 1;
+    }
+    return index;
+}
+export function findClosestTemplateKey(type, keys) {
+    const normalizedType = normalizeTemplateKey(type);
+    if (!normalizedType)
+        return undefined;
+    let bestMatch;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    let bestPrefixLength = -1;
+    for (const key of keys) {
+        const normalizedKey = normalizeTemplateKey(key);
+        if (normalizedKey === normalizedType) {
+            return key;
+        }
+        const distance = getLevenshteinDistance(normalizedType, normalizedKey);
+        const prefixLength = getCommonPrefixLength(normalizedType, normalizedKey);
+        if (distance < bestDistance ||
+            (distance === bestDistance && prefixLength > bestPrefixLength) ||
+            (distance === bestDistance &&
+                prefixLength === bestPrefixLength &&
+                (!bestMatch || key < bestMatch))) {
+            bestMatch = key;
+            bestDistance = distance;
+            bestPrefixLength = prefixLength;
+        }
+    }
+    return bestMatch;
+}

package/esm/themes/built-in.js

@@ -1,4 +1,7 @@
 import { registerTheme } from './registry.js';
+registerTheme('light', {
+    colorBg: '#ffffff',
+});
 registerTheme('dark', {
     colorBg: '#1F1F1F',
     base: {

package/esm/version.d.ts

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

package/esm/version.js

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

package/lib/constants/service.d.ts

@@ -1 +1 @@
-export declare const ICON_SERVICE_URL = "https://www.weavefox.cn/api/open/v1/icon";
+export declare const ICON_SERVICE_URL = "https://lab.weavefox.cn/api/v1/infographic/icon";

package/lib/constants/service.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SERVICE_URL = void 0;
-exports.ICON_SERVICE_URL = 'https://www.weavefox.cn/api/open/v1/icon';
+exports.ICON_SERVICE_URL = 'https://lab.weavefox.cn/api/v1/infographic/icon';

package/lib/designs/structures/chart-line.js

@@ -70,10 +70,11 @@ const ChartLine = (props) => {
     const titleElements = [];
     const tickElements = [];
     const ticksY = scaleY.ticks(6);
+    const formatTickY = scaleY.tickFormat(6);
     ticksY.forEach((tick) => {
         const yPos = chartOriginY + scaleY(tick);
         gridElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${chartOriginX} ${yPos} L ${chartOriginX + derivedChartWidth} ${yPos}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape", opacity: 0.08 }));
-        tickElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: Number.isInteger(tick) ? tick.toString() : tick.toFixed(1) }));
+        tickElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: formatTickY(tick) }));
     });
     const xLabels = [];
     const pointPositions = [];

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

@@ -13,6 +13,7 @@ exports.exportToSVGString = exportToSVGString;
 exports.exportToSVG = exportToSVG;
 const utils_1 = require("../utils");
 const font_1 = require("./font");
+const VIEWBOX_CHANGE_TOLERANCE = 0.5;
 function exportToSVGString(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         const node = yield exportToSVG(svg, options);
@@ -20,11 +21,176 @@ function exportToSVGString(svg_1) {
         return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
     });
 }
+function getExportViewBox(svg) {
+    if (svg.hasAttribute('viewBox'))
+        return (0, utils_1.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) {
+    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) {
+    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) {
+    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, content, toSVGCoord) {
+    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, bottom;
+    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, right;
+    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) {
+    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, clientY) => {
+        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('foreignObject')
+        .forEach((fo) => {
+        const content = fo.firstElementChild;
+        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}`;
+}
 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);
+        if (typeof document !== 'undefined') {
+            const fullViewBox = computeFullViewBox(svg);
+            if (fullViewBox) {
+                clonedSVG.setAttribute('viewBox', fullViewBox);
+            }
+        }
+        const { width, height } = (0, utils_1.getViewBox)(clonedSVG);
         (0, utils_1.setAttributes)(clonedSVG, { width, height });
         if (removeIds) {
             inlineUseElements(clonedSVG);
@@ -34,6 +200,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 +457,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