@antv/layout 0.2.0 → 0.2.3

package/src/layout/grid.ts

@@ -0,0 +1,391 @@
+/**
+ * @fileOverview grid layout
+ * @author shiwu.wyy@antfin.com
+ * this algorithm refers to <cytoscape.js> - https://github.com/cytoscape/cytoscape.js/
+ */
+
+import { isString, getDegree, isNaN, getFuncByUnknownType } from "../util";
+import { Base } from "./base";
+import {
+  OutNode,
+  Edge,
+  PointTuple,
+  Size,
+  IndexMap,
+  GridLayoutOptions
+} from "./types";
+
+type INode = OutNode & {
+  degree: number;
+  size: number | PointTuple | Size;
+};
+
+/**
+ * 网格布局
+ */
+export class GridLayout extends Base {
+  /** 布局起始点 */
+  public begin: PointTuple = [0, 0];
+
+  /** prevents node overlap, may overflow boundingBox if not enough space */
+  public preventOverlap: boolean = true;
+
+  /** extra spacing around nodes when preventOverlap: true */
+  public preventOverlapPadding: number = 10;
+
+  /** uses all available space on false, uses minimal space on true */
+  public condense: boolean = false;
+
+  /** force num of rows in the grid */
+  public rows: number | undefined;
+
+  /** force num of columns in the grid */
+  public cols: number | undefined;
+
+  /** the spacing between two nodes */
+  public nodeSpacing: ((d?: unknown) => number) | number | undefined;
+
+  /** returns { row, col } for element */
+  public position:
+    | ((node: INode) => { row?: number; col?: number })
+    | undefined;
+
+  /** a sorting function to order the nodes; e.g. function(a, b){ return a.datapublic ('weight') - b.data('weight') } */
+  public sortBy: string = "degree";
+
+  public nodeSize: number | number[] | { width: number, height: number } | undefined;
+
+  public nodes: INode[] = [];
+
+  public edges: Edge[] = [];
+
+  public width: number = 300;
+
+  public height: number = 300;
+
+  private cells: number | undefined;
+
+  private row: number = 0;
+
+  private col: number = 0;
+
+  private splits: number | undefined;
+
+  private columns: number | undefined;
+
+  private cellWidth: number = 0;
+
+  private cellHeight: number = 0;
+
+  private cellUsed: {
+    [key: string]: boolean;
+  } = {};
+
+  private id2manPos: {
+    [key: string]: {
+      row: number;
+      col: number;
+    };
+  } = {};
+
+  /** 迭代结束的回调函数 */
+  public onLayoutEnd: () => void = () => {};
+
+  constructor(options?: GridLayoutOptions) {
+    super();
+    this.updateCfg(options);
+  }
+
+  public getDefaultCfg() {
+    return {
+      begin: [0, 0],
+      preventOverlap: true,
+      preventOverlapPadding: 10,
+      condense: false,
+      rows: undefined,
+      cols: undefined,
+      position: undefined,
+      sortBy: "degree",
+      nodeSize: 30
+    };
+  }
+
+  /**
+   * 执行布局
+   */
+  public execute() {
+    const self = this;
+    const { nodes, edges, begin } = self;
+    const n = nodes.length;
+    if (n === 0) {
+      if (self.onLayoutEnd) self.onLayoutEnd();
+      return {
+        nodes,
+        edges
+      };
+    }
+    if (n === 1) {
+      nodes[0].x = begin[0];
+      nodes[0].y = begin[1];
+      if (self.onLayoutEnd) self.onLayoutEnd();
+      return {
+        nodes,
+        edges,
+      };
+    }
+
+    let { sortBy, width, height } = self;
+    const { condense, preventOverlapPadding, preventOverlap, nodeSpacing: paramNodeSpacing, nodeSize: paramNodeSize } = self;
+    
+    const layoutNodes: INode[] = [];
+    nodes.forEach((node) => {
+      layoutNodes.push(node);
+    });
+    const nodeIdxMap: IndexMap = {};
+    layoutNodes.forEach((node, i) => {
+      nodeIdxMap[node.id] = i;
+    });
+    if (
+      sortBy === "degree" ||
+      !isString(sortBy) ||
+      (layoutNodes[0] as any)[sortBy] === undefined
+    ) {
+      sortBy = "degree";
+      if (isNaN(nodes[0].degree)) {
+        const values = getDegree(layoutNodes.length, nodeIdxMap, edges);
+        layoutNodes.forEach((node, i) => {
+          node.degree = values[i];
+        });
+      }
+    }
+    // sort nodes by value
+    layoutNodes.sort(
+      (n1, n2) => (n2 as any)[sortBy] - (n1 as any)[sortBy]
+    );
+
+    if (!width && typeof window !== "undefined") {
+      width = window.innerWidth;
+    }
+    if (!height && typeof window !== "undefined") {
+      height = window.innerHeight;
+    }
+
+    const oRows = self.rows;
+    const oCols = self.cols != null ? self.cols : self.columns;
+    self.cells = n;
+
+    // if rows or columns were set in self, use those values
+    if (oRows != null && oCols != null) {
+      self.rows = oRows;
+      self.cols = oCols;
+    } else if (oRows != null && oCols == null) {
+      self.rows = oRows;
+      self.cols = Math.ceil(self.cells / self.rows);
+    } else if (oRows == null && oCols != null) {
+      self.cols = oCols;
+      self.rows = Math.ceil(self.cells / self.cols);
+    } else {
+      // otherwise use the automatic values and adjust accordingly	      // otherwise use the automatic values and adjust accordingly
+      // width/height * splits^2 = cells where splits is number of times to split width
+      self.splits = Math.sqrt((self.cells * self.height) / self.width);
+      self.rows = Math.round(self.splits);
+      self.cols = Math.round((self.width / self.height) * self.splits);
+    }
+    if (self.cols * self.rows > self.cells) {
+      // otherwise use the automatic values and adjust accordingly
+      // if rounding was up, see if we can reduce rows or columns
+      const sm = self.small() as number;
+      const lg = self.large() as number;
+
+      // reducing the small side takes away the most cells, so try it first
+      if ((sm - 1) * lg >= self.cells) {
+        self.small(sm - 1);
+      } else if ((lg - 1) * sm >= self.cells) {
+        self.large(lg - 1);
+      }
+    } else {
+      // if rounding was too low, add rows or columns
+      while (self.cols * self.rows < self.cells) {
+        const sm = self.small() as number;
+        const lg = self.large() as number;
+
+        // try to add to larger side first (adds less in multiplication)
+        if ((lg + 1) * sm >= self.cells) {
+          self.large(lg + 1);
+        } else {
+          self.small(sm + 1);
+        }
+      }
+    }
+
+    self.cellWidth = width / self.cols;
+    self.cellHeight = height / self.rows;
+
+    if (condense) {
+      self.cellWidth = 0;
+      self.cellHeight = 0;
+    }
+
+
+    if (preventOverlap || paramNodeSpacing) {
+      const nodeSpacing: Function = getFuncByUnknownType(10, paramNodeSpacing);
+      const nodeSize: Function = getFuncByUnknownType(30, paramNodeSize, false);
+      layoutNodes.forEach((node) => {
+        if (!node.x || !node.y) {
+          // for bb
+          node.x = 0;
+          node.y = 0;
+        }
+
+        const [nodew = 30, nodeh = 30] = nodeSize(node);
+
+        const p = nodeSpacing !== undefined ? nodeSpacing(node) : preventOverlapPadding;
+
+        const w = nodew + p;
+        const h = nodeh + p;
+
+        self.cellWidth = Math.max(self.cellWidth, w);
+        self.cellHeight = Math.max(self.cellHeight, h);
+      });
+    }
+
+    self.cellUsed = {}; // e.g. 'c-0-2' => true
+
+    // to keep track of current cell position
+    self.row = 0;
+    self.col = 0;
+
+    // get a cache of all the manual positions
+    self.id2manPos = {};
+    for (let i = 0; i < layoutNodes.length; i++) {
+      const node = layoutNodes[i];
+      let rcPos;
+      if (self.position) {
+        rcPos = self.position(node);
+      }
+
+      if (rcPos && (rcPos.row !== undefined || rcPos.col !== undefined)) {
+        // must have at least row or col def'd
+        const pos = {
+          row: rcPos.row,
+          col: rcPos.col
+        };
+
+        if (pos.col === undefined) {
+          // find unused col
+          pos.col = 0;
+
+          while (self.used(pos.row, pos.col)) {
+            pos.col++;
+          }
+        } else if (pos.row === undefined) {
+          // find unused row
+          pos.row = 0;
+
+          while (self.used(pos.row, pos.col)) {
+            pos.row++;
+          }
+        }
+
+        self.id2manPos[node.id] = pos as { row: number; col: number };
+        self.use(pos.row, pos.col);
+      }
+      self.getPos(node);
+    }
+
+    if (self.onLayoutEnd) self.onLayoutEnd();
+
+    return {
+      edges,
+      nodes: layoutNodes
+    };
+  }
+
+  private small(val?: number): number | undefined {
+    const self = this;
+    let res: number | undefined;
+    const rows = self.rows || 5;
+    const cols = self.cols || 5;
+    if (val == null) {
+      res = Math.min(rows, cols);
+    } else {
+      const min = Math.min(rows, cols);
+      if (min === self.rows) {
+        self.rows = val;
+      } else {
+        self.cols = val;
+      }
+    }
+    return res;
+  }
+
+  private large(val?: number): number | undefined {
+    const self = this;
+    let res: number | undefined;
+    const rows = self.rows || 5;
+    const cols = self.cols || 5;
+    if (val == null) {
+      res = Math.max(rows, cols);
+    } else {
+      const max = Math.max(rows, cols);
+      if (max === self.rows) {
+        self.rows = val;
+      } else {
+        self.cols = val;
+      }
+    }
+    return res;
+  }
+
+  private used(row: number | undefined, col: number | undefined) {
+    const self = this;
+    return self.cellUsed[`c-${row}-${col}`] || false;
+  }
+
+  private use(row: number | undefined, col: number | undefined) {
+    const self = this;
+    self.cellUsed[`c-${row}-${col}`] = true;
+  }
+
+  private moveToNextCell() {
+    const self = this;
+    const cols = self.cols || 5;
+    self.col++;
+    if (self.col >= cols) {
+      self.col = 0;
+      self.row++;
+    }
+  }
+
+  private getPos(node: INode) {
+    const self = this;
+    const { begin, cellWidth, cellHeight } = self;
+    let x: number;
+    let y: number;
+
+    // see if we have a manual position set
+    const rcPos = self.id2manPos[node.id];
+    if (rcPos) {
+      x = rcPos.col * cellWidth + cellWidth / 2 + begin[0];
+      y = rcPos.row * cellHeight + cellHeight / 2 + begin[1];
+    } else {
+      // otherwise set automatically
+
+      while (self.used(self.row, self.col)) {
+        self.moveToNextCell();
+      }
+
+      x = self.col * cellWidth + cellWidth / 2 + begin[0];
+      y = self.row * cellHeight + cellHeight / 2 + begin[1];
+      self.use(self.row, self.col);
+
+      self.moveToNextCell();
+    }
+    node.x = x;
+    node.y = y;
+  }
+
+  public getType() {
+    return "grid";
+  }
+}

package/src/layout/index.ts

@@ -0,0 +1,45 @@
+import { GridLayout } from "./grid";
+import { RandomLayout } from "./random";
+import { GForceLayout } from "./gForce";
+import { ForceLayout } from "./force";
+import { CircularLayout } from "./circular";
+import { DagreLayout } from "./dagre";
+import { DagreCompoundLayout } from "./dagreCompound";
+import { RadialLayout } from "./radial";
+import { ConcentricLayout } from "./concentric";
+import { MDSLayout } from "./mds";
+import { FruchtermanLayout } from "./fruchterman";
+import { FruchtermanGPULayout } from "./gpu/fruchterman";
+import { GForceGPULayout } from "./gpu/gForce";
+import { ComboForceLayout } from "./comboForce";
+import { ComboCombinedLayout } from "./comboCombined";
+import { ForceAtlas2Layout } from "./forceAtlas2";
+import { ERLayout } from './er';
+
+import { Layout, Layouts } from "./layout";
+
+export { Layout, Layouts };
+
+// layout
+export {
+  GridLayout,
+  RandomLayout,
+  GForceLayout,
+  ForceLayout,
+  CircularLayout,
+  DagreLayout,
+  DagreCompoundLayout,
+  RadialLayout,
+  ConcentricLayout,
+  MDSLayout,
+  FruchtermanLayout,
+  FruchtermanGPULayout,
+  GForceGPULayout,
+  ComboForceLayout,
+  ComboCombinedLayout,
+  ForceAtlas2Layout,
+  ERLayout
+};
+
+// types file
+export * from "./types";

package/src/layout/layout.ts

@@ -0,0 +1,75 @@
+import { Base } from "./base";
+import { Model, ILayout } from "./types";
+import { getLayoutByName } from "../registy";
+import { GridLayout } from "./grid";
+import { RandomLayout } from "./random";
+import { GForceLayout } from "./gForce";
+import { ForceLayout } from "./force";
+import { CircularLayout } from "./circular";
+import { DagreLayout } from "./dagre";
+import { RadialLayout } from "./radial";
+import { ConcentricLayout } from "./concentric";
+import { MDSLayout } from "./mds";
+import { FruchtermanLayout } from "./fruchterman";
+import { FruchtermanGPULayout } from "./gpu/fruchterman";
+import { GForceGPULayout } from "./gpu/gForce";
+import { ComboForceLayout } from "./comboForce";
+import { ComboCombinedLayout } from "./comboCombined";
+import { ForceAtlas2Layout } from "./forceAtlas2";
+import { ERLayout } from "./er";
+import { DagreCompoundLayout } from "./dagreCompound";
+export class Layout {
+  public readonly layoutInstance: Base;
+
+  constructor(options: ILayout.LayoutOptions) {
+    const layoutClass = getLayoutByName(options.type as string);
+    this.layoutInstance = new layoutClass(options);
+  }
+
+  layout(data: Model) {
+    return this.layoutInstance.layout(data);
+  }
+
+  updateCfg(cfg: ILayout.LayoutOptions) {
+    this.layoutInstance.updateCfg(cfg);
+  }
+
+  init(data: Model) {
+    this.layoutInstance.init(data);
+  }
+
+  execute() {
+    this.layoutInstance.execute();
+  }
+
+  getDefaultCfg() {
+    return this.layoutInstance.getDefaultCfg();
+  }
+
+  destroy() {
+    return this.layoutInstance.destroy();
+  }
+}
+
+// FIXME
+// FOR G6
+// tslint:disable-next-line
+export const Layouts: { [key: string]: any } = {
+  force: ForceLayout,
+  fruchterman: FruchtermanLayout,
+  forceAtlas2: ForceAtlas2Layout,
+  gForce: GForceLayout,
+  dagre: DagreLayout,
+  dagreCompound: DagreCompoundLayout,
+  circular: CircularLayout,
+  radial: RadialLayout,
+  concentric: ConcentricLayout,
+  grid: GridLayout,
+  mds: MDSLayout,
+  comboForce: ComboForceLayout,
+  comboCombined: ComboCombinedLayout,
+  random: RandomLayout,
+  'gForce-gpu': GForceGPULayout,
+  'fruchterman-gpu': FruchtermanGPULayout,
+  er: ERLayout,
+};

package/src/layout/mds.ts

@@ -0,0 +1,140 @@
+/**
+ * @fileOverview MDS layout
+ * @author shiwu.wyy@antfin.com
+ */
+
+import { Matrix as MLMatrix, SingularValueDecomposition } from "ml-matrix";
+import { PointTuple, OutNode, Edge, Matrix, MDSLayoutOptions } from "./types";
+import { floydWarshall, getAdjMatrix, scaleMatrix } from "../util";
+import { Base } from "./base";
+
+/**
+ * mds 布局
+ */
+export class MDSLayout extends Base {
+  /** 布局中心 */
+  public center: PointTuple = [0, 0];
+
+  /** 边长度 */
+  public linkDistance: number = 50;
+
+  private scaledDistances: Matrix[];
+
+  public nodes: OutNode[] = [];
+
+  public edges: Edge[] = [];
+
+  /** 迭代结束的回调函数 */
+  public onLayoutEnd: () => void = () => {};
+
+  constructor(options?: MDSLayoutOptions) {
+    super();
+    this.updateCfg(options);
+  }
+
+  public getDefaultCfg() {
+    return {
+      center: [0, 0],
+      linkDistance: 50
+    };
+  }
+
+  /**
+   * 执行布局
+   */
+  public execute() {
+    const self = this;
+    const { nodes, edges = [] } = self;
+    const center = self.center;
+    if (!nodes || nodes.length === 0) {
+      if (self.onLayoutEnd) self.onLayoutEnd();
+      return;
+    }
+    if (nodes.length === 1) {
+      nodes[0].x = center[0];
+      nodes[0].y = center[1];
+      if (self.onLayoutEnd) self.onLayoutEnd();
+      return;
+    }
+    const linkDistance = self.linkDistance;
+    // the graph-theoretic distance (shortest path distance) matrix
+    const adjMatrix = getAdjMatrix({ nodes, edges }, false);
+    const distances = floydWarshall(adjMatrix);
+    self.handleInfinity(distances);
+
+    // scale the ideal edge length acoording to linkDistance
+    const scaledD = scaleMatrix(distances, linkDistance);
+    self.scaledDistances = scaledD;
+
+    // get positions by MDS
+    const positions = self.runMDS();
+    self.positions = positions;
+    positions.forEach((p: number[], i: number) => {
+      nodes[i].x = p[0] + center[0];
+      nodes[i].y = p[1] + center[1];
+    });
+
+    if (self.onLayoutEnd) self.onLayoutEnd();
+
+    return {
+      nodes,
+      edges
+    };
+  }
+
+  /**
+   * mds 算法
+   * @return {array} positions 计算后的节点位置数组
+   */
+  public runMDS(): PointTuple[] {
+    const self = this;
+    const dimension = 2;
+    const distances = self.scaledDistances;
+
+    // square distances
+    const M = MLMatrix.mul(MLMatrix.pow(distances, 2), -0.5);
+
+    // double centre the rows/columns
+    const rowMeans = M.mean("row");
+    const colMeans = M.mean("column");
+    const totalMean = M.mean();
+    M.add(totalMean)
+      .subRowVector(rowMeans)
+      .subColumnVector(colMeans);
+
+    // take the SVD of the double centred matrix, and return the
+    // points from it
+    const ret = new SingularValueDecomposition(M);
+    const eigenValues = MLMatrix.sqrt(ret.diagonalMatrix).diagonal();
+    return ret.leftSingularVectors.toJSON().map((row: number[]) => {
+      return MLMatrix.mul([row], [eigenValues])
+        .toJSON()[0]
+        .splice(0, dimension) as PointTuple;
+    });
+  }
+
+  public handleInfinity(distances: Matrix[]) {
+    let maxDistance = -999999;
+    distances.forEach((row) => {
+      row.forEach((value) => {
+        if (value === Infinity) {
+          return;
+        }
+        if (maxDistance < value) {
+          maxDistance = value;
+        }
+      });
+    });
+    distances.forEach((row, i) => {
+      row.forEach((value, j) => {
+        if (value === Infinity) {
+          distances[i][j] = maxDistance;
+        }
+      });
+    });
+  }
+
+  public getType() {
+    return "mds";
+  }
+}

package/src/layout/radial/index.ts

@@ -0,0 +1 @@
+export * from './radial';

package/src/layout/radial/mds.ts

@@ -0,0 +1,51 @@
+import { PointTuple, Matrix } from '../types';
+import { Matrix as MLMatrix, SingularValueDecomposition } from 'ml-matrix';
+
+export default class MDS {
+  /** distance matrix */
+  public distances: Matrix[];
+
+  /** dimensions */
+  public dimension: number;
+
+  /** link distance */
+  public linkDistance: number;
+
+  constructor(params: { distances: Matrix[]; dimension?: number; linkDistance: number }) {
+    this.distances = params.distances;
+    this.dimension = params.dimension || 2;
+    this.linkDistance = params.linkDistance;
+  }
+
+  public layout(): PointTuple[] {
+    const self = this;
+    const { dimension, distances, linkDistance } = self;
+
+    try {
+      // square distances
+      const M = MLMatrix.mul(MLMatrix.pow(distances, 2), -0.5);
+
+      // double centre the rows/columns
+      const rowMeans = M.mean('row');
+      const colMeans = M.mean('column');
+      const totalMean = M.mean();
+      M.add(totalMean).subRowVector(rowMeans).subColumnVector(colMeans);
+
+      // take the SVD of the double centred matrix, and return the
+      // points from it
+      const ret = new SingularValueDecomposition(M);
+      const eigenValues = MLMatrix.sqrt(ret.diagonalMatrix).diagonal();
+      return ret.leftSingularVectors.toJSON().map((row: number[]) => {
+        return MLMatrix.mul([row], [eigenValues]).toJSON()[0].splice(0, dimension) as PointTuple;
+      });
+    } catch {
+      const res: PointTuple[] = [];
+      for (let i = 0; i < distances.length; i++) {
+        const x = Math.random() * linkDistance;
+        const y = Math.random() * linkDistance;
+        res.push([x, y]);
+      }
+      return res;
+    }
+  }
+}