Elkjs 多个句柄

此示例演示如何配置 elkjs 以使用特定句柄（在 elkjs 中称为 ‘ports’）。这有助于减少边缘交叉并对布局进行更多控制。要配置的重要内容是句柄/端口的唯一 ID、具有正确侧面属性的 elkjs 的实际端口以及所有节点的 '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}
      style={{ backgroundColor: "#F7F9FB" }}
    >
      <Background />
      <Controls />
      <MiniMap />
    </ReactFlow>
  );
}
 
export default () => (
  <ReactFlowProvider>
    <App />
  </ReactFlowProvider>
);