@antv/layout 1.2.14-beta.9 → 2.0.0-alpha.1

package/src/antv-dagre/order/init-data-order.ts

@@ -0,0 +1,29 @@
+import type { ID } from '../../types';
+import { DagreGraph } from '../graph';
+
+/**
+ * 按照数据中的结果设置fixorder
+ */
+export const initDataOrder = (g: DagreGraph, nodeOrder?: ID[]) => {
+  const simpleNodes = g.getAllNodes().filter((v) => {
+    return !g.getChildren(v.id)?.length;
+  });
+  const ranks = simpleNodes.map((v) => v.data.rank!);
+  const maxRank = Math.max(...ranks);
+  const layers: ID[][] = [];
+  for (let i = 0; i < maxRank + 1; i++) {
+    layers[i] = [];
+  }
+
+  nodeOrder?.forEach((n) => {
+    const node = g.getNode(n);
+    // 只考虑原有节点，dummy节点需要按照后续算法排出
+    if (!node || node.data.dummy) {
+      return;
+    }
+    if (!isNaN(node.data.rank!)) {
+      node.data.fixorder = layers[node.data.rank!].length; // 设置fixorder为当层的顺序
+      layers[node.data.rank!].push(n);
+    }
+  });
+};

package/src/antv-dagre/order/init-order.ts

@@ -0,0 +1,59 @@
+import type { ID } from '../../types';
+import { DagreGraph } from '../graph';
+
+/*
+ * Assigns an initial order value for each node by performing a DFS search
+ * starting from nodes in the first rank. Nodes are assigned an order in their
+ * rank as they are first visited.
+ *
+ * This approach comes from Gansner, et al., "A Technique for Drawing Directed
+ * Graphs."
+ *
+ * Returns a layering matrix with an array per layer and each layer sorted by
+ * the order of its nodes.
+ */
+export const initOrder = (g: DagreGraph) => {
+  const visited: Record<string, boolean> = {};
+  // const simpleNodes = g.getAllNodes().filter((v) => {
+  //   return !g.getChildren(v.id)?.length;
+  // });
+  const simpleNodes = g.getAllNodes();
+  const nodeRanks = simpleNodes.map((v) => v.data.rank! ?? -Infinity);
+
+  const maxRank = Math.max(...nodeRanks);
+  const layers: ID[][] = [];
+  for (let i = 0; i < maxRank + 1; i++) {
+    layers.push([]);
+  }
+
+  const orderedVs = simpleNodes.sort(
+    (a, b) => g.getNode(a.id).data.rank! - g.getNode(b.id).data.rank!,
+  );
+  // const orderedVs = _.sortBy(simpleNodes, function(v) { return g.node(v)!.rank; });
+
+  // 有fixOrder的，直接排序好放进去
+  const beforeSort = orderedVs.filter((n) => {
+    return g.getNode(n.id).data.fixorder !== undefined;
+  });
+  const fixOrderNodes = beforeSort.sort(
+    (a, b) => g.getNode(a.id).data.fixorder! - g.getNode(b.id).data.fixorder!,
+  );
+  fixOrderNodes?.forEach((n) => {
+    if (!isNaN(g.getNode(n.id).data.rank!)) {
+      layers[g.getNode(n.id).data.rank!].push(n.id);
+    }
+    visited[n.id] = true;
+  });
+
+  orderedVs?.forEach((n) =>
+    g.dfsTree(n.id, (node) => {
+      if (visited.hasOwnProperty(node.id)) return true;
+      visited[node.id] = true;
+      if (!isNaN(node.data.rank!)) {
+        layers[node.data.rank!].push(node.id);
+      }
+    }),
+  );
+
+  return layers;
+};

package/src/antv-dagre/order/resolve-conflicts.ts

@@ -0,0 +1,153 @@
+/*
+ * Given a list of entries of the form {v, barycenter, weight} and a
+ * constraint graph this function will resolve any conflicts between the
+ * constraint graph and the barycenters for the entries. If the barycenters for
+ * an entry would violate a constraint in the constraint graph then we coalesce
+ * the nodes in the conflict into a new node that respects the contraint and
+ * aggregates barycenter and weight information.
+ *
+ * This implementation is based on the description in Forster, "A Fast and
+ * Simple Hueristic for Constrained Two-Level Crossing Reduction," thought it
+ * differs in some specific details.
+ *
+ * Pre-conditions:
+ *
+ *    1. Each entry has the form {v, barycenter, weight}, or if the node has
+ *       no barycenter, then {v}.
+ *
+ * Returns:
+ *
+ *    A new list of entries of the form {vs, i, barycenter, weight}. The list
+ *    `vs` may either be a singleton or it may be an aggregation of nodes
+ *    ordered such that they do not violate constraints from the constraint
+ *    graph. The property `i` is the lowest original index of any of the
+ *    elements in `vs`.
+ */
+
+import type { ID } from '../../types';
+import { DagreGraph } from '../graph';
+
+export type ConflictEntry = {
+  i: number;
+  indegree?: number;
+  in?: ConflictEntry[];
+  out?: ConflictEntry[];
+  vs: ID[];
+  barycenter?: number;
+  weight?: number;
+  merged?: boolean;
+  fixorder?: number;
+  order?: number;
+};
+
+const resolveConflicts = (
+  entries: {
+    v: ID;
+    barycenter?: number;
+    weight?: number;
+  }[],
+  cg: DagreGraph,
+) => {
+  const mappedEntries: Record<string, ConflictEntry> = {};
+  entries?.forEach((entry, i: number) => {
+    mappedEntries[entry.v] = {
+      i,
+      indegree: 0,
+      in: [],
+      out: [],
+      vs: [entry.v],
+    };
+    const tmp = mappedEntries[entry.v];
+    if (entry.barycenter !== undefined) {
+      tmp.barycenter = entry.barycenter;
+      tmp.weight = entry.weight;
+    }
+  });
+
+  cg.getAllEdges()?.forEach((e) => {
+    const entryV = mappedEntries[e.source];
+    const entryW = mappedEntries[e.target];
+    if (entryV !== undefined && entryW !== undefined) {
+      entryW.indegree!++;
+      entryV.out!.push(mappedEntries[e.target]);
+    }
+  });
+
+  const sourceSet = Object.values(mappedEntries).filter?.(
+    (entry: ConflictEntry) => !entry.indegree,
+  );
+
+  return doResolveConflicts(sourceSet);
+};
+
+const doResolveConflicts = (sourceSet: ConflictEntry[]) => {
+  const entries = [];
+
+  const handleIn = (vEntry: ConflictEntry) => {
+    return (uEntry: ConflictEntry) => {
+      if (uEntry.merged) return;
+      if (
+        uEntry.barycenter === undefined ||
+        vEntry.barycenter === undefined ||
+        uEntry.barycenter >= vEntry.barycenter
+      ) {
+        mergeEntries(vEntry, uEntry);
+      }
+    };
+  };
+
+  const handleOut = (vEntry: ConflictEntry) => {
+    return (wEntry: ConflictEntry) => {
+      wEntry['in']!.push(vEntry);
+      if (--wEntry.indegree! === 0) {
+        sourceSet.push(wEntry);
+      }
+    };
+  };
+
+  while (sourceSet?.length) {
+    const entry = sourceSet.pop()!;
+    entries.push(entry);
+    entry['in']!.reverse()?.forEach((e: ConflictEntry) => handleIn(entry)(e));
+    entry.out?.forEach((e: ConflictEntry) => handleOut(entry)(e));
+  }
+
+  const filtered = entries.filter((entry) => !entry.merged);
+  const keys: ('vs' | 'i' | 'barycenter' | 'weight')[] = [
+    'vs',
+    'i',
+    'barycenter',
+    'weight',
+  ];
+  return filtered.map((entry) => {
+    const picked: Record<string, any> = {};
+    keys?.forEach((key) => {
+      if (entry[key] === undefined) return;
+      picked[key] = entry[key];
+    });
+    return picked as ConflictEntry;
+  });
+};
+
+const mergeEntries = (target: ConflictEntry, source: ConflictEntry) => {
+  let sum = 0;
+  let weight = 0;
+
+  if (target.weight) {
+    sum += target.barycenter! * target.weight;
+    weight += target.weight;
+  }
+
+  if (source.weight) {
+    sum += source.barycenter! * source.weight;
+    weight += source.weight;
+  }
+
+  target.vs = source.vs?.concat(target.vs);
+  target.barycenter = sum / weight;
+  target.weight = weight;
+  target.i = Math.min(source.i, target.i);
+  source.merged = true;
+};
+
+export default resolveConflicts;

package/src/antv-dagre/order/sort-subgraph.ts

@@ -0,0 +1,111 @@
+import type { ID } from '../../types';
+import { DagreGraph } from '../graph';
+import { barycenter } from './barycenter';
+import resolveConflicts, { ConflictEntry } from './resolve-conflicts';
+import { sort } from './sort';
+
+export const sortSubgraph = (
+  g: DagreGraph,
+  v: ID,
+  cg: DagreGraph,
+  biasRight?: boolean,
+  usePrev?: boolean,
+  keepNodeOrder?: boolean,
+) => {
+  let movable = g.getChildren(v).map((n) => n.id);
+  // fixorder的点不参与排序（这个方案不合适，只排了新增节点，和原来的分离）
+  const node = g.getNode(v)!;
+  const bl = node ? (node.data.borderLeft as ID) : undefined;
+  const br = node ? (node.data.borderRight as ID) : undefined;
+  const subgraphs: Record<string, Partial<ConflictEntry>> = {};
+
+  if (bl) {
+    movable = movable?.filter((w) => {
+      return w !== bl && w !== br;
+    });
+  }
+
+  const barycenters = barycenter(g, movable || []);
+  barycenters?.forEach((entry) => {
+    if (g.getChildren(entry.v)?.length) {
+      const subgraphResult = sortSubgraph(
+        g,
+        entry.v,
+        cg,
+        biasRight,
+        keepNodeOrder,
+      );
+      subgraphs[entry.v] = subgraphResult;
+      if (subgraphResult.hasOwnProperty('barycenter')) {
+        mergeBarycenters(entry, subgraphResult);
+      }
+    }
+  });
+
+  const entries = resolveConflicts(barycenters, cg);
+  expandSubgraphs(entries, subgraphs);
+
+  // 添加fixorder信息到entries里边
+  // TODO: 不考虑复合情况，只用第一个点的fixorder信息，后续考虑更完备的实现
+  entries
+    .filter((e) => e.vs.length > 0)
+    ?.forEach((e) => {
+      const node = g.getNode(e.vs[0])!;
+      if (node) {
+        e.fixorder = node.data.fixorder!;
+        e.order = node.data.order!;
+      }
+    });
+
+  const result = sort(entries, biasRight, usePrev, keepNodeOrder);
+
+  if (bl) {
+    result.vs = [bl, result.vs, br].flat() as ID[];
+    if (g.getPredecessors(bl)?.length) {
+      const blPred = g.getNode(g.getPredecessors(bl)?.[0].id || '')!;
+      const brPred = g.getNode(g.getPredecessors(br!)?.[0].id || '')!;
+      if (!result.hasOwnProperty('barycenter')) {
+        result.barycenter = 0;
+        result.weight = 0;
+      }
+      result.barycenter =
+        (result.barycenter! * result.weight! +
+          blPred.data.order! +
+          brPred.data.order!) /
+        (result.weight! + 2);
+      result.weight! += 2;
+    }
+  }
+
+  return result;
+};
+
+const expandSubgraphs = (
+  entries: ConflictEntry[],
+  subgraphs: Record<string, Partial<ConflictEntry>>,
+) => {
+  entries?.forEach((entry) => {
+    const vss = entry.vs?.map((v: ID) => {
+      if (subgraphs[v]) {
+        return subgraphs[v].vs!;
+      }
+      return v;
+    });
+    entry.vs = vss.flat();
+  });
+};
+
+const mergeBarycenters = (
+  target: { weight?: number; barycenter?: number },
+  other: { weight?: number; barycenter?: number },
+) => {
+  if (target.barycenter !== undefined) {
+    target.barycenter =
+      (target.barycenter * target.weight! + other.barycenter! * other.weight!) /
+      (target.weight! + other.weight!);
+    target.weight! += other.weight!;
+  } else {
+    target.barycenter = other.barycenter;
+    target.weight = other.weight;
+  }
+};

package/src/antv-dagre/order/sort.ts

@@ -0,0 +1,94 @@
+import type { ID } from '../../types';
+import { partition } from '../util';
+import { ConflictEntry } from './resolve-conflicts';
+
+export const sort = (
+  entries: ConflictEntry[],
+  biasRight?: boolean,
+  usePrev?: boolean,
+  keepNodeOrder?: boolean,
+) => {
+  const parts = partition(entries, (entry) => {
+    const hasFixOrder =
+      entry.hasOwnProperty('fixorder') && !isNaN(entry.fixorder!);
+    if (keepNodeOrder) {
+      return !hasFixOrder && entry.hasOwnProperty('barycenter');
+    }
+    // NOTE: 有fixorder的也可以排
+    return hasFixOrder || entry.hasOwnProperty('barycenter');
+  });
+  const sortable = parts.lhs;
+  const unsortable = parts.rhs.sort((a, b) => -a.i - -b.i);
+  const vs: ID[][] = [];
+  let sum = 0;
+  let weight = 0;
+  let vsIndex = 0;
+
+  sortable?.sort(compareWithBias(!!biasRight, !!usePrev));
+
+  vsIndex = consumeUnsortable(vs, unsortable, vsIndex);
+
+  sortable?.forEach((entry) => {
+    vsIndex += entry.vs?.length;
+    vs.push(entry.vs);
+    sum += entry.barycenter! * entry.weight!;
+    weight += entry.weight!;
+    vsIndex = consumeUnsortable(vs, unsortable, vsIndex);
+  });
+
+  const result: { vs: ID[]; barycenter?: number; weight?: number } = {
+    vs: vs.flat(),
+  };
+  if (weight) {
+    result.barycenter = sum / weight;
+    result.weight = weight;
+  }
+  return result;
+};
+
+const consumeUnsortable = (
+  vs: ID[][],
+  unsortable: ConflictEntry[],
+  index: number,
+) => {
+  let iindex = index;
+  let last;
+  while (
+    unsortable.length &&
+    (last = unsortable[unsortable.length - 1]).i <= iindex
+  ) {
+    unsortable.pop();
+    vs?.push(last.vs);
+    iindex++;
+  }
+  return iindex;
+};
+
+/**
+ * 配置是否考虑使用之前的布局结果
+ */
+const compareWithBias = (bias: boolean, usePrev: boolean) => {
+  return (entryV: ConflictEntry, entryW: ConflictEntry) => {
+    // 排序的时候先判断fixorder，不行再判断重心
+    if (entryV.fixorder !== undefined && entryW.fixorder !== undefined) {
+      return entryV.fixorder - entryW.fixorder;
+    }
+    if (entryV.barycenter! < entryW.barycenter!) {
+      return -1;
+    }
+    if (entryV.barycenter! > entryW.barycenter!) {
+      return 1;
+    }
+    // 重心相同，考虑之前排好的顺序
+    if (usePrev && entryV.order !== undefined && entryW.order !== undefined) {
+      if (entryV.order < entryW.order) {
+        return -1;
+      }
+      if (entryV.order > entryW.order) {
+        return 1;
+      }
+    }
+
+    return !bias ? entryV.i - entryW.i : entryW.i - entryV.i;
+  };
+};

package/src/antv-dagre/parent-dummy-chains.ts

@@ -0,0 +1,111 @@
+import type { ID } from '../types';
+import { DagreGraph } from './graph';
+
+type OrderItem = { low: number; lim: number };
+
+// deep first search with both order low for pre, lim for post
+const dfsBothOrder = (g: DagreGraph) => {
+  const result: Record<ID, OrderItem> = {};
+  let lim = 0;
+
+  const dfs = (v: ID) => {
+    const low = lim;
+    g.getChildren(v).forEach((n) => dfs(n.id));
+    result[v] = { low, lim: lim++ };
+  };
+  g.getRoots().forEach((n) => dfs(n.id));
+
+  return result;
+};
+
+// Find a path from v to w through the lowest common ancestor (LCA). Return the
+// full path and the LCA.
+const findPath = (
+  g: DagreGraph,
+  postorderNums: Record<ID, OrderItem>,
+  v: ID,
+  w: ID,
+) => {
+  const vPath: ID[] = [];
+  const wPath: ID[] = [];
+  const low = Math.min(postorderNums[v].low, postorderNums[w].low);
+  const lim = Math.max(postorderNums[v].lim, postorderNums[w].lim);
+  let parent: ID | undefined;
+  let lca: ID | undefined;
+
+  // Traverse up from v to find the LCA
+  parent = v;
+  do {
+    parent = g.getParent(parent)?.id;
+    vPath.push(parent!);
+  } while (
+    parent &&
+    (postorderNums[parent].low > low || lim > postorderNums[parent].lim)
+  );
+  lca = parent;
+
+  // Traverse from w to LCA
+  parent = w;
+  while (parent && parent !== lca) {
+    wPath.push(parent);
+    parent = g.getParent(parent)?.id;
+  }
+
+  return { lca, path: vPath.concat(wPath.reverse()) };
+};
+
+export const parentDummyChains = (g: DagreGraph, dummyChains: ID[]) => {
+  const postorderNums = dfsBothOrder(g);
+
+  dummyChains.forEach((startV) => {
+    let v = startV;
+    let node = g.getNode(v)!;
+    const originalEdge = node.data.originalEdge;
+    if (!originalEdge) return;
+    const pathData = findPath(
+      g,
+      postorderNums,
+      originalEdge.source,
+      originalEdge.target,
+    );
+    const path = pathData.path;
+    const lca = pathData.lca;
+    let pathIdx = 0;
+    let pathV = path[pathIdx]!;
+    let ascending = true;
+
+    while (v !== originalEdge.target) {
+      node = g.getNode(v)!;
+
+      if (ascending) {
+        while (
+          pathV !== lca &&
+          g.getNode(pathV)?.data.maxRank! < node.data.rank!
+        ) {
+          pathIdx++;
+          pathV = path[pathIdx]!;
+        }
+
+        if (pathV === lca) {
+          ascending = false;
+        }
+      }
+
+      if (!ascending) {
+        while (
+          pathIdx < path.length - 1 &&
+          g.getNode(path[pathIdx + 1]!)?.data.minRank! <= node.data.rank!
+        ) {
+          pathIdx++;
+        }
+        pathV = path[pathIdx]!;
+      }
+
+      if (g.hasNode(pathV)) {
+        g.setParent(v, pathV);
+      }
+
+      v = g.getSuccessors(v)![0].id;
+    }
+  });
+};