@antv/infographic 0.2.13 → 0.2.15

package/src/runtime/options.ts

@@ -2,17 +2,24 @@ import {
   BrushSelect,
   ClickSelect,
   DblClickEditText,
+  DragCanvas,
   DragElement,
   EditBar,
   HotkeyHistory,
+  ResetViewBox,
   ResizeElement,
   SelectHighlight,
   ZoomWheel,
 } from '../editor';
 import { InfographicOptions } from '../options';
 
-const createDefaultPlugins = () => [new EditBar(), new ResizeElement()];
+const createDefaultPlugins = () => [
+  new EditBar(),
+  new ResizeElement(),
+  new ResetViewBox(),
+];
 const createDefaultInteractions = () => [
+  new DragCanvas(),
   new DblClickEditText(),
   new BrushSelect(),
   new ClickSelect(),

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/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';
@@ -171,6 +172,20 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
       items: [{ type: 'icon-badge' }],
     },
   },
+  'relation-network-icon-badge': {
+    design: {
+      title: 'default',
+      structure: { type: 'relation-network' },
+      items: [{ type: 'icon-badge' }],
+    },
+  },
+  'relation-network-simple-circle-node': {
+    design: {
+      title: 'default',
+      structure: { type: 'relation-network' },
+      items: [{ type: 'simple-circle-node' }],
+    },
+  },
   'sequence-steps-badge-card': {
     design: {
       title: 'default',
@@ -351,6 +366,20 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
       items: [{ type: 'plain-text' }],
     },
   },
+  'list-waterfall-badge-card': {
+    design: {
+      title: 'default',
+      structure: { type: 'list-waterfall' },
+      items: [{ type: 'badge-card' }],
+    },
+  },
+  'list-waterfall-compact-card': {
+    design: {
+      title: 'default',
+      structure: { type: 'list-waterfall' },
+      items: [{ type: 'compact-card' }],
+    },
+  },
   'sequence-roadmap-vertical-plain-text': {
     design: {
       title: 'default',
@@ -724,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,11 +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 { isBrowser } from './is-browser';
+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;
@@ -13,17 +17,41 @@ export const setFontExtendFactor = (factor: number) => {
 
 registerFont(AlibabaPuHuiTi);
 
-let canvasContext: CanvasRenderingContext2D | null = null;
+// 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;
 
 function getCanvasContext() {
-  if (canvasContext) return canvasContext;
+  if (typeof document === 'undefined') return null;
+  if (canvasContext !== undefined) return canvasContext;
   const canvas = document.createElement('canvas');
   canvasContext = canvas.getContext('2d');
   return canvasContext;
 }
 
 function getMeasureSpan() {
+  if (typeof document === 'undefined') return null;
   if (!document.body) return null;
   if (measureSpan) return measureSpan;
   measureSpan = document.createElement('span');
@@ -98,6 +126,7 @@ function measureTextInBrowser(
   span.style.lineHeight = `${lineHeightPx}px`;
   span.textContent = content;
   const rect = span.getBoundingClientRect();
+  if (content && rect.width <= 0 && rect.height <= 0) return null;
   return { width: rect.width, height: rect.height };
 }
 
@@ -119,16 +148,19 @@ 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 metrics = isBrowser()
-    ? (measureTextInBrowser(content, options) ?? fallback())
-    : fallback();
+  const fallback = () =>
+    measure(content, {
+      ...options,
+      fontFamily: decodeFontFamily(fontFamily),
+    });
+  const metrics = measureTextInBrowser(content, options) ?? fallback();
 
   // 额外添加 1% 宽高
   return {

package/src/utils/padding.ts

@@ -67,7 +67,10 @@ function setSVGPaddingInNode(svg: SVGSVGElement, padding: ParsedPadding) {
   });
 }
 
-function setSVGPaddingInBrowser(svg: SVGSVGElement, padding: ParsedPadding) {
+export function getBoundViewBox(
+  svg: SVGSVGElement,
+  padding: ParsedPadding,
+): string {
   const bbox = svg.getBBox();
   const clientRect = svg.getBoundingClientRect();
   const scaleX = clientRect.width > 0 ? bbox.width / clientRect.width : 1;
@@ -84,8 +87,13 @@ function setSVGPaddingInBrowser(svg: SVGSVGElement, padding: ParsedPadding) {
   const newWidth = bbox.width + leftSvg + rightSvg;
   const newHeight = bbox.height + topSvg + bottomSvg;
 
+  return `${newX} ${newY} ${newWidth} ${newHeight}`;
+}
+
+function setSVGPaddingInBrowser(svg: SVGSVGElement, padding: ParsedPadding) {
+  const viewBox = getBoundViewBox(svg, padding);
   setAttributes(svg, {
-    viewBox: `${newX} ${newY} ${newWidth} ${newHeight}`,
+    viewBox,
   });
 }
 

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.13';
+export const VERSION = '0.2.15';