@antv/layout 2.0.0-alpha.2 → 2.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/layout",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "description": "graph layout algorithm",
   "main": "dist/index.min.js",
   "module": "lib/index.js",

package/src/algorithm/antv-dagre/index.ts

@@ -1,9 +1,9 @@
 import { isNumber } from '@antv/util';
-import { BaseLayout } from '../base-layout';
 import type { NodeData, PointObject } from '../../types';
 import { parsePoint } from '../../util';
 import { formatNumberFn, formatSizeFn } from '../../util/format';
 import { parseSize } from '../../util/size';
+import { BaseLayout } from '../base-layout';
 import { DagreGraph, GraphNode } from './graph';
 import { layout } from './layout';
 import { AntVDagreLayoutOptions } from './types';
@@ -50,18 +50,15 @@ export class AntVDagreLayout extends BaseLayout<AntVDagreLayoutOptions> {
       sortByCombo,
       // focusNode,
       preset,
+      ranksepFunc,
+      nodesepFunc,
     } = options;
 
-    const ranksepfunc = formatNumberFn(
-      ranksep,
-      DEFAULTS_LAYOUT_OPTIONS.ranksep as number,
-    );
-    const nodesepfunc = formatNumberFn(
-      nodesep,
-      DEFAULTS_LAYOUT_OPTIONS.nodesep as number,
-    );
+    const ranksepfunc = formatNumberFn(ranksepFunc, ranksep ?? 50);
+    const nodesepfunc = formatNumberFn(nodesepFunc, nodesep ?? 50);
     let horisep: (d?: NodeData | undefined) => number = nodesepfunc;
     let vertisep: (d?: NodeData | undefined) => number = ranksepfunc;
+
     if (rankdir === 'LR' || rankdir === 'RL') {
       horisep = ranksepfunc;
       vertisep = nodesepfunc;
@@ -80,9 +77,10 @@ export class AntVDagreLayout extends BaseLayout<AntVDagreLayoutOptions> {
     const edges = this.model.edges();
 
     nodes.forEach((node) => {
-      const size = parseSize(nodeSizeFunc(node));
-      const verti = vertisep(node);
-      const hori = horisep(node);
+      const raw = node._original;
+      const size = parseSize(nodeSizeFunc(raw));
+      const verti = vertisep(raw);
+      const hori = horisep(raw);
       const width = size[0] + 2 * hori;
       const height = size[1] + 2 * verti;
       const layer = node.data?.layer;
@@ -150,6 +148,7 @@ export class AntVDagreLayout extends BaseLayout<AntVDagreLayoutOptions> {
       acyclicer: 'greedy',
       ranker,
       rankdir,
+      nodesep,
       align,
     });
 

package/src/algorithm/antv-dagre/types.ts

@@ -1,5 +1,5 @@
-import { BaseLayoutOptions } from '../base-layout';
 import { ID, NodeData, Point, Size } from '../../types';
+import { BaseLayoutOptions } from '../base-layout';
 
 export type DagreRankdir =
   | 'TB'
@@ -83,7 +83,7 @@ export interface AntVDagreLayoutOptions extends BaseLayoutOptions {
    * <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);
+  nodesep?: number;
   /**
    * <zh/> 层间距（px）
    *
@@ -94,7 +94,29 @@ export interface AntVDagreLayoutOptions extends BaseLayoutOptions {
    * <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);
+  ranksep?: number;
+  /**
+   * <zh/> 节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距
+   *
+   * <en/> The callback function of the node spacing (px), which can be used to set different node spacing for different nodes
+   * @remarks
+   * <zh/> 在 rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在 rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效
+   *
+   * <en/> The horizontal spacing of the node in the case of rankdir is 'TB' or 'BT', and the vertical spacing of the node in the case of rankdir is 'LR' or 'RL'. The priority is higher than nodesep, that is, if nodesepFunc is set, nodesep does not take effect
+   * @param d - <zh/> 节点实例 | <en/> Node instance
+   */
+  nodesepFunc?: (d?: NodeData) => number;
+  /**
+   * <zh/> 层间距（px）的回调函数
+   *
+   * <en/> The callback function of the layer spacing (px)
+   * @remarks
+   * <zh/> 在 rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在 rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效
+   *
+   * <en/> The vertical spacing of adjacent layers in the case of rankdir is 'TB' or 'BT', and the horizontal spacing of adjacent layers in the case of rankdir is 'LR' or 'RL'. The priority is higher than nodesep, that is, if nodesepFunc is set, nodesep does not take effect
+   * @param d - <zh/> 节点实例 | <en/> Node instance
+   */
+  ranksepFunc?: (d?: NodeData) => number;
   /**
    * <zh/> 是否同时计算边上的的控制点位置
    *

package/src/algorithm/base-layout.ts

@@ -2,12 +2,7 @@ import type { GraphLib } from '../model/data';
 import { RuntimeContext } from '../runtime/context';
 import { Supervisor } from '../runtime/supervisor';
 import type { GraphData, GraphEdge, GraphNode, Point } from '../types';
-import { mergeOptions } from '../util';
-import type {
-  BaseLayoutOptions,
-  Layout,
-  LayoutWithIterations,
-} from './types';
+import type { BaseLayoutOptions, Layout, LayoutWithIterations } from './types';
 
 export type { BaseLayoutOptions };
 
@@ -35,18 +30,28 @@ export abstract class BaseLayout<
   protected supervisor: Supervisor | null = null;
 
   constructor(options?: Partial<O>) {
-    this.initialOptions = mergeOptions<O>(this.getDefaultOptions(), options);
+    this.initialOptions = this.mergeOptions<O>(
+      this.getDefaultOptions(),
+      options,
+    );
   }
 
   get options(): O {
     return this.runtimeOptions || this.initialOptions;
   }
 
+  protected mergeOptions<O>(base: O, patch?: Partial<O>): O {
+    return Object.assign({}, base, patch || {});
+  }
+
   public async execute(
     data: GraphData,
     userOptions?: Partial<O>,
   ): Promise<void> {
-    this.runtimeOptions = mergeOptions<O>(this.initialOptions, userOptions);
+    this.runtimeOptions = this.mergeOptions<O>(
+      this.initialOptions,
+      userOptions,
+    );
     const { node, edge, enableWorker } = this.runtimeOptions;
 
     this.context = new RuntimeContext(data, { node, edge });

package/src/algorithm/circular/index.ts

@@ -1,8 +1,8 @@
 import { isNil } from '@antv/util';
-import { BaseLayout } from '../base-layout';
 import { normalizeViewport, orderByDegree, orderByTopology } from '../../util';
 import { applySingleNodeLayout } from '../../util/common';
 import { formatNodeSizeFn } from '../../util/format';
+import { BaseLayout } from '../base-layout';
 import type { CircularLayoutOptions } from './types';
 
 export type { CircularLayoutOptions };
@@ -61,7 +61,7 @@ export class CircularLayout extends BaseLayout<CircularLayoutOptions> {
       orderByTopology(this.model, true);
     } else if (ordering === 'degree') {
       // layout according to the descent order of degrees
-      orderByDegree(this.model);
+      orderByDegree(this.model, 'asc');
     }
 
     let { radius, startRadius, endRadius } = this.options;

package/src/algorithm/combo-combined/index.ts

@@ -1,5 +1,3 @@
-import { BaseLayout, isLayoutWithIterations } from '../base-layout';
-import type { Layout } from '../types';
 import { registry } from '../../registry';
 import type {
   GraphData,
@@ -11,6 +9,8 @@ import type {
 } from '../../types';
 import { normalizeViewport, parseSize } from '../../util';
 import { formatNodeSizeFn, formatNumberFn } from '../../util/format';
+import { BaseLayout, isLayoutWithIterations } from '../base-layout';
+import type { Layout } from '../types';
 import type {
   ComboCombinedLayoutConfig,
   ComboCombinedLayoutOptions,
@@ -34,9 +34,9 @@ const DEFAULT_OPTIONS: ComboCombinedLayoutOptions = {
       ? { type: 'force', preventOverlap: true }
       : { type: 'concentric', preventOverlap: true },
   nodeSize: 20,
-  nodeSpacing: 10,
-  comboPadding: 20,
-  comboSpacing: 80,
+  nodeSpacing: 0,
+  comboPadding: 10,
+  comboSpacing: 0,
 };
 
 const ROOT_ID = 'root';

package/src/algorithm/d3-force/index.ts

@@ -10,10 +10,10 @@ import {
   forceX,
   forceY,
 } from 'd3-force';
-import { BaseLayoutWithIterations } from '../base-layout';
 import type { ID, Position } from '../../types';
 import { assignDefined, normalizeViewport } from '../../util';
 import { formatNodeSizeFn } from '../../util/format';
+import { BaseLayoutWithIterations } from '../base-layout';
 import forceInABox from './force-in-a-box';
 import type {
   D3ForceCommonOptions,
@@ -25,29 +25,20 @@ import type {
 export type { D3ForceLayoutOptions };
 
 const DEFAULTS_LAYOUT_OPTIONS: Partial<D3ForceLayoutOptions> = {
-  centerStrength: 1,
+  link: {
+    id: (d) => String(d.id),
+  },
 
-  edgeId: (d) => String(d.id),
-  linkDistance: 30,
-  edgeStrength: undefined,
-  edgeIterations: 1,
+  manyBody: {
+    strength: -30,
+  },
 
   preventOverlap: false,
   nodeSize: 10,
   nodeSpacing: 0,
-  collideStrength: 1,
-  collideIterations: 1,
-
-  nodeStrength: -30,
-  distanceMin: undefined,
-  distanceMax: undefined,
-  theta: undefined,
 
-  alpha: 1,
-  alphaMin: 0.001,
-  alphaDecay: 1 - Math.pow(0.001, 1 / 300),
-  alphaTarget: 0,
-  velocityDecay: 0.4,
+  x: false,
+  y: false,
 
   clustering: false,
   clusterNodeStrength: -1,
@@ -84,7 +75,7 @@ export class D3ForceLayout<
     return DEFAULTS_LAYOUT_OPTIONS as T;
   }
 
-  protected mergeOptions(base: T, patch?: Partial<T>): T {
+  protected mergeOptions<T>(base: T, patch?: Partial<T>): T {
     return deepMix({}, base, patch) as T;
   }
 
@@ -191,12 +182,6 @@ export class D3ForceLayout<
 
   protected parseOptions(options: Partial<T>): T {
     const _ = options;
-    // process nodeSize
-    if (_.collide && _.collide?.radius === undefined) {
-      _.collide = _.collide || {};
-      // @ts-ignore
-      _.collide.radius = _.nodeSize ?? 10;
-    }
     // process iterations
     if (_.iterations === undefined) {
       if (_.link && _.link.iterations === undefined) {
@@ -301,22 +286,17 @@ export class D3ForceLayout<
   }
 
   private getCenterOptions(options: T): T['center'] | undefined {
-    if (
-      !options.width ||
-      !options.height ||
-      options.centerStrength !== undefined
-    ) {
-      const viewport = normalizeViewport({
-        width: options.width,
-        height: options.height,
-      });
-      return assignDefined({}, options.center || {}, {
-        x: viewport.width / 2,
-        y: viewport.height / 2,
-        strength: options.centerStrength,
-      }) as T['center'];
-    }
-    return undefined;
+    if (options.center === false) return undefined;
+
+    const viewport = normalizeViewport({
+      width: options.width,
+      height: options.height,
+    });
+    return assignDefined({}, options.center || {}, {
+      x: viewport.width / 2,
+      y: viewport.height / 2,
+      strength: options.centerStrength,
+    }) as T['center'];
   }
 
   protected setupCenterForce(simulation: Simulation<N, E>, options: T) {
@@ -342,21 +322,14 @@ export class D3ForceLayout<
   }
 
   private getManyBodyOptions(options: T): D3ForceLayoutOptions['manyBody'] {
-    if (
-      options.manyBody !== undefined ||
-      options.nodeStrength !== undefined ||
-      options.distanceMin !== undefined ||
-      options.distanceMax !== undefined ||
-      options.theta !== undefined
-    ) {
-      return assignDefined({}, options.manyBody || {}, {
-        strength: options.nodeStrength,
-        distanceMin: options.distanceMin,
-        distanceMax: options.distanceMax,
-        theta: options.theta,
-      });
-    }
-    return undefined;
+    if (options.manyBody === false) return undefined;
+
+    return assignDefined({}, options.manyBody || {}, {
+      strength: options.nodeStrength,
+      distanceMin: options.distanceMin,
+      distanceMax: options.distanceMax,
+      theta: options.theta,
+    });
   }
 
   protected setupManyBodyForce(simulation: Simulation<N, E>, options: T) {
@@ -386,21 +359,14 @@ export class D3ForceLayout<
   }
 
   private getLinkOptions(options: T): D3ForceLayoutOptions['link'] {
-    if (
-      options.link ||
-      options.edgeId !== undefined ||
-      options.linkDistance !== undefined ||
-      options.edgeStrength !== undefined ||
-      options.edgeIterations !== undefined
-    ) {
-      return assignDefined({}, options.link || {}, {
-        id: options.edgeId,
-        distance: options.linkDistance,
-        strength: options.edgeStrength,
-        iterations: options.edgeIterations,
-      });
-    }
-    return undefined;
+    if (options.link === false) return undefined;
+
+    return assignDefined({}, options.link || {}, {
+      id: options.edgeId,
+      distance: options.linkDistance,
+      strength: options.edgeStrength,
+      iterations: options.edgeIterations,
+    });
   }
 
   protected setupLinkForce(simulation: Simulation<N, E>, options: T) {
@@ -429,30 +395,26 @@ export class D3ForceLayout<
   }
 
   private getCollisionOptions(options: T): D3ForceLayoutOptions['collide'] {
-    if (!options.preventOverlap) return undefined;
     if (
-      options.collide !== undefined ||
-      options.nodeSize !== undefined ||
-      options.nodeSpacing !== undefined ||
-      options.collideStrength !== undefined ||
-      options.collideIterations !== undefined
-    ) {
-      const radius =
-        options.nodeSize || options.nodeSpacing
-          ? (d: NodeDatum) =>
-              formatNodeSizeFn(
-                options.nodeSize,
-                options.nodeSpacing,
-              )(d._original) / 2
-          : undefined;
-
-      return assignDefined({}, options.collide || {}, {
-        radius,
-        strength: options.collideStrength,
-        iterations: options.collideIterations,
-      });
-    }
-    return undefined;
+      options.preventOverlap === false &&
+      (options.collide === false || options.collide === undefined)
+    )
+      return undefined;
+
+    const radius =
+      options.nodeSize || options.nodeSpacing
+        ? (d: NodeDatum) =>
+            formatNodeSizeFn(
+              options.nodeSize,
+              options.nodeSpacing,
+            )(d._original) / 2
+        : undefined;
+
+    return assignDefined({}, options.collide || {}, {
+      radius: (options.collide && options.collide.radius) || radius,
+      strength: options.collideStrength,
+      iterations: options.collideIterations,
+    });
   }
 
   protected setupCollisionForce(simulation: Simulation<N, E>, options: T) {
@@ -479,20 +441,13 @@ export class D3ForceLayout<
   }
 
   private getXForceOptions(options: T): D3ForceLayoutOptions['x'] {
-    if (
-      options.x !== undefined ||
-      options.forceXPosition !== undefined ||
-      options.forceXStrength !== undefined ||
-      options.width !== undefined ||
-      options.height !== undefined
-    ) {
-      const center = this.getCenterOptions(options);
-      return assignDefined({}, options.x || {}, {
-        x: options.forceXPosition ?? (center && center.x),
-        strength: options.forceXStrength,
-      });
-    }
-    return undefined;
+    if (options.x === false) return undefined;
+
+    const center = this.getCenterOptions(options);
+    return assignDefined({}, options.x || {}, {
+      x: options.forceXPosition ?? (center && center.x),
+      strength: options.forceXStrength,
+    });
   }
 
   protected setupXForce(simulation: Simulation<N, E>, options: T) {
@@ -516,21 +471,13 @@ export class D3ForceLayout<
   }
 
   private getYForceOptions(options: T): D3ForceLayoutOptions['y'] {
-    if (
-      options.y !== undefined ||
-      options.forceYPosition !== undefined ||
-      options.forceYStrength !== undefined ||
-      options.width !== undefined ||
-      options.height !== undefined
-    ) {
-      const center = this.getCenterOptions(options);
-      return assignDefined({}, options.y || {}, {
-        y: options.forceYPosition ?? (center && center.y),
-        strength: options.forceYStrength,
-      });
-    }
+    if (options.y === false) return undefined;
 
-    return undefined;
+    const center = this.getCenterOptions(options);
+    return assignDefined({}, options.y || {}, {
+      y: options.forceYPosition ?? (center && center.y),
+      strength: options.forceYStrength,
+    });
   }
 
   protected setupYForce(simulation: Simulation<N, E>, options: T) {

package/src/util/object.ts

@@ -48,7 +48,3 @@ export function assignDefined<T extends object>(
   });
   return target;
 }
-
-export function mergeOptions<T extends object>(base: T, patch?: Partial<T>): T {
-  return Object.assign({}, base, patch || {});
-}

package/src/util/order.ts

@@ -24,10 +24,14 @@ function sort<N extends NodeData = NodeData>(
 
 export function orderByDegree<N extends NodeData = NodeData>(
   model: GraphLib<N>,
+  order: 'asc' | 'desc' = 'desc',
 ): GraphLib<N> {
   return sort(model, (nodeA, nodeB) => {
     const degreeA = model.degree(nodeA.id);
     const degreeB = model.degree(nodeB.id);
+    if(order === 'asc') {
+      return degreeA - degreeB; // ascending order
+    }
     return degreeB - degreeA; // descending order
   });
 }