Questions and perhaps improvements on Nested Nodes

[ghiscoding]

1. when creating a nested Node, it looks like all the child Nodes are separate Div that all exist in the root and aren't under the parent Node, would it be possible to change the lib to support that? Our goal is to use Quasar collapsible section, if you have other ways to do it, then I'd be interest to know. (see animated gif below)
2. when connecting Edges inside the Nested parent Node, it often overflow outside its container, are there any ways to prevent this from happening? Can the lib take care of this somehow in future versions? (see print screen below)
3. when creating Custom Nodes, it doesn't look like any info of the Node are available in the props, we need at least the "id" so that we can removeNodes() from a delete icon that exists in our Custom Node. For now our current patch is to add the "id" in the "props.data" object property, it would be nice to have it directly available in the props

function removeNode(node) {
    removeNodes([node.id]);
}

<q-card-actions align="right">
  <q-btn flat round color="red" icon="close" @click="removeNode(props.data)" />
  <q-btn flat round color="secondary" icon="content_copy" />
</q-card-actions>

We are very impressed with the lib and the decision is nearly decided to go with the lib, it's very customizable, it works great with Quasar it's very customizable 😉

Question 1

Question 2

[bcakmakoglu]

1. 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.

As for alternative solutions:
You could just not use the nested nodes feature and simply align your elements without it. The main benefit of the nested nodes feature is that you can use the parent to move all it's children as well.
If you don't necessarily need that behavior, simply don't use it 😄
I'm not sure how your Quasar collapsible section is supposed to look but if it's just a list with handles, there's no particular reason to your nested nodes.

Maybe you can give me a rough idea on how your custom node is supposed to look, then I could give you some tips on how to achieve it and if there are any particular challenges in doing so.

2. Also a design choice, the default bezier edge tries to curve to connect. You could use the simplebezier edge type to get edges that don't curve like that.

The edges might also change in the future (which is actually more likely than point 1, improvements to edges are always on the list of things to do 😄).

3. Nodes do get props, including the ID. The full list of props can be found right here: https://vueflow.dev/typedocs/interfaces/NodeProps.html

If you're using template slots, all you gotta do is this

<template #node-custom="props">
	<CustomNode v-bind="props" />
</template>

This will pass the whole NodeProps object to your custom node.

You also need to define props in your custom node of course to receive these props.

For example like this:

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})

console.log(props.id)

or if you're using TypeScript

import type { NodeProps } from '@vue-flow/core'

interface Props extends NodeProps {
   id: string
}

const props = defineProps<Props>()

console.log(props.id)

I believe you misunderstood the custom node example.
data is just one of the node props you receive and it is an object of custom data you want to pass to a node.

To make it more obvious, let's look at the template slots again.

<-- let's destructure the `NodeProps` object to make it clearer what props are available -->
<template #node-custom="{ id, data, position, dimensions, connectable, type, zIndex, sourcePosition, targetPosition }">
	<!-- let's pass id and data to our custom node, we don't need the rest of the props -->
	<CustomNode :id="id" :data="data"  />
</template>

If you got any more questions or concerns, let me know and I'll be happy to help. :)

[ghiscoding]

Yes indeed it looks like I did misunderstand the Custom Node, I didn't know that simply extending the interface in TS would be enough to add the "id", just wow (I still need to learn more about Vue as well 😅). Thanks for the destructuring and docs links, it's again very useful.

As for number 1, I did imagine it was by design and/or because you follow React-Flow, so that confirms it. I'm sure we'll find other ways, The idea that we had was to make these Nested Nodes collapsible and cloneable because we treat them as a box of logics (black box) and if user wants to see all of its logic, he will then open the collapsible (at this point it was just a concept and not a showstopper to adopt this great lib). Again, thanks a lot for all your great replies, it's really helpful 👏🏻 🚀