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

package/src/algorithm/base-simulation.ts

@@ -0,0 +1,94 @@
+import EventEmitter from '@antv/event-emitter';
+import { SimulationOptions } from './types';
+
+export type { SimulationOptions };
+
+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/algorithm/circular/index.ts

@@ -0,0 +1,123 @@
+import { isNil } from '@antv/util';
+import { BaseLayout } from '../base-layout';
+import { normalizeViewport, orderByDegree, orderByTopology } from '../../util';
+import { applySingleNodeLayout } from '../../util/common';
+import { formatNodeSizeFn } from '../../util/format';
+import type { CircularLayoutOptions } from './types';
+
+export type { CircularLayoutOptions };
+
+const DEFAULT_LAYOUT_OPTIONS: CircularLayoutOptions = {
+  radius: null,
+  startRadius: null,
+  endRadius: null,
+  startAngle: 0,
+  endAngle: 2 * Math.PI,
+  clockwise: true,
+  divisions: 1,
+  ordering: null,
+  angleRatio: 1,
+  nodeSize: 10,
+};
+
+/**
+ * <zh/> 环形布局
+ *
+ * <en/> Circular layout
+ */
+export class CircularLayout extends BaseLayout<CircularLayoutOptions> {
+  id = 'circular';
+
+  protected getDefaultOptions(): Partial<CircularLayoutOptions> {
+    return DEFAULT_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 {
+      ordering,
+      nodeSpacing,
+      nodeSize,
+      endAngle = 2 * Math.PI,
+      startAngle = 0,
+      divisions,
+      angleRatio,
+      clockwise,
+    } = this.options;
+
+    // Order nodes based on strategy
+    if (ordering === 'topology') {
+      // layout according to the graph topology ignoring edge directions
+      orderByTopology(this.model, false);
+    } else if (ordering === 'topology-directed') {
+      // layout according to the graph topology considering edge directions
+      orderByTopology(this.model, true);
+    } else if (ordering === 'degree') {
+      // layout according to the descent order of degrees
+      orderByDegree(this.model);
+    }
+
+    let { radius, startRadius, endRadius } = this.options;
+
+    const nodes = this.model.nodes();
+    const format = formatNodeSizeFn(
+      nodeSize,
+      nodeSpacing,
+      DEFAULT_LAYOUT_OPTIONS.nodeSize as number,
+    );
+
+    if (!isNil(nodeSpacing)) {
+      let perimeter = 0;
+      for (const node of nodes) {
+        perimeter += format(node._original);
+      }
+      radius = perimeter / (2 * Math.PI);
+    } else if (!radius && !startRadius && !endRadius) {
+      radius = Math.min(height, width) / 2;
+    } else if (!startRadius && endRadius) {
+      startRadius = endRadius;
+    } else if (startRadius && !endRadius) {
+      endRadius = startRadius;
+    }
+
+    // Calculate node positions
+    const angleStep = (endAngle - startAngle) / n;
+    const adjustedStep = angleStep * angleRatio!;
+    const nodesPerDivision = Math.ceil(n / divisions!);
+    const divAngle = (2 * Math.PI) / divisions!;
+
+    for (let i = 0; i < n; ) {
+      const node = nodes[i];
+      // Calculate radius for this node
+      let r = radius;
+      if (!r && startRadius !== null && endRadius !== null) {
+        r = startRadius! + (i * (endRadius! - startRadius!)) / (n - 1);
+      }
+      if (!r) {
+        r = 10 + (i * 100) / (n - 1);
+      }
+
+      // Calculate angle for this node
+      const divisionIndex = Math.floor(i / nodesPerDivision);
+      const indexInDivision = i % nodesPerDivision;
+      const theta = indexInDivision * adjustedStep + divAngle * divisionIndex;
+      let angle = startAngle + theta;
+      if (!clockwise) {
+        angle = endAngle - theta;
+      }
+
+      // Set position
+      node.x = center[0] + Math.cos(angle) * r;
+      node.y = center[1] + Math.sin(angle) * r;
+
+      i++;
+    }
+  }
+}

package/src/algorithm/circular/types.ts

@@ -0,0 +1,105 @@
+import type { BaseLayoutOptions } from '../types';
+import type { NodeData, Size } from '../../types';
+
+/**
+ * <zh/> 环形 Circular 布局配置
+ *
+ * <en/> Circular layout configuration
+ */
+export interface CircularLayoutOptions extends BaseLayoutOptions {
+  /**
+   * <zh/> 圆的半径
+   *
+   * <en/> Circle radius
+   * @remarks
+   * <zh/> 若设置了 radius，则 startRadius 与 endRadius 不生效
+   *
+   * <en/> If radius is set, startRadius and endRadius will not take effect
+   * @defaultValue null
+   */
+  radius?: number | null;
+  /**
+   * <zh/> 螺旋状布局的起始半径
+   *
+   * <en/> Spiral layout start radius
+   * @defaultValue null
+   */
+  startRadius?: number | null;
+  /**
+   * <zh/> 螺旋状布局的结束半径
+   *
+   * <en/> Spiral layout end radius
+   * @defaultValue null
+   */
+  endRadius?: number | null;
+  /**
+   * <zh/> 是否顺时针排列
+   *
+   * <en/> Whether to arrange clockwise
+   * @defaultValue true
+   */
+  clockwise?: boolean;
+  /**
+   * <zh/> 节点在环上的分段数（几个段将均匀分布）
+   *
+   * <en/> Number of segments (how many segments will be evenly distributed)
+   * @remarks
+   * <zh/> 在 endRadius - startRadius != 0 时生效
+   *
+   * <en/> It takes effect when endRadius - startRadius != 0
+   * @defaultValue 1
+   */
+  divisions?: number;
+  /**
+   * <zh/> 节点在环上排序的依据
+   * - null: 直接使用数据中的顺序
+   * - 'topology': 按照拓扑排序
+   * - 'topology-directed': 按照拓扑排序（有向图）
+   * - 'degree': 按度数降序排序
+   * <en/> Sorting basis of nodes on the ring
+   * - null: Use the order in the data directly
+   * - 'topology': Sort according to topological order
+   * - 'topology-directed': Sort according to topological order (directed graph)
+   * - 'degree': Sort descending by degree
+   * @defaultValue null
+   */
+  ordering?: 'topology' | 'topology-directed' | 'degree' | null;
+  /**
+   * <zh/> 从第一个节点到最后节点之间相隔多少个 2*PI
+   *
+   * <en/> The distance between the first node and the last node is separated by how many 2*PI
+   * @defaultValue 1
+   */
+  angleRatio?: number;
+  /**
+   * <zh/> 起始角度
+   *
+   * <en/> Start angle
+   * @defaultValue 0
+   */
+  startAngle?: number;
+  /**
+   * <zh/> 结束角度
+   *
+   * <en/> End angle
+   * @defaultValue 2 * Math.PI
+   */
+  endAngle?: number;
+  /**
+   * <zh/> 环与环之间最小间距，用于调整半径
+   *
+   * <en/> Minimum spacing between rings, used to adjust the radius
+   * @defaultValue 0
+   */
+  nodeSpacing?: number | ((d?: NodeData) => number);
+  /**
+   * <zh/> 节点大小（直径）。用于防止节点重叠时的碰撞检测
+   *
+   * <en/> Node size (diameter). Used for collision detection when nodes overlap
+   * @defaultValue 10
+   */
+  nodeSize?: Size | ((d?: NodeData) => Size);
+}
+
+export interface ParsedCircularLayoutOptions
+  extends Required<CircularLayoutOptions> {}