@antv/infographic 0.2.14 → 0.2.15

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';
@@ -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.15';