@antv/infographic 0.2.14 → 0.2.15

package/src/designs/utils/geometry.tsx

@@ -0,0 +1,315 @@
+import type { JSXElement } from '../../jsx';
+import { Path, Polygon } from '../../jsx';
+
+export const getMidPoint = (points: [number, number][]) => {
+  if (points.length === 0) return null;
+  if (points.length === 1) return points[0];
+  let total = 0;
+  const segments: {
+    length: number;
+    start: [number, number];
+    end: [number, number];
+  }[] = [];
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const start = points[i];
+    const end = points[i + 1];
+    const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
+    segments.push({ length, start, end });
+    total += length;
+  }
+  if (total === 0) return points[0];
+  let target = total / 2;
+  for (let i = 0; i < segments.length; i += 1) {
+    const segment = segments[i];
+    if (target <= segment.length || i === segments.length - 1) {
+      const ratio =
+        segment.length === 0
+          ? 0
+          : Math.max(0, Math.min(1, target / segment.length));
+      return [
+        segment.start[0] + (segment.end[0] - segment.start[0]) * ratio,
+        segment.start[1] + (segment.end[1] - segment.start[1]) * ratio,
+      ] as [number, number];
+    }
+    target -= segment.length;
+  }
+  return points[Math.floor(points.length / 2)];
+};
+
+export const createStraightPath = (
+  points: [number, number][],
+  dx: number,
+  dy: number,
+) =>
+  points
+    .map(([x, y], index) => {
+      const prefix = index === 0 ? 'M' : 'L';
+      return `${prefix} ${x + dx} ${y + dy}`;
+    })
+    .join(' ');
+
+export const createRoundedPath = (
+  points: [number, number][],
+  radius: number,
+  dx: number,
+  dy: number,
+) => {
+  if (points.length < 2) return '';
+  const clamp = (value: number, min: number, max: number) =>
+    Math.min(max, Math.max(min, value));
+  const toPoint = ([x, y]: [number, number]) => ({
+    x: x + dx,
+    y: y + dy,
+  });
+  const output: string[] = [];
+  const first = toPoint(points[0]);
+  output.push(`M ${first.x} ${first.y}`);
+
+  if (points.length === 2) {
+    const last = toPoint(points[1]);
+    output.push(`L ${last.x} ${last.y}`);
+    return output.join(' ');
+  }
+
+  for (let i = 1; i < points.length - 1; i += 1) {
+    const prev = points[i - 1];
+    const curr = points[i];
+    const next = points[i + 1];
+    const v0x = curr[0] - prev[0];
+    const v0y = curr[1] - prev[1];
+    const v1x = next[0] - curr[0];
+    const v1y = next[1] - curr[1];
+    const d0 = Math.hypot(v0x, v0y);
+    const d1 = Math.hypot(v1x, v1y);
+    if (d0 === 0 || d1 === 0) {
+      const currPoint = toPoint(curr);
+      output.push(`L ${currPoint.x} ${currPoint.y}`);
+      continue;
+    }
+    const r = clamp(radius, 0, Math.min(d0, d1) / 2);
+    if (r === 0) {
+      const currPoint = toPoint(curr);
+      output.push(`L ${currPoint.x} ${currPoint.y}`);
+      continue;
+    }
+    const u0x = v0x / d0;
+    const u0y = v0y / d0;
+    const u1x = v1x / d1;
+    const u1y = v1y / d1;
+    const start = toPoint([curr[0] - u0x * r, curr[1] - u0y * r]);
+    const end = toPoint([curr[0] + u1x * r, curr[1] + u1y * r]);
+    output.push(`L ${start.x} ${start.y}`);
+    const currPoint = toPoint(curr);
+    output.push(`Q ${currPoint.x} ${currPoint.y} ${end.x} ${end.y}`);
+  }
+
+  const last = toPoint(points[points.length - 1]);
+  output.push(`L ${last.x} ${last.y}`);
+  return output.join(' ');
+};
+
+export const createArrowElements = (
+  x: number,
+  y: number,
+  angle: number,
+  type: 'arrow' | 'triangle' | 'diamond',
+  fillColor: string,
+  edgeWidth: number,
+  arrowSize: number,
+): JSXElement[] => {
+  const ux = Math.cos(angle);
+  const uy = Math.sin(angle);
+  const px = -uy;
+  const py = ux;
+  const length = arrowSize;
+  const halfWidth = arrowSize * 0.55;
+
+  if (type === 'arrow') {
+    const leftX = x - ux * length + px * halfWidth;
+    const leftY = y - uy * length + py * halfWidth;
+    const rightX = x - ux * length - px * halfWidth;
+    const rightY = y - uy * length - py * halfWidth;
+    return [
+      <Path
+        d={`M ${leftX} ${leftY} L ${x} ${y} L ${rightX} ${rightY}`}
+        stroke={fillColor}
+        strokeWidth={Math.max(1.5, edgeWidth)}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />,
+    ];
+  }
+
+  if (type === 'diamond') {
+    const diamondLength = length * 1.25;
+    const diamondWidth = halfWidth * 0.75;
+    const midX = x - ux * diamondLength * 0.5;
+    const midY = y - uy * diamondLength * 0.5;
+    const diamondPoints = [
+      { x, y },
+      { x: midX + px * diamondWidth, y: midY + py * diamondWidth },
+      { x: x - ux * diamondLength, y: y - uy * diamondLength },
+      { x: midX - px * diamondWidth, y: midY - py * diamondWidth },
+    ];
+    return [
+      <Polygon
+        points={diamondPoints}
+        fill={fillColor}
+        stroke={fillColor}
+        strokeWidth={Math.max(1, edgeWidth * 0.8)}
+      />,
+    ];
+  }
+
+  const trianglePoints = [
+    { x, y },
+    {
+      x: x - ux * length + px * halfWidth,
+      y: y - uy * length + py * halfWidth,
+    },
+    {
+      x: x - ux * length - px * halfWidth,
+      y: y - uy * length - py * halfWidth,
+    },
+  ];
+  return [
+    <Polygon
+      points={trianglePoints}
+      fill={fillColor}
+      stroke={fillColor}
+      strokeWidth={Math.max(1, edgeWidth * 0.8)}
+    />,
+  ];
+};
+
+// LT: Left Top (radio), LC: Left Center (1/2), LB: Left Bottom (1 - radio)
+// RT: Right Top (radio), RC: Right Center (1/2), RB: Right Bottom (1 - radio)
+export const getNodesAnchors = (node: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radio?: number;
+}) => {
+  const { x, y, width, height, radio = 0.25 } = node;
+  const q1H = height * radio;
+  const halfH = height * 0.5;
+  const q3H = height * (1 - radio);
+
+  return {
+    LT: { x, y: y + q1H },
+    LC: { x, y: y + halfH },
+    LB: { x, y: y + q3H },
+    RT: { x: x + width, y: y + q1H },
+    RC: { x: x + width, y: y + halfH },
+    RB: { x: x + width, y: y + q3H },
+  };
+};
+
+export const getTangentAngle = (points: [number, number][], t: 0 | 1) => {
+  const len = points.length;
+  // Cubic Bezier (Self loop)
+  if (len === 4) {
+    const p0 = points[0],
+      p1 = points[1],
+      p2 = points[2],
+      p3 = points[3];
+    if (t === 0) {
+      return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+    } else {
+      return Math.atan2(p3[1] - p2[1], p3[0] - p2[0]);
+    }
+  }
+  // Quad Bezier (Curved)
+  if (len === 3) {
+    const p0 = points[0],
+      p1 = points[1],
+      p2 = points[2];
+    if (t === 0) {
+      return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+    } else {
+      return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
+    }
+  }
+  // Line
+  if (len === 2) {
+    const p0 = points[0],
+      p1 = points[1];
+    const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+    return angle;
+  }
+  return 0;
+};
+
+/**
+ * 计算贝塞尔曲线上任意 t (0-1) 位置的点
+ */
+export const getPointAtT = (
+  points: [number, number][],
+  t = 0.5,
+): [number, number] => {
+  const len = points.length;
+  if (len === 4) {
+    const [p0, p1, p2, p3] = points;
+    const mt = 1 - t;
+    // B(t) = (1-t)^3*P0 + 3(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3
+    return [
+      mt ** 3 * p0[0] +
+        3 * mt ** 2 * t * p1[0] +
+        3 * mt * t ** 2 * p2[0] +
+        t ** 3 * p3[0],
+      mt ** 3 * p0[1] +
+        3 * mt ** 2 * t * p1[1] +
+        3 * mt * t ** 2 * p2[1] +
+        t ** 3 * p3[1],
+    ];
+  }
+  if (len === 3) {
+    const [p0, p1, p2] = points;
+    const mt = 1 - t;
+    // B(t) = (1-t)^2*P0 + 2(1-t)*t*P1 + t^2*P2
+    return [
+      mt ** 2 * p0[0] + 2 * mt * t * p1[0] + t ** 2 * p2[0],
+      mt ** 2 * p0[1] + 2 * mt * t * p1[1] + t ** 2 * p2[1],
+    ];
+  }
+  if (len === 2) {
+    const [p0, p1] = points;
+    return [p0[0] + (p1[0] - p0[0]) * t, p0[1] + (p1[1] - p0[1]) * t];
+  }
+  return points[0] || [0, 0];
+};
+
+export const getLabelPosition = (
+  points: [number, number][],
+  selfLoopOffset = 10,
+) => {
+  const len = points.length;
+  // 默认取中点
+  const labelPoint = getPointAtT(points);
+
+  if (len === 4) {
+    // 针对自连接(len=4)的特殊偏移处理
+    labelPoint[0] += selfLoopOffset;
+  }
+
+  return labelPoint as [number, number];
+};
+
+export const getEdgePathD = (points: [number, number][]) => {
+  const len = points.length;
+  if (len === 4) {
+    const [p0, p1, p2, p3] = points;
+    return `M ${p0[0]} ${p0[1]} C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`;
+  }
+  if (len === 3) {
+    const [p0, p1, p2] = points;
+    return `M ${p0[0]} ${p0[1]} Q ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`;
+  }
+  if (len === 2) {
+    const [p0, p1] = points;
+    return `M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]}`;
+  }
+  return '';
+};

package/src/designs/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './color';
+export * from './geometry';
 export * from './hierarchy-color';
 export * from './item';
 export * from './normalize-percent';

package/src/editor/managers/sync-registry.ts

@@ -1,4 +1,5 @@
 import { get } from 'lodash-es';
+import type { InfographicOptionPath } from '../../options';
 import { ISyncRegistry, SyncHandler } from '../types';
 
 type OptionsGetter = () => any;
@@ -12,7 +13,7 @@ export class SyncRegistry implements ISyncRegistry {
   constructor(private getOptions: OptionsGetter) {}
 
   register(
-    path: string,
+    path: InfographicOptionPath | (string & {}),
     handler: SyncHandler,
     options?: { immediate?: boolean },
   ): () => void {

package/src/editor/types/editor.ts

@@ -1,3 +1,4 @@
+import type { InfographicOptionPath } from '../../options';
 import type { ICommandManager } from './command';
 import type { IInteractionManager } from './interaction';
 import type { IPluginManager } from './plugin';
@@ -13,7 +14,7 @@ export interface IEditor {
 
   getDocument(): SVGSVGElement;
   registerSync(
-    path: string,
+    path: InfographicOptionPath | (string & {}),
     handler: SyncHandler,
     options?: { immediate?: boolean },
   ): () => void;

package/src/editor/types/sync.ts

@@ -1,3 +1,5 @@
+import type { InfographicOptionPath } from '../../options';
+
 /**
  * Sync callback
  * @param newValue The new value after modification
@@ -14,7 +16,7 @@ export interface ISyncRegistry {
    * @returns unregister function
    */
   register(
-    path: string,
+    path: InfographicOptionPath | (string & {}),
     handler: SyncHandler,
     options?: { immediate?: boolean },
   ): () => void;

package/src/editor/utils/object.ts

@@ -1,4 +1,4 @@
-import { cloneDeep, get, isEqual, isPlainObject } from 'lodash-es';
+import { cloneDeep, isEqual, isPlainObject } from 'lodash-es';
 
 export interface ApplyOptionUpdatesOptions {
   /** Whether to notify parent paths of changes (bubbling) */
@@ -22,85 +22,95 @@ export function applyOptionUpdates(
   options?: ApplyOptionUpdatesOptions,
 ): void {
   const { bubbleUp = false, collector } = options ?? {};
-  // Set to store unique parent paths that need notification
-  const parentPathsToNotify = new Set<string>();
 
-  applyOptionUpdatesInternal(
+  const hasChange = applyOptionUpdatesInternal(
     target,
     source,
     basePath,
     collector,
     bubbleUp,
-    parentPathsToNotify,
   );
 
-  // Bubbling notification: from the deepest parent path to the shallowest
-  if (bubbleUp && collector && parentPathsToNotify.size > 0) {
-    // Sort by path depth in descending order (deepest first)
-    const sortedPaths = Array.from(parentPathsToNotify).sort((a, b) => {
-      const depthA = a === '' ? 0 : a.split('.').length;
-      const depthB = b === '' ? 0 : b.split('.').length;
-      return depthB - depthA;
-    });
-    for (const parentPath of sortedPaths) {
-      const newVal = parentPath ? get(target, parentPath) : target;
-      // For parent paths, we provide the cloned new value.
-      // oldVal is passed as undefined as tracking branch node state is complex.
-      collector(parentPath, cloneDeep(newVal), undefined);
-    }
+  if (basePath === '' && hasChange && bubbleUp && collector) {
+    collector('', cloneDeep(target), undefined);
   }
 }
 
+/**
+ * Internal recursive function.
+ * Returns true if any change occurred within this branch (or its children).
+ */
 function applyOptionUpdatesInternal(
   target: any,
   source: any,
   basePath: string,
   collector: ((path: string, newVal: any, oldVal: any) => void) | undefined,
   bubbleUp: boolean,
-  parentPathsToNotify: Set<string>,
-): void {
+): boolean {
+  let hasChange = false;
+
   Object.keys(source).forEach((key) => {
+    if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+      return;
+    }
+
     const fullPath = basePath ? `${basePath}.${key}` : key;
     const updateValue = source[key];
     const oldValue = target[key];
+    let childChanged = false;
 
     if (updateValue === undefined) {
-      delete target[key];
-      collector?.(fullPath, undefined, oldValue);
-      if (bubbleUp) collectParentPaths(basePath, parentPathsToNotify);
+      // Handle deletion: Only delete and notify if the key actually exists
+      if (key in target) {
+        delete target[key];
+        collector?.(fullPath, undefined, oldValue);
+        childChanged = true;
+      }
     } else if (isPlainObject(updateValue)) {
-      if (!isPlainObject(target[key])) {
+      // Handle nested object
+      const oldValueIsObject = isPlainObject(target[key]);
+      if (!oldValueIsObject) {
         target[key] = {};
       }
-      applyOptionUpdatesInternal(
+
+      const grandChildChanged = applyOptionUpdatesInternal(
         target[key],
         updateValue,
         fullPath,
         collector,
         bubbleUp,
-        parentPathsToNotify,
       );
+
+      if (!oldValueIsObject) {
+        // Overwriting a primitive with an object is always a change.
+        childChanged = true;
+        // If the object was empty (grandChildChanged is false), we still need to report it.
+        if (!grandChildChanged) {
+          collector?.(fullPath, target[key], oldValue);
+        }
+      } else {
+        childChanged = grandChildChanged;
+      }
     } else {
+      // Handle primitive update
       target[key] = updateValue;
       if (!isEqual(updateValue, oldValue)) {
         collector?.(fullPath, updateValue, oldValue);
-        if (bubbleUp) collectParentPaths(basePath, parentPathsToNotify);
+        childChanged = true;
       }
     }
+
+    if (childChanged) {
+      hasChange = true;
+    }
   });
-}
 
-/**
- * Collects all parent paths of a given path and adds them to the provided set.
- */
-function collectParentPaths(path: string, set: Set<string>): void {
-  if (!path) {
-    set.add(''); // Root path
-    return;
+  // Bubbling: Notify if any child changed in this branch
+  // The recursion naturally ensures this happens in "deepest-first" (post-order) sequence.
+  if (hasChange && bubbleUp && basePath !== '') {
+    // Current target is now fully updated for this scope.
+    collector?.(basePath, cloneDeep(target), undefined);
   }
 
-  const parts = path.split('.');
-  for (let i = parts.length; i >= 0; i--) {
-    set.add(parts.slice(0, i).join('.'));
-  }
+  return hasChange;
 }

package/src/options/types.ts

@@ -2,6 +2,7 @@ import type { DesignOptions, ParsedDesignsOptions } from '../designs';
 import type { ElementProps, IInteraction, IPlugin } from '../editor';
 import type { ThemeConfig } from '../themes';
 import type { Data, Padding, ParsedData } from '../types';
+import type { Path } from '../utils';
 
 export interface InfographicOptions {
   /** 容器，可以是选择器或者 HTMLElement */
@@ -66,3 +67,9 @@ interface SVGOptions {
   /** 是否启用背景 */
   background?: boolean;
 }
+
+/**
+ * All valid property paths for Infographic Options.
+ * Use this to validate paths in SyncRegistry and other places.
+ */
+export type InfographicOptionPath = Path<UpdatableInfographicOptions>;

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;
       }