@antv/layout 1.2.14-beta.9 → 2.0.0-alpha.1

package/src/concentric/index.ts

@@ -0,0 +1,234 @@
+import { BaseLayout } from '../core/base-layout';
+import type { LayoutNode, NodeData } from '../types';
+import {
+  applySingleNodeLayout,
+  normalizeViewport,
+  orderByDegree,
+  orderBySorter,
+} from '../util';
+import { formatNodeSizeFn } from '../util/format';
+import type { ConcentricLayoutOptions } from './types';
+
+export type { ConcentricLayoutOptions };
+
+const DEFAULTS_LAYOUT_OPTIONS: Partial<ConcentricLayoutOptions> = {
+  nodeSize: 30,
+  nodeSpacing: 10,
+  preventOverlap: false,
+  sweep: undefined,
+  equidistant: false,
+  startAngle: (3 / 2) * Math.PI,
+  clockwise: true,
+  maxLevelDiff: undefined,
+  sortBy: 'degree',
+};
+
+/**
+ * <zh/> 同心圆布局
+ *
+ * <en/> Concentric layout
+ */
+export class ConcentricLayout extends BaseLayout<ConcentricLayoutOptions> {
+  id = 'concentric';
+
+  protected getDefaultOptions(): Partial<ConcentricLayoutOptions> {
+    return DEFAULTS_LAYOUT_OPTIONS;
+  }
+
+  protected async layout(): Promise<void> {
+    const { width, height, center } = normalizeViewport(this.options);
+
+    const n = this.model.nodeCount();
+    if (!n || n === 1) {
+      applySingleNodeLayout(this.model, center);
+      return;
+    }
+
+    const {
+      sortBy: propsSortBy,
+      maxLevelDiff: propsMaxLevelDiff,
+      sweep: propsSweep,
+      clockwise,
+      equidistant,
+      preventOverlap,
+      startAngle = DEFAULTS_LAYOUT_OPTIONS.startAngle,
+      nodeSize = DEFAULTS_LAYOUT_OPTIONS.nodeSize,
+      nodeSpacing,
+    } = this.options;
+
+    let sortBy: ConcentricLayoutOptions['sortBy'] = propsSortBy;
+    if (propsSortBy && typeof propsSortBy === 'function') {
+      const testNode = this.model.firstNode()!;
+      const testValue = propsSortBy(testNode._original);
+      if (typeof testValue !== 'number') sortBy = 'degree';
+    } else {
+      sortBy = 'degree';
+    }
+
+    if (sortBy === 'degree') {
+      orderByDegree(this.model);
+    } else {
+      const sorter = (nodeA: NodeData, nodeB: NodeData) => {
+        const a = (sortBy as (node: NodeData) => number)(nodeA);
+        const b = (sortBy as (node: NodeData) => number)(nodeB);
+        return a === b ? 0 : a > b ? -1 : 1;
+      };
+      orderBySorter(this.model, sorter);
+    }
+
+    const nodes = this.model.nodes();
+
+    const sortKeys = new Map();
+    for (const node of nodes) {
+      const v =
+        sortBy === 'degree'
+          ? this.model.degree(node.id)
+          : sortBy?.(node._original);
+      sortKeys.set(node.id, v);
+    }
+
+    const maxValueNode = this.model.firstNode()!;
+    const maxLevelDiff = propsMaxLevelDiff || sortKeys.get(maxValueNode.id) / 4;
+
+    const nodeSizeFn = formatNodeSizeFn(nodeSize, nodeSpacing);
+    const nodeDistances = new Map<LayoutNode['id'], number>();
+    for (const node of nodes) {
+      nodeDistances.set(node.id, nodeSizeFn(node._original));
+    }
+
+    // put the values into levels
+    const levels: {
+      nodes: LayoutNode[];
+      r?: number;
+      dTheta?: number;
+      maxNodeSize?: number;
+      nodeSizes?: number[];
+    }[] = [{ nodes: [] }];
+    let currentLevel = levels[0];
+
+    for (let i = 0; i < n; i++) {
+      const node = nodes[i];
+
+      if (currentLevel.nodes.length > 0) {
+        const firstNode = currentLevel.nodes[0];
+        const diff = Math.abs(
+          sortKeys.get(firstNode.id) - sortKeys.get(node.id),
+        );
+
+        if (maxLevelDiff && diff >= maxLevelDiff) {
+          currentLevel = { nodes: [] };
+          levels.push(currentLevel);
+        }
+      }
+      currentLevel.nodes.push(node);
+    }
+    for (const level of levels) {
+      const nodeSizes = level.nodes.map((node) => nodeDistances.get(node.id)!);
+      level.nodeSizes = nodeSizes;
+      level.maxNodeSize = Math.max(...nodeSizes);
+    }
+
+    // find the metrics for each level
+    levels.forEach((level) => {
+      const sweep =
+        propsSweep === undefined
+          ? 2 * Math.PI - (2 * Math.PI) / level.nodes.length
+          : propsSweep;
+      level.dTheta = sweep / Math.max(1, level.nodes.length - 1);
+    });
+
+    // calculate the radius
+    if (preventOverlap) {
+      let r = 0;
+      for (let i = 0; i < levels.length; i++) {
+        const level = levels[i];
+
+        if (level.nodes.length > 1) {
+          const nodeSizes = level.nodeSizes || [];
+          let requiredDist = 0;
+          for (let j = 0; j < nodeSizes.length - 1; j++) {
+            requiredDist = Math.max(
+              requiredDist,
+              (nodeSizes[j] + nodeSizes[j + 1]) / 2,
+            );
+          }
+
+          const dcos = Math.cos(level.dTheta!) - Math.cos(0);
+          const dsin = Math.sin(level.dTheta!) - Math.sin(0);
+          const denom = Math.sqrt(dcos * dcos + dsin * dsin);
+          const rMin = denom > 0 ? requiredDist / denom : 0;
+
+          r = Math.max(rMin, r);
+        }
+
+        level.r = r;
+        if (i < levels.length - 1) {
+          const nextLevel = levels[i + 1];
+          const step =
+            ((level.maxNodeSize || 0) + (nextLevel.maxNodeSize || 0)) / 2;
+          r += Math.max(0, step);
+        }
+      }
+    } else {
+      // create radii by node sizes, then constrain to bb (without overlap guarantees)
+      let r = 0;
+      levels[0].r = 0;
+      for (let i = 0; i < levels.length - 1; i++) {
+        const level = levels[i];
+        const nextLevel = levels[i + 1];
+        const step =
+          ((level.maxNodeSize || 0) + (nextLevel.maxNodeSize || 0)) / 2;
+        r += Math.max(0, step);
+        nextLevel.r = r;
+      }
+
+      const maxHalf = Math.min(width, height) / 2;
+      let scale = 1;
+      for (const level of levels) {
+        const rr = level.r || 0;
+        if (rr <= 0) continue;
+        const allowed = maxHalf - (level.maxNodeSize || 0);
+        if (allowed <= 0) {
+          scale = 0;
+          break;
+        }
+        scale = Math.min(scale, allowed / rr);
+      }
+      scale = Math.max(0, Math.min(1, scale));
+      if (scale !== 1) {
+        for (const level of levels) {
+          level.r = (level.r || 0) * scale;
+        }
+      }
+    }
+
+    if (equidistant) {
+      let rDeltaMax = 0;
+      let rr = 0;
+      for (let i = 0; i < levels.length; i++) {
+        const level = levels[i];
+        const rDelta = (level.r || 0) - rr;
+        rDeltaMax = Math.max(rDeltaMax, rDelta);
+      }
+      rr = 0;
+      levels.forEach((level, i) => {
+        if (i === 0) {
+          rr = level.r || 0;
+        }
+        level.r = rr;
+        rr += rDeltaMax;
+      });
+    }
+
+    // calculate the node positions
+    levels.forEach((level) => {
+      const dTheta = level.dTheta || 0;
+      const rr = level.r || 0;
+      level.nodes.forEach((node: LayoutNode, j: number) => {
+        const theta = startAngle! + (clockwise ? 1 : -1) * dTheta * j;
+        node.x = center[0] + rr * Math.cos(theta);
+        node.y = center[1] + rr * Math.sin(theta);
+      });
+    });
+  }
+}

package/src/concentric/types.ts

@@ -0,0 +1,89 @@
+import type { BaseLayoutOptions } from '../core/types';
+import type { NodeData, Size } from '../types';
+
+/**
+ * <zh/> Concentric 同心圆布局配置
+ *
+ * <en/> Concentric layout configuration
+ */
+export interface ConcentricLayoutOptions extends BaseLayoutOptions {
+  /**
+   * <zh/> 是否防止重叠
+   *
+   * <en/> Whether to prevent overlap
+   * @remarks
+   * <zh/> 必须配合下面属性 nodeSize 或节点数据中的 data.size 属性，只有在数据中设置了 data.size 或在该布局中配置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测
+   *
+   * <en/> Must be used with the following properties, and only when the data.size property is set in the data or the nodeSize value configured with the same size as the current graph node is configured in the layout, can the node overlap collision detection be performed
+   * @defaultValue false
+   */
+  preventOverlap?: boolean;
+  /**
+   * <zh/> 节点大小（直径）。用于防止节点重叠时的碰撞检测
+   *
+   * <en/> Node size (diameter). Used for collision detection when preventing node overlap
+   * @defaultValue 30
+   */
+  nodeSize?: Size | ((d?: NodeData) => Size);
+  /**
+   * <zh/> 环与环之间最小间距，用于调整半径
+   *
+   * <en/> Minimum spacing between rings, used to adjust the radius
+   * @defaultValue 10
+   */
+  nodeSpacing?: number | ((d?: NodeData) => number);
+  /**
+   * <zh/> 第一个节点与最后一个节点之间的弧度差
+   *
+   * <en/> The difference in radians between the first and last nodes
+   * @remarks
+   * <zh/> 若为 undefined ，则将会被设置为 2 * Math.PI * (1 - 1 / |level.nodes|) ，其中 level.nodes 为该算法计算出的每一层的节点，|level.nodes| 代表该层节点数量
+   *
+   * <en/> If undefined, it will be set to 2 * Math.PI * (1 - 1 / |level.nodes|), where level.nodes is the number of nodes in each layer calculated by this algorithm, and |level.nodes| represents the number of nodes in this layer
+   * @defaultValue undefined
+   */
+  sweep?: number;
+  /**
+   * <zh/> 环与环之间的距离是否相等
+   *
+   * <en/> Whether the distance between rings is equal
+   * @defaultValue false
+   */
+  equidistant?: boolean;
+  /**
+   * <zh/> 开始布局节点的弧度
+   *
+   * <en/> The starting angle of the layout node
+   * @defaultValue 3 / 2 * Math.PI
+   */
+  startAngle?: number;
+  /**
+   * <zh/> 是否按照顺时针排列
+   *
+   * <en/> Whether to arrange in clockwise order
+   * @defaultValue true
+   */
+  clockwise?: boolean;
+  /**
+   * <zh/> 每一层同心值的求和
+   *
+   * <en/> The sum of the concentric values of each layer
+   * @remarks
+   * <zh/> 若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy 为 'degree'，则 maxValue 为所有节点中度数最大的节点的度数
+   *
+   * <en/> If undefined, it will be set to maxValue / 4, where maxValue is the largest value of the sortBy attribute. For example, if sortBy is 'degree', maxValue is the degree of the node with the largest degree in all nodes
+   * @defaultValue undefined
+   */
+  maxLevelDiff?: number;
+  /**
+   * <zh/> 指定排序的依据（节点属性名）
+   * - 'degree': 按度数大小排序，数值越高则该节点被放置得越中心
+   * - ((node) => ...): 自定义排序函数, 返回数值，数值越高则该节点被放置得越中心
+   *
+   * <en/> Specify the basis for sorting (node attribute name)
+   * - 'degree': Sort by degree size, the higher the value, the more the node will be placed in the center
+   * - ((node) => ...): Custom sorting function, returns a number, the higher the value, the more the node will be placed in the center
+   * @defaultValue degree
+   */
+  sortBy?: 'degree' | ((d?: NodeData) => number);
+}

package/src/core/base-layout.ts

@@ -0,0 +1,126 @@
+import { Supervisor } from '../supervisor';
+import type { GraphData, LayoutEdge, LayoutNode, Point } from '../types';
+import { mergeOptions } from '../util';
+import { LayoutModel } from '../util/model';
+import type { BaseLayoutOptions, Layout, LayoutWithIterations } from './types';
+
+export type { BaseLayoutOptions };
+
+/**
+ * <zh/> 布局基类
+ *
+ * <en/> Base class for layouts
+ */
+export abstract class BaseLayout<
+  O extends BaseLayoutOptions = BaseLayoutOptions,
+> implements Layout<O>
+{
+  public abstract readonly id: string;
+
+  protected abstract getDefaultOptions(): O;
+
+  protected initialOptions!: O;
+
+  protected runtimeOptions!: O;
+
+  protected model!: LayoutModel;
+
+  protected supervisor: Supervisor | null = null;
+
+  constructor(options?: Partial<O>) {
+    this.initialOptions = mergeOptions<O>(this.getDefaultOptions(), options);
+  }
+
+  get options(): O {
+    return this.runtimeOptions || this.initialOptions;
+  }
+
+  public async execute(
+    data: GraphData,
+    userOptions?: Partial<O>,
+  ): Promise<void> {
+    this.runtimeOptions = mergeOptions<O>(this.initialOptions, userOptions);
+    const { node, edge, enableWorker } = this.runtimeOptions;
+
+    this.model = new LayoutModel(data, { node, edge });
+
+    const shouldUseWorker = enableWorker && typeof Worker !== 'undefined';
+    if (shouldUseWorker) {
+      await this.layoutInWorker(data, this.runtimeOptions);
+    } else {
+      await this.layout(this.runtimeOptions);
+    }
+  }
+
+  protected abstract layout(options: O): Promise<void>;
+
+  protected async layoutInWorker(data: GraphData, options: O): Promise<void> {
+    try {
+      if (!this.supervisor) {
+        this.supervisor = new Supervisor();
+      }
+
+      const result = await this.supervisor.execute(this.id, data, options);
+      this.model?.apply(result);
+    } catch (error) {
+      console.error(
+        'Layout in worker failed, fallback to main thread layout.',
+        error,
+      );
+
+      // Fallback to main thread layout
+      await this.layout(options);
+    }
+  }
+
+  public forEachNode(callback: (node: LayoutNode, index: number) => void) {
+    this.model.forEachNode(callback);
+  }
+
+  public forEachEdge(callback: (edge: LayoutEdge, index: number) => void) {
+    this.model.forEachEdge((edge, i) => {
+      edge.sourceNode = this.model.nodeMap.get(edge.source);
+      edge.targetNode = this.model.nodeMap.get(edge.target);
+      callback(edge, i);
+    });
+  }
+
+  public destroy(): void {
+    this.model?.destroy();
+    // @ts-ignore
+    this.model = null;
+
+    if (this.supervisor) {
+      this.supervisor.destroy();
+      this.supervisor = null;
+    }
+  }
+}
+
+/**
+ * <zh/> 迭代布局基类
+ *
+ * <en/> Base class for iterative layouts
+ */
+export abstract class BaseLayoutWithIterations<
+  O extends BaseLayoutOptions = BaseLayoutOptions,
+> extends BaseLayout<O> {
+  abstract stop(): void;
+
+  abstract tick(iterations: number): void;
+
+  abstract restart(): void;
+
+  abstract setFixedPosition(nodeId: string, position: Point | null): void;
+}
+
+/**
+ * <zh/> 判断布局是否为迭代布局
+ *
+ * <en/> Determine whether the layout is an iterative layout
+ */
+export function isLayoutWithIterations(
+  layout: any,
+): layout is LayoutWithIterations {
+  return !!layout.tick && !!layout.stop;
+}

package/src/core/base-simulation.ts

@@ -0,0 +1,115 @@
+import EventEmitter from '@antv/event-emitter';
+
+export interface SimulationOptions {
+  /**
+   * <zh/> 最大迭代次数，若为 0 则将自动调整
+   *
+   * <en/> Maximum number of iterations, if it is 0, it will be automatically adjusted
+   * @defaultValue 0
+   */
+  maxIteration?: number;
+  /**
+   * <zh/> 当一次迭代的平均/最大/最小（根据distanceThresholdMode决定）移动长度小于该值时停止迭代。数字越小，布局越收敛，所用时间将越长
+   *
+   * <en/> When the average/max/min (depending on distanceThresholdMode) movement length of one iteration is less than this value, the iteration will stop. The smaller the number, the more converged the layout, and the longer the time it takes to use
+   * @defaultValue 0.4
+   */
+  minMovement?: number;
+  /**
+   * <zh/> 是否启用动画模式：动画模式下布局过程会被分解为多次迭代并通过定时器执行，从而可以在布局过程中看到节点的移动过程；非动画模式下布局将在一次函数调用中完成所有迭代
+   *
+   * <en/> Whether to enable animation mode： in animation mode, the layout process will be decomposed into multiple iterations and executed through a timer, so that you can see the movement process of the nodes during the layout; in non-animation mode, the layout will complete all iterations in one function call
+   * @defaultValue true
+   */
+  animate?: boolean;
+}
+
+export abstract class BaseSimulation<
+  T extends SimulationOptions = SimulationOptions,
+> extends EventEmitter {
+  protected iteration = 0;
+  protected judgingDistance = Infinity;
+  protected running = false;
+
+  protected options!: T;
+
+  private tickCallback: (() => void) | null = null;
+  private endCallback: (() => void) | null = null;
+  private timer: number = 0;
+
+  initialize(options: T) {
+    this.options = options;
+
+    this.iteration = 0;
+    this.judgingDistance = Infinity;
+  }
+
+  on(event: 'tick' | 'end', cb: () => void) {
+    if (event === 'tick') this.tickCallback = cb;
+    if (event === 'end') this.endCallback = cb;
+    return this;
+  }
+
+  tick(iterations = 1) {
+    for (let i = 0; i < iterations; i++) {
+      const distance = this.runOneStep();
+      this.judgingDistance = distance;
+      this.iteration++;
+      this.tickCallback?.();
+    }
+    return this;
+  }
+
+  restart() {
+    if (this.running) return this;
+
+    const {
+      maxIteration = 500,
+      minMovement = 0,
+      animate = true,
+    } = this.options;
+
+    /** 非动画 or 非浏览器环境 */
+    if (!animate || typeof window === 'undefined') {
+      while (
+        this.iteration < maxIteration &&
+        (this.judgingDistance > minMovement || this.iteration < 1)
+      ) {
+        this.tick(1);
+      }
+
+      Promise.resolve().then(() => {
+        this.endCallback?.();
+      });
+
+      return this;
+    }
+
+    /** 动画模式 */
+    this.running = true;
+    this.timer = window.setInterval(() => {
+      this.tick(1);
+
+      if (
+        this.iteration >= maxIteration ||
+        this.judgingDistance < minMovement
+      ) {
+        this.stop();
+        this.endCallback?.();
+      }
+    }, 0);
+
+    return this;
+  }
+
+  stop() {
+    this.running = false;
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = 0;
+    }
+    return this;
+  }
+
+  protected abstract runOneStep(): number;
+}

package/src/core/types.ts

@@ -0,0 +1,145 @@
+import type {
+  EdgeData,
+  GraphData,
+  ID,
+  LayoutEdge,
+  LayoutNode,
+  NodeData,
+  Point,
+} from '../types';
+
+export interface LayoutModelOptions<
+  N extends NodeData = NodeData,
+  E extends EdgeData = EdgeData,
+> {
+  /**
+   * <zh/> 自定义节点属性映射
+   *
+   * <en/> Custom node field mapping
+   */
+  node?: (datum: N) => {
+    id?: ID;
+    x?: number;
+    y?: number;
+    z?: number;
+    parentId?: ID | null;
+  };
+
+  /**
+   * <zh/> 自定义边属性映射
+   *
+   * <en/> Custom edge field mapping
+   */
+  edge?: (datum: E) => {
+    id?: ID;
+    source?: ID;
+    target?: ID;
+  };
+}
+
+export interface BaseLayoutOptions<
+  N extends NodeData = NodeData,
+  E extends EdgeData = EdgeData,
+> extends LayoutModelOptions<N, E> {
+  /**
+   * <zh/> 布局中心
+   *
+   * <en/> Layout center
+   */
+  center?: Point;
+
+  /**
+   * <zh/> 布局宽度
+   *
+   * <en/> Layout width
+   */
+  width?: number;
+
+  /**
+   * <zh/> 布局高度
+   *
+   * <en/> Layout height
+   */
+  height?: number;
+
+  /**
+   * <zh/> 是否启用 WebWorker
+   *
+   * <en/> Whether to run the layout in a WebWorker
+   */
+  enableWorker?: boolean;
+
+  [key: string]: any;
+}
+
+export interface Layout<LayoutOptions> {
+  /**
+   * <zh/> 执行布局计算
+   *
+   * <en/> Execute layout calculation
+   */
+  execute(graph: GraphData, options?: LayoutOptions): Promise<void>;
+
+  /**
+   * <zh/> 遍历节点布局结果
+   *
+   * <en/> Iterate over node layout results
+   */
+  forEachNode(callback: (node: LayoutNode) => void): void;
+
+  /**
+   * <zh/> 遍历边布局结果
+   *
+   * <en/> Iterate over edge layout results
+   */
+  forEachEdge(callback: (edge: LayoutEdge) => void): void;
+
+  /**
+   * <zh/> 布局计算的配置项
+   *
+   * <en/> Layout calculation configuration item
+   */
+  options: LayoutOptions;
+
+  /**
+   * <zh/> 布局id
+   *
+   * <en/> Layout id
+   */
+  id: string;
+}
+
+export interface LayoutWithIterations<
+  LayoutOptions extends BaseLayoutOptions = BaseLayoutOptions,
+> extends Layout<LayoutOptions> {
+  /**
+   * <zh/> 停止布局计算
+   *
+   * <en/> Stop the layout calculation
+   * @description
+   * Some layout algorithm has n iterations so that the simulation needs to be stopped at any time.
+   * This method is useful for running the simulation manually.
+   */
+  stop(): void;
+
+  /**
+   * <zh/> 手动推进布局计算若干步
+   *
+   * <en/> Manually steps the simulation by the specified number of iterations.
+   */
+  tick(iterations?: number): void;
+
+  /**
+   * <zh/> 重置布局计算
+   *
+   * <en/> Restart the layout calculation
+   */
+  restart(): void;
+
+  /**
+   * <zh/> 设置节点固定位置，在布局过程中该节点不会被移动
+   *
+   * <en/> Set the fixed position of a node. The node will not be moved during the layout process.
+   */
+  setFixedPosition(nodeId: string, position: Point | null): void;
+}