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

package/src/radial/index.ts

@@ -0,0 +1,345 @@
+import { BaseLayout } from '../core/base-layout';
+import { runMDS } from '../mds';
+import type { ID, Matrix } from '../types';
+import { getAdjList, johnson, LayoutModel, normalizeViewport } from '../util';
+import { applySingleNodeLayout } from '../util/common';
+import { formatNodeSizeFn } from '../util/format';
+import {
+  radialNonoverlapForce,
+  RadialNonoverlapForceOptions,
+} from './radial-nonoverlap-force';
+import type { RadialLayoutOptions } from './types';
+
+export type { RadialLayoutOptions };
+
+const DEFAULTS_LAYOUT_OPTIONS: Partial<RadialLayoutOptions> = {
+  focusNode: null,
+  linkDistance: 50,
+  maxIteration: 1000,
+  maxPreventOverlapIteration: 200,
+  preventOverlap: false,
+  sortStrength: 10,
+  strictRadial: true,
+  unitRadius: null,
+};
+
+/**
+ * <zh/> 径向布局
+ *
+ * <en/> Radial layout
+ */
+export class RadialLayout extends BaseLayout<RadialLayoutOptions> {
+  id = 'radial';
+
+  protected getDefaultOptions(): Partial<RadialLayoutOptions> {
+    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) {
+      return applySingleNodeLayout(this.model, center);
+    }
+
+    const {
+      focusNode: propsFocusNode,
+      linkDistance = DEFAULTS_LAYOUT_OPTIONS.linkDistance,
+      maxIteration = DEFAULTS_LAYOUT_OPTIONS.maxIteration,
+      maxPreventOverlapIteration = DEFAULTS_LAYOUT_OPTIONS.maxPreventOverlapIteration,
+      nodeSize,
+      nodeSpacing,
+      preventOverlap,
+      sortBy,
+      sortStrength = DEFAULTS_LAYOUT_OPTIONS.sortStrength,
+      strictRadial,
+      unitRadius: propsUnitRadius,
+    } = this.options;
+
+    const focusNode =
+      (propsFocusNode && this.model.node(propsFocusNode)) ||
+      this.model.firstNode()!;
+
+    // the index of the focusNode in data
+    const focusIndex = this.model.nodeIndexOf(focusNode.id);
+
+    // the graph-theoretic distance (shortest path distance) matrix
+    const adjList = getAdjList(this.model, false);
+    const distances = johnson(adjList);
+    const maxDistance = maxToFocus(distances, focusIndex);
+
+    // replace first node in unconnected component to the circle at (maxDistance + 1)
+    handleInfinity(distances, focusIndex, maxDistance + 1);
+
+    // the shortest path distance from each node to focusNode
+    const focusNodeD = distances[focusIndex];
+    const semiWidth =
+      (width - center[0] > center[0] ? center[0] : width - center[0]) ||
+      width / 2;
+    const semiHeight =
+      (height - center[1] > center[1] ? center[1] : height - center[1]) ||
+      height / 2;
+
+    // the maxRadius of the graph
+    const maxRadius = Math.min(semiWidth, semiHeight);
+    const maxD = Math.max(...focusNodeD);
+    // the radius for each nodes away from focusNode
+    const radii: number[] = [];
+    const radiiMap: Map<ID, number> = new Map();
+    const unitRadius = propsUnitRadius ?? maxRadius / maxD;
+    focusNodeD.forEach((value, i) => {
+      const v = value * unitRadius;
+      radii.push(v);
+      radiiMap.set(this.model.nodeAt(i)!.id, v);
+    });
+
+    const idealDistances = eIdealDisMatrix(
+      this.model,
+      distances,
+      linkDistance!,
+      radii,
+      unitRadius,
+      sortBy,
+      sortStrength!,
+    );
+
+    // the initial positions from mds, move the graph to origin, centered at focusNode
+    const mdsResult = runMDS(idealDistances, 2, linkDistance);
+    const mdsFocus = mdsResult[focusIndex];
+
+    let i = 0;
+    this.model.forEachNode((node) => {
+      const p = mdsResult[i];
+      node.x = p[0] - mdsFocus[0];
+      node.y = p[1] - mdsFocus[1];
+      i++;
+    });
+
+    this.run(maxIteration!, idealDistances, radii, focusIndex);
+
+    this.model.forEachNode((node) => {
+      node.x += center[0];
+      node.y += center[1];
+    });
+
+    // stagger the overlapped nodes
+    if (preventOverlap) {
+      const nodeSizeFunc = formatNodeSizeFn(nodeSize, nodeSpacing);
+      const nonoverlapForceParams: RadialNonoverlapForceOptions = {
+        nodeSizeFunc,
+        radiiMap,
+        width,
+        strictRadial: Boolean(strictRadial),
+        focusNode,
+        maxIteration: maxPreventOverlapIteration!,
+        k: n / 4.5,
+      };
+      radialNonoverlapForce(this.model, nonoverlapForceParams);
+    }
+  }
+
+  private run(
+    maxIteration: number,
+    idealDistances: Matrix,
+    radii: number[],
+    focusIndex: number,
+  ) {
+    const weights = getWeightMatrix(idealDistances);
+
+    const n = this.model.nodeCount();
+    const nodes = this.model.nodes();
+
+    const xs = new Float64Array(n);
+    const ys = new Float64Array(n);
+
+    for (let i = 0; i < n; i++) {
+      xs[i] = nodes[i].x;
+      ys[i] = nodes[i].y;
+    }
+
+    for (let i = 0; i <= maxIteration; i++) {
+      const param = i / maxIteration;
+      const vparam = 1 - param;
+
+      for (let i = 0; i < n; i++) {
+        if (i === focusIndex) continue;
+
+        const vx = xs[i];
+        const vy = ys[i];
+        const originDis = Math.sqrt(vx * vx + vy * vy);
+
+        const reciODis = originDis === 0 ? 0 : 1 / originDis;
+        let xMolecule = 0;
+        let yMolecule = 0;
+        let denominator = 0;
+
+        for (let j = 0; j < n; j++) {
+          // u
+          if (i === j) continue;
+
+          const ux = xs[j];
+          const uy = ys[j];
+          // the euclidean distance between v and u
+          const edis = Math.sqrt((vx - ux) * (vx - ux) + (vy - uy) * (vy - uy));
+
+          const reciEdis = edis === 0 ? 0 : 1 / edis;
+          const idealDis = idealDistances[j][i];
+          // same for x and y
+          denominator += weights[i][j];
+          // x
+          xMolecule += weights[i][j] * (ux + idealDis * (vx - ux) * reciEdis);
+          // y
+          yMolecule += weights[i][j] * (uy + idealDis * (vy - uy) * reciEdis);
+        }
+        const reciR = radii[i] === 0 ? 0 : 1 / radii[i];
+        denominator *= vparam;
+        denominator += param * reciR * reciR;
+
+        // x
+        xMolecule *= vparam;
+        xMolecule += param * reciR * vx * reciODis;
+        // y
+        yMolecule *= vparam;
+        yMolecule += param * reciR * vy * reciODis;
+
+        xs[i] = xMolecule / denominator;
+        ys[i] = yMolecule / denominator;
+
+        nodes[i].x = xs[i];
+        nodes[i].y = ys[i];
+      }
+    }
+  }
+}
+
+const eIdealDisMatrix = (
+  model: LayoutModel,
+  distances: Matrix,
+  linkDistance: number,
+  radii: number[],
+  unitRadius: number,
+  sortBy: any,
+  sortStrength: number,
+): Matrix => {
+  const n = distances.length;
+  const result: Matrix = new Array(n);
+  const radiusScale = new Array(n);
+  for (let i = 0; i < n; i++) radiusScale[i] = radii[i] / unitRadius;
+
+  const baseLink = (linkDistance + unitRadius) / 2;
+  const sortCache = new Map<ID, number>();
+  const sortFn = typeof sortBy === 'function' ? sortBy : null;
+  const isDataSort = sortBy === 'data';
+
+  for (let i = 0; i < n; i++) {
+    const row = distances[i];
+    const newRow = new Array(n);
+    result[i] = newRow;
+    const riScale = radiusScale[i] || 1;
+
+    for (let j = 0; j < n; j++) {
+      if (i === j) {
+        newRow[j] = 0;
+        continue;
+      }
+
+      const v = row[j];
+      if (radii[i] === radii[j]) {
+        if (isDataSort) {
+          newRow[j] = (v * Math.abs(i - j) * sortStrength) / riScale;
+        } else if (sortFn) {
+          // cache node attribute values
+          const nodeI = model.nodeAt(i)!;
+          const nodeJ = model.nodeAt(j)!;
+          let iv = sortCache.get(nodeI.id);
+          if (iv === undefined) {
+            const raw = sortFn(nodeI._original) || 0;
+            iv = typeof raw === 'string' ? raw.charCodeAt(0) : Number(raw || 0);
+            sortCache.set(nodeI.id, iv);
+          }
+          let jv = sortCache.get(nodeJ.id);
+          if (jv === undefined) {
+            const raw = sortFn(nodeJ._original) || 0;
+            jv = typeof raw === 'string' ? raw.charCodeAt(0) : Number(raw || 0);
+            sortCache.set(nodeJ.id, jv);
+          }
+          newRow[j] = (v * Math.abs(iv - jv) * sortStrength) / riScale;
+        } else {
+          newRow[j] = (v * linkDistance) / riScale;
+        }
+      } else {
+        newRow[j] = v * baseLink;
+      }
+    }
+  }
+
+  return result;
+};
+
+const getWeightMatrix = (idealDistances: Matrix) => {
+  const rows = idealDistances.length;
+  const cols = idealDistances[0].length;
+  const result: number[][] = [];
+  for (let i = 0; i < rows; i++) {
+    const row: number[] = [];
+    for (let j = 0; j < cols; j++) {
+      if (idealDistances[i][j] !== 0) {
+        row.push(1 / (idealDistances[i][j] * idealDistances[i][j]));
+      } else {
+        row.push(0);
+      }
+    }
+    result.push(row);
+  }
+  return result;
+};
+
+const handleInfinity = (matrix: Matrix, focusIndex: number, step: number) => {
+  const n = matrix.length;
+
+  for (let i = 0; i < n; i++) {
+    // matrix 关注点对应行的 Inf 项
+    if (matrix[focusIndex][i] === Infinity) {
+      matrix[focusIndex][i] = step;
+      matrix[i][focusIndex] = step;
+
+      // 遍历 matrix 中的 i 行，i 行中非 Inf 项若在 focus 行为 Inf，则替换 focus 行的那个 Inf
+      for (let j = 0; j < n; j++) {
+        if (matrix[i][j] !== Infinity && matrix[focusIndex][j] === Infinity) {
+          matrix[focusIndex][j] = step + matrix[i][j];
+          matrix[j][focusIndex] = step + matrix[i][j];
+        }
+      }
+    }
+  }
+
+  // 处理其他行的 Inf。根据该行对应点与 focus 距离以及 Inf 项点 与 focus 距离，决定替换值
+  for (let i = 0; i < n; i++) {
+    if (i === focusIndex) {
+      continue;
+    }
+    for (let j = 0; j < n; j++) {
+      if (matrix[i][j] === Infinity) {
+        let minus = Math.abs(matrix[focusIndex][i] - matrix[focusIndex][j]);
+        minus = minus === 0 ? 1 : minus;
+        matrix[i][j] = minus;
+      }
+    }
+  }
+};
+
+/**
+ * Get the maximum finite distance from the focus node to other nodes
+ */
+const maxToFocus = (matrix: Matrix, focusIndex: number): number => {
+  const row = matrix[focusIndex];
+
+  let max = 0;
+  for (let i = 0; i < row.length; i++) {
+    if (row[i] === Infinity) continue;
+
+    max = Math.max(max, row[i]);
+  }
+  return max;
+};

package/src/radial/radial-nonoverlap-force.ts

@@ -0,0 +1,209 @@
+import type { DisplacementMap, ID, LayoutNode, NodeData, Size } from '../types';
+import { parseSize, type LayoutModel } from '../util';
+
+const SPEED_DIVISOR = 800;
+
+export type RadialNonoverlapForceOptions = {
+  /** Focus node */
+  focusNode: LayoutNode;
+  /** Map of node IDs to their radial distances from the focus node */
+  radiiMap: Map<ID, number>;
+  /** Maximum number of iterations to run the force simulation */
+  maxIteration: number;
+  /** Width of the layout area */
+  width: number;
+  /** Repulsion constant */
+  k: number;
+  /** Whether to enforce strict radial positioning */
+  strictRadial: boolean;
+  /** Speed factor for position updates */
+  speed?: number;
+  /** Gravity factor pulling nodes towards their target radius */
+  gravity?: number;
+  /** Function to get the size of a node (includes node self and spacing) */
+  nodeSizeFunc: (node?: NodeData) => Size;
+};
+
+const DEFAULTS_LAYOUT_OPTIONS: Partial<RadialNonoverlapForceOptions> = {
+  maxIteration: 10,
+  width: 10,
+  speed: 100,
+  gravity: 10,
+  k: 5,
+};
+
+export const radialNonoverlapForce = (
+  model: LayoutModel,
+  options: RadialNonoverlapForceOptions,
+) => {
+  const mergedOptions = { ...DEFAULTS_LAYOUT_OPTIONS, ...options };
+
+  const {
+    maxIteration,
+    width,
+    k,
+    speed = DEFAULTS_LAYOUT_OPTIONS.speed,
+    strictRadial,
+    focusNode,
+    radiiMap,
+    nodeSizeFunc,
+  } = mergedOptions;
+  const earlyStopThreshold = k * 0.002;
+
+  const displacements: DisplacementMap = new Map();
+  const maxDisplacement = width / 10;
+
+  for (let i = 0; i < maxIteration; i++) {
+    model.forEachNode((node) => {
+      displacements.set(node.id, { x: 0, y: 0 });
+    });
+
+    // 给重叠的节点增加斥力
+    getRepulsion(model, displacements, k, radiiMap, nodeSizeFunc);
+
+    const avgDisplacement = updatePositions(
+      model,
+      displacements,
+      speed!,
+      strictRadial,
+      focusNode,
+      maxDisplacement,
+      radiiMap,
+    );
+
+    if (avgDisplacement < earlyStopThreshold) {
+      break;
+    }
+  }
+};
+
+const getRepulsion = (
+  model: LayoutModel,
+  displacements: DisplacementMap,
+  k: number,
+  radiiMap: Map<ID, number>,
+  nodeSizeFunc: (d?: NodeData) => Size,
+) => {
+  let i = 0;
+
+  model.forEachNode((nodeU) => {
+    let j = 0;
+    model.forEachNode((nodeV) => {
+      if (j <= i) {
+        j++;
+        return;
+      }
+
+      if (nodeU.id === nodeV.id) return;
+
+      // nodeU and nodeV are not on the same circle, return
+      if (radiiMap.get(nodeU.id) !== radiiMap.get(nodeV.id)) return;
+
+      let vecx = nodeU.x - nodeV.x;
+      let vecy = nodeU.y - nodeV.y;
+      let vecLength = Math.sqrt(vecx * vecx + vecy * vecy);
+
+      // If the two nodes are exactly at the same position, we set a small distance between them
+      if (vecLength === 0) {
+        vecLength = 1;
+        const sign = i > j ? 1 : -1;
+        vecx = 0.01 * sign;
+        vecy = 0.01 * sign;
+      }
+
+      const nodeSizeU = Math.max(...parseSize(nodeSizeFunc(nodeU._original)));
+      const nodeSizeV = Math.max(...parseSize(nodeSizeFunc(nodeV._original)));
+
+      // these two nodes overlap
+      if (vecLength < nodeSizeV / 2 + nodeSizeU / 2) {
+        const common = (k * k) / vecLength;
+        const dispU = displacements.get(nodeU.id)!;
+        const dispV = displacements.get(nodeV.id)!;
+        const deltaX = (vecx / vecLength) * common;
+        const deltaY = (vecy / vecLength) * common;
+        displacements.set(nodeU.id, {
+          x: dispU.x + deltaX,
+          y: dispU.y + deltaY,
+        });
+        displacements.set(nodeV.id, {
+          x: dispV.x - deltaX,
+          y: dispV.y - deltaY,
+        });
+      }
+      j++;
+    });
+
+    i++;
+  });
+};
+
+const updatePositions = (
+  model: LayoutModel,
+  displacements: DisplacementMap,
+  speed: number,
+  strictRadial: boolean,
+  focusNode: NodeData,
+  maxDisplacement: number,
+  radiiMap: Map<ID, number>,
+): number => {
+  if (strictRadial) {
+    model.forEachNode((node) => {
+      const vx = node.x - focusNode.x;
+      const vy = node.y - focusNode.y;
+      const vLength = Math.sqrt(vx * vx + vy * vy);
+      let vpx = vy / vLength;
+      let vpy = -vx / vLength;
+
+      const disp = displacements.get(node.id)!;
+      const diLength = Math.sqrt(disp.x * disp.x + disp.y * disp.y);
+      let alpha = Math.acos((vpx * disp.x + vpy * disp.y) / diLength);
+      if (alpha > Math.PI / 2) {
+        alpha -= Math.PI / 2;
+        vpx *= -1;
+        vpy *= -1;
+      }
+      const tdispLength = Math.cos(alpha) * diLength;
+      displacements.set(node.id, {
+        x: vpx * tdispLength,
+        y: vpy * tdispLength,
+      });
+    });
+  }
+
+  // move
+  let totalDisplacement = 0;
+  let nodeCount = 0;
+
+  model.forEachNode((node) => {
+    if (node.id === focusNode.id) {
+      return;
+    }
+
+    const disp = displacements.get(node.id)!;
+    const distLength = Math.sqrt(disp.x * disp.x + disp.y * disp.y);
+
+    if (distLength > 0) {
+      const limitedDist = Math.min(
+        maxDisplacement * (speed / SPEED_DIVISOR),
+        distLength,
+      );
+      node.x += (disp.x / distLength) * limitedDist;
+      node.y += (disp.y / distLength) * limitedDist;
+
+      if (strictRadial) {
+        let vx = node.x - focusNode.x;
+        let vy = node.y - focusNode.y;
+        const nfDis = Math.sqrt(vx * vx + vy * vy);
+        vx = (vx / nfDis) * radiiMap.get(node.id)!;
+        vy = (vy / nfDis) * radiiMap.get(node.id)!;
+        node.x = focusNode.x + vx;
+        node.y = focusNode.y + vy;
+      }
+
+      totalDisplacement += limitedDist;
+      nodeCount++;
+    }
+  });
+
+  return nodeCount > 0 ? totalDisplacement / nodeCount : 0;
+};

package/src/radial/types.ts

@@ -0,0 +1,100 @@
+import type { BaseLayoutOptions } from '../core/base-layout';
+import type { NodeData, Size } from '../types';
+
+/**
+ * <zh/> Radial 辐射布局的配置项
+ *
+ * <en/> Configuration items for Radial layout
+ */
+export interface RadialLayoutOptions extends BaseLayoutOptions {
+  /**
+   * <zh/> 边长度
+   *
+   * <en/> Edge length
+   * @defaultValue 50
+   */
+  linkDistance?: number;
+  /**
+   * <zh/> 辐射的中心点
+   * - string: 节点 id
+   * - null: 数据中第一个节点
+   * <en/> The center point of the radiation
+   * - string: node id
+   * - null: the first node in the data
+   */
+  focusNode?: string | null;
+  /**
+   * <zh/> 每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定
+   *
+   * <en/> The distance between each ring. Defaults to filling the entire canvas, i.e., determined by the size of the graph
+   * @defaultValue 100
+   */
+  unitRadius?: number | null;
+  /**
+   * <zh/> 是否防止重叠
+   *
+   * <en/> Whether to prevent overlap
+   * @remarks
+   * <zh/> 必须配合下面属性 nodeSize 或节点数据中的 data.size 属性，只有在数据中设置了 data.size 或在该布局中配置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测
+   *
+   * <en/> Must be used with the following properties: nodeSize or data.size in the node data. Only when data.size or nodeSize with the same value as the current graph node size is set in the layout configuration, can the collision detection of node overlap be performed
+   * @defaultValue false
+   */
+  preventOverlap?: boolean;
+  /**
+   * <zh/> 节点大小（直径）。用于防止节点重叠时的碰撞检测
+   *
+   * <en/> Node size (diameter). Used for collision detection when preventing node overlap
+   */
+  nodeSize?: Size | ((d?: NodeData) => Size);
+  /**
+   * <zh/> preventOverlap 为 true 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距
+   *
+   * <en/> Effective when preventOverlap is true. The minimum edge spacing when preventing node overlap. It can be a callback function, and set different minimum spacing for different nodes
+   * @defaultValue 10
+   */
+  nodeSpacing?: number | ((d?: NodeData) => number);
+  /**
+   * <zh/> 防止重叠步骤的最大迭代次数
+   *
+   * <en/> Maximum iteration number of the prevent overlap step
+   * @defaultValue 200
+   */
+  maxPreventOverlapIteration?: number;
+  /**
+   * <zh/> 是否必须是严格的 radial 布局，及每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效。
+   *
+   * <en/> Whether it must be a strict radial layout, that is, each layer of nodes strictly layout on a ring. Effective when preventOverlap is true.
+   * @remarks
+   * <zh/> 当 preventOverlap 为 true，且 strictRadial 为 false 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠 当 preventOverlap 为 true，且 strictRadial 为 true 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠
+   *
+   * <en/> When preventOverlap is true and strictRadial is false, overlapping nodes are strictly laid out along the ring they are in. However, if there are too many nodes on a ring, it may not be possible to completely avoid node overlap. When preventOverlap is true and strictRadial is true, overlapping nodes on the same ring are allowed to be laid out not strictly along the ring, and can be offset before and after the ring to avoid overlap
+   * @defaultValue true
+   */
+  strictRadial?: boolean;
+  /**
+   * <zh/> 同层节点布局后相距远近的依据
+   *
+   * <en/> The basis for the distance between nodes in the same layer after layout
+   * @remarks
+   * <zh/> 默认 undefined ，表示根据数据的拓扑结构（节点间最短路径）排布，即关系越近/点对间最短路径越小的节点将会被尽可能排列在一起；'data' 表示按照节点在数据中的顺序排列，即在数据顺序上靠近的节点将会尽可能排列在一起；也可以指定为节点数据中的某个字段名，例如 'cluster'、'name' 等（必须在数据的 data 中存在）
+   *
+   * <en/> The default is undefined, which means arranging based on the topological structure of the data (the shortest path between nodes). Nodes that are closer in proximity or have a smaller shortest path between them will be arranged as close together as possible. 'data' indicates arranging based on the order of nodes in the data, so nodes that are closer in the data order will be arranged as close together as possible. You can also specify a field name in the node data, such as 'cluster' or 'name' (it must exist in the data of the graph)
+   * @defaultValue undefined
+   */
+  sortBy?: 'data' | ((d?: NodeData) => number | string);
+  /**
+   * <zh/> 同层节点根据 sortBy 排列的强度，数值越大，sortBy 指定的方式计算出距离越小的越靠近。sortBy 不为 undefined 时生效
+   *
+   * <en/> The strength of arranging nodes according to sortBy. The larger the value, the closer the nodes that sortBy specifies are arranged. It takes effect when sortBy is not undefined
+   * @defaultValue 10
+   */
+  sortStrength?: number;
+  /**
+   * <zh/> 停止迭代到最大迭代数
+   *
+   * <en/> Stop iterating until the maximum iteration number is reached
+   * @defaultValue 1000
+   */
+  maxIteration?: number;
+}

package/src/random/index.ts

@@ -0,0 +1,35 @@
+import { BaseLayout } from '../core/base-layout';
+import { normalizeViewport } from '../util';
+import type { RandomLayoutOptions } from './types';
+
+export type { RandomLayoutOptions };
+
+/**
+ * <zh/> 随机布局
+ *
+ * <en/> Random layout
+ */
+export class RandomLayout extends BaseLayout<RandomLayoutOptions> {
+  id = 'random';
+
+  protected getDefaultOptions(): Partial<RandomLayoutOptions> {
+    return {
+      center: [0, 0],
+      width: 300,
+      height: 300,
+    };
+  }
+
+  protected async layout(): Promise<void> {
+    const { width, height, center } = normalizeViewport(this.options);
+    const layoutScale = 0.9;
+
+    const randomCoord = (size: number) =>
+      (Math.random() - 0.5) * layoutScale * size;
+
+    this.model.forEachNode((node) => {
+      node.x = randomCoord(width) + center[0];
+      node.y = randomCoord(height) + center[1];
+    });
+  }
+}

package/src/random/types.ts

@@ -0,0 +1,8 @@
+import type { BaseLayoutOptions } from '../core/types';
+
+/**
+ * <zh/> 随机布局配置
+ *
+ * <en/> Random layout configuration
+ */
+export interface RandomLayoutOptions extends BaseLayoutOptions {}