@antv/layout 0.3.22 → 0.3.24

package/lib/layout/types.d.ts

@@ -1,4 +1,4 @@
-import { Base } from "./base";
+import { Base } from './base';
 export interface Node {
     id: string;
 }
@@ -77,7 +77,7 @@ export interface ComboTree {
     children?: ComboTree[];
     depth?: number;
     parentId?: string;
-    itemType?: "node" | "combo";
+    itemType?: 'node' | 'combo';
     [key: string]: unknown;
 }
 export interface ComboConfig {
@@ -87,7 +87,7 @@ export interface ComboConfig {
     depth?: number;
 }
 export interface CircularLayoutOptions {
-    type: "circular";
+    type: 'circular';
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -96,7 +96,7 @@ export interface CircularLayoutOptions {
     endRadius?: number | null;
     clockwise?: boolean;
     divisions?: number;
-    ordering?: "topology" | "topology-directed" | "degree" | null;
+    ordering?: 'topology' | 'topology-directed' | 'degree' | null;
     angleRatio?: number;
     workerEnabled?: boolean;
     startAngle?: number;
@@ -104,7 +104,7 @@ export interface CircularLayoutOptions {
     onLayoutEnd?: () => void;
 }
 export interface ComboForceLayoutOptions {
-    type: "comboForce";
+    type: 'comboForce';
     center?: PointTuple;
     maxIteration?: number;
     linkDistance?: number | ((d?: unknown) => number);
@@ -134,7 +134,7 @@ export interface ComboForceLayoutOptions {
     workerEnabled?: boolean;
 }
 export interface ComboCombinedLayoutOptions {
-    type: "comboConcentricForce";
+    type: 'comboConcentricForce';
     center?: PointTuple;
     nodeSize?: number | number[] | ((d?: any) => number) | undefined;
     spacing?: number | number[] | ((d?: any) => number) | undefined;
@@ -144,7 +144,7 @@ export interface ComboCombinedLayoutOptions {
     innerLayout?: Base;
 }
 export interface ConcentricLayoutOptions {
-    type: "concentric";
+    type: 'concentric';
     center?: PointTuple;
     preventOverlap?: boolean;
     nodeSize?: number | PointTuple;
@@ -161,9 +161,9 @@ export interface ConcentricLayoutOptions {
     onLayoutEnd?: () => void;
 }
 export interface DagreLayoutOptions {
-    type: "dagre";
-    rankdir?: "TB" | "BT" | "LR" | "RL";
-    align?: "UL" | "UR" | "DL" | "DR";
+    type: 'dagre';
+    rankdir?: 'TB' | 'BT' | 'LR' | 'RL';
+    align?: 'UL' | 'UR' | 'DL' | 'DR';
     begin?: PointTuple;
     nodeSize?: number | number[] | undefined;
     nodesep?: number;
@@ -182,9 +182,9 @@ export interface DagreLayoutOptions {
     ranksepFunc?: ((d?: any) => number) | undefined;
 }
 export interface DagreCompoundLayoutOptions {
-    type?: "dagreCompound";
-    rankdir?: "TB" | "BT" | "LR" | "RL";
-    align?: "UL" | "UR" | "DL" | "DR";
+    type?: 'dagreCompound';
+    rankdir?: 'TB' | 'BT' | 'LR' | 'RL';
+    align?: 'UL' | 'UR' | 'DL' | 'DR';
     begin?: PointTuple;
     nodeSize?: number | number[] | undefined;
     nodesep?: number;
@@ -195,7 +195,7 @@ export interface DagreCompoundLayoutOptions {
     onLayoutEnd?: () => void;
 }
 export interface FruchtermanLayoutOptions {
-    type: "fruchterman";
+    type: 'fruchterman';
     center?: PointTuple;
     maxIteration?: number;
     width?: number;
@@ -223,7 +223,7 @@ export interface CentripetalOptions {
     };
 }
 export interface Force2LayoutOptions {
-    type?: "force2";
+    type?: 'force2';
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -262,7 +262,7 @@ export interface Force2LayoutOptions {
     }) => void;
 }
 export interface GForceLayoutOptions {
-    type?: "gForce";
+    type?: 'gForce';
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -291,7 +291,7 @@ type INode = OutNode & {
     size: number | PointTuple;
 };
 export interface GridLayoutOptions {
-    type: "grid";
+    type: 'grid';
     width?: number;
     height?: number;
     begin?: PointTuple;
@@ -310,14 +310,14 @@ export interface GridLayoutOptions {
     onLayoutEnd?: () => void;
 }
 export interface MDSLayoutOptions {
-    type: "mds";
+    type: 'mds';
     center?: PointTuple;
     linkDistance?: number;
     workerEnabled?: boolean;
     onLayoutEnd?: () => void;
 }
 export interface RandomLayoutOptions {
-    type: "random";
+    type: 'random';
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -325,7 +325,7 @@ export interface RandomLayoutOptions {
     onLayoutEnd?: () => void;
 }
 export interface ForceLayoutOptions {
-    type: "force";
+    type: 'force';
     center?: PointTuple;
     linkDistance?: number | ((d?: any) => number) | undefined;
     edgeStrength?: number | ((d?: any) => number) | undefined;
@@ -349,7 +349,7 @@ export interface ForceLayoutOptions {
     workerEnabled?: boolean;
 }
 export interface RadialLayoutOptions {
-    type: "radial";
+    type: 'radial';
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -365,10 +365,11 @@ export interface RadialLayoutOptions {
     sortBy?: string | undefined;
     sortStrength?: number;
     workerEnabled?: boolean;
+    initWithMDS?: boolean;
     onLayoutEnd?: () => void;
 }
 export interface FruchtermanGPULayoutOptions {
-    type: "fruchterman-gpu";
+    type: 'fruchterman-gpu';
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -382,7 +383,7 @@ export interface FruchtermanGPULayoutOptions {
     onLayoutEnd?: () => void;
 }
 export interface GForceGPULayoutOptions {
-    type: "gForce-gpu";
+    type: 'gForce-gpu';
     center?: PointTuple;
     linkDistance?: number | ((d?: any) => number) | undefined;
     nodeStrength?: number | ((d?: any) => number) | undefined;
@@ -400,7 +401,7 @@ export interface GForceGPULayoutOptions {
     gpuEnabled?: boolean;
 }
 export interface ForceAtlas2LayoutOptions {
-    type: "forceAtlas2";
+    type: 'forceAtlas2';
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -420,13 +421,13 @@ export interface ForceAtlas2LayoutOptions {
     prune?: boolean;
 }
 export interface ERLayoutOptions {
-    type: "er";
+    type: 'er';
     width?: number;
     height?: number;
     nodeMinGap?: number;
 }
 export declare namespace ILayout {
-    type LayoutTypes = "grid" | "random" | "force" | "circular" | "dagre" | "radial" | "concentric" | "mds" | "fruchterman" | "fruchterman-gpu" | "gForce" | "gForce-gpu" | "comboForce" | "forceAtlas2" | "er";
+    type LayoutTypes = 'grid' | 'random' | 'force' | 'circular' | 'dagre' | 'radial' | 'concentric' | 'mds' | 'fruchterman' | 'fruchterman-gpu' | 'gForce' | 'gForce-gpu' | 'comboForce' | 'forceAtlas2' | 'er';
     type LayoutOptions = GridLayoutOptions | RandomLayoutOptions | ForceLayoutOptions | CircularLayoutOptions | DagreLayoutOptions | RadialLayoutOptions | ConcentricLayoutOptions | MDSLayoutOptions | FruchtermanLayoutOptions | FruchtermanGPULayoutOptions | GForceLayoutOptions | GForceGPULayoutOptions | ComboForceLayoutOptions | ComboCombinedLayoutOptions | ForceAtlas2LayoutOptions | ERLayoutOptions;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/layout",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "description": "graph layout algorithm",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/layout/comboCombined.ts

@@ -3,18 +3,32 @@
  * @author shiwu.wyy@antfin.com
  */
 
- import {
+import {
   Edge,
   Combo,
   OutNode,
   PointTuple,
   ComboTree,
-  ComboCombinedLayoutOptions
-} from "./types";
+  ComboCombinedLayoutOptions,
+} from './types';
 import { FORCE_LAYOUT_TYPE_MAP } from './constants';
-import { Base } from "./base";
-import { isArray, isNumber, isFunction, traverseTreeUp, isObject, getLayoutBBox } from "../util";
-import { CircularLayout, ConcentricLayout, GridLayout, RadialLayout, GForceLayout, MDSLayout } from ".";
+import { Base } from './base';
+import {
+  isArray,
+  isNumber,
+  isFunction,
+  traverseTreeUp,
+  isObject,
+  getLayoutBBox,
+} from '../util';
+import {
+  CircularLayout,
+  ConcentricLayout,
+  GridLayout,
+  RadialLayout,
+  GForceLayout,
+  MDSLayout,
+} from '.';
 
 type Node = OutNode & {
   depth?: number;
@@ -29,7 +43,6 @@ type Node = OutNode & {
  * combined two layouts (inner and outer) for graph with combos
  */
 export class ComboCombinedLayout extends Base {
-
   /** 布局中心 */
   public center: PointTuple = [0, 0];
 
@@ -52,7 +65,11 @@ export class ComboCombinedLayout extends Base {
   public outerLayout: any;
 
   /** combo 内部的布局算法，默认为 concentric */
-  public innerLayout: ConcentricLayout | CircularLayout | GridLayout | RadialLayout;
+  public innerLayout:
+    | ConcentricLayout
+    | CircularLayout
+    | GridLayout
+    | RadialLayout;
 
   /** Combo 内部的 padding */
   public comboPadding:
@@ -101,7 +118,7 @@ export class ComboCombinedLayout extends Base {
   public run() {
     const self = this;
     const { nodes, edges, combos, comboEdges, center } = self;
-    
+
     const nodeMap: any = {};
     nodes.forEach((node) => {
       nodeMap[node.id] = node;
@@ -128,10 +145,15 @@ export class ComboCombinedLayout extends Base {
         fx: innerNode.fx || comboMap[cTree.id].fx,
         fy: innerNode.fy || comboMap[cTree.id].fy,
         mass: innerNode.mass || comboMap[cTree.id].mass,
-        size: innerNode.size
+        size: innerNode.size,
       };
       outerNodes.push(oNode);
-      if (!isNaN(oNode.x) && oNode.x !== 0 && !isNaN(oNode.y) && oNode.y !== 0) {
+      if (
+        !isNaN(oNode.x) &&
+        oNode.x !== 0 &&
+        !isNaN(oNode.y) &&
+        oNode.y !== 0
+      ) {
         allHaveNoPosition = false;
       } else {
         oNode.x = Math.random() * 100;
@@ -148,7 +170,12 @@ export class ComboCombinedLayout extends Base {
       // 代表节点的节点
       const oNode: Node = { ...node };
       outerNodes.push(oNode);
-      if (!isNaN(oNode.x) && oNode.x !== 0 && !isNaN(oNode.y) && oNode.y !== 0) {
+      if (
+        !isNaN(oNode.x) &&
+        oNode.x !== 0 &&
+        !isNaN(oNode.y) &&
+        oNode.y !== 0
+      ) {
         allHaveNoPosition = false;
       } else {
         oNode.x = Math.random() * 100;
@@ -161,12 +188,14 @@ export class ComboCombinedLayout extends Base {
       const sourceAncestorId = nodeAncestorIdMap[edge.source] || edge.source;
       const targetAncestorId = nodeAncestorIdMap[edge.target] || edge.target;
       // 若两个点的祖先都在力导图的节点中，且是不同的节点，创建一条链接两个祖先的边到力导图的边中
-      if (sourceAncestorId !== targetAncestorId &&
+      if (
+        sourceAncestorId !== targetAncestorId &&
         outerNodeIds.includes(sourceAncestorId) &&
-        outerNodeIds.includes(targetAncestorId)) {
+        outerNodeIds.includes(targetAncestorId)
+      ) {
         outerEdges.push({
           source: sourceAncestorId,
-          target: targetAncestorId
+          target: targetAncestorId,
         });
       }
     });
@@ -179,19 +208,22 @@ export class ComboCombinedLayout extends Base {
       } else {
         const outerData = {
           nodes: outerNodes,
-          edges: outerEdges
+          edges: outerEdges,
         };
 
         // 需要使用一个同步的布局
         // @ts-ignore
-        const outerLayout = this.outerLayout || new GForceLayout({
-          gravity: 1,
-          factor: 4,
-          linkDistance: (edge: any, source: any, target: any) => {
-            const nodeSize = ((source.size?.[0] || 30) + (target.size?.[0] || 30)) / 2;
-            return Math.min(nodeSize * 1.5, 700);
-          }
-        });
+        const outerLayout =
+          this.outerLayout ||
+          new GForceLayout({
+            gravity: 1,
+            factor: 4,
+            linkDistance: (edge: any, source: any, target: any) => {
+              const nodeSize =
+                ((source.size?.[0] || 30) + (target.size?.[0] || 30)) / 2;
+              return Math.min(nodeSize * 1.5, 700);
+            },
+          });
         const outerLayoutType = outerLayout.getType?.();
         outerLayout.updateCfg({
           center,
@@ -201,7 +233,8 @@ export class ComboCombinedLayout extends Base {
         });
         // 若所有 outerNodes 都没有位置，且 outerLayout 是力导家族的布局，则先执行 preset mds 或 grid
         if (allHaveNoPosition && FORCE_LAYOUT_TYPE_MAP[outerLayoutType]) {
-          const outerLayoutPreset = outerNodes.length < 100 ? new MDSLayout() : new GridLayout();
+          const outerLayoutPreset =
+            outerNodes.length < 100 ? new MDSLayout() : new GridLayout();
           outerLayoutPreset.layout(outerData);
         }
         outerLayout.layout(outerData);
@@ -235,8 +268,8 @@ export class ComboCombinedLayout extends Base {
       if (!innerGraph) continue;
       innerGraph.nodes.forEach((node: OutNode) => {
         if (!innerGraph.visited) {
-          node.x += (innerGraph.x || 0);
-          node.y += (innerGraph.y || 0);
+          node.x += innerGraph.x || 0;
+          node.y += innerGraph.y || 0;
         }
         if (nodeMap[node.id]) {
           nodeMap[node.id].x = node.x;
@@ -257,7 +290,9 @@ export class ComboCombinedLayout extends Base {
     const innerGraphs: any = {};
 
     // @ts-ignore
-    const innerGraphLayout: any = this.innerLayout || (new ConcentricLayout({ sortBy: 'id' }));
+    const innerGraphLayout: any =
+      this.innerLayout ||
+      new ConcentricLayout({ type: 'concentric', sortBy: 'id' });
     innerGraphLayout.center = [0, 0];
     innerGraphLayout.preventOverlap = true;
     innerGraphLayout.nodeSpacing = spacing;
@@ -270,11 +305,13 @@ export class ComboCombinedLayout extends Base {
         if (!treeNode.children?.length) {
           // 空 combo
           if (treeNode.itemType === 'combo') {
-            const treeNodeSize = padding ? [padding * 2, padding * 2] : [30, 30];
+            const treeNodeSize = padding
+              ? [padding * 2, padding * 2]
+              : [30, 30];
             innerGraphs[treeNode.id] = {
               id: treeNode.id,
               nodes: [],
-              size: treeNodeSize
+              size: treeNodeSize,
             };
           }
         } else {
@@ -287,19 +324,25 @@ export class ComboCombinedLayout extends Base {
           const innerGraphNodeIds = innerGraphNodes.map((node) => node.id);
           const innerGraphData = {
             nodes: innerGraphNodes,
-            edges: edges.filter((edge) => innerGraphNodeIds.includes(edge.source) && innerGraphNodeIds.includes(edge.target))
+            edges: edges.filter(
+              (edge) =>
+                innerGraphNodeIds.includes(edge.source) &&
+                innerGraphNodeIds.includes(edge.target)
+            ),
           };
           let minNodeSize = Infinity;
           innerGraphNodes.forEach((node) => {
             // @ts-ignore
-            if (!node.size) node.size = innerGraphs[node.id]?.size || nodeSize?.(node) || [30, 30];
+            if (!node.size)
+              node.size = innerGraphs[node.id]?.size ||
+                (nodeSize as Function)?.(node) || [30, 30];
             if (isNumber(node.size)) node.size = [node.size, node.size];
             if (minNodeSize > node.size[0]) minNodeSize = node.size[0];
             if (minNodeSize > node.size[1]) minNodeSize = node.size[1];
           });
 
           // 根据节点数量、spacing，调整布局参数
-          
+
           innerGraphLayout.layout(innerGraphData);
           const { minX, minY, maxX, maxY } = getLayoutBBox(innerGraphNodes);
           // move the innerGraph to [0, 0],for later controled by parent layout
@@ -308,11 +351,14 @@ export class ComboCombinedLayout extends Base {
             node.x -= center.x;
             node.y -= center.y;
           });
-          const innerGraphSize = Math.max(maxX - minX, maxY - minY, minNodeSize) + padding * 2;
+          const innerGraphWidth =
+            Math.max(maxX - minX, minNodeSize) + padding * 2;
+          const innerGraphHeight =
+            Math.max(maxY - minY, minNodeSize) + padding * 2;
           innerGraphs[treeNode.id] = {
             id: treeNode.id,
             nodes: innerGraphNodes,
-            size: [innerGraphSize, innerGraphSize]
+            size: [innerGraphWidth, innerGraphHeight],
           };
         }
         return true;
@@ -347,8 +393,10 @@ export class ComboCombinedLayout extends Base {
           if (isArray(d.size)) {
             const res = d.size[0] > d.size[1] ? d.size[0] : d.size[1];
             return (res + spacing) / 2;
-          }  if (isObject(d.size)) {
-            const res = d.size.width > d.size.height ? d.size.width : d.size.height;
+          }
+          if (isObject(d.size)) {
+            const res =
+              d.size.width > d.size.height ? d.size.width : d.size.height;
             return (res + spacing) / 2;
           }
           return (d.size + spacing) / 2;
@@ -392,6 +440,6 @@ export class ComboCombinedLayout extends Base {
     this.comboPadding = comboPaddingFunc;
   }
   public getType() {
-    return "comboCombined";
+    return 'comboCombined';
   }
 }

package/src/layout/radial/radial.ts

@@ -9,8 +9,8 @@ import {
   OutNode,
   Edge,
   Matrix,
-  RadialLayoutOptions
-} from "../types";
+  RadialLayoutOptions,
+} from '../types';
 import {
   isNaN,
   isArray,
@@ -19,13 +19,13 @@ import {
   isString,
   floydWarshall,
   getAdjMatrix,
-  isObject
-} from "../../util";
-import { Base } from "../base";
-import MDS from "./mds";
+  isObject,
+} from '../../util';
+import { Base } from '../base';
+import MDS from './mds';
 import RadialNonoverlapForce, {
-  RadialNonoverlapForceParam
-} from "./radialNonoverlapForce";
+  RadialNonoverlapForceParam,
+} from './radialNonoverlapForce';
 
 type INode = OutNode & {
   size?: number | PointTuple;
@@ -123,6 +123,8 @@ export class RadialLayout extends Base {
 
   public onLayoutEnd: () => void;
 
+  public initWithMDS: boolean;
+
   constructor(options?: RadialLayoutOptions) {
     super();
     this.updateCfg(options);
@@ -140,7 +142,8 @@ export class RadialLayout extends Base {
       strictRadial: true,
       maxPreventOverlapIteration: 200,
       sortBy: undefined,
-      sortStrength: 10
+      sortStrength: 10,
+      initWithMDS: true,
     };
   }
 
@@ -156,10 +159,10 @@ export class RadialLayout extends Base {
       return;
     }
 
-    if (!self.width && typeof window !== "undefined") {
+    if (!self.width && typeof window !== 'undefined') {
       self.width = window.innerWidth;
     }
-    if (!self.height && typeof window !== "undefined") {
+    if (!self.height && typeof window !== 'undefined') {
       self.height = window.innerHeight;
     }
     if (!self.center) {
@@ -245,25 +248,34 @@ export class RadialLayout extends Base {
     self.weights = W;
 
     // the initial positions from mds
-    const mds = new MDS({ linkDistance, distances: eIdealD });
-    let positions = mds.layout();
-    positions.forEach((p: PointTuple) => {
-      if (isNaN(p[0])) {
-        p[0] = Math.random() * linkDistance;
-      }
-      if (isNaN(p[1])) {
-        p[1] = Math.random() * linkDistance;
-      }
-    });
-    self.positions = positions;
-    positions.forEach((p: PointTuple, i: number) => {
+    if (self.initWithMDS) {
+      const mds = new MDS({ linkDistance, distances: eIdealD });
+      let positions = mds.layout();
+      positions.forEach((p: PointTuple) => {
+        if (isNaN(p[0])) {
+          p[0] = Math.random() * linkDistance;
+        }
+        if (isNaN(p[1])) {
+          p[1] = Math.random() * linkDistance;
+        }
+      });
+      self.positions = positions;
+    } else {
+      self.positions = nodes.map((node, i) => {
+        return [
+          (Math.random() - 0.5) * eIdealD[i][focusIndex],
+          (Math.random() - 0.5) * eIdealD[i][focusIndex],
+        ];
+      });
+    }
+    self.positions.forEach((p: PointTuple, i: number) => {
       nodes[i].x = p[0] + center[0];
       nodes[i].y = p[1] + center[1];
     });
     // move the graph to origin, centered at focusNode
-    positions.forEach((p: PointTuple) => {
-      p[0] -= positions[focusIndex][0];
-      p[1] -= positions[focusIndex][1];
+    self.positions.forEach((p: PointTuple) => {
+      p[0] -= (self.positions as PointTuple[])[focusIndex][0];
+      p[1] -= (self.positions as PointTuple[])[focusIndex][1];
     });
     self.run();
     const preventOverlap = self.preventOverlap;
@@ -287,9 +299,11 @@ export class RadialLayout extends Base {
             if (isArray(d.size)) {
               const res = d.size[0] > d.size[1] ? d.size[0] : d.size[1];
               return res + nodeSpacingFunc(d);
-            }  if (isObject(d.size)) {
-              const res = d.size.width > d.size.height ? d.size.width : d.size.height;
-              return res + nodeSpacingFunc(d);  
+            }
+            if (isObject(d.size)) {
+              const res =
+                d.size.width > d.size.height ? d.size.width : d.size.height;
+              return res + nodeSpacingFunc(d);
             }
             return d.size + nodeSpacingFunc(d);
           }
@@ -307,20 +321,20 @@ export class RadialLayout extends Base {
         nodes,
         nodeSizeFunc,
         adjMatrix,
-        positions,
+        positions: self.positions,
         radii,
         height,
         width,
         strictRadial,
         focusID: focusIndex,
         iterations: self.maxPreventOverlapIteration || 200,
-        k: positions.length / 4.5
+        k: self.positions.length / 4.5,
       };
       const nonoverlapForce = new RadialNonoverlapForce(nonoverlapForceParams);
-      positions = nonoverlapForce.layout();
+      self.positions = nonoverlapForce.layout();
     }
     // move the graph to center
-    positions.forEach((p: PointTuple, i: number) => {
+    self.positions.forEach((p: PointTuple, i: number) => {
       nodes[i].x = p[0] + center[0];
       nodes[i].y = p[1] + center[1];
     });
@@ -329,7 +343,7 @@ export class RadialLayout extends Base {
 
     return {
       nodes,
-      edges
+      edges,
     };
   }
 
@@ -413,7 +427,7 @@ export class RadialLayout extends Base {
             newRow.push(0);
           } else if (radii[i] === radii[j]) {
             // i and j are on the same circle
-            if (self.sortBy === "data") {
+            if (self.sortBy === 'data') {
               // sort the nodes on the same circle according to the ordering of the data
               newRow.push(
                 (v * (Math.abs(i - j) * self.sortStrength)) /
@@ -495,6 +509,6 @@ export class RadialLayout extends Base {
   }
 
   public getType() {
-    return "radial";
+    return 'radial';
   }
 }