@antv/infographic 0.2.6 → 0.2.8

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';
@@ -310,6 +311,16 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
       colorPrimary: '#1677ff',
     },
   },
+  'sequence-funnel-simple': {
+    design: {
+      title: 'default',
+      structure: { type: 'sequence-funnel' },
+      items: [{ type: 'simple', showIcon: false, usePaletteColor: true }],
+    },
+    themeConfig: {
+      palette: '#1677ff',
+    },
+  },
   'list-row-horizontal-icon-line': {
     design: {
       title: 'default',
@@ -810,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;
 }

package/src/utils/measure-text.ts

@@ -1,10 +1,9 @@
 import { measureText as measure, registerFont } from 'measury';
 import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
-import { TextProps } from '../jsx';
+import { JSXNode, TextProps } from '../jsx';
 import { DEFAULT_FONT } from '../renderer';
 import { encodeFontFamily } from './font';
 import { isBrowser } from './is-browser';
-import { isNode } from './is-node';
 
 let FONT_EXTEND_FACTOR = 1.01;
 
@@ -12,9 +11,7 @@ export const setFontExtendFactor = (factor: number) => {
   FONT_EXTEND_FACTOR = factor;
 };
 
-if (isNode) {
-  registerFont(AlibabaPuHuiTi);
-}
+registerFont(AlibabaPuHuiTi);
 
 let canvasContext: CanvasRenderingContext2D | null = null;
 let measureSpan: HTMLSpanElement | null = null;
@@ -105,13 +102,15 @@ function measureTextInBrowser(
 }
 
 export function measureText(
-  text: string | number | undefined = '',
+  text: JSXNode = '',
   attrs: TextProps,
 ): { width: number; height: number } {
   if (attrs.width && attrs.height) {
     return { width: attrs.width, height: attrs.height };
   }
-
+  if (typeof text !== 'string' && typeof text !== 'number') {
+    return { width: 0, height: 0 };
+  }
   const {
     fontFamily = DEFAULT_FONT,
     fontSize = 14,

package/src/utils/padding.ts

@@ -30,24 +30,28 @@ export function setSVGPadding(svg: SVGSVGElement, padding: ParsedPadding) {
     if (document.contains(svg)) {
       setSVGPaddingInBrowser(svg, padding);
     } else {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((node) => {
-            if (node === svg || node.contains(svg)) {
-              waitForLayout(svg, () => {
-                setSVGPaddingInBrowser(svg, padding);
-              });
+      try {
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            mutation.addedNodes.forEach((node) => {
+              if (node === svg || node.contains(svg)) {
+                waitForLayout(svg, () => {
+                  setSVGPaddingInBrowser(svg, padding);
+                });
 
-              observer.disconnect();
-            }
+                observer.disconnect();
+              }
+            });
           });
         });
-      });
 
-      observer.observe(document, {
-        childList: true,
-        subtree: true,
-      });
+        observer.observe(document, {
+          childList: true,
+          subtree: true,
+        });
+      } catch {
+        setSVGPaddingInNode(svg, padding);
+      }
     }
   }
 }

package/src/utils/recognizer.ts

@@ -6,8 +6,12 @@ import { getTextEntity } from './text';
 const is = (element: SVGElement, role: string) => {
   return element?.dataset?.elementType === role;
 };
+const isTagName = (element: HTMLElement | SVGElement, tagName: string) => {
+  return element.tagName.toLowerCase() === tagName.toLowerCase();
+};
+
 export const isSVG = (element: any): element is SVGSVGElement =>
-  element instanceof SVGElement && element.tagName === 'svg';
+  element instanceof SVGElement && isTagName(element, 'svg');
 export const isTitle = (element: SVGElement) => is(element, 'title');
 export const isDesc = (element: SVGElement) => is(element, 'desc');
 export const isShape = (element: SVGElement) => is(element, 'shape');
@@ -15,9 +19,9 @@ export const isShapesGroup = (element: SVGElement) =>
   is(element, 'shapes-group');
 export const isIllus = (element: SVGElement) => is(element, 'illus');
 export const isText = (element: SVGElement): element is SVGTextElement =>
-  element instanceof SVGElement && element.tagName === 'text';
+  element instanceof SVGElement && isTagName(element, 'text');
 export const isGroup = (element: SVGElement): element is SVGGElement =>
-  element instanceof SVGElement && element.tagName === 'g';
+  element instanceof SVGElement && isTagName(element, 'g');
 export const isItemIcon = (element: SVGElement) => is(element, 'item-icon');
 export const isItemIconGroup = (element: SVGElement) =>
   is(element, 'item-icon-group');
@@ -37,11 +41,11 @@ export const isRoughVolume = (element: SVGElement) =>
 export function isForeignObjectElement(
   element: any,
 ): element is SVGForeignObjectElement {
-  return element.tagName === 'foreignObject';
+  return isTagName(element, 'foreignObject');
 }
 
 export function isTextEntity(element: any): element is HTMLSpanElement {
-  return element.tagName === 'SPAN';
+  return isTagName(element, 'SPAN');
 }
 
 export function isEditableText(node: SVGElement): node is TextElement {

package/src/utils/svg.ts

@@ -82,7 +82,6 @@ export function getOrCreateDefs(
   const defs = svg.querySelector<SVGDefsElement>(selector);
 
   if (defs) return defs;
-
   const newDefs = createElement<SVGDefsElement>('defs');
   if (defsId) newDefs.id = defsId;
   svg.prepend(newDefs);