useLayoutSupport

A React hook that provides helper function that prepare the data for the layout algorithm and retrieve the result.

This hook is tailored for users interested in delving into yFiles for HTML, exploring various layout algorithms, and crafting advanced layout code for their applications.

const edgeTypes = {
  default: PolylineEdge
}

const nodeTypes = {
  default: MultiHandleNode
}

const LayoutFlow = () => {
  const [nodes, setNodes] = useNodesState(initialNodes)
  const [edges, setEdges] = useEdgesState(initialEdges)
  const { fitView, getZoom } = useReactFlow()

  const { buildGraph, transferLayout } = useLayoutSupport()

  const runLayout = useCallback(() => {
    // create a graph from data
    const graph = buildGraph(nodes, edges, getZoom())

    // configure a layout
    const hierarchicLayout = new HierarchicLayout()
    const hierarchicLayoutData = new HierarchicLayoutData({
      sourcePortCandidates: (edge: IEdge) => ICollection.from([PortCandidate.createCandidate(PortDirections.EAST)])
    })

    // apply the layout
    graph.applyLayout(hierarchicLayout, hierarchicLayoutData)

    // transfer the new coordinates to the data
    const { arrangedEdges, arrangedNodes } = transferLayout(graph)
    setNodes(arrangedNodes)
    setEdges(arrangedEdges)

    // fit the graph into the view
    window.requestAnimationFrame(() => fitView())
  }, [nodes, edges, buildGraph, transferLayout, setNodes, setEdges, fitView, getZoom])

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      edgeTypes={edgeTypes}
    >
      <Panel position="top-right">
        <button onClick={runLayout}>Layout</button>
      </Panel>
    </ReactFlow>
  )
}

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

Returns

LayoutSupport