clarkmcc / ngraph

A blender-style node editor for React, built on xyflow
https://ngraph.clarkmccauley.com
MIT License
50 stars 3 forks source link

How do you set a default layout? #14

Closed sroussey closed 9 months ago

sroussey commented 9 months ago

I've tried issuing the layout at various points, but i always run it too early as the nodes don't have a height yet.

Basically, I have altered the InputGroups story:

  1. Removed position information from the nodes
  2. Tried calling Dagre layout using useEffect and similar. The idea being to set a default layout if the nodes don't have positions.
clarkmcc commented 9 months ago

I see. My first reaction is that the layout method is probably not what you're looking for. It sounds like we should just pass the nodes through the layout engine if positions are missing before handing them off to ReactFlow. I haven't vetted the idea fully or determined what the API for this would look like, but conceptually would this solve your problem?

sroussey commented 9 months ago

Problem is... you don't have height and width of the nodes yet, so it is difficult to layout.

clarkmcc commented 9 months ago

Got it. Then I think we can take advantage of useNodesInitialized to apply the default layout at the right time. This hook should let us hook into the process the moment the nodes dimensions are calculated.

It seems like if we apply a default layout, we'd want to apply it regardless of whether the nodes have positions or not. What if all but one node has a position? The layout engine doesn't let us have some fixed position nodes and then layout the rest around them (at least not as it is designed today).

Do you have any thoughts or opinions on the API for configuring a default layout? If not, I can take a stab at something that makes sense to me and you can take a look after that, or I'm also happy to accept a PR.

sroussey commented 9 months ago

Not familiar enough yet. Maybe an option to give to the editor: <NodeGraphEditor defaultLayout={LayoutEngine.Dagre} ...>

sroussey commented 9 months ago

I have a version working, though I just send the layout function itself instead LayoutEngine.Dagre

clarkmcc commented 9 months ago

Okay I'll take a stab at something. Send me what you did if you'd like and I'll see if it gets any juices flowing.

sroussey commented 9 months ago

https://github.com/clarkmcc/ngraph/pull/15

This one is using your Enum for the layout.