Elkjs 多个句柄

这个示例演示了如何配置 elkjs 使用特定的句柄（在 elkjs 中称为“端口”）。这有助于减少边的交叉并对布局有更多控制。需要配置的重要内容是句柄/端口的唯一 ID、为 elkjs 设置实际的端口并具有正确的 side 属性，以及为所有节点设置 'org.eclipse.elk.portConstraints' : 'FIXED_ORDER'。

🌐 This example demonstrates how to configure elkjs to use specific handles (called ‘ports’ in elkjs). This is helpful to reduce edge crossings and have more control over the layout. The important things to configure are unique ids for the handles / ports, the actual ports for elkjs with a correct side property and 'org.eclipse.elk.portConstraints' : 'FIXED_ORDER' for all nodes.


import {
  ReactFlow,
  Controls,
  Background,
  MiniMap,
  useNodesState,
  useEdgesState,
  ReactFlowProvider,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
import ElkNode from './ElkNode';
import { nodes as initNodes } from './nodes';
import { edges as initEdges } from './edges';
import useLayoutNodes from './useLayoutNodes';
 
const nodeTypes = {
  elk: ElkNode,
};
 
function App() {
  const [nodes, , onNodesChange] = useNodesState(initNodes);
  const [edges, , onEdgesChange] = useEdgesState(initEdges);
 
  useLayoutNodes();
 
  return (
    <ReactFlow
      nodes={nodes}
      onNodesChange={onNodesChange}
      edges={edges}
      onEdgesChange={onEdgesChange}
      fitView
      nodeTypes={nodeTypes}
    >
      <Background />
      <Controls />
      <MiniMap />
    </ReactFlow>
  );
}
 
export default () => (
  <ReactFlowProvider>
    <App />
  </ReactFlowProvider>
);