@antv/layout 0.3.12 → 1.0.0-alpha.1

package/src/layout/grid.ts

@@ -1,404 +0,0 @@
-/**
- * @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, isArray } 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].all;
-        });
-      }
-    }
-    // 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);
-    }
-    self.rows = Math.max(self.rows, 1);
-    self.cols = Math.max(self.cols, 1);
-    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 res = nodeSize(node) || 30;
-     
-        let nodeW;
-        let nodeH;
-     
-        if (isArray(res)) {
-          nodeW = res[0];
-          nodeH = res[1];
-        } else {
-          nodeW = res;
-          nodeH = res;
-        }
-
-        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

@@ -1,47 +0,0 @@
-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";
-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,
-  Force2Layout,
-  ForceLayout,
-  CircularLayout,
-  DagreLayout,
-  DagreCompoundLayout,
-  RadialLayout,
-  ConcentricLayout,
-  MDSLayout,
-  FruchtermanLayout,
-  FruchtermanGPULayout,
-  GForceGPULayout,
-  ComboForceLayout,
-  ComboCombinedLayout,
-  ForceAtlas2Layout,
-  ERLayout
-};
-
-// types file
-export * from "./types";

package/src/layout/layout.ts

@@ -1,110 +0,0 @@
-import { Base } from "./base";
-import { Model, ILayout, Node } 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";
-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";
-import { isString } from "../util";
-
-interface DagreNodeData extends Node {
-  layer?: number;
-}
-
-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.correctLayers(data.nodes);
-    this.layoutInstance.init(data);
-  }
-
-  /**
-   * correcting the layers on the node data
-   * if min(layer) <= 0, layers should begin from abs(min(layer)) + 1
-   * @param nodes 
-   * @returns 
-   */
-   correctLayers(nodes: DagreNodeData[] | undefined) {
-    if (!nodes?.length) return;
-    let minLayer = Infinity;
-    const hasLayerNodes: DagreNodeData[] = [];
-    nodes.forEach((node) => {
-      if (isString(node.layer)) {
-        node.layer = parseInt(node.layer, 10);
-      }
-      // keep node.layer === undefined for TS problem
-      if (node.layer === undefined || isNaN(node.layer)) return;
-      hasLayerNodes.push(node);
-      if (node.layer < minLayer) minLayer = node.layer;
-    });
-    if (minLayer <= 0) {
-      const layerOffset = Math.abs(minLayer) + 1;
-      // @ts-ignore
-      hasLayerNodes.forEach((node) => node.layer += layerOffset);
-    }
-  }
-
-  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,
-  force2: Force2Layout,
-  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

@@ -1,140 +0,0 @@
-/**
- * @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

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