React 流程图：自动布局

Question

有几个选项可用于使用反应流程图创建自动布局。 （图表已使用npm package react-flow-chart 创建）

我已经尝试过下面提到的 2 个：

1. npm 包react-flow-chart 提供smartRouting 配置选项
2. npm 包dagre,

当我将它用于具有相同高度的节点时，这两个选项都可以正常工作。 在我的图表中，我可能有不同宽度和不同高度的节点。

如何确保自动布局不与节点重叠？

提前致谢。

Answer 1

我想将此作为评论，但没有权限，因此需要将其作为答案。

在layouting example on the site 中，它有一个代码 sn-p 并注释了如何执行此操作：

const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));

// In order to keep this example simple the node width and height are hardcoded.
// In a real world app you would use the correct width and height values of
// const nodes = useStoreState(state => state.nodes) and then node.__rf.width, node.__rf.height

const nodeWidth = 172;
const nodeHeight = 36;

const getLayoutedElements = (elements, direction = 'TB') => {
  ...
};