@antv/layout 0.2.0 → 0.2.3

package/src/layout/radial/radial.ts

@@ -0,0 +1,500 @@
+/**
+ * @fileOverview random layout
+ * @author shiwu.wyy@antfin.com
+ */
+
+import {
+  PointTuple,
+  Node,
+  OutNode,
+  Edge,
+  Matrix,
+  RadialLayoutOptions
+} from "../types";
+import {
+  isNaN,
+  isArray,
+  isFunction,
+  isNumber,
+  isString,
+  floydWarshall,
+  getAdjMatrix,
+  isObject
+} from "../../util";
+import { Base } from "../base";
+import MDS from "./mds";
+import RadialNonoverlapForce, {
+  RadialNonoverlapForceParam
+} from "./radialNonoverlapForce";
+
+type INode = OutNode & {
+  size?: number | PointTuple;
+};
+
+function getWeightMatrix(M: Matrix[]) {
+  const rows = M.length;
+  const cols = M[0].length;
+  const result = [];
+  for (let i = 0; i < rows; i++) {
+    const row = [];
+    for (let j = 0; j < cols; j++) {
+      if (M[i][j] !== 0) {
+        row.push(1 / (M[i][j] * M[i][j]));
+      } else {
+        row.push(0);
+      }
+    }
+    result.push(row);
+  }
+  return result;
+}
+
+function getIndexById(array: any[], id: string) {
+  let index = -1;
+  array.forEach((a, i) => {
+    if (a.id === id) {
+      index = i;
+    }
+  });
+  return index;
+}
+
+function getEDistance(p1: PointTuple, p2: PointTuple) {
+  return Math.sqrt(
+    (p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1])
+  );
+}
+
+/**
+ * 辐射状布局
+ */
+export class RadialLayout extends Base {
+  /** 布局中心 */
+  public center: PointTuple;
+
+  /** 停止迭代的最大迭代数 */
+  public maxIteration: number = 1000;
+
+  /** 中心点，默认为数据中第一个点 */
+  public focusNode: string | Node | null = null;
+
+  /** 每一圈半径 */
+  public unitRadius: number | null = null;
+
+  /** 默认边长度 */
+  public linkDistance: number = 50;
+
+  /** 是否防止重叠 */
+  public preventOverlap: boolean = false;
+
+  /** 节点直径 */
+  public nodeSize: number | number[] | undefined;
+
+  /** 节点间距，防止节点重叠时节点之间的最小距离（两节点边缘最短距离） */
+  public nodeSpacing: number | Function | undefined;
+
+  /** 是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效 */
+  public strictRadial: boolean = true;
+
+  /** 防止重叠步骤的最大迭代次数 */
+  public maxPreventOverlapIteration: number = 200;
+
+  public sortBy: string | undefined;
+
+  public sortStrength: number = 10;
+
+  public width: number | undefined;
+
+  public height: number | undefined;
+
+  private focusIndex: number | undefined;
+
+  private distances: Matrix[] | undefined;
+
+  private eIdealDistances: Matrix[] | undefined;
+
+  private weights: Matrix[] | undefined;
+
+  private radii: number[] | undefined;
+
+  public nodes: INode[] = [];
+
+  public edges: Edge[] = [];
+
+  public onLayoutEnd: () => void;
+
+  constructor(options?: RadialLayoutOptions) {
+    super();
+    this.updateCfg(options);
+  }
+
+  public getDefaultCfg() {
+    return {
+      maxIteration: 1000,
+      focusNode: null,
+      unitRadius: null,
+      linkDistance: 50,
+      preventOverlap: false,
+      nodeSize: undefined,
+      nodeSpacing: undefined,
+      strictRadial: true,
+      maxPreventOverlapIteration: 200,
+      sortBy: undefined,
+      sortStrength: 10
+    };
+  }
+
+  /**
+   * 执行布局
+   */
+  public execute() {
+    const self = this;
+    const nodes = self.nodes;
+    const edges = self.edges || [];
+    if (!nodes || nodes.length === 0) {
+      if (self.onLayoutEnd) self.onLayoutEnd();
+      return;
+    }
+
+    if (!self.width && typeof window !== "undefined") {
+      self.width = window.innerWidth;
+    }
+    if (!self.height && typeof window !== "undefined") {
+      self.height = window.innerHeight;
+    }
+    if (!self.center) {
+      self.center = [self.width! / 2, self.height! / 2];
+    }
+    const center = self.center;
+
+    if (nodes.length === 1) {
+      nodes[0].x = center[0];
+      nodes[0].y = center[1];
+      if (self.onLayoutEnd) self.onLayoutEnd();
+      return;
+    }
+    const linkDistance = self.linkDistance;
+    // layout
+    let focusNode: INode | null = null;
+    if (isString(self.focusNode)) {
+      let found = false;
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].id === self.focusNode) {
+          focusNode = nodes[i];
+          self.focusNode = focusNode;
+          found = true;
+          i = nodes.length;
+        }
+      }
+      if (!found) {
+        focusNode = null;
+      }
+    } else {
+      focusNode = self.focusNode as INode;
+    }
+    // default focus node
+    if (!focusNode) {
+      focusNode = nodes[0];
+      self.focusNode = focusNode;
+    }
+    // the index of the focusNode in data
+    let focusIndex = getIndexById(nodes, focusNode.id);
+    if (focusIndex < 0) focusIndex = 0;
+    self.focusIndex = focusIndex;
+
+    // the graph-theoretic distance (shortest path distance) matrix
+    const adjMatrix = getAdjMatrix({ nodes, edges }, false);
+    const D = floydWarshall(adjMatrix);
+    const maxDistance = self.maxToFocus(D, focusIndex);
+    // replace first node in unconnected component to the circle at (maxDistance + 1)
+    self.handleInfinity(D, focusIndex, maxDistance + 1);
+    self.distances = D;
+
+    // the shortest path distance from each node to focusNode
+    const focusNodeD = D[focusIndex];
+    const width = self.width || 500;
+    const height = self.height || 500;
+    let semiWidth =
+      width - center[0] > center[0] ? center[0] : width - center[0];
+    let semiHeight =
+      height - center[1] > center[1] ? center[1] : height - center[1];
+    if (semiWidth === 0) {
+      semiWidth = width / 2;
+    }
+    if (semiHeight === 0) {
+      semiHeight = height / 2;
+    }
+    // the maxRadius of the graph
+    const maxRadius = semiHeight > semiWidth ? semiWidth : semiHeight;
+    const maxD = Math.max(...focusNodeD);
+    // the radius for each nodes away from focusNode
+    const radii: number[] = [];
+    focusNodeD.forEach((value, i) => {
+      if (!self.unitRadius) {
+        self.unitRadius = maxRadius / maxD;
+      }
+      radii[i] = value * self.unitRadius;
+    });
+    self.radii = radii;
+
+    const eIdealD = self.eIdealDisMatrix();
+    // const eIdealD = scaleMatrix(D, linkDistance);
+    self.eIdealDistances = eIdealD;
+    // the weight matrix, Wij = 1 / dij^(-2)
+    const W = getWeightMatrix(eIdealD);
+    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) => {
+      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.run();
+    const preventOverlap = self.preventOverlap;
+    const nodeSize = self.nodeSize;
+    let nodeSizeFunc;
+    const strictRadial = self.strictRadial;
+    // stagger the overlapped nodes
+    if (preventOverlap) {
+      const nodeSpacing = self.nodeSpacing;
+      let nodeSpacingFunc: Function;
+      if (isNumber(nodeSpacing)) {
+        nodeSpacingFunc = () => nodeSpacing;
+      } else if (isFunction(nodeSpacing)) {
+        nodeSpacingFunc = nodeSpacing;
+      } else {
+        nodeSpacingFunc = () => 0;
+      }
+      if (!nodeSize) {
+        nodeSizeFunc = (d: INode) => {
+          if (d.size) {
+            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);  
+            }
+            return d.size + nodeSpacingFunc(d);
+          }
+          return 10 + nodeSpacingFunc(d);
+        };
+      } else if (isArray(nodeSize)) {
+        nodeSizeFunc = (d: INode) => {
+          const res = nodeSize[0] > nodeSize[1] ? nodeSize[0] : nodeSize[1];
+          return res + nodeSpacingFunc(d);
+        };
+      } else {
+        nodeSizeFunc = (d: INode) => nodeSize + nodeSpacingFunc(d);
+      }
+      const nonoverlapForceParams: RadialNonoverlapForceParam = {
+        nodes,
+        nodeSizeFunc,
+        adjMatrix,
+        positions,
+        radii,
+        height,
+        width,
+        strictRadial,
+        focusID: focusIndex,
+        iterations: self.maxPreventOverlapIteration || 200,
+        k: positions.length / 4.5
+      };
+      const nonoverlapForce = new RadialNonoverlapForce(nonoverlapForceParams);
+      positions = nonoverlapForce.layout();
+    }
+    // move the graph to center
+    positions.forEach((p: PointTuple, i: number) => {
+      nodes[i].x = p[0] + center[0];
+      nodes[i].y = p[1] + center[1];
+    });
+
+    if (self.onLayoutEnd) self.onLayoutEnd();
+
+    return {
+      nodes,
+      edges
+    };
+  }
+
+  public run() {
+    const self = this;
+    const maxIteration = self.maxIteration;
+    const positions = self.positions || [];
+    const W = self.weights || [];
+    const eIdealDis = self.eIdealDistances || [];
+    const radii = self.radii || [];
+    for (let i = 0; i <= maxIteration; i++) {
+      const param = i / maxIteration;
+      self.oneIteration(param, positions, radii, eIdealDis, W);
+    }
+  }
+
+  private oneIteration(
+    param: number,
+    positions: PointTuple[],
+    radii: number[],
+    D: Matrix[],
+    W: Matrix[]
+  ) {
+    const self = this;
+    const vparam = 1 - param;
+    const focusIndex = self.focusIndex;
+    positions.forEach((v: PointTuple, i: number) => {
+      // v
+      const originDis = getEDistance(v, [0, 0]);
+      const reciODis = originDis === 0 ? 0 : 1 / originDis;
+      if (i === focusIndex) {
+        return;
+      }
+      let xMolecule = 0;
+      let yMolecule = 0;
+      let denominator = 0;
+      positions.forEach((u, j) => {
+        // u
+        if (i === j) {
+          return;
+        }
+        // the euclidean distance between v and u
+        const edis = getEDistance(v, u);
+        const reciEdis = edis === 0 ? 0 : 1 / edis;
+        const idealDis = D[j][i];
+        // same for x and y
+        denominator += W[i][j];
+        // x
+        xMolecule += W[i][j] * (u[0] + idealDis * (v[0] - u[0]) * reciEdis);
+        // y
+        yMolecule += W[i][j] * (u[1] + idealDis * (v[1] - u[1]) * reciEdis);
+      });
+      const reciR = radii[i] === 0 ? 0 : 1 / radii[i];
+      denominator *= vparam;
+      denominator += param * reciR * reciR;
+      // x
+      xMolecule *= vparam;
+      xMolecule += param * reciR * v[0] * reciODis;
+      v[0] = xMolecule / denominator;
+      // y
+      yMolecule *= vparam;
+      yMolecule += param * reciR * v[1] * reciODis;
+      v[1] = yMolecule / denominator;
+    });
+  }
+
+  private eIdealDisMatrix(): Matrix[] {
+    const self = this;
+    const nodes = self.nodes;
+    if (!nodes) return [];
+    const D = self.distances;
+    const linkDis = self.linkDistance;
+    const radii = self.radii || [];
+    const unitRadius = self.unitRadius || 50;
+    const result: Matrix[] = [];
+    if (D) {
+      D.forEach((row, i) => {
+        const newRow: Matrix = [];
+        row.forEach((v, j) => {
+          if (i === j) {
+            newRow.push(0);
+          } else if (radii[i] === radii[j]) {
+            // i and j are on the same circle
+            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)) /
+                  (radii[i] / unitRadius)
+              );
+            } else if (self.sortBy) {
+              // sort the nodes on the same circle according to the attributes
+              let iValue: number | string =
+                ((nodes[i] as any)[self.sortBy] as number | string) || 0;
+              let jValue: number | string =
+                ((nodes[j] as any)[self.sortBy] as number | string) || 0;
+              if (isString(iValue)) {
+                iValue = iValue.charCodeAt(0);
+              }
+              if (isString(jValue)) {
+                jValue = jValue.charCodeAt(0);
+              }
+              newRow.push(
+                (v * (Math.abs(iValue - jValue) * self.sortStrength)) /
+                  (radii[i] / unitRadius)
+              );
+            } else {
+              newRow.push((v * linkDis) / (radii[i] / unitRadius));
+            }
+          } else {
+            // i and j are on different circle
+            // i and j are on different circle
+            const link = (linkDis + unitRadius) / 2;
+            newRow.push(v * link);
+          }
+        });
+        result.push(newRow);
+      });
+    }
+    return result;
+  }
+
+  private handleInfinity(matrix: Matrix[], focusIndex: number, step: number) {
+    const length = matrix.length;
+    // 遍历 matrix 中遍历 focus 对应行
+    for (let i = 0; i < length; i++) {
+      // matrix 关注点对应行的 Inf 项
+      if (matrix[focusIndex][i] === Infinity) {
+        matrix[focusIndex][i] = step;
+        matrix[i][focusIndex] = step;
+        // 遍历 matrix 中的 i 行，i 行中非 Inf 项若在 focus 行为 Inf，则替换 focus 行的那个 Inf
+        for (let j = 0; j < length; j++) {
+          if (matrix[i][j] !== Infinity && matrix[focusIndex][j] === Infinity) {
+            matrix[focusIndex][j] = step + matrix[i][j];
+            matrix[j][focusIndex] = step + matrix[i][j];
+          }
+        }
+      }
+    }
+    // 处理其他行的 Inf。根据该行对应点与 focus 距离以及 Inf 项点 与 focus 距离，决定替换值
+    for (let i = 0; i < length; i++) {
+      if (i === focusIndex) {
+        continue;
+      }
+      for (let j = 0; j < length; j++) {
+        if (matrix[i][j] === Infinity) {
+          let minus = Math.abs(matrix[focusIndex][i] - matrix[focusIndex][j]);
+          minus = minus === 0 ? 1 : minus;
+          matrix[i][j] = minus;
+        }
+      }
+    }
+  }
+
+  private maxToFocus(matrix: Matrix[], focusIndex: number): number {
+    let max = 0;
+    for (let i = 0; i < matrix[focusIndex].length; i++) {
+      if (matrix[focusIndex][i] === Infinity) {
+        continue;
+      }
+      max = matrix[focusIndex][i] > max ? matrix[focusIndex][i] : max;
+    }
+    return max;
+  }
+
+  public getType() {
+    return "radial";
+  }
+}

package/src/layout/radial/radialNonoverlapForce.ts

@@ -0,0 +1,189 @@
+import { Matrix, PointTuple, Point } from '../types';
+
+const SPEED_DIVISOR = 800;
+
+export type RadialNonoverlapForceParam = {
+  positions: PointTuple[];
+  adjMatrix: Matrix[];
+  focusID: number;
+  radii: number[];
+  iterations?: number;
+  height?: number;
+  width?: number;
+  speed?: number;
+  gravity?: number;
+  nodeSizeFunc: (node: any) => number;
+  k: number;
+  strictRadial: boolean;
+  nodes: any[];
+};
+
+export default class RadialNonoverlapForce {
+  /** node positions */
+  public positions: PointTuple[];
+
+  /** adjacency matrix */
+  public adjMatrix: Matrix[];
+
+  /** focus node */
+  public focusID: number;
+
+  /** radii */
+  public radii: number[];
+
+  /** the number of iterations */
+  public iterations: number;
+
+  /** the height of the canvas */
+  public height: number;
+
+  /** the width of the canvas */
+  public width: number;
+
+  /** the moving speed */
+  public speed: number;
+
+  /** the gravity */
+  public gravity: number;
+
+  /** the node size */
+  public nodeSizeFunc: (node: any) => number;
+
+  /** the strength of forces */
+  public k: number;
+
+  /** if each circle can be separated into subcircles to avoid overlappings */
+  public strictRadial: boolean;
+
+  /** the nodes data */
+  public nodes: any[];
+
+  private maxDisplace: number | undefined;
+
+  private disp: Point[] = [];
+
+  constructor(params: RadialNonoverlapForceParam) {
+    this.positions = params.positions;
+    this.adjMatrix = params.adjMatrix;
+    this.focusID = params.focusID;
+    this.radii = params.radii;
+    this.iterations = params.iterations || 10;
+    this.height = params.height || 10;
+    this.width = params.width || 10;
+    this.speed = params.speed || 100;
+    this.gravity = params.gravity || 10;
+    this.nodeSizeFunc = params.nodeSizeFunc;
+    this.k = params.k || 5;
+    this.strictRadial = params.strictRadial;
+    this.nodes = params.nodes;
+  }
+
+  public layout(): PointTuple[] {
+    const self = this;
+    const positions = self.positions;
+    const disp: Point[] = [];
+    const iterations = self.iterations;
+    const maxDisplace = self.width / 10;
+    self.maxDisplace = maxDisplace;
+    self.disp = disp;
+    for (let i = 0; i < iterations; i++) {
+      positions.forEach((_, k) => {
+        disp[k] = { x: 0, y: 0 };
+      });
+      // 给重叠的节点增加斥力
+      self.getRepulsion();
+      self.updatePositions();
+    }
+    return positions;
+  }
+
+  private getRepulsion() {
+    const self = this;
+    const positions = self.positions;
+    const nodes = self.nodes;
+    const disp = self.disp;
+    const k = self.k;
+    const radii = self.radii || [];
+
+    positions.forEach((v: PointTuple, i: number) => {
+      disp[i] = { x: 0, y: 0 };
+      positions.forEach((u: PointTuple, j: number) => {
+        if (i === j) {
+          return;
+        }
+        // v and u are not on the same circle, return
+        if (radii[i] !== radii[j]) {
+          return;
+        }
+        let vecx = v[0] - u[0];
+        let vecy = v[1] - u[1];
+        let vecLength = Math.sqrt(vecx * vecx + vecy * vecy);
+        if (vecLength === 0) {
+          vecLength = 1;
+          const sign = i > j ? 1 : -1;
+          vecx = 0.01 * sign;
+          vecy = 0.01 * sign;
+        }
+        // these two nodes overlap
+        if (vecLength < self.nodeSizeFunc(nodes[i]) / 2 + self.nodeSizeFunc(nodes[j]) / 2) {
+          const common = (k * k) / vecLength;
+          disp[i].x += (vecx / vecLength) * common;
+          disp[i].y += (vecy / vecLength) * common;
+        }
+      });
+    });
+  }
+
+  private updatePositions() {
+    const self = this;
+    const positions = self.positions;
+    const disp = self.disp;
+    const speed = self.speed;
+    const strictRadial = self.strictRadial;
+    const f = self.focusID;
+    const maxDisplace = self.maxDisplace || self.width / 10;
+
+    if (strictRadial) {
+      disp.forEach((di, i) => {
+        const vx = positions[i][0] - positions[f][0];
+        const vy = positions[i][1] - positions[f][1];
+        const vLength = Math.sqrt(vx * vx + vy * vy);
+        let vpx = vy / vLength;
+        let vpy = -vx / vLength;
+        const diLength = Math.sqrt(di.x * di.x + di.y * di.y);
+        let alpha = Math.acos((vpx * di.x + vpy * di.y) / diLength);
+        if (alpha > Math.PI / 2) {
+          alpha -= Math.PI / 2;
+          vpx *= -1;
+          vpy *= -1;
+        }
+        const tdispLength = Math.cos(alpha) * diLength;
+        di.x = vpx * tdispLength;
+        di.y = vpy * tdispLength;
+      });
+    }
+
+    // move
+    const radii = self.radii;
+    positions.forEach((n, i) => {
+      if (i === f) {
+        return;
+      }
+      const distLength = Math.sqrt(disp[i].x * disp[i].x + disp[i].y * disp[i].y);
+      if (distLength > 0 && i !== f) {
+        const limitedDist = Math.min(maxDisplace * (speed / SPEED_DIVISOR), distLength);
+        n[0] += (disp[i].x / distLength) * limitedDist;
+        n[1] += (disp[i].y / distLength) * limitedDist;
+        if (strictRadial) {
+          let vx = n[0] - positions[f][0];
+          let vy = n[1] - positions[f][1];
+          const nfDis = Math.sqrt(vx * vx + vy * vy);
+          vx = (vx / nfDis) * radii[i];
+          vy = (vy / nfDis) * radii[i];
+          n[0] = positions[f][0] + vx;
+          n[1] = positions[f][1] + vy;
+        }
+      }
+    });
+  }
+}