How to apply layout automatically?

[kadiemq]

Please describe the feature that you want to propose

In the Dagre example here, how can I apply the layout by default or automatically without pressing a button?

[Homeuh]

useNodesInitialized hook maybe reach your requirement.

[kadiemq]

Unfortunately, this won't be sufficient. Flow will render the nodes, and then I can use that hook to apply the layout. I want a method that applies the layout before rendering anything.

[sandeep-exe]

you can try oninit prop

[kadiemq]

Tried it:
onInit={() => setNodes(getLayoutedElements(nodes, edges).nodes)}
nothing is happening.

[srsandy]

Could you pls create a codesanbox example?

[kadiemq]

Yes, sure: https://stackblitz.com/edit/lm4cjtx2?file=App.tsx

  const onLayout = useCallback(() => {
      console.log(nodes);
      const layouted = getLayoutedElements(nodes, edges);

      setNodes([...layouted.nodes]);
      setEdges([...layouted.edges]);

      window.requestAnimationFrame(() => {
        fitView();
      });
    },
    [nodes, edges],
  );

Init prop:
onInit={onLayout}

And that's what I'm getting:

[srsandy]

Could you please check
https://codesandbox.io/p/sandbox/keen-dawn-8gzpmr?file=%2Fsrc%2FApp.js%3A54%2C30

[srsandy]

@kadiemq your code should have worked. https://stackblitz.com/edit/lm4cjtx2?file=App.tsx
but i solved it like this https://codesandbox.io/p/sandbox/keen-dawn-8gzpmr?file=%2Fsrc%2FApp.js%3A54%2C30

Why your solution did not work react flow team can answer better.

@moklick

[kadiemq]

@bcakmakoglu useNodesInitialized causes flickering, between rendering initial nodes and layouting it, I don't want that.

const nodesInitialized = useNodesInitialized();

  useEffect(() => {
    if (nodesInitialized) {
      setNodes(getLayoutedElements(nodes, edges).nodes);
    }
  }, [nodesInitialized, nodes.length]);

As for onInit I tried add conditional rendering:

if (loading) return <div>Loading...</div>;

  return (
    <div className={"bg-[#eaedf5]"} style={{ height: "100vh", width: "full" }}>
      <ReactFlow
       .
       .
       .

Now when ReactFlow renders it should have nodes and edges initialized and ready for onLayout.

[bcakmakoglu]

causes flickering, between rendering initial nodes and layouting it, I don't want that.

You can set <ReactFlow>s opacity to 0 until you're done with layouting to avoid "flickering" and then unhide it once you're done.

[kadiemq]

@bcakmakoglu Hiding and unhiding it is basically a different kind of flickering, the result would be the same in the case of adding or deleting a node. The layout must be set before any rendering to avoid flickering.

[bcakmakoglu]

For an initial layout it would work with hiding it with opacity, afterwards that wouldn't be so great but I don't see how putting up a loading screen is much different? 😄
In either case you are "blocking" the view until your layout is done, are you not?

What flickering are you even getting when adding a node? There shouldn't be "flickering" if you already had some nodes present and just add another and layout them unless your whole layout changes because of a node?

[kadiemq]

@bcakmakoglu by flickering I mean this:
When a node is added it and all other nodes will be placed at 0,0 then 'useNodeInitialize' hook value changes to true, then finally the layout algorithm kicks in.
The flickering is happening between nodes initial location and its final location determined by Dagre algo.