MultiHandleNode

A node component with multiple handles and a label that supports the results of a yFiles layout algorithm.

The information about the position of each handle will be given by the data.yData of each node, if any exists (see NodeLayoutData). Otherwise, handles will be placed on the top and on the bottom side of each node.

const nodeTypes = {
  handles: MultiHandleNode
}

const LayoutFlow = () => {
  const [nodes] = useNodesState(initialNodes)
  const [edges] = useEdgesState(initialEdges)

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
    ></ReactFlow>
  )
}

export default function Flow() {
  return (
    <ReactFlowProvider>
      <LayoutFlow />
    </ReactFlowProvider>
  )
}