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

package/src/runtime/supervisor.ts

@@ -0,0 +1,80 @@
+import { Remote, wrap } from 'comlink';
+import type { Graph, GraphData, PlainObject } from '../types';
+import type { LayoutWorker } from '../worker';
+
+export class Supervisor {
+  private worker: Worker | null = null;
+  private workerApi: Remote<LayoutWorker> | null = null;
+
+  /**
+   * Execute layout in worker
+   */
+  async execute(
+    layoutId: string,
+    data: GraphData,
+    options: PlainObject,
+  ): Promise<Graph> {
+    if (!this.worker) {
+      await this.initWorker();
+    }
+
+    if (!this.workerApi) {
+      throw new Error('Worker API not initialized');
+    }
+
+    return await this.workerApi.execute(layoutId, data, options);
+  }
+
+  /**
+   * Destroy worker
+   */
+  destroy(): void {
+    if (this.workerApi) {
+      this.workerApi.destroy();
+    }
+    if (this.worker) {
+      this.worker.terminate();
+      this.worker = null;
+      this.workerApi = null;
+    }
+  }
+
+  /**
+   * Initialize worker
+   */
+  private async initWorker(): Promise<void> {
+    const workerPath = this.resolveWorkerPath();
+
+    const isESM = workerPath.includes('/lib/') || workerPath.endsWith('.mjs');
+    const type = isESM ? 'module' : 'classic';
+
+    this.worker = new Worker(workerPath, { type });
+    this.workerApi = wrap<LayoutWorker>(this.worker);
+  }
+
+  /**
+   * Resolve worker script path which works in both ESM and UMD environments
+   */
+  private resolveWorkerPath(): string {
+    if (typeof import.meta !== 'undefined' && import.meta.url) {
+      const currentUrl = new URL(import.meta.url);
+      // e.g. `.../lib/runtime/supervisor.js` -> `.../lib/worker.js`
+      const asRoot = currentUrl.href.replace(/\/runtime\/[^/]+\.js$/, '/worker.js');
+      if (asRoot !== currentUrl.href) return asRoot;
+      // Fallback: keep legacy behavior (same directory)
+      return currentUrl.href.replace(/\/[^/]+\.js$/, '/worker.js');
+    }
+
+    if (typeof document !== 'undefined') {
+      const scripts = document.getElementsByTagName('script');
+      for (let i = scripts.length - 1; i >= 0; i--) {
+        const src = scripts[i].src;
+        if (src && (src.includes('index.js') || src.includes('index.min.js'))) {
+          return src.replace(/index(\.min)?\.js/, 'worker.js');
+        }
+      }
+    }
+
+    return './worker.js';
+  }
+}

package/src/types/common.ts

@@ -0,0 +1,3 @@
+export type PlainObject = Record<string, any>;
+
+export type Matrix = number[][];

package/src/types/data.ts

@@ -0,0 +1,79 @@
+import type { EdgeLabelPos } from './edge-label';
+import type { PlainObject } from './common';
+import type { ID } from './id';
+import type { Point } from './point';
+import type { Size } from './size';
+
+export interface GraphData<
+  N extends NodeData = NodeData,
+  E extends EdgeData = EdgeData,
+> {
+  nodes: N[];
+  edges?: E[];
+}
+
+export interface NodeData extends PlainObject {}
+
+export interface EdgeData extends PlainObject {}
+
+export interface GraphNode<N extends NodeData = NodeData> {
+  id: ID;
+
+  x: number;
+  y: number;
+  z?: number;
+
+  /** Applied for compound layout（dagre、antv-dagre、combo-combined） */
+  parentId?: ID | null;
+  isCombo?: boolean;
+
+  /** Applied for force-directed layout */
+  fx?: number | null;
+  fy?: number | null;
+  fz?: number | null;
+  vx?: number;
+  vy?: number;
+  vz?: number;
+
+  /** Output additional info */
+  size?: Size;
+  _original: N;
+
+  [key: string]: any;
+}
+
+export interface GraphEdge<E extends EdgeData = EdgeData> {
+  id: ID;
+
+  source: ID;
+  target: ID;
+  sourceNode?: GraphNode;
+  targetNode?: GraphNode;
+
+  _original: E;
+
+  /** Only for dagre layout */
+  points?: Point[];
+  labelSize?: Size;
+  labelPos?: EdgeLabelPos;
+  labelOffset?: number;
+  weight?: number;
+  minLen?: number;
+
+  [key: string]: any;
+}
+
+export interface Graph<
+  N extends NodeData = NodeData,
+  E extends EdgeData = EdgeData,
+> {
+  nodes: Map<ID, GraphNode<N>>;
+  edges: Map<ID, GraphEdge<E>>;
+}
+
+export type LayoutNode<N extends NodeData = NodeData> = GraphNode<N>;
+export type LayoutEdge<E extends EdgeData = EdgeData> = GraphEdge<E>;
+export type LayoutData<
+  N extends NodeData = NodeData,
+  E extends EdgeData = EdgeData,
+> = Graph<N, E>;

package/src/types/edge-label.ts

@@ -0,0 +1,5 @@
+/**
+ * Edge label position: 'l' left, 'c' center, 'r' right.
+ */
+export type EdgeLabelPos = 'l' | 'c' | 'r';
+

package/src/types/force.ts

@@ -0,0 +1,49 @@
+import type { SimulationOptions } from '../algorithm/base-simulation';
+import type { BaseLayoutOptions, Layout } from '../algorithm/types';
+import type { ID } from './id';
+import type { PointObject } from './point';
+
+export type DisplacementMap = Map<ID, PointObject>;
+
+export type DistanceThresholdMode = 'mean' | 'max' | 'min';
+
+/**
+ * <zh/> 公共力导向布局配置项
+ *
+ * <en/> Common force layout configuration items
+ */
+export interface CommonForceLayoutOptions
+  extends BaseLayoutOptions,
+    SimulationOptions {
+  /**
+   * <zh/> 布局的维度，2D 渲染时指定为 2；若为 3D 渲染可指定为 3，则将多计算 z 轴的布局
+   *
+   * <en/> The dimensions of the layout, specify 2 for 2D rendering; if it is 3D rendering, specify 3 to calculate the layout of the z axis
+   * @defaultValue 2
+   */
+  dimensions?: 2 | 3;
+  /**
+   * <zh/> minMovement 的使用条件
+   * - 'mean': 平均移动距离小于 minMovement 时停止迭代
+   * - 'max': 最大移动距离小于时 minMovement 时停止迭代
+   * - 'min': 最小移动距离小于时 minMovement 时停止迭代
+   * <en/> The condition for using minMovement
+   * - 'mean': The average movement distance is less than minMovement when stopped iterating
+   * - 'max': The maximum movement distance is less than minMovement when stopped iterating
+   * - 'min': The minimum movement distance is less than minMovement when stopped iterating
+   * @defaultValue 'mean'
+   */
+  distanceThresholdMode?: 'mean' | 'max' | 'min';
+  /**
+   * <zh/> 最大距离
+   *
+   * <en/> Maximum distance
+   */
+  maxDistance?: number;
+  /**
+   * <zh/> 每次迭代后的回调函数
+   *
+   * <en/> Callback function after each iteration
+   */
+  onTick?: (layout: Layout<any>) => void;
+}

package/src/types/id.ts

@@ -0,0 +1 @@
+export type ID = string | number;

package/src/types/index.ts

@@ -0,0 +1,8 @@
+export * from './common';
+export * from './data';
+export * from './edge-label';
+export * from './force';
+export * from './id';
+export * from './point';
+export * from './position';
+export * from './size';

package/src/types/point.ts

@@ -0,0 +1,9 @@
+export type Point = [number, number] | [number, number, number];
+
+export type STDPoint = [number, number, number];
+
+export type PointObject = {
+  x: number;
+  y: number;
+  z?: number;
+};

package/src/types/position.ts

@@ -0,0 +1,11 @@
+export type Position = [number, number] | [number, number, number];
+
+export type NullablePosition = Position | [null, null] | [null, null, null];
+
+export type STDPosition = [number, number, number];
+
+export type PositionObject = {
+  x: number;
+  y: number;
+  z?: number;
+};

package/src/types/size.ts

@@ -0,0 +1,3 @@
+export type Size = number | number[];
+
+export type STDSize = [number, number, number];

package/src/util/array.ts

@@ -0,0 +1 @@
+export const isArray = Array.isArray;

package/src/util/common.ts

@@ -0,0 +1,25 @@
+import type { Point } from '../types';
+import type { GraphLib } from '../model/data';
+
+/**
+ * Return the layout result for a graph with zero or one node.
+ * @param graph original graph
+ * @param center the layout center
+ * @returns layout result
+ */
+export function applySingleNodeLayout(
+  model: GraphLib,
+  center: Point,
+  dimensions: 2 | 3 = 2,
+) {
+  const n = model.nodeCount();
+
+  if (n === 1) {
+    const first = model.firstNode()!;
+    first.x = center[0];
+    first.y = center[1];
+    if (dimensions === 3) {
+      first.z = center[2] || 0;
+    }
+  }
+}

package/src/util/format.ts

@@ -0,0 +1,92 @@
+import { isFunction, isNumber, isObject } from '@antv/util';
+import type { NodeData, Size } from '../types';
+import { parseSize } from './size';
+
+/**
+ * Format value with multiple types into a function that returns a number
+ * @param value The value to be formatted
+ * @param defaultValue The default value when value is invalid
+ * @returns A function that returns a number
+ */
+export function formatNumberFn<T = NodeData>(
+  value: number | ((d?: T) => number) | undefined,
+  defaultValue: number,
+): (d?: T) => number {
+  // If value is a function, return it directly
+  if (isFunction(value)) {
+    return value;
+  }
+
+  // If value is a number, return a function that returns this number
+  if (isNumber(value)) {
+    return () => value;
+  }
+
+  // For other cases (undefined or invalid values), return default value function
+  return () => defaultValue;
+}
+
+/**
+ * Format size config with multiple types into a function that returns a size
+ * @param value The value to be formatted
+ * @param defaultValue The default value when value is invalid
+ * @param resultIsNumber Whether to return a number (max of width/height) or size array
+ * @returns A function that returns a size
+ */
+export function formatSizeFn<T extends NodeData>(
+  value?: Size | { width: number; height: number } | ((d?: T) => Size),
+  defaultValue: number = 10,
+): (d?: T) => Size {
+  // If value is undefined, return default value function
+  if (!value) {
+    return () => defaultValue;
+  }
+
+  // If value is a function, return it directly
+  if (isFunction(value)) {
+    return value;
+  }
+
+  // If value is a number, return a function that returns this number
+  if (isNumber(value)) {
+    return () => value;
+  }
+
+  // If value is an array, return max or the array itself
+  if (Array.isArray(value)) {
+    return () => value;
+  }
+
+  // If value is an object with width and height
+  if (isObject(value) && value.width && value.height) {
+    return () => [value.width, value.height];
+  }
+
+  return () => defaultValue;
+}
+
+/**
+ * Format nodeSize and nodeSpacing into a function that returns the total size
+ * @param nodeSize The size of the node
+ * @param nodeSpacing The spacing around the node
+ * @param defaultNodeSize The default node size when value is invalid
+ * @returns A function that returns the total size (node size + spacing)
+ */
+export const formatNodeSizeFn = (
+  nodeSize:
+    | Size
+    | { width: number; height: number }
+    | ((node?: NodeData) => Size)
+    | undefined,
+  nodeSpacing: number | ((node?: NodeData) => number) | undefined,
+  defaultNodeSize: number = 10,
+): ((node?: NodeData) => number) => {
+  const nodeSpacingFunc = formatNumberFn(nodeSpacing, 0);
+  const nodeSizeFunc = formatSizeFn(nodeSize, defaultNodeSize);
+
+  return (node?: NodeData) => {
+    const size = nodeSizeFunc(node);
+    const spacing = nodeSpacingFunc(node);
+    return Math.max(...parseSize(size)) + spacing;
+  };
+};

package/src/util/index.ts

@@ -0,0 +1,8 @@
+export * from './array';
+export * from './common';
+export * from './math';
+export * from './object';
+export * from './order';
+export * from './point';
+export * from './size';
+export * from './viewport';

package/src/util/math.ts

@@ -0,0 +1,312 @@
+import { Graph } from '@antv/graphlib';
+import { isNumber } from '@antv/util';
+import type { Matrix, NodeData, PointObject } from '../types';
+import { isArray } from './array';
+import type { GraphLib } from '../model/data';
+
+/**
+ * Floyd-Warshall algorithm to find shortest paths (but with no negative cycles).
+ */
+export const floydWarshall = (adjMatrix: Matrix): Matrix => {
+  // initialize
+  const n = adjMatrix.length;
+  const dist = Array.from({ length: n }, () => new Array(n));
+
+  for (let i = 0; i < n; i++) {
+    const row = adjMatrix[i];
+    const drow = dist[i];
+    for (let j = 0; j < n; j++) {
+      drow[j] = i === j ? 0 : row[j] > 0 ? row[j] : Infinity;
+    }
+  }
+
+  // floyd
+  for (let k = 0; k < n; k++) {
+    const dk = dist[k];
+    for (let i = 0; i < n; i++) {
+      const di = dist[i];
+      const dik = di[k];
+      if (dik === Infinity) continue;
+
+      for (let j = 0; j < n; j++) {
+        const dkj = dk[j];
+        if (dkj === Infinity) continue;
+
+        const next = dik + dkj;
+        if (next < di[j]) {
+          di[j] = next;
+        }
+      }
+    }
+  }
+  return dist;
+};
+
+/**
+ * Get the adjacency matrix of the graph model.
+ */
+export const getAdjMatrix = (model: GraphLib, directed: boolean): Matrix => {
+  const n = model.nodeCount();
+  const matrix: Matrix = Array.from({ length: n }, () => new Array(n));
+
+  // map node with index in data.nodes
+  const nodeMap: { [key: string]: number } = {};
+
+  let i = 0;
+  model.forEachNode((node) => {
+    nodeMap[node.id] = i++;
+  });
+
+  model.forEachEdge((e) => {
+    const sIndex = nodeMap[e.source];
+    const tIndex = nodeMap[e.target];
+    if (sIndex === undefined || tIndex === undefined) return;
+
+    matrix[sIndex][tIndex] = 1;
+    if (!directed) {
+      matrix[tIndex][sIndex] = 1;
+    }
+  });
+  return matrix;
+};
+
+/**
+ * Get the adjacency list of the graph model.
+ */
+export const getAdjList = (model: GraphLib, directed: boolean): Matrix => {
+  const n = model.nodeCount();
+  const adjList: Matrix = Array.from({ length: n }, () => [] as number[]);
+
+  // map node with index
+  const nodeMap: Record<string, number> = {};
+  let idx = 0;
+  model.forEachNode((node) => {
+    nodeMap[node.id] = idx++;
+  });
+
+  model.forEachEdge((e) => {
+    const s = nodeMap[e.source];
+    const t = nodeMap[e.target];
+    if (s == null || t == null) return;
+
+    adjList[s].push(t);
+    if (!directed) adjList[t].push(s);
+  });
+
+  return adjList;
+};
+
+/**
+ * scale matrix
+ * @param matrix [ [], [], [] ]
+ * @param ratio
+ */
+export const scaleMatrix = (matrix: Matrix, ratio: number) => {
+  const n = matrix.length;
+  const result = new Array(n);
+
+  for (let i = 0; i < n; i++) {
+    const row = matrix[i];
+    const m = row.length;
+    const newRow = new Array(m);
+
+    for (let j = 0; j < m; j++) {
+      newRow[j] = row[j] * ratio;
+    }
+    result[i] = newRow;
+  }
+
+  return result;
+};
+
+/**
+ * calculate the bounding box for the nodes according to their x, y, and size
+ * @param nodes nodes in the layout
+ * @returns
+ */
+export const getLayoutBBox = (nodes: NodeData[]) => {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  nodes.forEach((node) => {
+    let size = node.data.size;
+    if (isArray(size)) {
+      if (size.length === 1) size = [size[0], size[0]];
+    } else if (size === undefined || isNaN(size as any)) {
+      size = [30, 30];
+    } else if (isNumber(size)) {
+      size = [size, size];
+    }
+
+    const halfSize = [size[0] / 2, size[1] / 2];
+    const left = node.data.x - halfSize[0];
+    const right = node.data.x + halfSize[0];
+    const top = node.data.y - halfSize[1];
+    const bottom = node.data.y + halfSize[1];
+
+    if (minX > left) minX = left;
+    if (minY > top) minY = top;
+    if (maxX < right) maxX = right;
+    if (maxY < bottom) maxY = bottom;
+  });
+  return { minX, minY, maxX, maxY };
+};
+
+/**
+ * calculate the euclidean distance form p1 to p2
+ * @param p1
+ * @param p2
+ * @returns
+ */
+export const getEuclideanDistance = (p1: PointObject, p2: PointObject) =>
+  Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
+
+/**
+ * Depth first search begin from nodes in graphCore data.
+ * @param graphCore graphlib data structure
+ * @param nodes begin nodes
+ * @param fn will be called while visiting each node
+ * @param mode 'TB' - visit from top to bottom; 'BT' - visit from bottom to top;
+ * @returns
+ */
+export const graphTreeDfs = (
+  graph: Graph<any, any>,
+  nodes: NodeData[],
+  fn: (n: NodeData) => void,
+  mode: 'TB' | 'BT' = 'TB',
+  treeKey: string,
+  stopFns: {
+    stopBranchFn?: (node: NodeData) => boolean;
+    stopAllFn?: (node: NodeData) => boolean;
+  } = {},
+) => {
+  if (!nodes?.length) return;
+  const { stopBranchFn, stopAllFn } = stopFns;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (!graph.hasNode(node.id)) continue;
+    if (stopBranchFn?.(node)) continue; // Stop this branch
+    if (stopAllFn?.(node)) return; // Stop all
+    if (mode === 'TB') fn(node); // Traverse from top to bottom
+    graphTreeDfs(
+      graph,
+      graph.getChildren(node.id, treeKey),
+      fn,
+      mode,
+      treeKey,
+      stopFns,
+    );
+    if (mode !== 'TB') fn(node); // Traverse from bottom to top
+  }
+};
+
+/**
+ * Use Johnson + Dijkstra to compute APSP for sparse graph.
+ * Fully compatible with floydWarshall(adjMatrix).
+ */
+
+export function johnson(adjList: Matrix): Matrix {
+  const n = adjList.length;
+
+  // Step 1: add a dummy node q connected to all nodes with weight 0
+  const h = new Array(n).fill(0);
+
+  // Bellman-Ford to compute potentials h(v)
+  // 因为权重全是 1，无负边，可直接跳过 BF，h 全 0 即可
+
+  // Step 2: reweight edges
+  // 因为 h(u)=h(v)=0，reweight 后仍然是 1，省略 reweight 过程
+
+  // Step 3: run Dijkstra from each node
+  const distAll: Matrix = Array.from({ length: n }, () =>
+    new Array(n).fill(Infinity),
+  );
+
+  for (let s = 0; s < n; s++) {
+    distAll[s] = dijkstra(adjList, s);
+  }
+
+  return distAll;
+}
+
+/**
+ * Dijkstra algorithm to find shortest paths from source to all nodes.
+ */
+function dijkstra(adjList: number[][], source: number): number[] {
+  const n = adjList.length;
+  const dist = new Array(n).fill(Infinity);
+  dist[source] = 0;
+
+  // Minimal binary heap
+  const heap = new MinHeap();
+  heap.push([0, source]); // [distance, node]
+
+  while (!heap.empty()) {
+    const [d, u] = heap.pop();
+    if (d !== dist[u]) continue;
+
+    const neighbors = adjList[u];
+    for (let i = 0; i < neighbors.length; i++) {
+      const v = neighbors[i];
+      const nd = d + 1;
+      if (nd < dist[v]) {
+        dist[v] = nd;
+        heap.push([nd, v]);
+      }
+    }
+  }
+
+  return dist;
+}
+
+class MinHeap {
+  private data: [number, number][] = [];
+
+  push(item: [number, number]) {
+    this.data.push(item);
+    this.bubbleUp(this.data.length - 1);
+  }
+
+  pop(): [number, number] {
+    const top = this.data[0];
+    const end = this.data.pop()!;
+    if (this.data.length > 0) {
+      this.data[0] = end;
+      this.bubbleDown(0);
+    }
+    return top;
+  }
+
+  empty() {
+    return this.data.length === 0;
+  }
+
+  private bubbleUp(pos: number) {
+    const data = this.data;
+    while (pos > 0) {
+      const parent = (pos - 1) >> 1;
+      if (data[parent][0] <= data[pos][0]) break;
+      [data[parent], data[pos]] = [data[pos], data[parent]];
+      pos = parent;
+    }
+  }
+
+  private bubbleDown(pos: number) {
+    const data = this.data;
+    const length = data.length;
+
+    while (true) {
+      const left = pos * 2 + 1;
+      const right = pos * 2 + 2;
+      let min = pos;
+
+      if (left < length && data[left][0] < data[min][0]) min = left;
+      if (right < length && data[right][0] < data[min][0]) min = right;
+      if (min === pos) break;
+
+      [data[pos], data[min]] = [data[min], data[pos]];
+      pos = min;
+    }
+  }
+}