refactor: adapt radial layout node size

Author: yvonneyx

packages/layout/src/radial/index.ts

@@ -13,7 +13,7 @@ import type {
 import {
   cloneFormatData,
   floydWarshall,
-  formatNodeSize,
+  formatNodeSizeToNumber,
   getAdjMatrix,
   getEuclideanDistance,
 } from '../util';
@@ -37,7 +37,7 @@ const DEFAULTS_LAYOUT_OPTIONS: Partial<RadialLayoutOptions> = {
 
 /**
  * <zh/> 径向布局
- * 
+ *
  * <en/> Radial layout
  */
 export class RadialLayout implements Layout<RadialLayoutOptions> {
@@ -193,7 +193,7 @@ export class RadialLayout implements Layout<RadialLayoutOptions> {
     let nodeSizeFunc;
     // stagger the overlapped nodes
     if (preventOverlap) {
-      nodeSizeFunc = formatNodeSize(nodeSize, nodeSpacing);
+      nodeSizeFunc = formatNodeSizeToNumber(nodeSize, nodeSpacing);
       const nonoverlapForceParams: RadialNonoverlapForceOptions = {
         nodes,
         nodeSizeFunc,

packages/layout/src/types.ts

@@ -1,4 +1,5 @@
 import { Edge as IEdge, Graph as IGraph, Node as INode } from '@antv/graphlib';
+import type { Size } from './util/size';
 
 /**
  * <zh/> 节点数据
@@ -240,7 +241,7 @@ export interface CircularLayoutOptions {
    *
    * <en/> Node size (diameter). Used for collision detection when nodes overlap
    */
-  nodeSize?: number | number[] | ((nodeData: Node) => number);
+  nodeSize?: Size | ((nodeData: Node) => Size);
 }
 
 export interface GridLayoutOptions {
@@ -290,7 +291,7 @@ export interface GridLayoutOptions {
    *
    * <en/> Node size (diameter). Used for collision detection when nodes overlap
    */
-  nodeSize?: number | number[] | ((nodeData: Node) => number);
+  nodeSize?: Size | ((nodeData: Node) => Size);
   /**
    * <zh/> 避免重叠时节点的间距 padding。preventOverlap 为 true 时生效
    *
@@ -416,7 +417,7 @@ export interface ConcentricLayoutOptions {
    *
    * <en/> Node size (diameter). Used for collision detection when preventing node overlap
    */
-  nodeSize?: number | PointTuple | ((nodeData: Node) => number);
+  nodeSize?: Size | ((nodeData: Node) => Size);
   /**
    * <zh/> 第一个节点与最后一个节点之间的弧度差
    *
@@ -564,14 +565,14 @@ export interface RadialLayoutOptions {
    *
    * <en/> Node size (diameter). Used for collision detection when preventing node overlap
    */
-  nodeSize?: number | number[] | ((nodeData: Node) => number);
+  nodeSize?: Size | ((nodeData: Node) => Size);
   /**
    * <zh/> preventOverlap 为 true 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距
    *
    * <en/> Effective when preventOverlap is true. The minimum edge spacing when preventing node overlap. It can be a callback function, and set different minimum spacing for different nodes
    * @defaultValue 10
    */
-  nodeSpacing?: number | Function;
+  nodeSpacing?: number | ((nodeData: Node) => number);
   /**
    * <zh/> 防止重叠步骤的最大迭代次数
    *
@@ -674,13 +675,13 @@ export interface D3ForceLayoutOptions {
    *
    * <en/> Node size (diameter). Used for collision detection when preventing node overlapping
    */
-  nodeSize?: number | number[] | ((node?: Node) => number);
+  nodeSize?: Size | ((node?: Node) => Size);
   /**
    * <zh/> preventOverlap 为 true 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距
    *
    * <en/> It takes effect when preventOverlap is true. The minimum spacing of the node edge when preventing node overlapping. It can be a callback function, and set different minimum spacing for different nodes
    */
-  nodeSpacing?: number | number[] | ((node?: Node) => number);
+  nodeSpacing?: number | ((node?: Node) => number);
   /**
    * <zh/> 当前的迭代收敛阈值
    *
@@ -850,7 +851,7 @@ export interface ComboCombinedLayoutOptions {
    * @example
    * ```ts
    * import { ForceLayout } from '@antv/layout';
-   * 
+   *
    * outerLayout: new ForceLayout({
    * gravity: 1,
    * factor: 2,
@@ -870,7 +871,7 @@ export interface ComboCombinedLayoutOptions {
    * @example
    * ```ts
    * import { ConcentricLayout } from '@antv/layout';
-   * 
+   *
    * innerLayout: new ConcentricLayout({
    *  sortBy: 'id'
    *  });
@@ -995,7 +996,7 @@ export interface ForceLayoutOptions extends CommonForceLayoutOptions {
    *
    * <en/> The size of the node (diameter). Used for collision detection when preventing node overlap
    */
-  nodeSize?: number | number[] | ((d?: Node) => number);
+  nodeSize?: Size | ((d?: Node) => Size);
   /**
    * <zh/> preventOverlap 为 true 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距
    *
@@ -1236,7 +1237,7 @@ export interface ForceAtlas2LayoutOptions extends CommonForceLayoutOptions {
    *
    * <en/> Node size (diameter). Used for collision detection when preventing node overlap
    */
-  nodeSize?: number | number[] | ((node?: Node) => number);
+  nodeSize?: Size | ((node?: Node) => Size);
   /**
    * <zh/> 每一次迭代的回调函数
    *

packages/layout/src/util/function.ts

@@ -1,6 +1,6 @@
 import { isFunction, isNumber, isObject } from '@antv/util';
 import { Node } from '../types';
-import type { Size } from './size';
+import { parseSize, type Size } from './size';
 
 /**
  * Format value with multiple types into a function returns number.
@@ -85,50 +85,39 @@ export function formatSizeFn<T extends Node>(
  * @param nodeSpacing
  * @returns
  */
-export const formatNodeSize = (
-  nodeSize: Size | ((nodeData: Node) => Size) | undefined,
-  nodeSpacing: number | Function | undefined,
-): ((nodeData: Node) => Size) => {
+export const formatNodeSizeToNumber = (
+  nodeSize: Size | ((node: Node) => Size) | undefined,
+  nodeSpacing: number | ((node: Node) => number) | undefined,
+): ((node: Node) => number) => {
   let nodeSizeFunc;
-  let nodeSpacingFunc: Function;
-  if (isNumber(nodeSpacing)) {
-    nodeSpacingFunc = () => nodeSpacing;
-  } else if (isFunction(nodeSpacing)) {
-    nodeSpacingFunc = nodeSpacing;
-  } else {
-    nodeSpacingFunc = () => 0;
-  }
+  const nodeSpacingFunc =
+    typeof nodeSpacing === 'function' ? nodeSpacing : () => nodeSpacing || 0;
 
   if (!nodeSize) {
     nodeSizeFunc = (d: Node) => {
-      if (d.data?.bboxSize) {
-        return (
-          Math.max(d.data.bboxSize[0], d.data.bboxSize[1]) + nodeSpacingFunc(d)
-        );
-      }
+      if (d.data?.bboxSize) return d.data?.bboxSize;
       if (d.data?.size) {
-        if (Array.isArray(d.data.size)) {
-          return Math.max(d.data.size[0], d.data.size[1]) + nodeSpacingFunc(d);
-        }
         const dataSize = d.data.size;
-        if (isObject<{ width: number; height: number }>(dataSize)) {
-          const res =
-            dataSize.width > dataSize.height ? dataSize.width : dataSize.height;
-          return res + nodeSpacingFunc(d);
-        }
-        return dataSize + nodeSpacingFunc(d);
+        if (Array.isArray(dataSize)) return dataSize;
+        if (isObject<{ width: number; height: number }>(dataSize))
+          return [dataSize.width, dataSize.height];
+        return dataSize;
       }
-      return 10 + nodeSpacingFunc(d);
+      return 10;
     };
   } else if (Array.isArray(nodeSize)) {
-    nodeSizeFunc = (d: Node) => {
-      const res = nodeSize[0] > nodeSize[1] ? nodeSize[0] : nodeSize[1];
-      return res + nodeSpacingFunc(d);
-    };
+    nodeSizeFunc = (d: Node) => nodeSize;
   } else if (isFunction(nodeSize)) {
-    nodeSizeFunc = nodeSize as (nodeData: Node) => number;
+    nodeSizeFunc = nodeSize;
   } else {
-    nodeSizeFunc = (d: Node) => nodeSize + nodeSpacingFunc(d);
+    nodeSizeFunc = (d: Node) => nodeSize;
   }
-  return nodeSizeFunc;
+
+  const func = (d: Node) => {
+    const nodeSize = nodeSizeFunc(d);
+    const nodeSpacing = nodeSpacingFunc(d);
+    return Math.max(...parseSize(nodeSize)) + nodeSpacing;
+  };
+
+  return func;
 };