Nesting support

[vladsvd]

Thanks for a great project.
Do you plan to support nesting nodes?
There are two types of nesting:

1. When we need to find out and display which block (group) the nodes belong to.
   
2. When we need to be able to connect groups in each other

[bcakmakoglu]

Hi and thank you for using Vue Flow :)

I am not sure I am fully understanding what you're trying to accomplish.

1. You're trying to assign a "group" to a node and then order nodes by their group?

2. Can you possibly draw what you're trying to connect? So I can see what you specifically mean. Is it supposed to be a connection from Node 4 to Node 4b?

But:
I'll have to think about this suggestion and see what's already possible and how a "nesting" feature would even look like.

[bcakmakoglu]

@vladsvd
I've thought about this and I don't think "nesting" is something that's in scope of the library.
You can however very well create a feature to create a sort of "nesting" of your nodes.

I've created an Example and I'm guessing you're looking for something like that.
Connecting Nodes that are inside of other nodes can become problematic due to the z-index. You'll have to play around with that yourself, for example set a z-index of 2 for "group" nodes and a z-index of 3 for simple nodes.

<script lang="ts" setup>
import GroupNode from './GroupNode.vue'
import { VueFlow, Elements, Node, Edge, Connection, addEdge } from '@braks/vue-flow'

const elements = ref<Elements<{ label: string; group?: string }>>([
  { id: 'node-1', data: { label: 'node-1', group: undefined }, position: { x: 250, y: 5 } },
  { id: 'node-2', data: { label: 'node-2', group: undefined }, position: { x: 50, y: 5 } },
  {
    id: 'group-a',
    type: 'group-a',
    style: { zIndex: 2 },
    selectable: false,
    data: { label: 'A' },
    position: { x: 50, y: 100 },
  },
  {
    id: 'group-b',
    type: 'group-b',
    style: { zIndex: 2 },
    selectable: false,
    data: { label: 'B' },
    position: { x: 500, y: 100 },
  },
])

const onConnect = (params: Edge | Connection) => addEdge(params, elements.value)
</script>
<template>
  <VueFlow v-model="elements" :node-types="['group-a', 'group-b']" @connect="onConnect">
    <template #node-group-a="aProps">
      <GroupNode v-bind="aProps" />
    </template>
    <template #node-group-b="bProps">
      <GroupNode v-bind="bProps" />
    </template>
  </VueFlow>
</template>

// GroupNode.vue
<script lang="ts" setup>
import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
import type { NodeProps } from '@braks/vue-flow'

const props = defineProps<NodeProps>()
const store = useVueFlow()
store.hooks.nodeDragStop.on(({ node }) => {
  const nodes = getNodesInside(
    store.getNodes,
    {
      height: props.__vf.height,
      width: props.__vf.width,
      x: props.position.x,
      y: props.position.y,
    },
    store.transform,
  )
  if (nodes.some((n) => n.id === node.id)) {
    node.data.label = `In ${props.id}`
    node.data.group = props.id
  } else if (node.data.group === props.id) {
    node.data.group = undefined
    node.data.label = node.id
  }
})
</script>
<template>
  <div class="vue-flow__group-node">
    <Handle type="target" :position="Position.Top" />
    <strong>Group {{ data.label }}</strong>
    <Handle type="source" :position="Position.Bottom" />
  </div>
</template>
<style>
.vue-flow__group-node {
  padding: 15px;
  width: 300px;
  height: 300px;
  border: solid 1px black;
}
</style>

A group node basically checks whether a dragged node is inside of it's boundaries and if it is, it's set props.data.group to it's id, i.e. you assign a group to a node.
What is missing in the library currently is an export of the getNodesInside utility, which I will provide with the next version for exactly this use-case.

So my conclusion is that it's up to you to play around with existing features to create the nesting feature you're after as I do believe the scope of this library is to simple render the elements to the view, not actually provide logic to group / sort etc.
It's a similar but not identical case to what is pictured in the Layout example.

I hope this somewhat answers your question, if not, please feel free to ask! :)

[vladsvd]

Thanks for the quick response.
Yes, that's about what I need.
Since this project is a port from the react-flow project, this functionality will be there in the new version.
There is a discussion at this link. I really would like this functionality to appear.
xyflow/xyflow#1024 (comment)
The idea of having a parent in a structure.

const initialNodes = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 50, y: 0 } },
  { id: '2', data: { label: 'Group node 2' }, position: { x: 50, y: 100 }, style: { width: 400, height: 200 } },
  // this position is relative to the position of the parent node '2' 
  { id: '2a', data: { label: 'Child node 2a' }, position: { x: 0, y: 0 }, parentNode: '2' }
];

xyflow/xyflow#1555

[bcakmakoglu]

Well I didn't see that PR tbh as I didn't check back on react-flow for a while 😅
But thankfully you reminded me and I can for sure replicate the functionality that is being offered in their major release. At least I expect to be able to, so with that said I will have to check out the newest changes and work on an implementation that'll work for Vue :)

I might be able to get it done this weekend, depending on the amount of work of course.

[bcakmakoglu]

Just a heads up!
Nesting works pretty much now - i've decided to use the children api instead of the parentNode one.
I'll explain it in detail in the docs.

But if you're using Vue Flow currently and want to use the nesting feature be prepared for possible breaking changes between versions