@antv/layout 0.3.11 → 1.0.0-alpha.0

package/src/layout/er/forceGrid.ts

@@ -1,95 +0,0 @@
-import Grid from './grid';
-import { INode, IEdgeInfo } from './type';
-
-export default function layout(data: {
-  nodes: INode[],
-  edges: IEdgeInfo[],
-}, options: any) {
-  if (!data.nodes || data.nodes.length === 0) return data;
-  const width = options.width;
-  const height = options.height;
-  const nodeMinGap = options.nodeMinGap;
-
-  // 2. 网格布局
-  let CELL_W = 10000;
-  let CELL_H = 10000;
-  data.nodes.forEach((node) => {
-    const nodeWidth = node.size[0] || 50;
-    const nodeHeight = node.size[1] || 50;
-
-    CELL_W = Math.min(nodeWidth, CELL_W);
-    CELL_H = Math.min(nodeHeight, CELL_H);
-  });
-
-  const grid = new Grid();
-  grid.init(width, height, {
-    CELL_H,
-    CELL_W,
-  });
-
-  data.nodes.forEach((d) => {
-    const gridpoint = grid.occupyNearest(d);
-    if (gridpoint) {         
-        gridpoint.node = {
-          id: d.id,
-          size: d.size,
-        };
-        d.x = gridpoint.x;
-        d.y = gridpoint.y;
-        d.dx = gridpoint.dx;
-        d.dy = gridpoint.dy;
-      }
-  });
-
-  // 加入节点size
-  for (let i = 0; i < data.nodes.length; i++) {
-    //  节点宽度大于网格宽度，则往当前网格的右边插入列
-    const node = data.nodes[i];
-    const result = grid.findGridByNodeId(node.id);
-    if (!result) throw new Error("can not find node cell");
-    
-    const { column, row } = result;
-    if ((node.size[0] + nodeMinGap) > CELL_W) {
-      const addGridSize = Math.ceil((node.size[0] +nodeMinGap) / CELL_W) - 1;
-      let realAdd = addGridSize;
-      // 优化，假设同一列，不同行存在两个size为2的节点，遍历到第一个节点的时候，会往右插入两列，遍历到第二个节点，又往右插入。就会导致多余的网格
-      for(let j=0; j< addGridSize; j++) {
-        const hasColumn = grid.additionColumn.indexOf(column + j + 1) > -1;
-        if (hasColumn && !grid.cells[column + j + 1][row].node) {
-          realAdd --;
-        } else {
-          break;
-        }
-      }
-      grid.insertColumn(column, realAdd);
-    }
-    // 节点高度大于网格宽度，则往当前网格的下边插入行
-    if ((node.size[1] +nodeMinGap) > CELL_H) {
-      const addGridSize = Math.ceil((node.size[1]+nodeMinGap) / CELL_H) - 1;
-      let realAdd = addGridSize;
-      for(let j=0; j< addGridSize; j++) {
-        const hasColumn = grid.additionRow.indexOf(row + j + 1) > -1;
-        if (hasColumn && !grid.cells[column][row + j + 1].node) {
-          realAdd --;
-        } else {
-          break;
-        }
-      }
-      grid.insertRow(row, realAdd);
-    }
-  }
- 
-  // 同步节点坐标
-  for(let i = 0; i < grid.columnNum; i++) {
-    for(let j = 0; j < grid.rowNum; j++) {
-      const cell = grid.cells[i][j];
-      if (cell.node) {
-        const node = data.nodes.find((node) => node.id === cell?.node?.id);
-        if (node) {
-          node.x = cell.x + node.size[0] / 2;
-          node.y = cell.y + node.size[1] / 2;
-        }
-      }
-    }
-  }
-}

package/src/layout/er/grid.ts

@@ -1,185 +0,0 @@
-import { ICell, INode } from './type';
-
-export default class Grid {
-  public cells: ICell[][] = [];
-  public columnNum:number = 0;
-  public rowNum: number = 0;
-  
-  public additionColumn: number[] = [];
-  public additionRow: number[] = [];
-  private static MIN_DIST = 50;
-  private static DEFAULT_CELL_W = 80;
-  private static DEFAULT_CELL_H = 80;
-  private CELL_W: number;
-  private CELL_H: number;
-
-  public init(width: number, height: number, gridSize: {
-    CELL_W: number,
-    CELL_H: number,
-  }) {
-    this.cells = [];
-    this.CELL_W = gridSize.CELL_W || Grid.DEFAULT_CELL_W;
-    this.CELL_H = gridSize.CELL_H || Grid.DEFAULT_CELL_H;
-    this.columnNum = Math.ceil(width / this.CELL_W);
-    this.rowNum = Math.ceil(height / this.CELL_H);
-    Grid.MIN_DIST = Math.pow(width, 2) + Math.pow(height, 2);
-
-    for(let i = 0; i < this.columnNum; i++) {
-      const tmp = [];
-      for(let j = 0; j < this.rowNum; j++) {
-        const cell = {
-          dx: i,
-          dy: j,
-          x : i * this.CELL_W,
-          y : j * this.CELL_H,
-          occupied : false
-        };
-        tmp.push(cell);
-      }
-      this.cells.push(tmp);
-    }
-  }
-
-  public findGridByNodeId(nodeId: string){
-    for(let i = 0; i < this.columnNum; i++) {
-      for(let j = 0; j < this.rowNum; j++) {
-        if(this.cells[i][j].node) {
-          if (this.cells[i][j]?.node?.id === nodeId) {
-            return {column: i, row: j};
-          }
-        }
-      }
-    }
-    return null;
-  }
-    
-  public sqdist(a: any, b: any) {
-    return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
-  }
-
-  public occupyNearest(p: INode) {
-    let minDist = Grid.MIN_DIST;
-    let d;
-    let candidate = null;
-    for(let i = 0; i < this.columnNum; i++) {
-      for(let j = 0; j < this.rowNum; j++) {
-        if(!this.cells[i][j].occupied && ( d = this.sqdist(p, this.cells[i][j])) < minDist) {
-          minDist = d;
-          candidate = this.cells[i][j];
-        }
-      }
-    }
-    if(candidate) {
-      candidate.occupied = true;
-    }
-    return candidate;
-  }
-
-  public insertColumn(columnIndex: number, length: number) {
-    if (length <= 0) return ;
-    // 插入空列
-    for (let i = 0; i < length; i++) {
-      this.cells[i + this.columnNum] = [];
-      for(let j = 0; j < this.rowNum; j++) {
-        this.cells[i + this.columnNum][j] = {
-          dx: i,
-          dy: j,
-          x : i * this.CELL_W,
-          y : j * this.CELL_H,
-          occupied : false,
-          node: null,
-        };
-      }
-    }
-    // 交换数据
-    for(let i = (this.columnNum - 1); i > columnIndex; i--) {
-      for (let j = 0; j < this.rowNum; j++) {
-        this.cells[i + length][j] = {
-          ...this.cells[i][j],
-          x: (i+length) * this.CELL_W,
-          y: j * this.CELL_H,
-        };
-        this.cells[i][j] = {
-          x : i * this.CELL_W,
-          y : j * this.CELL_H,
-          occupied : true,
-          node: null,
-        };
-      }
-    }
-    // 已有行列的处理
-    for (let j = 0; j < this.additionColumn.length; j++) {
-      if (this.additionColumn[j] >= columnIndex) {
-        this.additionColumn[j] += length;
-      }
-    }
-    // 记录新增的行列
-    for (let i = 0; i < length; i++) {
-      this.additionColumn.push(columnIndex + i + 1);
-    }
-    this.columnNum += length;
-  }
-
-  public insertRow(rowIndex: number, length: number) {
-    if (length <= 0) return ;
-    // 插入空行
-    for (let j = 0; j < length; j++) {
-      for(let i = 0; i < this.columnNum; i++) {
-        this.cells[i][j + this.rowNum] = {
-          dx: i,
-          dy: j,
-          x : i * this.CELL_W,
-          y : j * this.CELL_H,
-          occupied : false,
-          node: null,
-        };
-      }
-    }
-
-    // 交换数据
-    for(let i = 0; i < this.columnNum; i++) {
-      for (let j = (this.rowNum - 1); j > rowIndex; j--) {
-        this.cells[i][j+length] = {
-          ...this.cells[i][j],
-          dx: i,
-          dy: j + length,
-          x: i * this.CELL_W,
-          y: (j+length) * this.CELL_H,
-        };
-        this.cells[i][j] = {
-          dx: i,
-          dy: j,
-          x : i * this.CELL_W,
-          y : j *this.CELL_H,
-          occupied : false,
-          node: null,
-        };
-        
-      }
-    }
-    
-    // 已有行列的处理
-    for (let j = 0; j < this.additionRow.length; j++) {
-      if (this.additionRow[j] >= rowIndex) {
-        this.additionRow[j] += length;
-      }
-    }
-    // 记录新增的行列
-    for (let i = 0; i < length; i++) {
-      this.additionRow.push(rowIndex + i + 1);
-    }
-    this.rowNum += length;
-  }
-
-  public getNodes() {
-    const nodes = [];
-    for(let i = 0; i < this.columnNum; i++) {
-      for(let j = 0; j < this.rowNum; j++) {
-        if(this.cells[i][j].node) {
-          nodes.push(this.cells[i][j]);
-        }
-      }
-    }
-    return nodes;
-  }
-}

package/src/layout/er/index.ts

@@ -1,68 +0,0 @@
-/**
- * @fileOverview Force Layout Grid Align layout
- * @author wenyanqi
- */
-
-import { Base } from "../base";
-import layout from './core';
-import { INode } from './type';
-
-export interface ERLayoutOptions {
-  type: "er";
-  width?: number;
-  height?: number;
-  nodeMinGap?: number;
-}
-
-export class ERLayout extends Base {
-
-  public width: number = 300;
-  public height: number = 300;
-  public nodeMinGap: number = 50;
-
-  /** 迭代结束的回调函数 */
-  public onLayoutEnd: () => void = () => { };
-
-  constructor(options?: any) {
-    super();
-    if (options) {
-      this.updateCfg(options);
-    }
-  }
-
-  public getDefaultCfg() {
-    return {
-      width: 300,
-      height: 300,
-      nodeMinGap: 50,
-    };
-  }
-
-  /**
-   * 执行布局
-   */
-  public execute() {
-    const self = this;
-    const nodes = self.nodes;
-    const edges = self.edges;
-    // 节点初始化，size初始化
-    nodes?.forEach((node: INode) => {
-      if (!node.size) {
-        node.size = [50, 50];
-      }
-    });
-    return layout({
-      nodes, edges,
-    }, {
-      width: this.width,
-      height: this.height,
-      nodeMinGap: this.nodeMinGap,
-    }).then(() => {
-      if (self.onLayoutEnd) self.onLayoutEnd();
-    });
-  }
-
-  public getType() {
-    return "er";
-  }
-}

package/src/layout/er/mysqlWorkbench.ts

@@ -1,345 +0,0 @@
-import { IEdge, IMysqlNode } from './type';
-
-const graphWidth = 1200;
-const graphHeight = 800;
-const OVERLAP_QUOT = 10000000;
-const MIN_DIST = 10;
-const M_PI = 3.14159265358979323846;
-const M_PI_2 = 1.57079632679489661923;
-const PI_38 = M_PI * 0.375;
-const PI_58 = M_PI * 0.625;
-const nodeEdgeMap = new Map();
-const CELL_W = 10;
-const CELL_H = 10;
-let T = 0.8;
-const T_MIN = 0.1;
-const R = 0.5;
-
-function distanceToNode(node1: IMysqlNode, node2: IMysqlNode, isHoriz: boolean) {
-  const x11 = node1.x - node1.size[0] / 2;
-  const y11 = node1.y - node1.size[1] / 2;
-  const x12 = node1.x + node1.size[0] / 2;
-  const y12 = node1.y + node1.size[1] / 2;
-  const x21 = node2.x - node2.size[0] / 2;
-  const y21 = node2.y - node2.size[1] / 2;
-  const x22 = node2.x + node2.size[0] / 2;
-  const y22 = node2.y + node2.size[1] / 2;
-
-  const cx1 = node1.x;
-  const cy1 = node1.y;
-  const cx2 = node2.x;
-  const cy2 = node2.y;
-  const dcx = cx2 - cx1;
-  // 两个节点间的方位角  
-  const qr = Math.atan2(dcx, (cy2 - cy1));
-  let dx = 0;
-  let dy = 0;
-  let l1 = 0;
-  let l2 = 0;
-  if (qr > M_PI_2) {
-    dy = y11 - y22;
-    dx = x21 - x12;
-    l1 = parseFloat(dy ? (dy / Math.cos(qr)).toFixed(2) : (dx).toFixed(2)); 
-    l2 = parseFloat(dx ? (dx / Math.sin(qr)).toFixed(2) : (dy).toFixed(2)); 
-  } else if (0.0 < qr && qr <= M_PI_2) {
-    dy = y21 - y12;
-    dx = x21 - x12;
-    if (dy > dx) {
-      l1 = l2 = parseFloat(dy ? (dy / Math.cos(qr)).toFixed(2) : (dx).toFixed(2));
-    } else {
-      l1 = l2 = parseFloat(dx ? (dx / Math.sin(qr)).toFixed(2) : (dy).toFixed(2));
-    }
-      
-  } else if (qr < -M_PI_2) {
-    dy = y11 - y22;
-    dx = -(x22 - x11);
-    if (dy > dx) {
-      l1 = l2 = parseFloat(dy ? (dy / Math.cos(qr)).toFixed(2) : (dx).toFixed(2));
-    } else {
-      l1 = l2 = parseFloat(dx ? (dx / Math.sin(qr)).toFixed(2) : (dy).toFixed(2));
-    }
-  }else {
-    dy = y21 - y12;
-    if (Math.abs(dcx) > (x12 - x11) / 2) {
-      dx = x11 - x22;
-    } else {
-      dx = dcx;
-    }
-      
-    if (dy > dx) {
-      l1 = l2 = parseFloat(dy ? (dy / Math.cos(qr)).toFixed(2) : (dx).toFixed(2));
-    } else {
-      l1 = l2 = parseFloat((dx && qr !== 0.0) ? (dx / Math.sin(qr)).toFixed(2) : (dy).toFixed(2));
-    }
-      
-  }
-  const aqr = parseFloat(qr.toFixed(2));
-  // 判断是否水平，角度
-  let newHoriz = isHoriz;
-  if (isHoriz) {
-    newHoriz = PI_38 < aqr && aqr < PI_58;
-  }
-  return {
-    distance: Math.abs(l1 < l2 ? l1 : l2),
-    isHoriz: newHoriz,
-  };
-}
-
-function calcNodePair(nodeA: IMysqlNode, nodeB: IMysqlNode) {
-  // 确定两个节点间是否存在连线
-  const edges = nodeEdgeMap.get(nodeA.id) || [];
-  const isLinked = edges.find((edge: IEdge) => {
-    return edge.source === nodeB.id || edge.target === nodeB.id;
-  });
-
-  const areaA = nodeA.size[0] * nodeA.size[1];
-  const areaB = nodeB.size[0] * nodeB.size[1];
-  const node1 = areaA > areaB ? nodeB : nodeA;
-  const node2 = areaA > areaB ? nodeA : nodeB;
-
-  const x11 = node1.x - node1.size[0] / 2;
-  const y11 = node1.y - node1.size[1] / 2;
-  const x12 = node1.x + node1.size[0] / 2;
-  const y12 = node1.y + node1.size[1] / 2;
-  const x21 = node2.x - node2.size[0] / 2;
-  const y21 = node2.y - node2.size[1] / 2;
-  const x22 = node2.x + node2.size[0] / 2;
-  const y22 = node2.y + node2.size[1] / 2;
-
-  const cx1 = node1.x;
-  const cy1 = node1.y;
-  const cx2 = node2.x;
-  const cy2 = node2.y;
-
-  // Detect if nodes overlap  检查节点之间是否存在覆盖问题
-  const isoverlap = ((x12 >= x21) && (x22 >= x11) && (y12 >= y21) && (y22 >= y11));
-  let e = 0;
-  let distance = 0;
-  
-  if (isoverlap) {
-    
-    distance = Math.sqrt(Math.pow((cx2 - cx1), 2) + Math.pow((cy2 - cy1), 2));
-
-    // calc area of overlap 计算重复区域的坐标和面积
-    const sx1 = x11 > x21 ? x11 : x21;
-    const sy1 = y11 > y21 ? y11 : y21;
-    const sx2 = x12 < x22 ? x12 : x22;
-    const sy2 = y12 < y22 ? y12 : y22;
-    const dsx = sx2 - sx1;
-    const dsy = sy2 - sy1;
-
-    const sov = dsx * dsy;
-
-    if (distance === 0.0) {
-      distance = 0.0000001;
-    }
-
-    e = MIN_DIST * 1 / distance * 100 + sov;
-    e *= OVERLAP_QUOT;
-  } else {
-    let isHoriz = false;
-    const res = distanceToNode(node1, node2, isHoriz);
-    distance = res.distance;
-    isHoriz = res.isHoriz;
-
-    if (distance <= MIN_DIST) {
-      if (distance !== 0) {
-        if (isLinked) {
-          e += MIN_DIST + OVERLAP_QUOT * 1 / distance;
-        }
-        else {
-          e += MIN_DIST + OVERLAP_QUOT * MIN_DIST / distance;
-        }  
-      } else {
-        e += OVERLAP_QUOT;
-      }
-    } else {
-      e += distance;
-      if (isLinked) {
-        e += distance * distance;
-      } 
-    }
-  }
-
-  return e;
-}
-function calcEnergy(nodes: any) {
-  let energy = 0;
-  for(let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
-    if ((node.x < 0) || (node.y < 0) || (node.x > graphWidth) || (node.y > graphHeight)) {
-      energy += 1000000000000;
-    }
-    for (let j = i + 1; j < nodes.length; j++) {
-      energy += calcNodePair(node, nodes[j]);
-    }
-  }
-
-  return energy;
-}
-
-function isCorrectPosition(node: IMysqlNode, newPosition: {
-  x: number, y: number
-}, nodes: IMysqlNode[], edges: IEdge[]) {
-  const nodeIdxMap = new Map<string, IMysqlNode>();
-  nodes.forEach((o, i) => {
-    nodeIdxMap.set(o.id, o);
-  });
-  const relateEdges = edges.filter((edge) => edge.source === node.id || edge.target === node.id) || [];
-  const relateNodes: IMysqlNode[] = [];
-  relateEdges.forEach((edge) => {
-    const otherNodeId = edge.source === node.id ? edge.target : edge.source;
-    const otherNode = nodeIdxMap.get(otherNodeId);
-    if (otherNode) {
-      relateNodes.push(otherNode);
-    }
-  });
-
-  let flag = true;
-  for(let i = 0; i < relateNodes.length; i++) {
-    const item = relateNodes[i];
-    // 判断条件调整，节点的坐标不需要完全一致。可以根据节点间的夹角来判断
-    const delta = Math.atan((node.y - item.y) / (item.x - node.y)) * 180;
-    const newDelta = Math.atan((newPosition.y - item.y) / (item.x - newPosition.y)) * 180;
-    const isHor = delta < 30 || delta > 150;
-    const newIsHor = newDelta < 30 || newDelta > 150;
-    const isVer = delta > 70 && delta < 110;
-    const newIsVer = newDelta > 70 && newDelta < 110;
-    // 定义四个相似角度区间，0-15度，75-90度，90到105度，165到180度。
-    if (isHor && !newIsHor || ((delta * newDelta) < 0)) {
-      flag = false;
-      break;
-    } else if (isVer && !newIsVer || ((delta * newDelta) < 0)) {
-      flag = false;
-      break;
-    } else if ((item.x - node.x) * (item.x - newPosition.x) < 0) {
-      flag = false;
-      break;
-    }else if ((item.y - node.y) * (item.y - newPosition.y) < 0) {
-      flag = false;
-      break;
-    }
-  }
-  return flag;
-}
-
-function shuffle(nodes: IMysqlNode[], edges: IEdge[]) {
-  let foundSmallerEnergy = false;
-  // 多次测试发现step为1时的效果最佳。
-  const step = 1; 
-  const wstep = CELL_W * step;
-  const hstep = CELL_H * step;
-  const wsteps = [ wstep, -wstep, 0, 0, ];
-  const hsteps = [ 0, 0, hstep, -hstep, ];
-  for (let i = 0; i < nodes.length; ++i) {
-    const node = nodes[i];
-    let nodeEnergy = calcNodeEnergy(node, nodes);
-    for (let ns = 0; ns < wsteps.length ; ns++) {
-      // 判断新位置与其他连线节点的位置关系是否违规
-      const flag = isCorrectPosition(node, { x: node.x + wsteps[ns], y: node.y + hsteps[ns] }, nodes, edges);
-      if (flag) {
-        // 节点朝上下左右四个方向移动，找到能量最小的那个位置
-        node.x += wsteps[ns];
-        node.y += hsteps[ns];
-        
-        // 计算移动后节点的能量
-        const energy = calcNodeEnergy(node, nodes);
-        const rdm = Math.random();
-        
-        if (energy < nodeEnergy) {
-          nodeEnergy = energy;
-          foundSmallerEnergy = true;
-         
-        } else if (rdm < T && rdm > T_MIN) {
-          nodeEnergy = energy;
-          foundSmallerEnergy = true;
-         
-        } else {
-          // 回归原位
-          node.x -= wsteps[ns];
-          node.y -= hsteps[ns];
-        }
-      }   
-    }
-
-  }
-  if (T > T_MIN) {
-    T *= R;
-  }
-   // 重新计算图整体的能量
-  if (foundSmallerEnergy) {
-    return calcEnergy(nodes);
-  }
-  return 0;
-}
-
-// 计算节点的能量，
-function calcNodeEnergy(node: IMysqlNode, nodes: IMysqlNode[]) {
-  let e = 0.0;
-  if ((node.x < 0) || (node.y < 0) || 
-    (node.x + node.size[0] + 20 > graphWidth) ||
-    (node.y + node.size[1] + 20 > graphHeight)
-  ) {
-    e += 1000000000000.0;
-  }
-
-  for (let i = 0; i < nodes.length; ++i) {
-    if (node.id !== nodes[i].id) {
-      e += calcNodePair(node, nodes[i]);
-    }
-  }
-  return e;
-}
-
-function layout(nodes: IMysqlNode[], edges: IEdge[]) {
-  if (nodes.length === 0) {
-    return { nodes, edges };
-  }
-  nodes.forEach((node: any) => {
-    const relateEdge = edges.filter((edge) => edge.source === node.id || edge.target === node.id);
-    nodeEdgeMap.set(node, relateEdge);
-  });
-
-  // 1. 初始化
-  // 将node按照连接数进行排序
-  nodes.sort((node1: IMysqlNode, node2: IMysqlNode) => {
-    return nodeEdgeMap.get(node1.id)?.length - nodeEdgeMap.get(node2.id)?.length;
-  });
-
-  // 2. 计算图能量
-  let minEnergy = calcEnergy(nodes);
-  let deSameCount = 20; // de=0 count
-  let de = 1;      // energy delta
-  let prevEnergy = 0;
-  // 定义总的迭代次数。超过就停掉，防止死循环
-  const MAX_COUNT = 50;
-  let count = 0;
-  while (deSameCount > 0) {
-    count ++;
-    if (count >= MAX_COUNT) {
-      break;
-    }
-    const ea = shuffle(nodes, edges);
-    if (ea !== 0) {
-      prevEnergy = ea;
-    } 
-    de = prevEnergy - minEnergy;
-    minEnergy = prevEnergy;
-    if (de === 0) {
-      --deSameCount;
-    } else {
-      deSameCount = 20;
-    }
-  }
-  nodes.forEach((node: IMysqlNode) => {
-    node.x = node.x - node.size[0] / 2;
-    node.y = node.y - node.size[1] / 2;
-  });
- 
-  return {
-    nodes,
-    edges,
-  };
-}
-
-export default layout;