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

package/src/d3-force-3d/typing.d.ts

@@ -0,0 +1,301 @@
+// TODO wait for d3-force-3d to be published
+declare module 'd3-force-3d' {
+  export function forceCenter(x?: number, y?: number, z?: number): ForceCenter;
+
+  export function forceCollide(
+    radius?:
+      | number
+      | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+  ): ForceCollide;
+
+  export function forceLink(links?: LinkData[]): ForceLink;
+
+  export function forceManyBody(): ForceManyBody;
+
+  export function forceRadial(
+    radius?:
+      | number
+      | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    x?: number,
+    y?: number,
+    z?: number,
+  ): ForceRadial;
+
+  export function forceSimulation(
+    nodes?: NodeData[],
+    numDimensions?: Dimensions,
+  ): ForceSimulation;
+
+  export function forceX(x?: number): ForceX;
+
+  export function forceY(y?: number): ForceY;
+
+  export function forceZ(z?: number): ForceZ;
+
+  interface ForceSimulation {
+    tick(iterations?: number): this;
+
+    restart(): this;
+
+    stop(): this;
+
+    numDimensions(): Dimensions;
+    numDimensions(value: Dimensions): this;
+
+    nodes(): NodeData[];
+    nodes(nodes: NodeData[]): this;
+
+    alpha(): number;
+    alpha(alpha: number): this;
+
+    alphaMin(): number;
+    alphaMin(min: number): this;
+
+    alphaDecay(): number;
+    alphaDecay(decay: number): this;
+
+    alphaTarget(): number;
+    alphaTarget(target: number): this;
+
+    velocityDecay(): number;
+    velocityDecay(decay: number): this;
+
+    randomSource(): () => number;
+    randomSource(source: () => number): this;
+
+    force<T extends Force = Force>(name: string): T;
+    force(name: string, force: Force | null): this;
+
+    find(x?: number, y?: number, z?: number, radius?: number): NodeData;
+
+    on(name: string): (...args: any[]) => void;
+    on(name: string, listener: (...args: any[]) => void): this;
+  }
+
+  type Force =
+    | ForceCenter
+    | ForceCollide
+    | ForceLink
+    | ForceManyBody
+    | ForceRadial
+    | ForceX
+    | ForceY
+    | ForceZ;
+
+  interface ForceCenter {
+    (): void;
+
+    initialize(nodes: NodeData[]): void;
+
+    x(): number;
+    x(x: number): this;
+
+    y(): number;
+    y(y: number): this;
+
+    z(): number;
+    z(z: number): this;
+
+    strength(): number;
+    strength(strength: number): this;
+  }
+
+  interface ForceCollide {
+    (): void;
+
+    initialize(
+      nodes: NodeData[],
+      random?: () => number,
+      nDim?: Dimensions,
+    ): void;
+
+    iterations(): number;
+    iterations(iterations: number): this;
+
+    strength(): number;
+    strength(strength: number): this;
+
+    radius(): number;
+    radius(
+      radius:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+  }
+
+  interface ForceLink {
+    (alpha: number): void;
+
+    initialize(nodes: NodeData[], random: () => number, dim: Dimensions): void;
+
+    links(): LinkData[];
+    links(links: LinkData[]): this;
+
+    id(): (node: NodeData, index: number, nodes: NodeData[]) => any;
+    id(id: (node: NodeData, index: number, nodes: NodeData[]) => any): this;
+
+    iterations(): number;
+    iterations(iterations: number): this;
+
+    strength(): (link: LinkData, index: number, links: LinkData[]) => number;
+    strength(
+      strength:
+        | number
+        | ((link: LinkData, index: number, links: LinkData[]) => number),
+    ): this;
+
+    distance(): (link: LinkData, index: number, links: LinkData[]) => number;
+    distance(
+      distance:
+        | number
+        | ((link: LinkData, index: number, links: LinkData[]) => number),
+    ): this;
+  }
+
+  interface ForceManyBody {
+    (alpha: number): void;
+
+    initialize(nodes: NodeData[], random: () => number, dim: Dimensions): void;
+
+    strength(): (node: NodeData, index: number, nodes: NodeData[]) => number;
+    strength(
+      strength:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+
+    distanceMin(): number;
+    distanceMin(min: number): this;
+
+    distanceMax(): number;
+    distanceMax(max: number): this;
+
+    theta(): number;
+    theta(theta: number): this;
+  }
+
+  interface ForceRadial {
+    (alpha: number): void;
+
+    initialize(nodes: NodeData[], dim: Dimensions): void;
+
+    strength(): (node: NodeData, index: number, nodes: NodeData[]) => number;
+    strength(
+      strength:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+
+    radius(): (node: NodeData, index: number, nodes: NodeData[]) => number;
+    radius(
+      radius:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+
+    x(): number;
+    x(x: number): this;
+
+    y(): number;
+    y(y: number): this;
+
+    z(): number;
+    z(z: number): this;
+  }
+
+  interface ForceX {
+    (alpha: number): void;
+
+    initialize(nodes: NodeData[]): void;
+
+    strength(): number;
+    strength(
+      strength:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+
+    x(): number;
+    x(
+      x:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+  }
+
+  interface ForceY {
+    (alpha: number): void;
+
+    initialize(nodes: NodeData[]): void;
+
+    strength(): number;
+    strength(
+      strength:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+
+    y(): number;
+    y(
+      y:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+  }
+
+  interface ForceZ {
+    (alpha: number): void;
+
+    initialize(nodes: NodeData[]): void;
+
+    strength(): number;
+    strength(
+      strength:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+
+    z(): number;
+    z(
+      z:
+        | number
+        | ((node: NodeData, index: number, nodes: NodeData[]) => number),
+    ): this;
+  }
+
+  interface NodeData {
+    /** the node’s zero-based index into nodes */
+    index?: number;
+    /** the node’s current x-position */
+    x?: number;
+    /** the node’s current y-position (if using 2 or more dimensions) */
+    y?: number;
+    /** the node’s current z-position (if using 3 dimensions) */
+    z?: number;
+    /** the node’s current x-velocity */
+    vx?: number;
+    /** the node’s current y-velocity (if using 2 or more dimensions) */
+    vy?: number;
+    /** the node’s current z-velocity (if using 3 dimensions) */
+    vz?: number;
+    /** the node’s fixed x-position */
+    fx?: number;
+    /** the node’s fixed y-position */
+    fy?: number;
+    /** the node’s fixed z-position */
+    fz?: number;
+    [key: string]: any;
+  }
+
+  interface LinkData {
+    /** the zero-based index into links, assigned by this method */
+    index?: number;
+    /** the link’s source node */
+    source: NodeData | any;
+    /** the link’s target node */
+    target: NodeData | any;
+    [key: string]: any;
+  }
+
+  type Dimensions = 1 | 2 | 3;
+}

package/src/dagre/index.ts

@@ -0,0 +1,172 @@
+import { isBoolean, isNil, pick } from '@antv/util';
+import dagre, { graphlib } from 'dagre';
+import { BaseLayout } from '../core/base-layout';
+import type { LayoutNode } from '../types';
+import { parsePoint, parseSize } from '../util';
+import { formatNumberFn, formatSizeFn } from '../util/format';
+import type { DagreLayoutOptions } from './types';
+
+export type { DagreLayoutOptions };
+
+/**
+ * <zh/> Dagre 布局
+ *
+ * <en/> Dagre layout
+ */
+export class DagreLayout extends BaseLayout<DagreLayoutOptions> {
+  id = 'dagre';
+
+  private isCompoundGraph: boolean | null = null;
+
+  protected config = {
+    graphAttributes: [
+      'rankdir',
+      'align',
+      'nodesep',
+      'edgesep',
+      'ranksep',
+      'marginx',
+      'marginy',
+      'acyclicer',
+      'ranker',
+    ],
+    nodeAttributes: ['width', 'height'],
+    edgeAttributes: [
+      'minlen',
+      'weight',
+      'width',
+      'height',
+      'labelpos',
+      'labeloffset',
+    ],
+  };
+
+  protected getDefaultOptions(): Partial<DagreLayoutOptions> {
+    return {
+      directed: true,
+      multigraph: true,
+      rankdir: 'TB',
+      align: undefined,
+      nodesep: 50,
+      edgesep: 10,
+      ranksep: 50,
+      marginx: 0,
+      marginy: 0,
+      acyclicer: undefined,
+      ranker: 'network-simplex',
+      nodeSize: [0, 0],
+      edgeMinLen: 1,
+      edgeWeight: 1,
+      edgeLabelSize: [0, 0],
+      edgeLabelPos: 'r',
+      edgeLabelOffset: 10,
+    };
+  }
+
+  protected async layout(): Promise<void> {
+    const g = new graphlib.Graph({
+      directed: !!this.options.directed,
+      multigraph: !!this.options.multigraph,
+      compound: this.isCompound(),
+    });
+
+    g.setGraph(pick(this.options, this.config.graphAttributes));
+
+    g.setDefaultEdgeLabel(() => ({}));
+
+    const nodeSizeFn = formatSizeFn(this.options.nodeSize, 0);
+
+    this.model.forEachNode((node: LayoutNode) => {
+      const raw = node._original;
+      const [width, height] = parseSize(nodeSizeFn(raw));
+
+      const label = { width, height };
+      g.setNode(String(node.id), label);
+
+      if (this.isCompound()) {
+        if (isNil(node.parentId)) return;
+
+        g.setParent(String(node.id), String(node.parentId));
+      }
+    });
+
+    const {
+      edgeLabelSize,
+      edgeLabelOffset,
+      edgeLabelPos,
+      edgeMinLen,
+      edgeWeight,
+    } = this.options;
+
+    const edgeLabelSizeFn = formatSizeFn(edgeLabelSize, 0);
+    const edgeLabelOffsetFn = formatNumberFn(edgeLabelOffset, 10);
+    const edgeLabelPosFn =
+      typeof edgeLabelPos === 'function' ? edgeLabelPos : () => edgeLabelPos;
+    const edgeMinLenFn = formatNumberFn(edgeMinLen, 1);
+    const edgeWeightFn = formatNumberFn(edgeWeight, 1);
+
+    this.model.forEachEdge((edge) => {
+      const raw = edge._original;
+      const [lw, lh] = parseSize(edgeLabelSizeFn(raw));
+
+      const label = {
+        width: lw,
+        height: lh,
+        labelpos: edgeLabelPosFn(raw),
+        labeloffset: edgeLabelOffsetFn(raw),
+        minlen: edgeMinLenFn(raw),
+        weight: edgeWeightFn(raw),
+      };
+
+      g.setEdge(
+        String(edge.source),
+        String(edge.target),
+        label,
+        String(edge.id),
+      );
+    });
+
+    dagre.layout(g);
+
+    this.model.forEachNode((node) => {
+      const data = g.node(String(node.id));
+      if (!data) return;
+
+      node.x = data.x;
+      node.y = data.y;
+      node.size = [data.width, data.height];
+    });
+
+    this.model.forEachEdge((edge) => {
+      const data = g.edge(
+        String(edge.source),
+        String(edge.target),
+        String(edge.id),
+      );
+
+      if (!data) return;
+
+      const { width, height, weight, minlen, labelpos, labeloffset, points } =
+        data;
+      edge.labelSize = [width, height];
+      edge.weight = weight;
+      edge.minLen = minlen;
+      edge.labelPos = labelpos;
+      edge.labelOffset = labeloffset;
+      edge.points = points.map(parsePoint);
+    });
+  }
+
+  private isCompound(): boolean {
+    if (this.isCompoundGraph !== null) return this.isCompoundGraph;
+
+    if (isBoolean(this.options.compound)) {
+      return (this.isCompoundGraph = this.options.compound);
+    }
+
+    this.isCompoundGraph = this.model
+      .nodes()
+      .some((node) => !isNil(node.parentId));
+    return this.isCompoundGraph;
+  }
+}

package/src/dagre/types.ts

@@ -0,0 +1,85 @@
+import type { GraphLabel } from 'dagre';
+import type { BaseLayoutOptions } from '../core/types';
+import type { NodeData, Size } from '../types';
+
+/**
+ * <zh/> 边标签位置：'l' 左侧，'c' 中心，'r' 右侧
+ *
+ * <en/> Edge label position: 'l' for left, 'c' for center, 'r' for right
+ */
+export type EdgeLabelPos = 'l' | 'c' | 'r';
+
+/**
+ * <zh/> Dagre 层次布局配置项，用于有向图的分层排列
+ *
+ * <en/> Dagre hierarchical layout options for layered arrangement of directed graphs
+ */
+export interface DagreLayoutOptions extends BaseLayoutOptions, GraphLabel {
+  /**
+   * <zh/> 控制边的方向性，true 表示边有方向（箭头），影响布局的层次关系
+   *
+   * <en/> Controls edge directionality; true means edges have direction (arrows), affecting hierarchical relationships in layout
+   * @defaultValue true
+   */
+  directed?: boolean;
+
+  /**
+   * <zh/> 支持嵌套结构，允许节点包含子图，用于复杂的层级关系
+   *
+   * <en/> Supports nested structures where nodes can contain subgraphs for complex hierarchical relationships
+   * @defaultValue true
+   */
+  compound?: boolean;
+
+  /**
+   * <zh/> 允许两节点间存在多条边，用于表示多重关系
+   *
+   * <en/> Allows multiple edges between two nodes to represent multiple relationships
+   * @defaultValue true
+   */
+  multigraph?: boolean;
+
+  /**
+   * <zh/> 定义节点占用的空间大小，影响节点间距和整体布局疏密
+   *
+   * <en/> Defines space occupied by nodes, affecting inter-node spacing and overall layout density
+   * @defaultValue [0, 0]
+   */
+  nodeSize?: Size | ((d?: NodeData) => Size);
+
+  /**
+   * <zh/> 设置边跨越的最小层数，值越大节点间距越远，用于控制布局紧凑度
+   *
+   * <en/> Sets minimum number of layers an edge spans; larger values create more distance between nodes, controlling layout compactness
+   * @defaultValue 1
+   */
+  edgeMinLen?: number | ((d?: NodeData) => number);
+
+  /**
+   * <zh/> 边的权重，影响边的长度优化优先级，权重大的边倾向于更短
+   *
+   * <en/> Edge weight affecting length optimization priority; higher weight edges tend to be shorter
+   */
+  edgeWeight?: number | ((d?: NodeData) => number);
+
+  /**
+   * <zh/> 边标签的尺寸，用于为标签预留空间，避免与节点重叠
+   *
+   * <en/> Size of edge labels for reserving space to prevent overlap with nodes
+   */
+  edgeLabelSize?: Size | ((d?: NodeData) => Size);
+
+  /**
+   * <zh/> 标签在边上的位置，控制标签相对于边的对齐方式
+   *
+   * <en/> Label position on edge, controlling label alignment relative to the edge
+   */
+  edgeLabelPos?: EdgeLabelPos | ((d?: NodeData) => EdgeLabelPos);
+
+  /**
+   * <zh/> 标签与边的偏移距离，用于微调标签位置避免视觉重叠
+   *
+   * <en/> Offset distance between label and edge for fine-tuning label position to avoid visual overlap
+   */
+  edgeLabelOffset?: number | ((d?: NodeData) => number);
+}

package/src/force/attractive.ts

@@ -0,0 +1,71 @@
+import { LayoutModel } from '../util';
+import { AccMap } from './types';
+
+/**
+ * Attractive force based on Hooke's law
+ * Applies spring-like forces between connected nodes
+ */
+export function forceAttractive(dimensions: number = 2) {
+  let preventOverlap: boolean = false;
+
+  function force(model: LayoutModel, accMap: AccMap) {
+    model.forEachEdge((edge) => {
+      const { source, target } = edge;
+      const sourceNode = model.node(source)!;
+      const targetNode = model.node(target)!;
+      if (!sourceNode || !targetNode) return;
+
+      let vecX = targetNode.x - sourceNode.x;
+      let vecY = targetNode.y - sourceNode.y;
+      let vecZ =
+        dimensions === 3 ? (targetNode.z ?? 0) - (sourceNode.z ?? 0) : 0;
+
+      if (!vecX && !vecY) {
+        vecX = 0.01;
+        vecY = 0.01;
+        if (dimensions === 3 && !vecZ) {
+          vecZ = 0.01;
+        }
+      }
+
+      const vecLength = Math.sqrt(vecX * vecX + vecY * vecY + vecZ * vecZ);
+      if (vecLength < Number(sourceNode.size) + Number(targetNode.size)) return;
+
+      const direX = vecX / vecLength;
+      const direY = vecY / vecLength;
+      const direZ = vecZ / vecLength;
+
+      const { linkDistance = 200, edgeStrength = 200 } = edge as any;
+      const diff = linkDistance - vecLength;
+      const param = diff * edgeStrength;
+
+      const massSource = sourceNode.mass || 1;
+      const massTarget = targetNode.mass || 1;
+
+      // 质量占比越大，对另一端影响程度越大
+      const sourceMassRatio = 1 / massSource;
+      const targetMassRatio = 1 / massTarget;
+
+      const disX = direX * param;
+      const disY = direY * param;
+      const disZ = direZ * param;
+
+      accMap[source].x -= disX * sourceMassRatio;
+      accMap[source].y -= disY * sourceMassRatio;
+      accMap[source].z -= disZ * sourceMassRatio;
+      accMap[target].x += disX * targetMassRatio;
+      accMap[target].y += disY * targetMassRatio;
+      accMap[target].z += disZ * targetMassRatio;
+    });
+  }
+
+  force.dimensions = function (_?: number) {
+    return arguments.length ? ((dimensions = _!), force) : dimensions;
+  };
+
+  force.preventOverlap = function (_?: boolean) {
+    return arguments.length ? ((preventOverlap = _!), force) : preventOverlap;
+  };
+
+  return force;
+}