@antv/infographic 0.2.14 → 0.2.16

package/src/runtime/Infographic.tsx

@@ -11,7 +11,7 @@ import {
   ParsedInfographicOptions,
   parseOptions,
 } from '../options';
-import { Renderer } from '../renderer';
+import { DEFAULT_FONT, Renderer, setDefaultFont } from '../renderer';
 import { waitForSvgLoads } from '../resource';
 import { parseSyntax, type SyntaxError } from '../syntax';
 import { IEventEmitter } from '../types';
@@ -133,29 +133,39 @@ export class Infographic {
    * Compose the SVG template
    */
   compose(parsedOptions: ParsedInfographicOptions): SVGSVGElement {
-    const { design, data } = parsedOptions;
+    const { design, data, themeConfig } = parsedOptions;
     const { title, item, items, structure } = design;
     const { component: Structure, props: structureProps } = structure;
     const Title = title.component;
     const Item = item.component;
     const Items = items.map((it) => it.component);
 
-    const svg = renderSVG(
-      <Structure
-        data={data}
-        Title={Title}
-        Item={Item}
-        Items={Items}
-        options={parsedOptions}
-        {...structureProps}
-      />,
-    );
-
-    const template = parseSVG(svg);
-    if (!template) {
-      throw new Error('Failed to parse SVG template');
+    // Apply theme font-family before measurement so measureText uses the correct font
+    const themeFontFamily = themeConfig?.base?.text?.['font-family'];
+    const previousDefaultFont = DEFAULT_FONT;
+    if (themeFontFamily) setDefaultFont(themeFontFamily);
+
+    try {
+      const svg = renderSVG(
+        <Structure
+          data={data}
+          Title={Title}
+          Item={Item}
+          Items={Items}
+          options={parsedOptions}
+          {...structureProps}
+        />,
+      );
+
+      const template = parseSVG(svg);
+      if (!template) {
+        throw new Error('Failed to parse SVG template');
+      }
+      return template;
+    } finally {
+      // Restore previous default font
+      if (themeFontFamily) setDefaultFont(previousDefaultFont);
     }
-    return template;
   }
 
   getTypes() {

package/src/syntax/index.ts

@@ -10,7 +10,7 @@ import {
   TemplateSchema,
   ThemeSchema,
 } from './schema';
-import type { SyntaxNode, SyntaxParseResult } from './types';
+import type { ObjectSchema, SyntaxNode, SyntaxParseResult } from './types';
 
 function normalizeItems(items: ItemDatum[]) {
   const seen = new Set<string>();
@@ -112,24 +112,57 @@ export function parseSyntax(input: string): SyntaxParseResult {
       );
       if (parsed.relations.length > 0 || parsed.items.length > 0) {
         const current = (options.data ?? {}) as Record<string, any>;
-        const existingItems = Array.isArray(current.items)
-          ? (current.items as ItemDatum[])
-          : [];
-        const normalizedItems = normalizeItems(existingItems);
-        const itemMap = new Map<string, ItemDatum>();
-        normalizedItems.forEach((item) => {
-          if (item.id) itemMap.set(item.id, item);
-        });
-        parsed.items.forEach((item) => {
-          const existing = itemMap.get(item.id as string);
-          if (existing) {
-            if (!existing.label && item.label) existing.label = item.label;
-          } else {
-            normalizedItems.push(item);
-            itemMap.set(item.id as string, item);
+
+        // 优先使用已存在的数据列表 (sequences, lists, etc.)
+        const dataKeys = Object.keys(
+          (DataSchema as ObjectSchema).fields,
+        ).filter((key) => key !== 'items' && key !== 'relations');
+        let hasStructuredData = false;
+
+        // 尝试找到一个非空的数据源
+        for (const key of dataKeys) {
+          if (Array.isArray(current[key]) && current[key].length > 0) {
+            hasStructuredData = true;
+            break;
           }
-        });
-        current.items = normalizedItems;
+        }
+
+        // 如果 items 已包含层级结构数据（带 children），也视为结构化数据
+        if (
+          !hasStructuredData &&
+          Array.isArray(current.items) &&
+          current.items.length > 0 &&
+          current.items.some(
+            (item: any) =>
+              Array.isArray(item.children) && item.children.length > 0,
+          )
+        ) {
+          hasStructuredData = true;
+        }
+
+        // 如果没有找到其他数据源，才尝试合并 items
+        if (!hasStructuredData) {
+          const existingItems = Array.isArray(current.items)
+            ? (current.items as ItemDatum[])
+            : [];
+
+          const normalizedItems = normalizeItems(existingItems);
+          const itemMap = new Map<string, ItemDatum>();
+          normalizedItems.forEach((item) => {
+            if (item.id) itemMap.set(item.id, item);
+          });
+          parsed.items.forEach((item) => {
+            const existing = itemMap.get(item.id as string);
+            if (existing) {
+              if (!existing.label && item.label) existing.label = item.label;
+            } else {
+              normalizedItems.push(item);
+              itemMap.set(item.id as string, item);
+            }
+          });
+          current.items = normalizedItems;
+        }
+
         current.relations = parsed.relations;
         options.data = current as any;
       }

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/syntax/relations.ts

@@ -3,8 +3,8 @@ import { mapWithSchema } from './mapper';
 import { RelationSchema } from './schema';
 import type { SyntaxError, SyntaxNode } from './types';
 
-const RELATION_TOKEN = /[<>=o.x-]{2,}/;
-const ARROW_TOKEN = /[<>=o.x-]{2,}/g;
+const RELATION_TOKEN = /(?:[<>o.x-]{2,}|[<>=]{2,})/;
+const ARROW_TOKEN = /(?:[<>o.x-]{2,}|[<>=]{2,})/g;
 
 interface ParsedNode {
   id: string;
@@ -125,6 +125,33 @@ function readEdge(text: string, startIndex: number): ParsedEdge | null {
   let directionToken = arrowToken;
   let index = arrowEnd;
 
+  // Detect split bidirectional arrow pattern: <- label ->
+  {
+    const leftHasLeft = directionToken.includes('<');
+    const leftHasRight = directionToken.includes('>');
+    if (leftHasLeft && !leftHasRight) {
+      const lookahead = new RegExp(ARROW_TOKEN.source, 'g');
+      lookahead.lastIndex = arrowEnd;
+      const rightMatch = lookahead.exec(text);
+      if (
+        rightMatch &&
+        rightMatch[0].includes('>') &&
+        !rightMatch[0].includes('<')
+      ) {
+        const middleText = text.slice(arrowEnd, rightMatch.index).trim();
+        if (middleText) {
+          const splitLabel = normalizeLabel(middleText);
+          return {
+            label: splitLabel || label,
+            direction: 'both',
+            reverse: false,
+            nextIndex: rightMatch.index + rightMatch[0].length,
+          };
+        }
+      }
+    }
+  }
+
   index = skipSpaces(text, index);
   if (text[index] === '|') {
     const pipeEnd = text.indexOf('|', index + 1);

package/src/syntax/schema.ts

@@ -60,6 +60,7 @@ export const RelationSchema: ObjectSchema = object(
     direction: enumOf(['forward', 'both', 'none']),
     showArrow: enumOf(['true', 'false']),
     arrowType: enumOf(['arrow', 'triangle', 'diamond']),
+    lineStyle: enumOf(['solid', 'dashed']),
   },
   { allowUnknown: true },
 );

package/src/templates/built-in.ts

@@ -6,6 +6,7 @@ import { hierarchyTreeTemplates } from './hierarchy-tree';
 import { listZigzagTemplates } from './list-zigzag';
 import { registerTemplate } from './registry';
 import { relationDagreFlowTemplates } from './relation-dagre-flow';
+import { sequenceInteractionTemplates } from './sequence-interaction';
 import { sequenceStairsTemplates } from './sequence-stairs';
 import type { TemplateOptions } from './types';
 import { wordCloudTemplate } from './word-cloud';
@@ -209,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' }],
     },
   },
@@ -230,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' }],
     },
   },
@@ -752,6 +753,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   ...wordCloudTemplate,
   ...listZigzagTemplates,
   ...relationDagreFlowTemplates,
+  ...sequenceInteractionTemplates,
   ...hierarchyStructureTemplates,
 };
 

package/src/templates/sequence-interaction.ts

@@ -0,0 +1,101 @@
+import type { TemplateOptions } from './types';
+
+// 多样化的节点样式
+const items = {
+  'badge-card': {
+    type: 'badge-card',
+    width: 160,
+    height: 60,
+  },
+  'compact-card': {
+    type: 'compact-card',
+    width: 180,
+    height: 60,
+  },
+  'capsule-item': {
+    type: 'capsule-item',
+    width: 150,
+    height: 60,
+  },
+  'rounded-rect-node': {
+    type: 'rounded-rect-node',
+    width: 140,
+    height: 60,
+  },
+} as const;
+
+// 基础结构属性
+const baseStructureAttrs = {
+  type: 'sequence-interaction',
+  showLaneHeader: true,
+  arrowType: 'triangle',
+} as const;
+
+// 箭头样式配置
+const arrowStyles = {
+  default: {},
+  dashed: {
+    edgeStyle: 'dashed',
+  },
+  animated: {
+    edgeStyle: 'dashed',
+    animated: true,
+  },
+} as const;
+
+// 结构布局配置
+const structures = {
+  // 默认：带生命线
+  default: {
+    ...baseStructureAttrs,
+    showLifeline: true,
+    nodeGap: 40,
+  },
+  // 紧凑：更小间距
+  compact: {
+    ...baseStructureAttrs,
+    showLifeline: true,
+    nodeGap: 20,
+  },
+  // 宽松：更大间距
+  wide: {
+    ...baseStructureAttrs,
+    showLifeline: true,
+    nodeGap: 60,
+  },
+} as const;
+
+export const sequenceInteractionTemplates: Record<string, TemplateOptions> = {};
+
+// 排除某些不合适的组合
+const omit: string[] = [
+  // 后续如果有不合适的可以排除掉
+];
+
+Object.entries(structures).forEach(([strKey, strAttrs]) => {
+  Object.entries(arrowStyles).forEach(([arrowKey, arrowAttrs]) => {
+    Object.entries(items).forEach(([itemKey, itemAttrs]) => {
+      const parts = [strKey];
+      if (arrowKey !== 'default') {
+        parts.push(arrowKey);
+      }
+      parts.push(itemKey);
+
+      const appendix = parts.join('-');
+      if (omit.includes(appendix)) return;
+
+      const templateKey = `sequence-interaction-${appendix}`;
+
+      sequenceInteractionTemplates[templateKey] = {
+        design: {
+          title: 'default',
+          structure: {
+            ...strAttrs,
+            ...arrowAttrs,
+          },
+          item: itemAttrs,
+        },
+      };
+    });
+  });
+});

package/src/types/data.ts

@@ -56,6 +56,7 @@ export interface RelationEdgeDatum extends BaseDatum {
   direction?: 'forward' | 'both' | 'none';
   showArrow?: boolean;
   arrowType?: 'arrow' | 'triangle' | 'diamond';
+  lineStyle?: 'solid' | 'dashed';
 }
 
 /**

package/src/utils/index.ts

@@ -17,5 +17,6 @@ export * from './recognizer';
 export * from './style';
 export * from './svg';
 export * from './text';
+export * from './types';
 export * from './uuid';
 export * from './viewbox';

package/src/utils/measure-text.ts

@@ -1,10 +1,15 @@
 import { measureText as measure, registerFont } from 'measury';
+import Tegakizatsu from 'measury/fonts/851tegakizatsu-Regular';
 import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
+import Arial from 'measury/fonts/Arial-Regular';
+import LXGWWenKai from 'measury/fonts/LXGWWenKai-Regular';
+import SourceHanSans from 'measury/fonts/SourceHanSans-Regular';
+import SourceHanSerif from 'measury/fonts/SourceHanSerif-Regular';
 import { JSXNode, TextProps } from '../jsx';
 import { DEFAULT_FONT } from '../renderer';
-import { encodeFontFamily } from './font';
+import { decodeFontFamily, encodeFontFamily } from './font';
 
-let FONT_EXTEND_FACTOR = 1.01;
+let FONT_EXTEND_FACTOR = 1.015;
 
 export const setFontExtendFactor = (factor: number) => {
   FONT_EXTEND_FACTOR = factor;
@@ -12,6 +17,28 @@ export const setFontExtendFactor = (factor: number) => {
 
 registerFont(AlibabaPuHuiTi);
 
+// Lazy-register extra measury fonts on first use (SSR only needs glyph data).
+const EXTRA_MEASURY_FONTS: Record<string, Parameters<typeof registerFont>[0]> =
+  {
+    '851tegakizatsu': Tegakizatsu,
+    Arial: Arial,
+    'LXGW WenKai': LXGWWenKai,
+    'Source Han Sans': SourceHanSans,
+    'Source Han Serif': SourceHanSerif,
+  };
+const registeredMeasuryFonts = new Set<string>();
+
+function ensureMeasuryFont(fontFamily: string) {
+  // decodeFontFamily: '"851tegakizatsu", sans-serif' → '851tegakizatsu, sans-serif'
+  // split by comma and take the first family name
+  const primary = decodeFontFamily(fontFamily)?.split(',')[0]?.trim();
+  if (!primary || registeredMeasuryFonts.has(primary)) return;
+  const data = EXTRA_MEASURY_FONTS[primary];
+  if (!data) return;
+  registerFont(data);
+  registeredMeasuryFonts.add(primary);
+}
+
 let canvasContext: CanvasRenderingContext2D | null | undefined = undefined;
 let measureSpan: HTMLSpanElement | null = null;
 
@@ -121,13 +148,18 @@ export function measureText(
   } = attrs;
 
   const content = text.toString();
+  ensureMeasuryFont(fontFamily);
   const options = {
     fontFamily,
     fontSize: parseFloat(fontSize.toString()),
     fontWeight,
     lineHeight,
   };
-  const fallback = () => measure(content, options);
+  const fallback = () =>
+    measure(content, {
+      ...options,
+      fontFamily: decodeFontFamily(fontFamily),
+    });
   const metrics = measureTextInBrowser(content, options) ?? fallback();
 
   // 额外添加 1% 宽高

package/src/utils/types.ts

@@ -0,0 +1,61 @@
+// =============================================================================
+// Path Helper Types (路径生成工具类型)
+//
+// 作用：递归提取对象的所有可选路径（点语法），用于 SyncRegistry 等场景的类型安全与补全。
+//
+// [Input]:
+// type Obj = { a: { b: { c: string } }, d: number };
+//
+// [Output]:
+// "a" | "a.b" | "a.b.c" | "d"
+// =============================================================================
+
+// 1. 递归深度控制：定义一个元组，用于递减深度 (D -> D-1)
+// Prev[3] => 2, Prev[2] => 1, ... Prev[0] => never
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+// 2. 终止节点类型：遇到这些类型停止递归
+// 包括基本类型、数组、函数等，只深入遍历普通对象
+type StopType =
+  | string
+  | number
+  | boolean
+  | symbol
+  | undefined
+  | null
+  | ((...args: any[]) => any)
+  | Array<any>;
+
+// 3. 辅助：拼接两个路径片段 (K.P)
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${'' extends P ? '' : '.'}${P}`
+    : never
+  : never;
+
+// 4. 辅助：提取对象中明确定义的 Key (过滤掉索引签名 [key: string]: any)
+// 使用 Key Remapping (TS 4.1+) 技术
+type ValidKey<T> = keyof {
+  [K in keyof T as string extends K
+    ? never
+    : number extends K
+      ? never
+      : K]: any;
+};
+
+/**
+ * 递归生成 T 的所有点语法路径 (例如 "design.structure" 或 "data.items")
+ * @template T 目标对象类型
+ * @template D 递归深度限制，默认 3 层 (足以覆盖大多数配置嵌套)
+ */
+export type Path<T, D extends number = 3> = [D] extends [never]
+  ? never // A. 达到最大深度，终止
+  : T extends StopType
+    ? never // B. 遇到终止类型，终止
+    : {
+        // C. 遍历所有有效的 Key，并移除可选修饰符 (-?) 以处理 undefined
+        [K in ValidKey<T>]-?: K extends string | number
+          ? // 生成: 当前路径 K 或 "K + 子路径"
+              K | Join<K, Path<NonNullable<T[K]>, Prev[D]>>
+          : never;
+      }[ValidKey<T>]; // D. 提取所有生成路径的联合类型

package/src/version.ts

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