@antv/infographic 0.2.16 → 0.2.18

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,6 +21,195 @@ 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 (
+    !Number.isNaN(width) &&
+    width > 0 &&
+    !Number.isNaN(height) &&
+    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'> = {},
@@ -29,7 +220,15 @@ export async function exportToSVG(
     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) {
@@ -59,7 +258,9 @@ async function embedIcons(svg: SVGSVGElement) {
 
     if (!existsSymbol) {
       const symbolElement = document.querySelector(href);
-      if (symbolElement) defs.appendChild(symbolElement.cloneNode(true));
+      if (symbolElement) {
+        defs.appendChild(symbolElement.cloneNode(true));
+      }
     }
   });
 }
@@ -293,6 +494,7 @@ function collectDefElements(svg: SVGSVGElement, ids: Set<string>) {
 
   while (queue.length) {
     const id = queue.shift()!;
+    if (!id) continue;
     if (visited.has(id)) continue;
     visited.add(id);
 
@@ -309,11 +511,80 @@ function collectDefElements(svg: SVGSVGElement, ids: Set<string>) {
   return collected;
 }
 
+// Fallback implementation based on the CSS.escape algorithm
+function cssEscape(value: string): string {
+  const string = String(value);
+  const length = string.length;
+  let result = '';
+
+  if (length === 0) {
+    return '';
+  }
+
+  for (let i = 0; i < length; i++) {
+    const codeUnit = string.charCodeAt(i);
+
+    // Null character
+    if (codeUnit === 0x0000) {
+      result += '\uFFFD';
+      continue;
+    }
+
+    // Control characters or DEL
+    if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) || codeUnit === 0x007f) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // Escape if first character is a digit
+    if (i === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // Escape if second character is a digit and first is a hyphen
+    if (
+      i === 1 &&
+      codeUnit >= 0x0030 &&
+      codeUnit <= 0x0039 &&
+      string.charCodeAt(0) === 0x002d
+    ) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // If the character is the first and is a hyphen followed by end of string, escape it
+    if (i === 0 && length === 1 && codeUnit === 0x002d) {
+      result += '\\' + string.charAt(i);
+      continue;
+    }
+
+    // Characters that are safe to use unescaped
+    if (
+      codeUnit >= 0x0080 ||
+      (codeUnit >= 0x0030 && codeUnit <= 0x0039) || // 0-9
+      (codeUnit >= 0x0041 && codeUnit <= 0x005a) || // A-Z
+      (codeUnit >= 0x0061 && codeUnit <= 0x007a) || // a-z
+      codeUnit === 0x002d || // -
+      codeUnit === 0x005f // _
+    ) {
+      result += string.charAt(i);
+      continue;
+    }
+
+    // All other characters
+    result += '\\' + string.charAt(i);
+  }
+
+  return result;
+}
+
 function escapeCssId(id: string) {
   if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
     return globalThis.CSS.escape(id);
   }
-  return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+
+  return cssEscape(id);
 }
 
 function removeDefs(svg: SVGSVGElement) {

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;
@@ -43,9 +43,6 @@ export async function loadSearchResource(query: string, format?: string) {
       const svgText = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
       return loadSVGResource(svgText);
     }
-    if (mimeType === 'image/svg+xml' && format === 'svg' && isBase64) {
-      return loadImageBase64Resource(result);
-    }
     return loadImageBase64Resource(result);
   }
 

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',
   },

package/src/syntax/index.ts

@@ -12,6 +12,16 @@ import {
 } from './schema';
 import type { ObjectSchema, SyntaxNode, SyntaxParseResult } from './types';
 
+const ALLOWED_ROOT_KEYS = new Set([
+  'infographic',
+  'template',
+  'design',
+  'data',
+  'theme',
+  'width',
+  'height',
+]);
+
 function normalizeItems(items: ItemDatum[]) {
   const seen = new Set<string>();
   const normalized: ItemDatum[] = [];
@@ -30,6 +40,14 @@ function normalizeItems(items: ItemDatum[]) {
   return normalized.reverse();
 }
 
+function assignMissingNodeIds(items: ItemDatum[]) {
+  items.forEach((item) => {
+    if (!item.id && item.label) {
+      item.id = item.label;
+    }
+  });
+}
+
 function resolveTemplate(
   node: SyntaxNode | undefined,
   errors: SyntaxParseResult['errors'],
@@ -44,12 +62,54 @@ function resolveTemplate(
   return undefined;
 }
 
+function inferTemplateFromBareFirstLine(
+  entries: Record<string, SyntaxNode>,
+  warnings: SyntaxParseResult['warnings'],
+) {
+  if ('infographic' in entries || 'template' in entries) {
+    return undefined;
+  }
+
+  const [firstEntry] = Object.entries(entries);
+  if (!firstEntry) return undefined;
+
+  const [key, node] = firstEntry;
+  if (ALLOWED_ROOT_KEYS.has(key) || node.kind !== 'object') {
+    return undefined;
+  }
+  if (node.value !== undefined || Object.keys(node.entries).length > 0) {
+    return undefined;
+  }
+
+  warnings.push({
+    path: 'template',
+    line: node.line,
+    code: 'implicit_template',
+    message:
+      'Inferred template from a bare first line. Prefix it with "infographic" or "template" to make the syntax explicit.',
+    raw: key,
+  });
+
+  return {
+    template: key,
+    inferredKey: key,
+  };
+}
+
 export function parseSyntax(input: string): SyntaxParseResult {
   const { ast, errors } = parseSyntaxToAst(input);
   const warnings: SyntaxParseResult['warnings'] = [];
   const options: Partial<InfographicOptions> = {};
 
   const mergedEntries = { ...ast.entries };
+  const inferredTemplate = inferTemplateFromBareFirstLine(
+    ast.entries,
+    warnings,
+  );
+  if (inferredTemplate) {
+    delete mergedEntries[inferredTemplate.inferredKey];
+  }
+
   const infographicNode = ast.entries.infographic;
   let templateFromInfographic: string | undefined;
   if (infographicNode && infographicNode.kind === 'object') {
@@ -59,17 +119,8 @@ export function parseSyntax(input: string): SyntaxParseResult {
     });
   }
 
-  const allowedRootKeys = new Set([
-    'infographic',
-    'template',
-    'design',
-    'data',
-    'theme',
-    'width',
-    'height',
-  ]);
   Object.keys(mergedEntries).forEach((key) => {
-    if (!allowedRootKeys.has(key)) {
+    if (!ALLOWED_ROOT_KEYS.has(key)) {
       errors.push({
         path: key,
         line: (mergedEntries[key] as SyntaxNode).line,
@@ -86,6 +137,9 @@ export function parseSyntax(input: string): SyntaxParseResult {
   if (!options.template && templateFromInfographic) {
     options.template = templateFromInfographic;
   }
+  if (!options.template && inferredTemplate) {
+    options.template = inferredTemplate.template;
+  }
 
   const designNode = mergedEntries.design as SyntaxNode | undefined;
   if (designNode) {
@@ -113,6 +167,13 @@ export function parseSyntax(input: string): SyntaxParseResult {
       if (parsed.relations.length > 0 || parsed.items.length > 0) {
         const current = (options.data ?? {}) as Record<string, any>;
 
+        if (Array.isArray(current.items)) {
+          assignMissingNodeIds(current.items as ItemDatum[]);
+        }
+        if (Array.isArray(current.nodes)) {
+          assignMissingNodeIds(current.nodes as ItemDatum[]);
+        }
+
         // 优先使用已存在的数据列表 (sequences, lists, etc.)
         const dataKeys = Object.keys(
           (DataSchema as ObjectSchema).fields,

package/src/syntax/mapper.ts

@@ -16,10 +16,18 @@ const HEX_COLOR_PATTERN =
   /^(#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{4}|#[0-9a-f]{3})/i;
 const FUNCTION_COLOR_PATTERN = /^((?:rgb|rgba|hsl|hsla)\([^)]*\))/i;
 
+function normalizeBooleanLiteral(value: string) {
+  const trimmed = value.trim();
+  if (/^true$/i.test(trimmed)) return 'true';
+  if (/^false$/i.test(trimmed)) return 'false';
+  return undefined;
+}
+
 function parseScalar(value: string) {
   const trimmed = value.trim();
-  if (trimmed === 'true') return true;
-  if (trimmed === 'false') return false;
+  const normalizedBoolean = normalizeBooleanLiteral(trimmed);
+  if (normalizedBoolean === 'true') return true;
+  if (normalizedBoolean === 'false') return false;
   if (/^-?\d+(\.\d+)?$/.test(trimmed)) return parseFloat(trimmed);
   return trimmed;
 }
@@ -240,7 +248,8 @@ export function mapWithSchema(
         );
         return undefined;
       }
-      if (value !== 'true' && value !== 'false') {
+      const normalizedBoolean = normalizeBooleanLiteral(value);
+      if (!normalizedBoolean) {
         addError(
           errors,
           node,
@@ -251,7 +260,7 @@ export function mapWithSchema(
         );
         return undefined;
       }
-      return value === 'true';
+      return normalizedBoolean === 'true';
     }
     case 'enum': {
       const value = readScalar(node);
@@ -259,7 +268,12 @@ export function mapWithSchema(
         addError(errors, node, path, 'schema_mismatch', 'Expected enum value.');
         return undefined;
       }
-      if (!schema.values.includes(value)) {
+      const normalizedBoolean = normalizeBooleanLiteral(value);
+      const enumValue =
+        normalizedBoolean && schema.values.includes(normalizedBoolean)
+          ? normalizedBoolean
+          : value;
+      if (!schema.values.includes(enumValue)) {
         addError(
           errors,
           node,
@@ -270,7 +284,7 @@ export function mapWithSchema(
         );
         return undefined;
       }
-      return value;
+      return enumValue;
     }
     case 'array': {
       if (node.kind === 'array') {

package/src/syntax/parser.ts

@@ -40,6 +40,15 @@ function stripComments(content: string) {
   return content.trimEnd();
 }
 
+function isCommentLine(content: string) {
+  const trimmed = content.trimStart();
+  return trimmed.startsWith('#') || trimmed.startsWith('//');
+}
+
+function isCodeFenceLine(content: string) {
+  return /^```[\w-]*\s*$/.test(content.trim());
+}
+
 function looksLikeRelationExpression(text: string) {
   return /[<>=o.x-]{2,}/.test(text);
 }
@@ -169,6 +178,7 @@ export function parseSyntaxToAst(input: string): ParseResult {
     const lineNumber = index + 1;
     if (!line.trim()) return;
     const { indent, content } = getIndentInfo(line);
+    if (isCommentLine(content) || isCodeFenceLine(content)) return;
     const stripped = stripComments(content);
     if (!stripped.trim()) return;
 

package/src/syntax/types.ts

@@ -22,6 +22,7 @@ export interface ArrayNode {
 }
 
 export type SyntaxErrorCode =
+  | 'implicit_template'
   | 'unknown_key'
   | 'schema_mismatch'
   | 'invalid_value'

package/src/templates/registry.ts

@@ -1,4 +1,5 @@
 import type { TemplateOptions } from './types';
+import { findClosestTemplateKey } from './utils';
 
 const TEMPLATE_REGISTRY = new Map<string, TemplateOptions>();
 
@@ -6,6 +7,11 @@ export function registerTemplate(type: string, template: TemplateOptions) {
   TEMPLATE_REGISTRY.set(type, template);
 }
 
+export function resolveTemplateKey(type: string): string | undefined {
+  if (TEMPLATE_REGISTRY.has(type)) return type;
+  return findClosestTemplateKey(type, TEMPLATE_REGISTRY.keys());
+}
+
 export function getTemplate(type: string): TemplateOptions | undefined {
   return TEMPLATE_REGISTRY.get(type);
 }