@antv/layout 0.2.0 → 0.2.3

package/src/layout/er/forceGrid.ts

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,185 @@
+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

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

@@ -0,0 +1,345 @@
+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;