@antv/infographic 0.2.7 → 0.2.8

package/src/syntax/index.ts

@@ -1,6 +1,8 @@
 import type { InfographicOptions } from '../options';
+import type { ItemDatum } from '../types';
 import { mapWithSchema } from './mapper';
 import { parseSyntaxToAst } from './parser';
+import { parseRelationsNode } from './relations';
 import {
   DataSchema,
   DesignSchema,
@@ -10,6 +12,24 @@ import {
 } from './schema';
 import type { SyntaxNode, SyntaxParseResult } from './types';
 
+function normalizeItems(items: ItemDatum[]) {
+  const seen = new Set<string>();
+  const normalized: ItemDatum[] = [];
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    const item = items[index];
+    const id = item.id ?? item.label;
+    if (!id) {
+      normalized.push(item);
+      continue;
+    }
+    if (seen.has(id)) continue;
+    seen.add(id);
+    if (!item.id) item.id = id;
+    normalized.push(item);
+  }
+  return normalized.reverse();
+}
+
 function resolveTemplate(
   node: SyntaxNode | undefined,
   errors: SyntaxParseResult['errors'],
@@ -75,8 +95,45 @@ export function parseSyntax(input: string): SyntaxParseResult {
 
   const dataNode = mergedEntries.data as SyntaxNode | undefined;
   if (dataNode) {
-    const data = mapWithSchema(dataNode, DataSchema, 'data', errors);
+    let relationsNode: SyntaxNode | undefined;
+    let dataNodeForMapping = dataNode;
+    if (dataNode.kind === 'object') {
+      const { relations, ...rest } = dataNode.entries;
+      relationsNode = relations;
+      dataNodeForMapping = { ...dataNode, entries: rest };
+    }
+    const data = mapWithSchema(dataNodeForMapping, DataSchema, 'data', errors);
     if (data) options.data = data;
+    if (relationsNode) {
+      const parsed = parseRelationsNode(
+        relationsNode,
+        errors,
+        'data.relations',
+      );
+      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);
+          }
+        });
+        current.items = normalizedItems;
+        current.relations = parsed.relations;
+        options.data = current as any;
+      }
+    }
   }
 
   const themeNode = mergedEntries.theme as SyntaxNode | undefined;

package/src/syntax/parser.ts

@@ -40,6 +40,10 @@ function stripComments(content: string) {
   return content.trimEnd();
 }
 
+function looksLikeRelationExpression(text: string) {
+  return /[<>=o.x-]{2,}/.test(text);
+}
+
 function parseKeyValue(raw: string) {
   const text = raw.trim();
   if (!text) return null;
@@ -130,6 +134,51 @@ export function parseSyntaxToAst(input: string): ParseResult {
       return;
     }
 
+    if (
+      parentFrame.key === 'relations' &&
+      !trimmed.startsWith('-') &&
+      looksLikeRelationExpression(trimmed)
+    ) {
+      if (parentNode.kind !== 'array') {
+        if (
+          parentNode.kind === 'object' &&
+          Object.keys(parentNode.entries).length === 0 &&
+          parentNode.value === undefined &&
+          parentFrame.parent &&
+          parentFrame.key
+        ) {
+          const arrayNode = createArrayNode(parentNode.line);
+          if (parentFrame.parent.kind === 'object') {
+            parentFrame.parent.entries[parentFrame.key] = arrayNode;
+          } else if (parentFrame.parent.kind === 'array') {
+            const indexInParent = parentFrame.parent.items.indexOf(parentNode);
+            if (indexInParent >= 0)
+              parentFrame.parent.items[indexInParent] = arrayNode;
+          }
+          parentFrame.node = arrayNode;
+          parentNode = arrayNode;
+        } else {
+          errors.push({
+            path: '',
+            line: lineNumber,
+            code: 'bad_list',
+            message: 'List item is not under an array container.',
+            raw: trimmed,
+          });
+          return;
+        }
+      }
+
+      const itemNode = createObjectNode(lineNumber, trimmed);
+      parentNode.items.push(itemNode);
+      stack.push({
+        indent,
+        node: itemNode,
+        parent: parentNode,
+      });
+      return;
+    }
+
     const parsed = parseKeyValue(trimmed);
     if (!parsed) {
       errors.push({

package/src/syntax/relations.ts

@@ -0,0 +1,291 @@
+import type { ItemDatum, RelationDatum } from '../types';
+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;
+
+interface ParsedNode {
+  id: string;
+  label?: string;
+}
+
+interface ParsedEdge {
+  label?: string;
+  direction: 'forward' | 'both' | 'none';
+  reverse: boolean;
+  nextIndex: number;
+}
+
+function normalizeLabel(text: string) {
+  let label = text.trim();
+  if (!label) return '';
+  const first = label[0];
+  const last = label[label.length - 1];
+  if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+    label = label.slice(1, -1);
+  }
+  label = label
+    .replace(/\\(["'])/g, '$1')
+    .replace(/(&quot;|&#quot;|#quot;)/g, '"')
+    .replace(/(&apos;|&#39;|#apos;)/g, "'");
+  return label.trim();
+}
+
+function stripEdgeLabelPrefix(text: string) {
+  const trimmed = text
+    .trim()
+    .replace(/^[-=.ox]+/, '')
+    .trim();
+  return normalizeLabel(trimmed);
+}
+
+function skipSpaces(text: string, index: number) {
+  let cursor = index;
+  while (cursor < text.length && /\s/.test(text[cursor])) {
+    cursor += 1;
+  }
+  return cursor;
+}
+
+function readNode(text: string, startIndex: number) {
+  let index = skipSpaces(text, startIndex);
+  if (index >= text.length) return null;
+  const idStart = index;
+  while (index < text.length) {
+    const char = text[index];
+    if (
+      /\s/.test(char) ||
+      char === '[' ||
+      char === '(' ||
+      char === '@' ||
+      char === '|' ||
+      char === '<' ||
+      char === '>'
+    ) {
+      break;
+    }
+    if (
+      char === '-' &&
+      (text[index + 1] === '-' ||
+        text[index + 1] === '>' ||
+        text[index + 1] === '<')
+    ) {
+      break;
+    }
+    index += 1;
+  }
+  if (index === idStart) return null;
+  const id = text.slice(idStart, index).trim();
+  if (!id) return null;
+
+  if (text.startsWith('@{', index)) {
+    const braceEnd = text.indexOf('}', index + 2);
+    if (braceEnd !== -1) {
+      index = braceEnd + 1;
+    }
+  }
+
+  index = skipSpaces(text, index);
+  let label: string | undefined;
+  if (text[index] === '[') {
+    const end = text.indexOf(']', index + 1);
+    if (end !== -1) {
+      label = normalizeLabel(text.slice(index + 1, end));
+      index = end + 1;
+    }
+  } else if (text[index] === '(') {
+    const end = text.indexOf(')', index + 1);
+    if (end !== -1) {
+      let content = text.slice(index + 1, end).trim();
+      if (content.startsWith('[') && content.endsWith(']')) {
+        content = content.slice(1, -1).trim();
+      }
+      label = normalizeLabel(content);
+      index = end + 1;
+    }
+  }
+
+  return {
+    node: { id, label } as ParsedNode,
+    nextIndex: index,
+  };
+}
+
+function readEdge(text: string, startIndex: number): ParsedEdge | null {
+  ARROW_TOKEN.lastIndex = startIndex;
+  const match = ARROW_TOKEN.exec(text);
+  if (!match) return null;
+  const arrowToken = match[0];
+  const arrowStart = match.index;
+  const arrowEnd = arrowStart + arrowToken.length;
+  const labelPrefix = stripEdgeLabelPrefix(text.slice(startIndex, arrowStart));
+  let label = labelPrefix || undefined;
+  let directionToken = arrowToken;
+  let index = arrowEnd;
+
+  index = skipSpaces(text, index);
+  if (text[index] === '|') {
+    const pipeEnd = text.indexOf('|', index + 1);
+    if (pipeEnd !== -1) {
+      const pipeLabel = normalizeLabel(text.slice(index + 1, pipeEnd));
+      label = pipeLabel || label;
+      index = pipeEnd + 1;
+      const afterLabel = skipSpaces(text, index);
+      ARROW_TOKEN.lastIndex = afterLabel;
+      const tail = ARROW_TOKEN.exec(text);
+      if (tail && tail.index === afterLabel) {
+        directionToken += tail[0];
+        index = tail.index + tail[0].length;
+      } else {
+        index = afterLabel;
+      }
+    }
+  }
+
+  const hasLeft = directionToken.includes('<');
+  const hasRight = directionToken.includes('>');
+  const markerMatch = directionToken.match(/[xo]/gi) || [];
+  const markerLeft = /^[xo]/i.test(directionToken);
+  const markerRight = /[xo]$/i.test(directionToken);
+  let direction: ParsedEdge['direction'] = 'none';
+  let reverse = false;
+  if (
+    (hasLeft && hasRight) ||
+    (hasLeft && markerRight) ||
+    (hasRight && markerLeft) ||
+    (markerLeft && markerRight)
+  ) {
+    direction = 'both';
+  } else if (hasLeft || hasRight || markerMatch.length > 0) {
+    direction = 'forward';
+    reverse = hasLeft && !hasRight;
+  }
+
+  return { label, direction, reverse, nextIndex: index };
+}
+
+function parseRelationLine(text: string) {
+  const relations: RelationDatum[] = [];
+  const nodes: ParsedNode[] = [];
+  const nodeMap = new Map<string, ParsedNode>();
+  let index = 0;
+  const first = readNode(text, index);
+  if (!first) return { relations, nodes };
+  let current = first.node;
+  if (!nodeMap.has(current.id)) {
+    nodeMap.set(current.id, current);
+    nodes.push(current);
+  }
+  index = first.nextIndex;
+
+  while (index < text.length) {
+    const edge = readEdge(text, index);
+    if (!edge) break;
+    index = edge.nextIndex;
+    const nextNode = readNode(text, index);
+    if (!nextNode) break;
+    index = nextNode.nextIndex;
+
+    let from = current.id;
+    let to = nextNode.node.id;
+    const direction = edge.direction;
+    if (edge.reverse) {
+      from = nextNode.node.id;
+      to = current.id;
+    }
+
+    const relation: RelationDatum = {
+      from,
+      to,
+    };
+    if (edge.label) relation.label = edge.label;
+    if (direction === 'both') relation.direction = 'both';
+    if (direction === 'none') relation.direction = 'none';
+    relations.push(relation);
+
+    if (!nodeMap.has(current.id)) {
+      nodeMap.set(current.id, current);
+      nodes.push(current);
+    }
+    if (!nodeMap.has(nextNode.node.id)) {
+      nodeMap.set(nextNode.node.id, nextNode.node);
+      nodes.push(nextNode.node);
+    }
+    current = nextNode.node;
+  }
+
+  return { relations, nodes };
+}
+
+function ensureItemLabel(
+  items: Map<string, ItemDatum>,
+  list: ItemDatum[],
+  id: string,
+  label?: string,
+) {
+  if (!id) return;
+  const existing = items.get(id);
+  if (existing) {
+    if (!existing.label && label) existing.label = label;
+    return;
+  }
+  const item: ItemDatum = { id, label: label || id };
+  items.set(id, item);
+  list.push(item);
+}
+
+function parseExplicitRelation(
+  node: SyntaxNode,
+  path: string,
+  errors: SyntaxError[],
+) {
+  const value = mapWithSchema(node, RelationSchema, path, errors);
+  if (!value || typeof value !== 'object') return null;
+  if (typeof value.from !== 'string' || typeof value.to !== 'string') {
+    return null;
+  }
+  return value as RelationDatum;
+}
+
+export function parseRelationsNode(
+  node: SyntaxNode,
+  errors: SyntaxError[],
+  path: string,
+) {
+  const relations: RelationDatum[] = [];
+  const items: ItemDatum[] = [];
+  const itemMap = new Map<string, ItemDatum>();
+
+  const parseLine = (line: string) => {
+    if (!RELATION_TOKEN.test(line)) return;
+    const parsed = parseRelationLine(line);
+    parsed.nodes.forEach((nodeItem) => {
+      ensureItemLabel(itemMap, items, nodeItem.id, nodeItem.label);
+    });
+    relations.push(...parsed.relations);
+  };
+
+  if (node.kind === 'array') {
+    node.items.forEach((item, index) => {
+      if (
+        item.kind === 'object' &&
+        item.value &&
+        Object.keys(item.entries).length === 0 &&
+        RELATION_TOKEN.test(item.value)
+      ) {
+        parseLine(item.value);
+        return;
+      }
+      const relation = parseExplicitRelation(item, `${path}[${index}]`, errors);
+      if (relation) {
+        relations.push(relation);
+      }
+    });
+  } else if (node.kind === 'object' && node.value) {
+    parseLine(node.value);
+  }
+
+  return { relations, items };
+}

package/src/syntax/schema.ts

@@ -38,13 +38,28 @@ const shapeStyleSchema = object(nullableColorFields, { allowUnknown: true });
 
 const itemDatumSchema: ObjectSchema = object({}, { allowUnknown: true });
 itemDatumSchema.fields = {
+  id: string(),
   label: string(),
   value: union(number(), string()),
   desc: string(),
   icon: string(),
+  group: string(),
   children: array(itemDatumSchema),
 };
 
+export const RelationSchema: ObjectSchema = object(
+  {
+    id: string(),
+    from: string(),
+    to: string(),
+    label: string(),
+    direction: enumOf(['forward', 'both', 'none']),
+    showArrow: enumOf(['true', 'false']),
+    arrowType: enumOf(['arrow', 'triangle', 'diamond']),
+  },
+  { allowUnknown: true },
+);
+
 export const ThemeSchema = object(
   {
     type: string(),
@@ -101,6 +116,7 @@ export const DataSchema = object({
   title: string(),
   desc: string(),
   items: array(itemDatumSchema),
+  relations: array(RelationSchema),
 });
 
 export const TemplateSchema = object(

package/src/templates/built-in.ts

@@ -3,6 +3,7 @@ import { hierarchyStructureTemplates } from './hierarchy-structure';
 import { hierarchyTreeTemplates } from './hierarchy-tree';
 import { listZigzagTemplates } from './list-zigzag';
 import { registerTemplate } from './registry';
+import { relationDagreFlowTemplates } from './relation-dagre-flow';
 import { sequenceStairsTemplates } from './sequence-stairs';
 import type { TemplateOptions } from './types';
 import { wordCloudTemplate } from './word-cloud';
@@ -313,8 +314,8 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'sequence-funnel-simple': {
     design: {
       title: 'default',
-      structure: { type: 'sequence-funnel'},
-      items: [{ type: 'simple', showIcon: false, usePaletteColor: true}],
+      structure: { type: 'sequence-funnel' },
+      items: [{ type: 'simple', showIcon: false, usePaletteColor: true }],
     },
     themeConfig: {
       palette: '#1677ff',
@@ -820,6 +821,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   ...sequenceStairsTemplates,
   ...wordCloudTemplate,
   ...listZigzagTemplates,
+  ...relationDagreFlowTemplates,
   ...hierarchyStructureTemplates,
 };
 

package/src/templates/relation-dagre-flow.ts

@@ -0,0 +1,73 @@
+import type { TemplateOptions } from './types';
+
+const items = {
+  'simple-circle-node': {
+    type: 'simple-circle-node',
+  },
+  'badge-card': {
+    type: 'badge-card',
+  },
+  capsule: {
+    type: 'capsule-item',
+  },
+  'compact-card': {
+    type: 'compact-card',
+  },
+} as const;
+
+const baseStructureAttrs = {
+  type: 'relation-dagre-flow',
+  edgeColorMode: 'gradient',
+  showArrow: true,
+  arrowType: 'triangle',
+  colorMode: 'node',
+} as const;
+
+const structures = {
+  tb: {
+    ...baseStructureAttrs,
+    rankdir: 'TB',
+    edgeRouting: 'orth',
+  },
+  lr: {
+    ...baseStructureAttrs,
+    rankdir: 'LR',
+    edgeRouting: 'orth',
+  },
+  'tb-animated': {
+    ...baseStructureAttrs,
+    rankdir: 'TB',
+    edgeCornerRadius: 12,
+    edgeRouting: 'orth',
+    edgeAnimation: 'ant-line',
+    edgeDashPattern: '8,4',
+    edgeAnimationSpeed: 1,
+  },
+  'lr-animated': {
+    ...baseStructureAttrs,
+    rankdir: 'LR',
+    edgeCornerRadius: 12,
+    edgeRouting: 'orth',
+    edgeAnimation: 'ant-line',
+    edgeDashPattern: '8,4',
+    edgeAnimationSpeed: 1,
+  },
+};
+
+export const relationDagreFlowTemplates: Record<string, TemplateOptions> = {};
+
+const omit = ['lr-capsule', 'tb-capsule'];
+Object.entries(structures).forEach(([strKey, strAttrs]) => {
+  Object.entries(items).forEach(([itemKey, itemAttrs]) => {
+    const appendix = `${strKey}-${itemKey}`;
+    if (omit.includes(appendix)) return;
+    const templateKey = `relation-dagre-flow-${appendix}`;
+    relationDagreFlowTemplates[templateKey] = {
+      design: {
+        title: 'default',
+        structure: strAttrs,
+        item: itemAttrs,
+      },
+    };
+  });
+});

package/src/types/data.ts

@@ -1,20 +1,43 @@
 import type { ResourceConfig } from '../resource';
 
-export interface ItemDatum {
+export interface BaseDatum {
+  id?: string;
   icon?: string | ResourceConfig;
   label?: string;
   desc?: string;
   value?: number;
-  illus?: string | ResourceConfig;
-  children?: ItemDatum[];
   attributes?: Record<string, object>;
   [key: string]: any;
 }
 
+export interface ItemDatum extends BaseDatum {
+  illus?: string | ResourceConfig;
+  /** for hierarchical structure */
+  children?: ItemDatum[];
+  /** 图布局中用于分组，相同的 group 会使用同样的颜色 */
+  group?: string;
+}
+
+export interface RelationDatum extends BaseDatum {
+  id?: string;
+  from: string;
+  to: string;
+  /**
+   * 表示连线的方向，默认 'forward'
+   * - 'forward'：单向，从 from 指向 to
+   * - 'both'：双向
+   * - 'none'：无方向
+   */
+  direction?: 'forward' | 'both' | 'none';
+  showArrow?: boolean;
+  arrowType?: 'arrow' | 'triangle' | 'diamond';
+}
+
 export interface Data {
   title?: string;
   desc?: string;
   items: ItemDatum[];
+  relations?: RelationDatum[];
   illus?: Record<string, string | ResourceConfig>;
   attributes?: Record<string, object>;
   [key: string]: any;

package/src/utils/data.ts

@@ -1,4 +1,4 @@
-import get from 'lodash-es/get';
+import { get } from 'lodash-es';
 import type { Data, ItemDatum } from '../types';
 
 /**

package/src/utils/index.ts

@@ -8,6 +8,7 @@ export * from './font';
 export * from './get-types';
 export * from './hash';
 export * from './icon';
+export * from './is-node';
 export * from './item';
 export * from './join';
 export * from './measure-text';

package/src/utils/is-browser.ts

@@ -1,18 +1,14 @@
-let _isBrowser: boolean | undefined;
+let IS_BROWSER: true | undefined;
 
 export function isBrowser(): boolean {
-  if (_isBrowser !== undefined) {
-    return _isBrowser;
-  }
+  if (IS_BROWSER) return true;
 
   if (typeof window === 'undefined' || typeof document === 'undefined') {
-    _isBrowser = false;
     return false;
   }
 
   const body = document.body;
   if (!body) {
-    _isBrowser = false;
     return false;
   }
 
@@ -47,7 +43,6 @@ export function isBrowser(): boolean {
   }
 
   if (!hasRealLayout) {
-    _isBrowser = false;
     return false;
   }
 
@@ -59,7 +54,6 @@ export function isBrowser(): boolean {
 
     const ctx = canvas.getContext('2d');
     if (!ctx) {
-      _isBrowser = false;
       return false;
     }
 
@@ -74,6 +68,6 @@ export function isBrowser(): boolean {
     hasRealCanvas = false;
   }
 
-  _isBrowser = hasRealCanvas;
+  if (hasRealCanvas) IS_BROWSER = hasRealCanvas;
   return hasRealCanvas;
 }