@antv/layout 0.2.5 → 0.3.0-beta.2

package/src/layout/gForce.ts

@@ -3,13 +3,14 @@
  * @author shiwu.wyy@antfin.com
  */
 
-import {
+ import {
   OutNode,
   Edge,
   PointTuple,
   IndexMap,
   Point,
-  GForceLayoutOptions
+  GForceLayoutOptions,
+  Degree
 } from "./types";
 import { Base } from "./base";
 import { isNumber, isFunction, isArray, getDegree, isObject, getEdgeTerminal } from "../util";
@@ -128,7 +129,7 @@ export class GForceLayout extends Base {
   public animate: Boolean = true;
 
   /** 存储节点度数 */
-  private degrees: number[];
+  private degrees: Degree[];
 
   /** 迭代中的标识 */
   private timeInterval: number;
@@ -234,7 +235,7 @@ export class GForceLayout extends Base {
     self.degrees = getDegree(nodes.length, self.nodeIdxMap, edges);
     if (!self.getMass) {
       self.getMass = (d) => {
-        const mass = d.mass || self.degrees[self.nodeIdxMap[d.id]] || 1;
+        const mass = d.mass || self.degrees[self.nodeIdxMap[d.id]].all || 1;
         return mass;
       };
     }
@@ -406,7 +407,7 @@ export class GForceLayout extends Base {
       let gravity = defaultGravity;
 
       if (self.getCenter) {
-        const customCenterOpt = self.getCenter(node, degrees[i]);
+        const customCenterOpt = self.getCenter(node, degrees[i].all);
         if (
           customCenterOpt &&
           isNumber(customCenterOpt[0]) &&
@@ -484,4 +485,4 @@ export class GForceLayout extends Base {
   public getType() {
     return "gForce";
   }
-}
+}

package/src/layout/gpu/gForce.ts

@@ -9,7 +9,8 @@ import {
   OutNode,
   PointTuple,
   Edge,
-  GForceGPULayoutOptions
+  GForceGPULayoutOptions,
+  Degree
 } from "../types";
 import { Base } from "../base";
 import { isNumber } from "../../util";
@@ -95,7 +96,7 @@ export class GForceGPULayout extends Base {
   public onLayoutEnd: () => void;
 
   /** 存储节点度数 */
-  private degrees: number[];
+  private degrees: Degree[];
 
   constructor(options?: GForceGPULayoutOptions) {
     super();
@@ -220,7 +221,7 @@ export class GForceGPULayout extends Base {
     );
 
     // init degree for mass
-    self.degrees = getDegree(nodes.length, self.nodeIdxMap, edges);
+    self.degrees = getDegree(nodes.length, self.nodeIdxMap, edges).map(degree => degree.all);
     const masses: number[] = [];
     const nodeStrengths: number[] = [];
     const centerXs: number[] = [];

package/src/layout/grid.ts

@@ -154,7 +154,7 @@ export class GridLayout extends Base {
       if (isNaN(nodes[0].degree)) {
         const values = getDegree(layoutNodes.length, nodeIdxMap, edges);
         layoutNodes.forEach((node, i) => {
-          node.degree = values[i];
+          node.degree = values[i].all;
         });
       }
     }

package/src/layout/index.ts

@@ -1,6 +1,7 @@
 import { GridLayout } from "./grid";
 import { RandomLayout } from "./random";
 import { GForceLayout } from "./gForce";
+import { Force2Layout } from "./force2";
 import { ForceLayout } from "./force";
 import { CircularLayout } from "./circular";
 import { DagreLayout } from "./dagre";
@@ -25,6 +26,7 @@ export {
   GridLayout,
   RandomLayout,
   GForceLayout,
+  Force2Layout,
   ForceLayout,
   CircularLayout,
   DagreLayout,

package/src/layout/layout.ts

@@ -3,6 +3,7 @@ import { Model, ILayout } from "./types";
 import { getLayoutByName } from "../registy";
 import { GridLayout } from "./grid";
 import { RandomLayout } from "./random";
+import { Force2Layout } from "./force2";
 import { GForceLayout } from "./gForce";
 import { ForceLayout } from "./force";
 import { CircularLayout } from "./circular";
@@ -59,6 +60,7 @@ export const Layouts: { [key: string]: any } = {
   fruchterman: FruchtermanLayout,
   forceAtlas2: ForceAtlas2Layout,
   gForce: GForceLayout,
+  force2: Force2Layout,
   dagre: DagreLayout,
   dagreCompound: DagreCompoundLayout,
   circular: CircularLayout,

package/src/layout/types.ts

@@ -65,6 +65,11 @@ export type IndexMap = {
   [key: string]: number;
 };
 
+export type NodeMap = {
+  [key: string]: INode;
+};
+
+
 export type Matrix = number[];
 
 export type Point = {
@@ -72,6 +77,12 @@ export type Point = {
   y: number;
 };
 
+export type Degree = {
+  in: number;
+  out: number;
+  all: number;
+};
+
 export interface ComboTree {
   id: string;
   children?: ComboTree[];
@@ -215,6 +226,62 @@ export interface FruchtermanLayoutOptions {
   onLayoutEnd?: () => void;
 }
 
+export interface CentripetalOptions {
+  /** 叶子节点的施加力的因子 */
+  leaf?: number | ((node: INode, nodes: INode[], edges: Edge[]) => number);
+  /** 孤立节点的施加力的因子 */
+  single?: number | ((node: INode) => number);
+  /** 其他节点的施加力的因子 */
+  others?: number | ((node: INode) => number);
+  /** 向心力的中心点，默认为画布的中心 */
+  center?: (
+    node: INode,
+    nodes: INode[],
+    edges: Edge[],
+    width: number,
+    height: number,
+  ) => {
+    x: number;
+    y: number;
+    centerStrength?: number;
+  };
+}
+export interface Force2LayoutOptions {
+  type?: "force2";
+  center?: PointTuple;
+  width?: number;
+  height?: number;
+  linkDistance?: number | ((edge?: any, source?: any, target?: any) => number) | undefined;
+  defSpringLen: number | ((edge?: any, source?: any, target?: any) => number) | undefined;
+  nodeStrength?: number | ((d?: any) => number) | undefined;
+  edgeStrength?: number | ((d?: any) => number) | undefined;
+  preventOverlap?: boolean;
+  nodeSize?: number | number[] | ((d?: any) => number) | undefined;
+  nodeSpacing?: number | number[] | ((d?: any) => number) | undefined;
+  minMovement?: number;
+  maxIteration?: number;
+  damping?: number;
+  maxSpeed?: number;
+  coulombDisScale?: number;
+  gravity?: number;
+  factor?: number;
+  workerEnabled?: boolean;
+  centripetalOptions?: CentripetalOptions
+  leafCluster?: boolean;
+  clustering?: boolean;
+  nodeClusterBy?: string;
+  clusterNodeStrength?: number | ((node: Node) => number);
+  collideStrength?: number;
+  distanceThresholdMode?: 'mean' | 'max' | 'min';
+  animate?: boolean;
+  tick?: () => void;
+  onLayoutEnd?: () => void;
+  getMass?: ((d?: any) => number) | undefined;
+  getCenter?: ((d?: any, degree?: number) => number[]) | undefined;
+  monitor?: (params: { energy: number, nodes: INode[], edge: Edge[], iterations: number }) => void;
+
+}
+
 export interface GForceLayoutOptions {
   type?: "gForce";
   center?: PointTuple;

package/src/util/math.ts

@@ -1,4 +1,4 @@
-import { Matrix, Model, IndexMap, Edge, OutNode } from '../layout/types';
+import { Matrix, Model, IndexMap, Edge, Node, OutNode, Degree, NodeMap } from '../layout/types';
 import { isObject } from './object';
 
 export const getEdgeTerminal = (edge: Edge, type: 'source' | 'target') => {
@@ -10,22 +10,54 @@ export const getEdgeTerminal = (edge: Edge, type: 'source' | 'target') => {
 };
 
 export const getDegree = (n: number, nodeIdxMap: IndexMap, edges: Edge[] | null) => {
-  const degrees: number[] = [];
+  const degrees: Degree[] = [];
   for (let i = 0; i < n; i++) {
-    degrees[i] = 0;
+    degrees[i] = {
+      in: 0,
+      out: 0,
+      all: 0
+    };
   }
   if (!edges) return degrees;
+  edges.forEach((e) => {
+    const source = getEdgeTerminal(e, 'source');
+    const target = getEdgeTerminal(e, 'target');
+    if (source && degrees[nodeIdxMap[source]]) {
+      degrees[nodeIdxMap[source]].out += 1;
+      degrees[nodeIdxMap[source]].all += 1;
+    }
+    if (target && degrees[nodeIdxMap[target]]) {
+      degrees[nodeIdxMap[target]].in += 1;
+      degrees[nodeIdxMap[target]].all += 1;
+    }
+  });
+  return degrees;
+};
+
+export const getDegreeMap = (nodes: Node[], edges: Edge[] | null) => {
+  const degreesMap: { [id: string]: Degree } = {}
+  nodes.forEach(node => {
+    degreesMap[node.id] = {
+      in: 0,
+      out: 0,
+      all: 0
+    }
+  })
+
+  if (!edges) return degreesMap;
   edges.forEach((e) => {
     const source = getEdgeTerminal(e, 'source');
     const target = getEdgeTerminal(e, 'target');
     if (source) {
-      degrees[nodeIdxMap[source]] += 1;
+      degreesMap[source].out += 1;
+      degreesMap[source].all += 1;
     }
     if (target) {
-      degrees[nodeIdxMap[target]] += 1;
+      degreesMap[target].in += 1;
+      degreesMap[target].all += 1;
     }
   });
-  return degrees;
+  return degreesMap;
 };
 
 export const floydWarshall = (adjMatrix: Matrix[]): Matrix[] => {
@@ -155,4 +187,88 @@ export const findMinMaxNodeXY = (nodes: OutNode[]) => {
     if (maxY < node.y) maxY = node.y;
   });
   return { minX, minY, maxX, maxY };
+};
+
+/**
+ * 获取节点集合的平均位置信息
+ * @param nodes 节点集合
+ * @returns 平局内置
+ */
+export const getAvgNodePosition = (nodes: OutNode[]) => {
+  let totalNodes = { x: 0, y: 0 };
+  nodes.forEach(node => {
+    totalNodes.x += node.x || 0;
+    totalNodes.y += node.y || 0;
+  });
+  // 获取均值向量
+  const length = nodes.length || 1;
+  return {
+    x: totalNodes.x / length,
+    y: totalNodes.y / length,
+  };
+};
+
+// 找出指定节点关联的边的起点或终点
+const getCoreNode = (type: 'source' | 'target', node: Node, edges: Edge[]) => {
+  if (type === 'source') {
+    return (edges?.find(edge => edge.target === node.id)?.source || {}) as Node;
+  }
+  return (edges?.find(edge => edge.source === node.id)?.target || {}) as Node;
+};
+
+// 找出指定节点为起点或终点的所有一度叶子节点
+const getRelativeNodeIds = (type: 'source' | 'target' | 'both', coreNode: Node, edges: Edge[]) => {
+  let relativeNodes: string[] = []
+  switch (type) {
+    case 'source':
+      relativeNodes = edges?.filter(edge => edge.source === coreNode.id).map(edge => edge.target);
+      break;
+    case 'target':
+      relativeNodes = edges?.filter(edge => edge.target === coreNode.id).map(edge => edge.source);
+      break;
+    case 'both':
+      relativeNodes = edges
+        ?.filter(edge => edge.source === coreNode.id)
+        .map(edge => edge.target)
+        .concat(edges?.filter(edge => edge.target === coreNode.id).map(edge => edge.source));
+      break;
+    default:
+      break;
+  }
+  // 去重
+  const set = new Set(relativeNodes);
+  return Array.from(set);
+};
+// 找出同类型的节点
+const getSameTypeNodes = (type: 'leaf' | 'all', nodeClusterBy: string, node: Node, relativeNodes: Node[], degreesMap: { [id: string]: Degree }) => {
+  // @ts-ignore
+  const typeName = node[nodeClusterBy] || '';
+  // @ts-ignore
+  let sameTypeNodes = relativeNodes?.filter(item => item[nodeClusterBy] === typeName) || [];
+  if (type === 'leaf') {
+    sameTypeNodes = sameTypeNodes.filter(node => degreesMap[node.id]?.in === 0 ||degreesMap[node.id]?.out === 0);
+  }
+  return sameTypeNodes;
+};
+
+
+// 找出与指定节点关联的边的起点或终点出发的所有一度叶子节点
+export const getCoreNodeAndRelativeLeafNodes = (type: 'leaf' | 'all', node: Node, edges: Edge[], nodeClusterBy: string, degreesMap: { [id: string]: Degree }, nodeMap: NodeMap) => {
+  const { in: inDegree, out: outDegree } = degreesMap[node.id];
+  let coreNode: Node = node;
+  let relativeLeafNodes: Node[] = [];
+  if (inDegree === 0) {
+    // 如果为没有出边的叶子节点，则找出与它关联的边的起点出发的所有一度节点
+    coreNode = getCoreNode('source', node, edges);
+    relativeLeafNodes = getRelativeNodeIds('both', coreNode, edges).map(nodeId => nodeMap[nodeId]);
+  } else if (outDegree === 0) {
+    // 如果为没有入边边的叶子节点，则找出与它关联的边的起点出发的所有一度节点
+    coreNode = getCoreNode('target', node, edges);
+    relativeLeafNodes = getRelativeNodeIds('both', coreNode, edges).map(nodeId => nodeMap[nodeId]);
+  }
+  relativeLeafNodes = relativeLeafNodes.filter(
+    node => degreesMap[node.id] && (degreesMap[node.id].in === 0 || degreesMap[node.id].out === 0),
+  );
+  const sameTypeLeafNodes = getSameTypeNodes(type, nodeClusterBy, node, relativeLeafNodes, degreesMap);
+  return { coreNode, relativeLeafNodes, sameTypeLeafNodes };
 };