@antv/layout 0.3.16 → 0.3.17-beta.0

package/src/layout/dagre.ts

@@ -3,11 +3,25 @@
  * @author shiwu.wyy@antfin.com
  */
 
-import { Edge, OutNode, DagreLayoutOptions, PointTuple, Point, Node } from "./types";
+import {
+  Edge,
+  OutNode,
+  DagreLayoutOptions,
+  PointTuple,
+  Point,
+  Node,
+} from "./types";
 import dagre from "./dagre/index";
-import { isArray, isNumber, isObject, getEdgeTerminal, getFunc, isString } from "../util";
+import {
+  isArray,
+  isNumber,
+  isObject,
+  getEdgeTerminal,
+  getFunc,
+  isString,
+} from "../util";
 import { Base } from "./base";
-import { Graph as DagreGraph } from './dagre/graph';
+import { Graph as DagreGraph } from "./dagre/graph";
 
 /**
  * 层次布局
@@ -57,8 +71,8 @@ export class DagreLayout extends Base {
 
   /** 上次的布局结果 */
   public preset: {
-    nodes: OutNode[],
-    edges: any[],
+    nodes: OutNode[];
+    edges: any[];
   };
 
   public nodes: OutNode[] = [];
@@ -70,7 +84,7 @@ export class DagreLayout extends Base {
 
   private nodeMap: {
     [id: string]: OutNode;
-  }
+  };
 
   constructor(options?: DagreLayoutOptions) {
     super();
@@ -101,14 +115,23 @@ export class DagreLayout extends Base {
       return layout;
     }
     return true;
-  }
+  };
 
   /**
    * 执行布局
    */
   public execute() {
     const self = this;
-    const { nodes, nodeSize, rankdir, combos, begin, radial, comboEdges = [], vedges = [] } = self;
+    const {
+      nodes,
+      nodeSize,
+      rankdir,
+      combos,
+      begin,
+      radial,
+      comboEdges = [],
+      vedges = [],
+    } = self;
     if (!nodes) return;
     const edges = (self.edges as any[]) || [];
     const g = new DagreGraph({
@@ -119,12 +142,12 @@ export class DagreLayout extends Base {
     // collect the nodes in their combo, to create virtual edges for comboEdges
     self.nodeMap = {};
     const nodeComboMap = {} as any;
-    nodes.forEach(node => {
+    nodes.forEach((node) => {
       self.nodeMap[node.id] = node;
       if (!node.comboId) return;
       nodeComboMap[node.comboId] = nodeComboMap[node.comboId] || [];
       nodeComboMap[node.comboId].push(node.id);
-    })
+    });
 
     let nodeSizeFunc: (d?: any) => number[];
     if (!nodeSize) {
@@ -132,7 +155,8 @@ export class DagreLayout extends Base {
         if (d.size) {
           if (isArray(d.size)) {
             return d.size;
-          }  if (isObject(d.size)) {
+          }
+          if (isObject(d.size)) {
             return [d.size.width || 40, d.size.height || 40];
           }
           return [d.size, d.size];
@@ -178,35 +202,35 @@ export class DagreLayout extends Base {
       });
     }
 
-    nodes.filter((node) => node.layout !== false).forEach((node) => {
-      const size = nodeSizeFunc(node);
-      const verti = vertisep(node);
-      const hori = horisep(node);
-      const width = size[0] + 2 * hori;
-      const height = size[1] + 2 * verti;
-      const layer = node.layer;
-      if (isNumber(layer)) {
-        // 如果有layer属性，加入到node的label中
-        g.setNode(node.id, { width, height, layer });
-      } else {
-        g.setNode(node.id, { width, height });
-      }
-
-      if (this.sortByCombo && node.comboId) {
-        if (!comboMap[node.comboId]) {
-          comboMap[node.comboId] = { id: node.comboId };
-          g.setNode(node.comboId, {});
+    nodes
+      .filter((node) => node.layout !== false)
+      .forEach((node) => {
+        const size = nodeSizeFunc(node);
+        const verti = vertisep(node);
+        const hori = horisep(node);
+        const width = size[0] + 2 * hori;
+        const height = size[1] + 2 * verti;
+        const layer = node.layer;
+        if (isNumber(layer)) {
+          // 如果有layer属性，加入到node的label中
+          g.setNode(node.id, { width, height, layer });
+        } else {
+          g.setNode(node.id, { width, height });
         }
-        g.setParent(node.id, node.comboId);
-      }
-    });
-    
 
+        if (this.sortByCombo && node.comboId) {
+          if (!comboMap[node.comboId]) {
+            comboMap[node.comboId] = { id: node.comboId };
+            g.setNode(node.comboId, {});
+          }
+          g.setParent(node.id, node.comboId);
+        }
+      });
 
     edges.forEach((edge) => {
       // dagrejs Wiki https://github.com/dagrejs/dagre/wiki#configuring-the-layout
-      const source = getEdgeTerminal(edge, 'source');
-      const target = getEdgeTerminal(edge, 'target');
+      const source = getEdgeTerminal(edge, "source");
+      const target = getEdgeTerminal(edge, "target");
       if (this.layoutNode(source) && this.layoutNode(target)) {
         g.setEdge(source, target, {
           weight: edge.weight || 1,
@@ -215,18 +239,22 @@ export class DagreLayout extends Base {
     });
 
     // create virtual edges from node to node for comboEdges
-    (comboEdges?.concat(vedges || []))?.forEach((comboEdge: any) => {
+    comboEdges?.concat(vedges || [])?.forEach((comboEdge: any) => {
       const { source, target } = comboEdge;
-      const sources = comboMap[source]?.collapsed ? [source] : nodeComboMap[source] || [source];
-      const targets =  comboMap[target]?.collapsed ? [target] : nodeComboMap[target] || [target];
+      const sources = comboMap[source]?.collapsed
+        ? [source]
+        : nodeComboMap[source] || [source];
+      const targets = comboMap[target]?.collapsed
+        ? [target]
+        : nodeComboMap[target] || [target];
       sources.forEach((s: string) => {
         targets.forEach((t: string) => {
           g.setEdge(s, t, {
             weight: comboEdge.weight || 1,
           });
-        })
-      })
-    })
+        });
+      });
+    });
 
     // 考虑增量图中的原始图
     let prevGraph: DagreGraph | undefined = undefined;
@@ -267,15 +295,15 @@ export class DagreLayout extends Base {
       dBegin[1] = begin[1] - minY;
     }
 
+    const isHorizontal = rankdir === "LR" || rankdir === "RL";
     // 变形为辐射
     if (radial) {
       const { focusNode, ranksep, getRadialPos } = this;
-      const focusId = isString(focusNode) ? focusNode: focusNode?.id;
+      const focusId = isString(focusNode) ? focusNode : focusNode?.id;
       const focusLayer = focusId ? g.node(focusId)?._rank : 0;
       const layers: any[] = [];
-      const isHorizontal = rankdir === 'LR' || rankdir === 'RL';
-      const dim = isHorizontal ? 'y' : 'x';
-      const sizeDim = isHorizontal ? 'height' : 'width';
+      const dim = isHorizontal ? "y" : "x";
+      const sizeDim = isHorizontal ? "height" : "width";
       // 找到整个图作为环的坐标维度（dim）的最大、最小值，考虑节点宽度
       let min = Infinity;
       let max = -Infinity;
@@ -286,22 +314,57 @@ export class DagreLayout extends Base {
         const currentNodesep = nodesepfunc(nodes[i]);
 
         if (focusLayer === 0) {
-          if (!layers[coord._rank]) layers[coord._rank] = { nodes: [], totalWidth: 0, maxSize: -Infinity };
+          if (!layers[coord._rank]) {
+            layers[coord._rank] = {
+              nodes: [],
+              totalWidth: 0,
+              maxSize: -Infinity,
+            };
+          }
           layers[coord._rank].nodes.push(node);
           layers[coord._rank].totalWidth += currentNodesep * 2 + coord[sizeDim];
-          if (layers[coord._rank].maxSize < Math.max(coord.width, coord.height)) layers[coord._rank].maxSize = Math.max(coord.width, coord.height);
+          if (
+            layers[coord._rank].maxSize < Math.max(coord.width, coord.height)
+          ) {
+            layers[coord._rank].maxSize = Math.max(coord.width, coord.height);
+          }
         } else {
           const diffLayer = coord._rank - focusLayer!;
           if (diffLayer === 0) {
-            if (!layers[diffLayer]) layers[diffLayer] = { nodes: [], totalWidth: 0, maxSize: -Infinity };
+            if (!layers[diffLayer]) {
+              layers[diffLayer] = {
+                nodes: [],
+                totalWidth: 0,
+                maxSize: -Infinity,
+              };
+            }
             layers[diffLayer].nodes.push(node);
             layers[diffLayer].totalWidth += currentNodesep * 2 + coord[sizeDim];
-            if (layers[diffLayer].maxSize < Math.max(coord.width, coord.height)) layers[diffLayer].maxSize = Math.max(coord.width, coord.height);
+            if (
+              layers[diffLayer].maxSize < Math.max(coord.width, coord.height)
+            ) {
+              layers[diffLayer].maxSize = Math.max(coord.width, coord.height);
+            }
           } else {
             const diffLayerAbs = Math.abs(diffLayer);
-            if (!layers[diffLayerAbs]) layers[diffLayerAbs] = { left: [], right: [], totalWidth: 0, maxSize: -Infinity };
-            layers[diffLayerAbs].totalWidth += currentNodesep * 2 + coord[sizeDim];
-            if (layers[diffLayerAbs].maxSize < Math.max(coord.width, coord.height)) layers[diffLayerAbs].maxSize = Math.max(coord.width, coord.height);
+            if (!layers[diffLayerAbs]) {
+              layers[diffLayerAbs] = {
+                left: [],
+                right: [],
+                totalWidth: 0,
+                maxSize: -Infinity,
+              };
+            }
+            layers[diffLayerAbs].totalWidth +=
+              currentNodesep * 2 + coord[sizeDim];
+            if (
+              layers[diffLayerAbs].maxSize < Math.max(coord.width, coord.height)
+            ) {
+              layers[diffLayerAbs].maxSize = Math.max(
+                coord.width,
+                coord.height
+              );
+            }
             if (diffLayer < 0) {
               layers[diffLayerAbs].left.push(node);
             } else {
@@ -321,16 +384,30 @@ export class DagreLayout extends Base {
 
       // 扩大最大最小值范围，以便为环上留出接缝处的空隙
       const rangeLength = (max - min) / 0.9;
-      const range = [ (min + max - rangeLength) * 0.5 , (min + max + rangeLength) * 0.5 ];
+      const range = [
+        (min + max - rangeLength) * 0.5,
+        (min + max + rangeLength) * 0.5,
+      ];
 
       // 根据半径、分布比例，计算节点在环上的位置，并返回该组节点中最大的 ranksep 值
-      const processNodes = (layerNodes: any, radius: number, propsMaxRanksep = -Infinity, arcRange = [0, 1]) => {
+      const processNodes = (
+        layerNodes: any,
+        radius: number,
+        propsMaxRanksep = -Infinity,
+        arcRange = [0, 1]
+      ) => {
         let maxRanksep = propsMaxRanksep;
         layerNodes.forEach((node: any) => {
           const coord = g.node(node);
           radiusMap[node] = radius;
           // 获取变形为 radial 后的直角坐标系坐标
-          const { x: newX, y: newY } = getRadialPos(coord![dim]!, range, rangeLength, radius, arcRange);
+          const { x: newX, y: newY } = getRadialPos(
+            coord![dim]!,
+            range,
+            rangeLength,
+            radius,
+            arcRange
+          );
           // 将新坐标写入源数据
           const i = nodes.findIndex((it) => it.id === node);
           if (!nodes[i]) return;
@@ -349,7 +426,13 @@ export class DagreLayout extends Base {
       let isFirstLevel = true;
       const lastLayerMaxNodeSize = 0;
       layers.forEach((layerNodes) => {
-        if (!layerNodes?.nodes?.length && !layerNodes?.left?.length && !layerNodes?.right?.length) return;
+        if (
+          !layerNodes?.nodes?.length &&
+          !layerNodes?.left?.length &&
+          !layerNodes?.right?.length
+        ) {
+          return;
+        }
         // 第一层只有一个节点，直接放在圆心，初始半径设定为 0
         if (isFirstLevel && layerNodes.nodes.length === 1) {
           // 将新坐标写入源数据
@@ -365,14 +448,27 @@ export class DagreLayout extends Base {
 
         // 为接缝留出空隙，半径也需要扩大
         radius = Math.max(radius, layerNodes.totalWidth / (2 * Math.PI)); // / 0.9;
-        
+
         let maxRanksep = -Infinity;
         if (focusLayer === 0 || layerNodes.nodes?.length) {
-          maxRanksep = processNodes(layerNodes.nodes, radius, maxRanksep, [0, 1]); // 0.8
+          maxRanksep = processNodes(
+            layerNodes.nodes,
+            radius,
+            maxRanksep,
+            [0, 1]
+          ); // 0.8
         } else {
-          const leftRatio = layerNodes.left?.length / (layerNodes.left?.length + layerNodes.right?.length);
-          maxRanksep= processNodes(layerNodes.left, radius, maxRanksep, [0, leftRatio]); // 接缝留出 0.05 的缝隙
-          maxRanksep = processNodes(layerNodes.right, radius, maxRanksep, [leftRatio + 0.05, 1]); // 接缝留出 0.05 的缝隙
+          const leftRatio =
+            layerNodes.left?.length /
+            (layerNodes.left?.length + layerNodes.right?.length);
+          maxRanksep = processNodes(layerNodes.left, radius, maxRanksep, [
+            0,
+            leftRatio,
+          ]); // 接缝留出 0.05 的缝隙
+          maxRanksep = processNodes(layerNodes.right, radius, maxRanksep, [
+            leftRatio + 0.05,
+            1,
+          ]); // 接缝留出 0.05 的缝隙
         }
         radius += maxRanksep;
         isFirstLevel = false;
@@ -381,33 +477,54 @@ export class DagreLayout extends Base {
       g.edges().forEach((edge: any) => {
         const coord = g.edge(edge);
         const i = edges.findIndex((it) => {
-          const source = getEdgeTerminal(it, 'source');
-          const target = getEdgeTerminal(it, 'target');
+          const source = getEdgeTerminal(it, "source");
+          const target = getEdgeTerminal(it, "target");
           return source === edge.v && target === edge.w;
         });
         if (i <= -1) return;
-        if ((self.edgeLabelSpace) && self.controlPoints && edges[i].type !== "loop") {
-          const otherDim = dim === 'x' ? 'y' : 'x';
-          const controlPoints = coord?.points?.slice(1, coord.points.length - 1);
+        if (
+          self.edgeLabelSpace &&
+          self.controlPoints &&
+          edges[i].type !== "loop"
+        ) {
+          const otherDim = dim === "x" ? "y" : "x";
+          const controlPoints = coord?.points?.slice(
+            1,
+            coord.points.length - 1
+          );
           const newControlPoints: Point[] = [];
           const sourceOtherDimValue = g.node(edge.v)?.[otherDim]!;
-          const otherDimDist = sourceOtherDimValue - g.node(edge.w)?.[otherDim]!;
+          const otherDimDist =
+            sourceOtherDimValue - g.node(edge.w)?.[otherDim]!;
           const sourceRadius = radiusMap[edge.v];
           const radiusDist = sourceRadius - radiusMap[edge.w];
           controlPoints?.forEach((point: any) => {
             // 根据该边的起点、终点半径，及起点、终点、控制点位置关系，确定该控制点的半径
-            const cRadius = (point[otherDim] - sourceOtherDimValue) / otherDimDist * radiusDist + sourceRadius;
+            const cRadius =
+              ((point[otherDim] - sourceOtherDimValue) / otherDimDist) *
+                radiusDist +
+              sourceRadius;
             // 获取变形为 radial 后的直角坐标系坐标
-            const newPos = getRadialPos(point[dim], range, rangeLength, cRadius);
+            const newPos = getRadialPos(
+              point[dim],
+              range,
+              rangeLength,
+              cRadius
+            );
             newControlPoints.push({
               x: newPos.x + dBegin[0],
-              y: newPos.y + dBegin[1]
+              y: newPos.y + dBegin[1],
             });
           });
           edges[i].controlPoints = newControlPoints;
         }
       });
     } else {
+      const layerCoords: Set<number> = new Set();
+      const isInvert = rankdir === "BT" || rankdir === "RL";
+      const layerCoordSort = isInvert
+        ? (a: number, b: number) => b - a
+        : (a: number, b: number) => a - b;
       g.nodes().forEach((node: any) => {
         const coord = g.node(node)!;
         if (!coord) return;
@@ -420,17 +537,69 @@ export class DagreLayout extends Base {
         ndata.y = coord.y! + dBegin[1];
         // @ts-ignore: pass layer order to data for increment layout use
         ndata._order = coord._order;
+        layerCoords.add(isHorizontal ? ndata.x : ndata.y);
       });
+      const layerCoordsArr = Array.from(layerCoords).sort(layerCoordSort);
+
       g.edges().forEach((edge: any) => {
         const coord = g.edge(edge);
         const i = edges.findIndex((it) => {
-          const source = getEdgeTerminal(it, 'source');
-          const target = getEdgeTerminal(it, 'target');
+          const source = getEdgeTerminal(it, "source");
+          const target = getEdgeTerminal(it, "target");
           return source === edge.v && target === edge.w;
         });
         if (i <= -1) return;
-        if ((self.edgeLabelSpace) && self.controlPoints && edges[i].type !== "loop") {
-          edges[i].controlPoints = coord?.points?.slice(1, coord.points.length - 1) || []; // 去掉头尾
+        if (
+          self.edgeLabelSpace &&
+          self.controlPoints &&
+          edges[i].type !== "loop"
+        ) {
+          edges[i].controlPoints =
+            coord?.points?.slice(1, coord.points.length - 1) || []; // 去掉头尾
+
+          const sourceNode = self.nodeMap[edge.v];
+          const targetNode = self.nodeMap[edge.w];
+
+          // 酌情增加控制点，使折线不穿过跨层的节点
+          if (sourceNode && targetNode) {
+            let { x: sourceX, y: sourceY } = sourceNode;
+            let { x: targetX, y: targetY } = targetNode;
+            if (isHorizontal) {
+              sourceX = sourceNode.y;
+              sourceY = sourceNode.x;
+              targetX = targetNode.y;
+              targetY = targetNode.x;
+            }
+            // 为跨层级的边增加第一个控制点。忽略垂直的/横向的边。
+            // 新控制点 = {
+            //   x: 终点x,
+            //   y: (起点y + 下一层y) / 2,   #下一层y可能不等于终点y
+            // }
+            if (targetY !== sourceY && sourceX !== targetX) {
+              const nextLayerCoord =
+                layerCoordsArr[layerCoordsArr.indexOf(sourceY) + 1];
+              if (nextLayerCoord) {
+                const firstControlPoint = edges[i].controlPoints[0];
+                const insertControlPoint = isHorizontal
+                  ? {
+                      x: (sourceY + nextLayerCoord) / 2,
+                      y: firstControlPoint?.x || targetX,
+                    }
+                  : {
+                      x: firstControlPoint?.x || targetX,
+                      y: (sourceY + nextLayerCoord) / 2,
+                    };
+                // 当新增的控制点不存在（!=当前第一个控制点）时添加
+                if (
+                  !firstControlPoint ||
+                  firstControlPoint.y !== insertControlPoint.y
+                ) {
+                  edges[i].controlPoints.unshift(insertControlPoint);
+                }
+              }
+            }
+          }
+
           edges[i].controlPoints.forEach((point: any) => {
             point.x += dBegin[0];
             point.y += dBegin[1];
@@ -446,7 +615,13 @@ export class DagreLayout extends Base {
     };
   }
 
-  private getRadialPos(dimValue: number, range: number[], rangeLength: number, radius: number, arcRange: number[] = [0, 1]) {
+  private getRadialPos(
+    dimValue: number,
+    range: number[],
+    rangeLength: number,
+    radius: number,
+    arcRange: number[] = [0, 1]
+  ) {
     // dimRatio 占圆弧的比例
     let dimRatio = (dimValue - range[0]) / rangeLength;
     // 再进一步归一化到指定的范围上
@@ -456,11 +631,11 @@ export class DagreLayout extends Base {
     // 将极坐标系转换为直角坐标系
     return {
       x: Math.cos(angle) * radius,
-      y: Math.sin(angle) * radius
+      y: Math.sin(angle) * radius,
     };
   }
 
   public getType() {
     return "dagre";
   }
-}
+}