How to do real Nested Nodes? Nested Canvas? or maybe Nested Vue-Flow inside Quasar Accordion?

[ghiscoding]

This is related to a previous Discussion #416 which is related to Nested Nodes. As per your previous answer

That is by design. It's not a trivial change to move the DOM Elements inside nodes. This behavior might change in the future but I can't tell you when and if 😅 I like to keep the changes in Vue Flow somewhat in line with what is happening at React Flow, so users can expect similar usability and behavior regardless if they want to go with React or Vue.

However, we really need this feature and I'm totally newbie on Canvas stuff and searching on Nested Canvas doesn't help too much since I'm new to canvas. What we'd like to do is really a clickable Node that once clicked would open up and reveal (something like a black box that also has start/end handles. So it's quite similar to Nested Nodes but we're looking for real nested nodes (not just to drag but also nested in the DOM). Can we use Vue-Flow inside a Vue-Flow? If that works, then I could maybe add to that a Quasar According

I tried to nest a child Vue-Flow inside a Custom Node of a parent Vue-Flow, but it renders nothing and looking at the html it doesn't seem to like it at all. My guess is that the lib wasn't created to support more than 1 Vue-Flow instance at a time, but how else can I really achieve Nested Nodes

 <q-card>
    <q-card-section horizontal class="text-body1 q-ml-md q-mb-md justify-between">
        ...
    </q-card-section>
    <q-card-section horizontal class="text-body1 q-ml-md q-mb-md justify-between">
        <div style="height: 300px">
            Child Elements
            <VueFlow id="child-node" v-model="childElements"></VueFlow>
         </div>
    </q-card-section>
</q-card>

What we are trying to achieve is similar to this other lib Litegraph.js - demo (subgraph), the concept is that when we click on the sub-graph open icon it reveals the inside of that Nested Node (like a black box) and we want to be able to have these kind of Nested Nodes (that can be expanded/collapsed) and that the user could clone easily.

That's the only missing piece to fully migrate to Vue-Flow 😃 The rest of the lib is just amazing

[bcakmakoglu]

Not sure what you mean by nested canvas. Vue Flow isn't using a canvas.

You can use multiple vue flow instances (see the example).
You can use as many instances as you want actually, there is no limit, I mean the Documentation Homepage literally has 4 different Flows on the same page side by side.
Nesting isn't much different, you already guessed you had to use a new id to force a new state and that's it.

The code you're showing just means you haven't imported the VueFlow component in your node, hence the tag isn't rendered by Vue. Check you console warnings.

[ghiscoding]

You have to place your second Flow outside the transform of the first Flow otherwise you'll always end up having edge misalignments.

do you mean like a Modal that is a completely different component or something else? I would rather keep this nested Vue-Flow approach that I have (if possible), my team likes this POC so far.

[bcakmakoglu]

As long as it's outside the transformation pane of your parent, it's good to go.
A Modal would be a good place to start, so something like that

<VueFlow v-model="elements">
	<Modal v-if="isVisible" :data="data" />
</VueFlow>

I can't promise when and if that nested flow issue can be solved, at least not for connections.
I can solve the issue for the edge misalignment for edges that already exist, that way you could at least show a static version of that Flow and open an interactive one in a separate context outside the parent flows transformation.

As it's not really a stable implementation, I will add an experimentalFeatures flag to opt into this behavior.
Relevant PR: #449

(will be released in 1.5.0)

[ghiscoding]

ok great, thanks again for all of that. Will that option be a props on Custom Edge or a props on Vue-Flow? I don't see how to enable it from the PR. Have a nice day

[bcakmakoglu]

It's gonna be a prop on Vue Flow, but you should pass it using useVueFlow and not component props.

By the way,
Here's an example I came up with to solve your current usecase. I guess it's not as cool as you envisioned (I would also prefer if Nested Flows would actually work without misalignments 😄) but it does the trick.

[ghiscoding]

great thanks, I got that working, it's definitely good to have multiples POC. Thanks a ton