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

package/src/antv-dagre/types.ts

@@ -0,0 +1,175 @@
+import { BaseLayoutOptions } from '../core/base-layout';
+import { ID, NodeData, Point, Size } from '../types';
+
+export type DagreRankdir =
+  | 'TB'
+  | 'BT'
+  | 'LR'
+  | 'RL'
+  | 'tb'
+  | 'lr'
+  | 'rl'
+  | 'bt';
+
+export type DagreAlign = 'UL' | 'UR' | 'DL' | 'DR';
+
+/**
+ * <zh/> 层次/流程图布局的配置项
+ *
+ * <en/> The configuration options for the hierarchical/flowchart layout
+ */
+export interface AntVDagreLayoutOptions extends BaseLayoutOptions {
+  /**
+   * <zh/> 布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）
+   * - 'TB':从上至下布局
+   * - 'BT':从下至上布局
+   * - 'LR':从左至右布局
+   * - 'RL':从右至左布局
+   * <en/> The direction of the layout. T: top; B: bottom; L: left; R: right
+   * - 'TB':from top to bottom
+   * - 'BT':from bottom to top
+   * - 'LR':from left to right
+   * - 'RL':from right to left
+   * @defaultValue 'TB'
+   */
+  rankdir?: DagreRankdir;
+  /**
+   * <zh/> 布局的模式
+   *
+   * <en/> The mode of the layout
+   */
+  ranker?: 'network-simplex' | 'tight-tree' | 'longest-path';
+  /**
+   * <zh/> 节点对齐方式 U：upper（上）；D：down（下）；L：left（左）；R：right（右）
+   * - 'UL':对齐到左上角
+   * - 'UR':对齐到右上角
+   * - 'DL':对齐到左下角
+   * - 'DR':对齐到右下角
+   * - undefined:默认，中间对齐
+   * <en/> The alignment of the nodes U: upper; D: down; L: left; R: right
+   * - 'UL':align to left top
+   * - 'UR':align to right top
+   * - 'DL':align to left bottom
+   * - 'DR':align to right bottom
+   * - undefined:default, align to center
+   * @defaultValue 'UL'
+   */
+  align?: DagreAlign;
+  /**
+   * <zh/> 布局的左上角对齐位置
+   *
+   * <en/> The position of the layout's top-left corner
+   * @defaultValue undefined
+   */
+  begin?: Point;
+  /**
+   * <zh/> 节点大小（直径）。
+   *
+   * <en/> The diameter of the node
+   * @remarks
+   * <zh/> 用于防止节点重叠时的碰撞检测
+   *
+   * <en/> Used for collision detection when nodes overlap
+   * @defaultValue undefined
+   */
+  nodeSize?: Size | ((d?: NodeData) => Size);
+  /**
+   * <zh/> 节点间距（px）
+   *
+   * <en/> The horizontal gap between nodes (px)
+   * @remarks
+   * <zh/> 在 rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在 rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距。nodesepFunc 拥有更高的优先级
+   *
+   * <en/> The horizontal gap between nodes (px) in the case of rankdir is 'TB' or 'BT'. The vertical gap between nodes (px) in the case of rankdir is 'LR' or 'RL'. nodesepFunc has a higher priority
+   * @defaultValue 50
+   */
+  nodesep?: number | ((d?: NodeData) => number);
+  /**
+   * <zh/> 层间距（px）
+   *
+   * <en/> The vertical gap between levels (px)
+   * @remarks
+   * <zh/> 在 rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在 rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距。ranksepFunc 拥有更高的优先级
+   *
+   * <en/> The vertical gap between levels (px) in the case of rankdir is 'TB' or 'BT'. The horizontal gap between levels (px) in the case of rankdir is 'LR' or 'RL'. ranksepFunc has a higher priority
+   * @defaultValue 50
+   */
+  ranksep?: number | ((d?: NodeData) => number);
+  /**
+   * <zh/> 是否同时计算边上的的控制点位置
+   *
+   * <en/> Whether to calculate the control point position of the edge at the same time
+   * @remarks
+   * <zh/> 仅在边配置中使用了内置折线（type: 'polyline-edge'） 时，或任何将自定义消费了 data.controlPoints 字段作为控制点位置的边时生效。本质上就是给边数据增加了 data.controlPoints
+   *
+   * <en/> It only takes effect when the built-in polyline edge (type: 'polyline-edge') is used in the edge configuration, or any edge that consumes data.controlPoints as the control point position. In essence, it adds data.controlPoints to the edge data
+   * @defaultValue false
+   */
+  controlPoints?: boolean;
+  /**
+   * <zh/> 同一层节点是否根据每个节点数据中的 parentId 进行排序，以防止 Combo 重叠
+   *
+   * <en/> Whether to sort nodes in the same layer according to the parentId in each node data to prevent Combo overlapping
+   * @remarks
+   * <zh/> 建议在有 Combo 的情况下配置
+   *
+   * <en/> It is recommended to configure when there is a Combo
+   * @defaultValue false
+   */
+  sortByCombo?: boolean;
+  /**
+   * <zh/> 是否为边的label留位置
+   *
+   * <en/> Whether to leave space for the label of the edge
+   * @remarks
+   * <zh/> 这会影响是否在边中间添加dummy node
+   *
+   * <en/> It will affect whether to add a dummy node in the middle of the edge
+   * @defaultValue true
+   */
+  edgeLabelSpace?: boolean;
+  /**
+   * <zh/> 同层节点顺序的参考数组，存放节点 id 值
+   *
+   * <en/> The reference array of the order of the nodes in the same layer, storing the node id value
+   * @remarks
+   * <zh/> 若未指定，则将按照 dagre 本身机制排列同层节点顺序
+   *
+   * <en/> If not specified, the same layer node order will be arranged according to the mechanism of dagre itself
+   * @defaultValue false
+   */
+  nodeOrder?: string[];
+  /**
+   * <zh/> 是否基于 dagre 进行辐射布局
+   *
+   * <en/> Whether to use dagre for radial layout
+   */
+  radial?: boolean;
+  /**
+   * <zh/> 关注的节点
+   * - ID: 节点 id
+   * - Node: 节点实例
+   * - null: 取消关注
+   *
+   * <en/> The focused node
+   * - ID: node id
+   * - Node: node instance
+   * - null: cancel focus
+   * @remarks
+   * <zh/> radial 为 true 时生效
+   *
+   * <en/> It takes effect when radial is true
+   */
+  focusNode?: ID | Node | null;
+  /**
+   * <zh/> 布局计算时参考的节点位置
+   *
+   * <en/> The reference node position when calculating the layout
+   * @remarks
+   * <zh/> 一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入
+   *
+   * <en/> It is generally used to ensure the continuity of the layout when switching data. In G6, if you update the data, the existing layout result data will be used as input automatically
+   * @defaultValue undefined
+   */
+  preset?: NodeData[];
+}

package/src/antv-dagre/util.ts

@@ -0,0 +1,359 @@
+import { isNumber } from '@antv/util';
+import type { ID } from '../types';
+import { EdgeData, NodeData } from '../types';
+import { DagreGraph, GraphNode } from './graph';
+
+const safeSort = (valueA?: number, valueB?: number) => {
+  return Number(valueA) - Number(valueB);
+};
+
+/*
+ * Adds a dummy node to the graph and return v.
+ */
+export const addDummyNode = (
+  g: DagreGraph,
+  type: string,
+  data: NodeData,
+  name: string,
+): ID => {
+  let v: ID;
+  do {
+    v = `${name}${Math.random()}`;
+  } while (g.hasNode(v));
+
+  data.dummy = type;
+  g.addNode({
+    id: v,
+    data,
+  });
+
+  return v;
+};
+
+/*
+ * Returns a new graph with only simple edges. Handles aggregation of data
+ * associated with multi-edges.
+ */
+export const simplify = (g: DagreGraph) => {
+  const simplified = new DagreGraph<NodeData, EdgeData>();
+  g.getAllNodes().forEach((v) => {
+    simplified.addNode({ ...v });
+  });
+  g.getAllEdges().forEach((e) => {
+    const edge = simplified
+      .getRelatedEdges(e.source, 'out')
+      .find((edge) => edge.target === e.target);
+    if (!edge) {
+      simplified.addEdge({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        data: {
+          weight: e.data.weight! || 0,
+          minlen: e.data.minlen! || 1,
+        },
+      });
+    } else {
+      simplified.updateEdgeData(edge?.id!, {
+        ...edge.data,
+        weight: edge.data.weight! + e.data.weight! || 0,
+        minlen: Math.max(edge.data.minlen!, e.data.minlen! || 1),
+      });
+    }
+  });
+  return simplified;
+};
+
+export const asNonCompoundGraph = (g: DagreGraph): DagreGraph => {
+  const simplified = new DagreGraph();
+
+  g.getAllNodes().forEach((node) => {
+    if (!g.getChildren(node.id).length) {
+      simplified.addNode({ ...node });
+    }
+  });
+
+  g.getAllEdges().forEach((edge) => {
+    simplified.addEdge(edge);
+  });
+
+  return simplified;
+};
+
+export const zipObject = <T = any>(keys: ID[], values: T[]) => {
+  return keys?.reduce((obj, key, i) => {
+    obj[key] = values[i];
+    return obj;
+  }, {} as Record<ID, T>);
+};
+
+export const successorWeights = (g: DagreGraph) => {
+  const weightsMap: Record<ID, Record<string, number>> = {};
+
+  g.getAllNodes().forEach((node) => {
+    const sucs: Record<ID, number> = {};
+    g.getRelatedEdges(node.id, 'out').forEach((e) => {
+      sucs[e.target] = (sucs[e.target] || 0) + (e.data.weight || 0);
+    });
+    weightsMap[node.id] = sucs;
+  });
+
+  return weightsMap;
+};
+
+export const predecessorWeights = (g: DagreGraph) => {
+  const nodes = g.getAllNodes();
+
+  const weightMap = nodes.map((v) => {
+    const preds: Record<ID, number> = {};
+    g.getRelatedEdges(v.id, 'in').forEach((e) => {
+      preds[e.source] = (preds[e.source] || 0) + e.data.weight!;
+    });
+    return preds;
+  });
+  return zipObject(
+    nodes.map((n) => n.id),
+    weightMap,
+  );
+};
+
+/*
+ * Finds where a line starting at point ({x, y}) would intersect a rectangle
+ * ({x, y, width, height}) if it were pointing at the rectangle's center.
+ */
+export const intersectRect = (
+  rect: { x?: number; y?: number; width?: number; height?: number },
+  point: { x?: number; y?: number },
+) => {
+  const x = Number(rect.x);
+  const y = Number(rect.y);
+
+  // Rectangle intersection algorithm from:
+  // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes
+  const dx = Number(point.x) - x;
+  const dy = Number(point.y) - y;
+  let w = Number(rect.width) / 2;
+  let h = Number(rect.height) / 2;
+
+  if (!dx && !dy) {
+    // completely overlapped directly, then return points its self
+    return { x: 0, y: 0 };
+  }
+
+  let sx;
+  let sy;
+
+  if (Math.abs(dy) * w > Math.abs(dx) * h) {
+    // Intersection is top or bottom of rect.
+    if (dy < 0) {
+      h = -h;
+    }
+    sx = (h * dx) / dy;
+    sy = h;
+  } else {
+    // Intersection is left or right of rect.
+    if (dx < 0) {
+      w = -w;
+    }
+    sx = w;
+    sy = (w * dy) / dx;
+  }
+
+  return { x: x + sx, y: y + sy };
+};
+
+/*
+ * Given a DAG with each node assigned "rank" and "order" properties, this
+ * const will produce a matrix with the ids of each node.
+ */
+export const buildLayerMatrix = (g: DagreGraph) => {
+  const layeringNodes: ID[][] = [];
+  const rankMax = maxRank(g) + 1;
+  for (let i = 0; i < rankMax; i++) {
+    layeringNodes.push([]);
+  }
+
+  // const layering = _.map(_.range(maxRank(g) + 1), function() { return []; });
+  g.getAllNodes().forEach((node) => {
+    const rank = node.data.rank!;
+    if (rank !== undefined && layeringNodes[rank]) {
+      layeringNodes[rank].push(node.id);
+    }
+  });
+
+  for (let i = 0; i < rankMax; i++) {
+    layeringNodes[i] = layeringNodes[i].sort((va: ID, vb: ID) =>
+      safeSort(g.getNode(va)!.data.order!, g.getNode(vb)!.data.order!),
+    );
+  }
+
+  return layeringNodes;
+};
+
+/*
+ * Adjusts the ranks for all nodes in the graph such that all nodes v have
+ * rank(v) >= 0 and at least one node w has rank(w) = 0.
+ */
+export const normalizeRanks = (g: DagreGraph) => {
+  const nodeRanks = g
+    .getAllNodes()
+    .filter((v) => v.data.rank !== undefined)
+    .map((v) => v.data.rank!);
+  const min = Math.min(...nodeRanks);
+  g.getAllNodes().forEach((v) => {
+    if (v.data.hasOwnProperty('rank') && min !== Infinity) {
+      v.data.rank! -= min;
+    }
+  });
+};
+
+export const removeEmptyRanks = (g: DagreGraph, nodeRankFactor: number = 0) => {
+  // Ranks may not start at 0, so we need to offset them
+  const nodes = g.getAllNodes();
+  const nodeRanks = nodes
+    .filter((v) => v.data.rank !== undefined)
+    .map((v) => v.data.rank!);
+
+  const offset = Math.min(...nodeRanks);
+  const layers: ID[][] = [];
+
+  nodes.forEach((v) => {
+    const rank = (v.data.rank! || 0) - offset;
+
+    if (!layers[rank]) {
+      layers[rank] = [];
+    }
+    layers[rank].push(v.id);
+  });
+
+  let delta = 0;
+  for (let i = 0; i < layers.length; i++) {
+    const vs = layers[i];
+    if (vs === undefined) {
+      if (i % nodeRankFactor !== 0) {
+        delta -= 1;
+      }
+    } else if (delta) {
+      vs?.forEach((v: ID) => {
+        const node = g.getNode(v);
+        if (node) {
+          node.data.rank = node.data.rank || 0;
+          node.data.rank! += delta;
+        }
+      });
+    }
+  }
+};
+
+export const addBorderNode = (
+  g: DagreGraph,
+  prefix: string,
+  rank?: number,
+  order?: number,
+) => {
+  const node: NodeData = {
+    width: 0,
+    height: 0,
+  };
+  if (isNumber(rank) && isNumber(order)) {
+    node.rank = rank;
+    node.order = order;
+  }
+  return addDummyNode(g, 'border', node, prefix);
+};
+
+export const maxRank = (g: DagreGraph) => {
+  let maxRank: number;
+  g.getAllNodes().forEach((v) => {
+    const rank = v.data.rank!;
+    if (rank !== undefined) {
+      if (maxRank === undefined || rank > maxRank) {
+        maxRank = rank;
+      }
+    }
+  });
+
+  if (!maxRank!) {
+    maxRank = 0;
+  }
+  return maxRank;
+};
+
+/*
+ * Partition a collection into two groups: `lhs` and `rhs`. If the supplied
+ * const returns true for an entry it goes into `lhs`. Otherwise it goes
+ * into `rhs.
+ */
+export const partition = <T = any>(
+  collection: T[],
+  fn: (val: T) => boolean,
+) => {
+  const result = { lhs: [] as T[], rhs: [] as T[] };
+  collection?.forEach((value) => {
+    if (fn(value)) {
+      result.lhs.push(value);
+    } else {
+      result.rhs.push(value);
+    }
+  });
+  return result;
+};
+
+export const minBy = <T = any>(array: T[], func: (param: T) => number) => {
+  return array.reduce((a, b) => {
+    const valA = func(a);
+    const valB = func(b);
+    return valA > valB ? b : a;
+  });
+};
+
+const doDFS = (
+  graph: DagreGraph,
+  node: GraphNode<NodeData>,
+  postorder: boolean,
+  visited: ID[],
+  navigator: (n: ID) => GraphNode<NodeData>[] | undefined,
+  result: ID[],
+) => {
+  if (!visited.includes(node.id)) {
+    visited.push(node.id);
+    if (!postorder) {
+      result.push(node.id);
+    }
+    const neighbors = navigator(node.id);
+    if (neighbors) {
+      neighbors.forEach((n) =>
+        doDFS(graph, n, postorder, visited, navigator, result),
+      );
+    }
+    if (postorder) {
+      result.push(node.id);
+    }
+  }
+};
+
+/**
+ * @description DFS traversal.
+ * @description.zh-CN DFS 遍历。
+ */
+export const dfs = (
+  graph: DagreGraph,
+  node: GraphNode<NodeData> | GraphNode<NodeData>[],
+  order: 'pre' | 'post',
+  isDirected: boolean,
+) => {
+  const nodes = Array.isArray(node) ? node : [node];
+  const navigator = (n: ID) =>
+    isDirected ? graph.getSuccessors(n) : graph.getNeighbors(n);
+  const results: ID[] = [];
+  const visited: ID[] = [];
+  nodes.forEach((node) => {
+    if (!graph.hasNode(node.id)) {
+      throw new Error(`Graph does not have node: ${node}`);
+    } else {
+      doDFS(graph, node, order === 'post', visited, navigator, results);
+    }
+  });
+
+  return results;
+};

package/src/circular/index.ts

@@ -0,0 +1,123 @@
+import { isNil } from '@antv/util';
+import { BaseLayout } from '../core/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++;
+    }
+  }
+}