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

package/src/grid/index.ts

@@ -0,0 +1,305 @@
+import { BaseLayout } from '../core/base-layout';
+import { LayoutNode, Point } from '../types';
+import { applySingleNodeLayout, normalizeViewport, parseSize } from '../util';
+import { formatNumberFn, formatSizeFn } from '../util/format';
+import { LayoutModel } from '../util/model';
+import { orderByDegree, orderById, orderBySorter } from '../util/order';
+import type {
+  GridLayoutOptions,
+  IdMapRowAndCol,
+  NormalizedGridLayoutOptions,
+  RowAndCol,
+  RowsAndCols,
+  VisitMap,
+} from './types';
+
+export type { GridLayoutOptions };
+
+/**
+ * <zh/> 网格布局
+ *
+ * <en/> Grid layout
+ */
+export class GridLayout extends BaseLayout<GridLayoutOptions> {
+  id = 'grid';
+
+  protected getDefaultOptions(): Partial<GridLayoutOptions> {
+    return {
+      begin: [0, 0],
+      preventOverlap: true,
+      preventOverlapPadding: 10,
+      condense: false,
+      rows: undefined,
+      cols: undefined,
+      position: undefined,
+      sortBy: 'degree',
+      nodeSize: 30,
+      width: 300,
+      height: 300,
+    };
+  }
+
+  private normalizeOptions(
+    options: Partial<GridLayoutOptions> = {},
+    model: LayoutModel,
+  ): NormalizedGridLayoutOptions {
+    const { rows: propRows, cols: propCols } = options;
+
+    const { width, height, center } = normalizeViewport(options);
+    let rows = options.rows;
+    let cols = options.cols;
+    const cells = model.nodeCount();
+    // if rows or columns were set in self, use those values
+    if (propRows != null && propCols != null) {
+      rows = propRows;
+      cols = propCols;
+    } else if (propRows != null && propCols == null) {
+      rows = propRows;
+      cols = Math.ceil(cells / rows);
+    } else if (propRows == null && propCols != null) {
+      cols = propCols;
+      rows = Math.ceil(cells / cols);
+    } else {
+      // otherwise use the automatic values and adjust accordingly	      // otherwise use the automatic values and adjust accordingly
+      // width/height * splits^2 = cells where splits is number of times to split width
+      const splits = Math.sqrt((cells * height) / width);
+      rows = Math.round(splits);
+      cols = Math.round((width / height) * splits);
+    }
+    rows = Math.max(rows, 1);
+    cols = Math.max(cols, 1);
+
+    const rcs = { rows, cols };
+
+    if (rcs.cols * rcs.rows > cells) {
+      // otherwise use the automatic values and adjust accordingly
+      // if rounding was up, see if we can reduce rows or columns
+      const sm = small(rcs) as number;
+      const lg = large(rcs) as number;
+
+      // reducing the small side takes away the most cells, so try it first
+      if ((sm - 1) * lg >= cells) {
+        small(rcs, sm - 1);
+      } else if ((lg - 1) * sm >= cells) {
+        large(rcs, lg - 1);
+      }
+    } else {
+      // if rounding was too low, add rows or columns
+      while (rcs.cols * rcs.rows < cells) {
+        const sm = small(rcs) as number;
+        const lg = large(rcs) as number;
+
+        // try to add to larger side first (adds less in multiplication)
+        if ((lg + 1) * sm >= cells) {
+          large(rcs, lg + 1);
+        } else {
+          small(rcs, sm + 1);
+        }
+      }
+    }
+
+    const preventOverlap =
+      options.preventOverlap || options.nodeSpacing !== undefined;
+    const nodeSpacing = formatNumberFn(options.nodeSpacing, 10);
+    const nodeSize = formatSizeFn(options.nodeSize, 30);
+
+    return {
+      ...options,
+      begin: options.begin || [0, 0],
+      sortBy: options.sortBy || 'degree',
+      preventOverlapPadding: options.preventOverlapPadding ?? 0,
+      preventOverlap,
+      nodeSpacing,
+      nodeSize,
+      rcs,
+      center,
+      width,
+      height,
+    };
+  }
+
+  protected async layout(): Promise<void> {
+    const {
+      begin,
+      rcs,
+      sortBy,
+      width,
+      height,
+      condense,
+      preventOverlapPadding,
+      preventOverlap,
+      nodeSpacing,
+      nodeSize,
+      position,
+    } = this.normalizeOptions(this.options, this.model);
+
+    const n = this.model.nodeCount();
+
+    if (!n || n === 1) {
+      applySingleNodeLayout(this.model, begin);
+      return;
+    }
+
+    if (sortBy === 'degree') {
+      orderByDegree(this.model);
+    } else if (sortBy === 'id') {
+      orderById(this.model);
+    } else {
+      orderBySorter(this.model, sortBy);
+    }
+
+    let cellWidth = condense ? 0 : width / rcs.cols;
+    let cellHeight = condense ? 0 : height / rcs.rows;
+
+    if (preventOverlap) {
+      this.model.forEachNode((node) => {
+        const nodeData = node._original;
+        const [nodeW, nodeH] = parseSize(nodeSize(nodeData) || 30);
+
+        const p =
+          nodeSpacing !== undefined
+            ? nodeSpacing(nodeData)
+            : preventOverlapPadding;
+
+        const w = nodeW + p;
+        const h = nodeH + p;
+
+        cellWidth = Math.max(cellWidth, w);
+        cellHeight = Math.max(cellHeight, h);
+      });
+    }
+
+    const cellUsed: VisitMap = {}; // e.g. 'c-0-2' => true
+
+    // to keep track of current cell position
+    const rc = { row: 0, col: 0 };
+
+    // get a cache of all the manual positions
+    const id2manPos: IdMapRowAndCol = {};
+
+    this.model.forEachNode((node) => {
+      const nodeData = node._original;
+
+      let rcPos;
+      if (position) {
+        rcPos = position(nodeData);
+      }
+
+      if (rcPos && (rcPos.row !== undefined || rcPos.col !== undefined)) {
+        // must have at least row or col def'd
+        const pos = {
+          row: rcPos.row,
+          col: rcPos.col,
+        } as RowAndCol;
+
+        if (pos.col === undefined) {
+          // find unused col
+          pos.col = 0;
+
+          while (used(cellUsed, pos)) {
+            pos.col++;
+          }
+        } else if (pos.row === undefined) {
+          // find unused row
+          pos.row = 0;
+
+          while (used(cellUsed, pos)) {
+            pos.row++;
+          }
+        }
+
+        id2manPos[node.id] = pos as RowAndCol;
+        use(cellUsed, pos);
+      }
+      getPos(node, begin, cellWidth, cellHeight, id2manPos, rcs, rc, cellUsed);
+    });
+  }
+}
+
+const small = (
+  rcs: { rows: number; cols: number },
+  val?: number,
+): number | undefined => {
+  let res: number | undefined;
+  const rows = rcs.rows || 5;
+  const cols = rcs.cols || 5;
+  if (val == null) {
+    res = Math.min(rows, cols);
+  } else {
+    const min = Math.min(rows, cols);
+    if (min === rcs.rows) {
+      rcs.rows = val;
+    } else {
+      rcs.cols = val;
+    }
+  }
+  return res;
+};
+
+const large = (rcs: RowsAndCols, val?: number): number | undefined => {
+  let result: number | undefined;
+  const usedRows = rcs.rows || 5;
+  const usedCols = rcs.cols || 5;
+  if (val == null) {
+    result = Math.max(usedRows, usedCols);
+  } else {
+    const max = Math.max(usedRows, usedCols);
+    if (max === rcs.rows) {
+      rcs.rows = val;
+    } else {
+      rcs.cols = val;
+    }
+  }
+  return result;
+};
+
+const used = (cellUsed: VisitMap, rc: RowAndCol) =>
+  cellUsed[`c-${rc.row}-${rc.col}`] || false;
+
+const use = (cellUsed: VisitMap, rc: RowAndCol) =>
+  (cellUsed[`c-${rc.row}-${rc.col}`] = true);
+
+const moveToNextCell = (rcs: RowsAndCols, rc: RowAndCol) => {
+  const cols = rcs.cols || 5;
+  rc.col++;
+  if (rc.col >= cols) {
+    rc.col = 0;
+    rc.row++;
+  }
+};
+
+const getPos = (
+  node: LayoutNode,
+  begin: Point,
+  cellWidth: number,
+  cellHeight: number,
+  id2manPos: IdMapRowAndCol,
+  rcs: RowsAndCols,
+  rc: RowAndCol,
+  cellUsed: VisitMap,
+) => {
+  let x: number;
+  let y: number;
+
+  // see if we have a manual position set
+  const rcPos = id2manPos[node.id];
+  if (rcPos) {
+    x = rcPos.col * cellWidth + cellWidth / 2 + begin[0];
+    y = rcPos.row * cellHeight + cellHeight / 2 + begin[1];
+  } else {
+    // otherwise set automatically
+
+    while (used(cellUsed, rc)) {
+      moveToNextCell(rcs, rc);
+    }
+
+    x = rc.col * cellWidth + cellWidth / 2 + begin[0];
+    y = rc.row * cellHeight + cellHeight / 2 + begin[1];
+    use(cellUsed, rc);
+
+    moveToNextCell(rcs, rc);
+  }
+
+  node.x = x;
+  node.y = y;
+};

package/src/grid/types.ts

@@ -0,0 +1,120 @@
+import type { BaseLayoutOptions } from '../core/types';
+import type { NodeData, Point, Size } from '../types';
+
+export interface GridLayoutOptions extends BaseLayoutOptions {
+  /**
+   * <zh/> 网格开始位置（左上角）
+   *
+   * <en/> Grid layout starting position (upper left corner)
+   * @defaultValue [0, 0]
+   *
+   */
+  begin?: Point;
+  /**
+   * <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 data. When data.size is set or nodeSize is configured with the same value as the current graph node size in the layout, the collision detection of node overlap can be performed
+   * @defaultValue false
+   */
+  preventOverlap?: boolean;
+  /**
+   * <zh/> 节点大小（直径）。用于防止节点重叠时的碰撞检测
+   *
+   * <en/> Node size (diameter). Used for collision detection when nodes overlap
+   */
+  nodeSize?: Size | ((d?: NodeData) => Size);
+  /**
+   * <zh/> 环与环之间最小间距，用于调整半径
+   *
+   * <en/> Minimum spacing between rings, used to adjust the radius
+   */
+  nodeSpacing?: number | ((d?: NodeData) => number);
+  /**
+   * <zh/> 避免重叠时节点的间距 padding。preventOverlap 为 true 时生效
+   *
+   * <en/> Padding between nodes to prevent overlap. It takes effect when preventOverlap is true
+   * @defaultValue 10
+   */
+  preventOverlapPadding?: number;
+  /**
+   * <zh/> 为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间
+   *
+   * <en/> When false, it means to use all available canvas space. When true, it means to use the smallest canvas space
+   * @defaultValue false
+   */
+  condense?: boolean;
+  /**
+   * <zh/> 网格的行数，为 undefined 时算法根据节点数量、布局空间、cols（若指定）自动计算
+   *
+   * <en/> Number of rows in the grid. It is calculated automatically when it is undefined and the number of nodes, layout space, and cols (if specified) are specified
+   * @defaultValue 10
+   */
+  rows?: number;
+  /**
+   * <zh/> 网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算
+   *
+   * <en/> Number of columns in the grid. It is calculated automatically when it is undefined and the number of nodes, layout space, and rows (if specified) are specified
+   * @defaultValue undefined
+   */
+  cols?: number;
+  /**
+   * <zh/> 指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心
+   *
+   * <en/> Specify the basis for sorting (node attribute name). The higher the value, the more the node will be placed in the center. If it is undefined, the degree of the node will be calculated, and the higher the degree, the more the node will be placed in the center
+   * @defaultValue undefined
+   */
+  sortBy?: 'id' | 'degree' | ((nodeA: NodeData, nodeB: NodeData) => -1 | 0 | 1);
+  /**
+   * <zh/> 指定每个节点所在的行和列
+   *
+   * <en/> Specify the row and column where each node is located
+   * @defaultValue undefined
+   */
+  position?: (node: NodeData) => { row?: number; col?: number };
+}
+
+export interface NormalizedGridLayoutOptions
+  extends Omit<
+    GridLayoutOptions,
+    | 'begin'
+    | 'nodeSize'
+    | 'nodeSpacing'
+    | 'preventOverlap'
+    | 'preventOverlapPadding'
+    | 'sortBy'
+    | 'rows'
+    | 'cols'
+  > {
+  width: number;
+  height: number;
+  center: Point;
+  begin: Point;
+  rcs: { rows: number; cols: number };
+  nodeSize: (node?: NodeData) => Size;
+  nodeSpacing: (node?: NodeData) => number;
+  preventOverlap: boolean;
+  preventOverlapPadding: number;
+  sortBy: 'id' | 'degree' | ((nodeA: NodeData, nodeB: NodeData) => -1 | 0 | 1);
+}
+
+export type RowsAndCols = {
+  rows: number;
+  cols: number;
+};
+
+export type RowAndCol = {
+  row: number;
+  col: number;
+};
+
+export type IdMapRowAndCol = {
+  [id: string]: RowAndCol;
+};
+
+export type VisitMap = {
+  [id: string]: boolean;
+};

package/src/index.ts

@@ -0,0 +1,28 @@
+export { AntVDagreLayout, type AntVDagreLayoutOptions } from './antv-dagre';
+export type { DagreAlign, DagreRankdir } from './antv-dagre/types';
+export { CircularLayout, type CircularLayoutOptions } from './circular';
+export {
+  ComboCombinedLayout,
+  type ComboCombinedLayoutOptions,
+} from './combo-combined';
+export { ConcentricLayout, type ConcentricLayoutOptions } from './concentric';
+export { BaseLayout, type BaseLayoutOptions } from './core/base-layout';
+export { D3ForceLayout, type D3ForceLayoutOptions } from './d3-force';
+export { D3Force3DLayout, type D3Force3DLayoutOptions } from './d3-force-3d';
+export { DagreLayout, type DagreLayoutOptions } from './dagre';
+export { ForceLayout, type ForceLayoutOptions } from './force';
+export {
+  ForceAtlas2Layout,
+  type ForceAtlas2LayoutOptions,
+} from './force-atlas2';
+export {
+  FruchtermanLayout,
+  type FruchtermanLayoutOptions,
+} from './fruchterman';
+export { GridLayout, type GridLayoutOptions } from './grid';
+export { MDSLayout, type MDSLayoutOptions } from './mds';
+export { RadialLayout, type RadialLayoutOptions } from './radial';
+export { RandomLayout, type RandomLayoutOptions } from './random';
+export * from './registry';
+export * from './types';
+export * from './util';

package/src/mds/index.ts

@@ -0,0 +1,143 @@
+import { Matrix as MLMatrix, SingularValueDecomposition } from 'ml-matrix';
+import { BaseLayout } from '../core/base-layout';
+import type { Matrix, Point } from '../types';
+import { getAdjList, johnson, normalizeViewport, scaleMatrix } from '../util';
+import { applySingleNodeLayout } from '../util/common';
+import type { MDSLayoutOptions } from './types';
+
+export type { MDSLayoutOptions };
+
+const DEFAULTS_LAYOUT_OPTIONS: Partial<MDSLayoutOptions> = {
+  center: [0, 0],
+  linkDistance: 50,
+};
+
+/**
+ * <zh/> 多维缩放算法布局
+ *
+ * <en/> Multidimensional scaling layout
+ */
+export class MDSLayout extends BaseLayout<MDSLayoutOptions> {
+  id = 'mds';
+
+  protected getDefaultOptions(): Partial<MDSLayoutOptions> {
+    return DEFAULTS_LAYOUT_OPTIONS;
+  }
+
+  protected async layout(): Promise<void> {
+    const { linkDistance = DEFAULTS_LAYOUT_OPTIONS.linkDistance } =
+      this.options;
+    const { center } = normalizeViewport(this.options);
+
+    const n = this.model.nodeCount();
+    if (n === 0 || n === 1) {
+      applySingleNodeLayout(this.model, center);
+      return;
+    }
+
+    // the graph-theoretic distance (shortest path distance) matrix
+    const adjList = getAdjList(this.model, false);
+    const distances = johnson(adjList);
+    handleInfinity(distances);
+
+    // scale the ideal edge length acoording to linkDistance
+    const scaledD = scaleMatrix(distances, linkDistance!);
+
+    // get positions by MDS
+    const positions = runMDS(scaledD);
+
+    let i = 0;
+    this.model.forEachNode((node) => {
+      const p = positions[i++];
+      node.x = p[0] + center[0];
+      node.y = p[1] + center[1];
+    });
+  }
+}
+
+/**
+ * Handle Infinity values in the distance matrix by replacing them with the maximum finite distance.
+ */
+const handleInfinity = (distances: Matrix) => {
+  let maxDistance = Number.NEGATIVE_INFINITY;
+
+  const infList: [number, number][] = [];
+  const n = distances.length;
+
+  for (let i = 0; i < n; i++) {
+    const row = distances[i];
+    const m = row.length;
+
+    for (let j = 0; j < m; j++) {
+      const value = row[j];
+      if (value === Infinity) {
+        infList.push([i, j]);
+      } else if (maxDistance < value) {
+        maxDistance = value;
+      }
+    }
+  }
+
+  for (let k = 0; k < infList.length; k++) {
+    const [i, j] = infList[k];
+    distances[i][j] = maxDistance;
+  }
+};
+
+/**
+ * Mds Algorithm
+ * @param {array} distances Adjacency matrix of distances
+ * @param {number} dimension Dimension of layout, default 2
+ * @param {number} linkDistance Ideal length of edges
+ * @returns {array} positions Positions of nodes
+ */
+export const runMDS = (
+  distances: Matrix,
+  dimension: number = 2,
+  linkDistance: number = DEFAULTS_LAYOUT_OPTIONS.linkDistance!,
+): Point[] => {
+  try {
+    // square distances
+    const N = distances.length;
+    const M = new MLMatrix(N, N);
+
+    for (let i = 0; i < N; i++) {
+      for (let j = 0; j < N; j++) {
+        const d = distances[i][j];
+        M.set(i, j, -0.5 * d * d);
+      }
+    }
+
+    // double centre the rows/columns
+    const rowMeans = M.mean('row');
+    const colMeans = M.mean('column');
+    const totalMean = M.mean();
+    M.add(totalMean).subRowVector(rowMeans).subColumnVector(colMeans);
+
+    // take the SVD of the double centred matrix, and return the
+    // points from it
+    const ret = new SingularValueDecomposition(M);
+    const eigenValues = MLMatrix.sqrt(ret.diagonalMatrix).diagonal();
+
+    const U = ret.leftSingularVectors;
+    const λ = eigenValues;
+
+    const results: Point[] = [];
+    for (let i = 0; i < U.rows; i++) {
+      const pt: number[] = [];
+      for (let k = 0; k < dimension; k++) {
+        pt.push(U.get(i, k) * λ[k]);
+      }
+      results.push(pt as Point);
+    }
+    return results;
+  } catch {
+    const results: Point[] = [];
+    for (let i = 0; i < distances.length; i++) {
+      const x = Math.random() * linkDistance;
+      const y = Math.random() * linkDistance;
+      results.push([x, y]);
+    }
+    return results;
+  }
+};

package/src/mds/types.ts

@@ -0,0 +1,23 @@
+import type { BaseLayoutOptions } from '../core/types';
+import type { Point } from '../types';
+
+/**
+ * <zh/> MDS 高维数据降维布局配置
+ *
+ * <en/> MDS layout configuration for high-dimensional data dimensionality reduction
+ */
+export interface MDSLayoutOptions extends BaseLayoutOptions {
+  /**
+   * <zh/> 圆形布局的中心位置
+   *
+   * <en/> Center position of circular layout
+   */
+  center?: Point;
+  /**
+   * <zh/> 边的理想长度，可以理解为边作为弹簧在不受力下的长度
+   *
+   * <en/> Ideal length of the edge, which can be understood as the length of the edge as a spring under no force
+   * @defaultValue 200
+   */
+  linkDistance?: number;
+}