Layout example with dynamic width and height values

Hello,

first of all, thank you for creating this library! This is by far the best library I’ve seen for creating interactive graphs. 😄

In the Layout-example (https://reactflow.dev/examples/layouting/) the widths and heights are hardcoded. The comment says that it is possible to access the real widths and heights using const nodes = useStoreState(state => state.nodes)

However, this only works in a child element of ReactFlow, where the nodes can be accessed (if I understood it correctly). I.e. it is not possible to access state.nodes before the graph has been created.

My question would be how exactly can we apply the real widths and heights to the nodes when generating the graph? 😅

I’ve read #5 and I have tried to apply the code provided by @mymywang but could not get it to work at all 😅

From my understanding, state.nodes would only be accessible in a scenario like this one:

<ReactFlow elements={TheseAreTheNodesWeWantToAccess}>
     <ComponentToAccessStateNodes/>
<ReactFlow/

and in ComponentToAccessStateNodes it is possible to access state.nodes and then iterate over every node and get the widths and height using node.__rf.width and node.__rf.height. But by that point, the graph already has been generated with the predefined widths and heights (which are in turn needed to generate the graph in the first place?).

I’m sorry if this is a trivial question but I really don’t seem to figure out how to do this. If someone could provide a minimal working example, that would be really kind.

[jayanthbondi]

Hi @BorisGiba , @moklick In my use case, I’ll be dynamically adding or deleting the nodes. So without any user intervention, how will I be able to do auto adjust my layout?

[moklick]

Thanks for the example code. Looks very nice 👌