[FEATURE] Nested Nodes - Githubissues

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.

https://xyflow.com

MIT License

21.84k stars 1.45k forks source link

[FEATURE] Nested Nodes #611

Closed amcdnl closed 3 years ago

amcdnl commented 3 years ago

Request

I have a custom workflow component that I wrote that supports nested nodes/edges. I was wondering if this would be possible with your solution and if not if you are open to it.

Example

In the above, it has a "loop" which a user can drag nodes into and connect nodes together from inside the loop.

moklick commented 3 years ago

Is this a kind of sub-flow inside a node?

amcdnl commented 3 years ago

Yes, this is using ELKJS for layout and my own react/svg component engine. Its essentially a node that contains another "canvas" / layout / etc in it.

In that code I wrote, I essentially just see that the node has "children" and render a group positioned > rect outline > node/edge[] recursive render call.

justrhysism commented 3 years ago

Yeah, I've come up against this just now also (@amcdnl thanks for your suggestion of ELK in another issue, it's saved me a huge amount of time trying to generate bi-directional layouts!).

I've been able to emulate the appearane of groups; but unfortunately, I'm struggling to find a (non-hacky) way of moving all the child nodes when the group is dragged.

nowachri-de commented 3 years ago

Hello,

this feature would be awesome to have !!

justrhysism commented 3 years ago

I'd be happy if it wasn't part of the core, but had a plugin or function which facilitated it.

amcdnl commented 3 years ago

Is this a kind of sub-flow inside a node?

@moklick Yes - I made a quick video of my app that uses ELK + React/SVG Components that I built to show how this works in my implementation. This implementation only supports 1 level though. https://www.screencast.com/t/50Luy02V9

amcdnl commented 3 years ago

Yeah, I've come up against this just now also (@amcdnl thanks for your suggestion of ELK in another issue, it's saved me a huge amount of time trying to generate bi-directional layouts!).

@justrhysism - Glad to hear - the API is pretty awful but once you get it going you don't really need to tweak it much.

moklick commented 3 years ago

Is this a kind of sub-flow inside a node?

@moklick Yes - I made a quick video of my app that uses ELK + React/SVG Components that I built to show how this works in my implementation. This implementation only supports 1 level though. https://www.screencast.com/t/50Luy02V9

This looks pretty amazing! I think we won't add a nested flow functionality to the core but we could check if it would be already possible to implement this feature on top of react flow or if there is anything missing.

amcdnl commented 3 years ago

@moklick - Thanks! Ya, that would be helpful to know and maybe some guidance if possible.

MadSciencist commented 3 years ago

Is this a kind of sub-flow inside a node?

@moklick Yes - I made a quick video of my app that uses ELK + React/SVG Components that I built to show how this works in my implementation. This implementation only supports 1 level though. https://www.screencast.com/t/50Luy02V9

This looks pretty amazing! I think we won't add a nested flow functionality to the core but we could check if it would be already possible to implement this feature on top of react flow or if there is anything missing.

Would love to see some kind of PoC!

meatflavourdev commented 3 years ago

+1 for this

steinhardt21 commented 3 years ago

+1 for this too, much needed feature

amcdnl commented 3 years ago

I ended up writing my own library to support this - example here: https://reaflow.dev/?path=/story/demos-nested--edges

steinhardt21 commented 3 years ago

@amcdnl amazing example! Did you integrate react-flow in your solution? How did you achieve that result?

amcdnl commented 3 years ago

No - its not react-flow - I ended up building my own library - https://reaflow.dev

steinhardt21 commented 3 years ago

Wow, I understand! Thank you really much for the suggestion! One question: Could be your library be used in combination with react-flow to build nested nodes only when necessary?